fix(ui): remove gaps in pay/request form help text

Left align help text in Pay and Request forms in order to prevent strange looking gaps in the text at certain screen sizes. fix #2655
LN-Zap · Jul 31, 2019 · 7d0a9ad · 7d0a9ad
1 parent bac1ac8
commit 7d0a9ad
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 17 deletions.
diff --git a/renderer/components/Pay/Pay.js b/renderer/components/Pay/Pay.js
@@ -434,14 +434,12 @@ class Pay extends React.Component {
           show &&
           (styles => (
             <animated.div style={styles}>
-              <Box mb={4}>
-                <Text textAlign="justify">
-                  <FormattedMessage
-                    {...messages.description}
-                    values={{ chain: chainName, ticker: cryptoUnitName }}
-                  />
-                </Text>
-              </Box>
+              <Text mb={4}>
+                <FormattedMessage
+                  {...messages.description}
+                  values={{ chain: chainName, ticker: cryptoUnitName }}
+                />
+              </Text>
             </animated.div>
           ))
         }

diff --git a/renderer/components/Request/Request.js b/renderer/components/Request/Request.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Box, Flex } from 'rebass'
+import { Flex } from 'rebass'
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl'
 import {
   Bar,
@@ -125,14 +125,12 @@ class Request extends React.Component {
   renderHelpText = () => {
     const { chainName, cryptoUnitName } = this.props
     return (
-      <Box mb={4}>
-        <Text textAlign="justify">
-          <FormattedMessage
-            {...messages.description}
-            values={{ chain: chainName, ticker: cryptoUnitName }}
-          />
-        </Text>
-      </Box>
+      <Text mb={4}>
+        <FormattedMessage
+          {...messages.description}
+          values={{ chain: chainName, ticker: cryptoUnitName }}
+        />
+      </Text>
     )
   }