refactor: rename FormFieldMessage to Message

app/components/Pay/Pay.js

@@ -11,7 +11,7 @@ import {
   Dropdown,
   FiatAmountInput,
   Form,
-  FormFieldMessage,
+  Message,
   Label,
   LightningInvoiceInput,
   Panel,
@@ -699,16 +699,16 @@ class Pay extends React.Component {
                       {currentStep === 'summary' &&
                         !isQueryingRoutes &&
                         !hasRoute && (
-                          <FormFieldMessage variant="error" justifyContent="center" mb={2}>
+                          <Message variant="error" justifyContent="center" mb={2}>
                             <FormattedMessage {...messages.error_no_route} />
-                          </FormFieldMessage>
+                          </Message>
                         )}
 
                       {currentStep === 'summary' &&
                         !hasEnoughFunds && (
-                          <FormFieldMessage variant="error" justifyContent="center" mb={2}>
+                          <Message variant="error" justifyContent="center" mb={2}>
                             <FormattedMessage {...messages.error_not_enough_funds} />
-                          </FormFieldMessage>
+                          </Message>
                         )}
 
                       <PayButtons

app/components/UI/Button.js

@@ -39,7 +39,7 @@ class Button extends React.PureComponent {
   }
 
   render() {
-    let { children, processing, size, ...rest } = this.props
+    let { children, processing, size, variant, ...rest } = this.props
     const sizes = {
       small: {
         x: 3,
@@ -52,9 +52,12 @@ class Button extends React.PureComponent {
     }
 
     size = sizes[size] || sizes['medium']
+    if (variant === 'secondary') {
+      size.x = 0
+    }
 
     return (
-      <Wrapper px={size['x']} py={size['y']} {...rest}>
+      <Wrapper px={size['x']} py={size['y']} variant={variant} {...rest}>
         {processing ? (
           <Flex alignItems="center">
             {processing && <Spinner />}

app/components/UI/Input.js

@@ -4,7 +4,7 @@ import { withTheme } from 'styled-components'
 import system from '@rebass/components'
 import { styles } from 'styled-system'
 import { Flex } from 'rebass'
-import { FormFieldMessage } from 'components/UI'
+import { Message } from 'components/UI'
 
 // Create an html input element that accepts all style props from styled-system.
 const SystemInput = system(
@@ -120,13 +120,9 @@ class Input extends React.Component {
           error={fieldState.error}
         />
         {fieldState.error && (
-          <FormFieldMessage
+          <Message variant={hasFocus ? 'warning' : 'error'} justifyContent={justifyContent} mt={2}>
-            variant={hasFocus ? 'warning' : 'error'}
-            justifyContent={justifyContent}
-            mt={2}
-          >
             {fieldState.error}
-          </FormFieldMessage>
+          </Message>
         )}
       </Flex>
     )

app/components/UI/LightningInvoiceInput.js

@@ -4,7 +4,7 @@ import { FormattedMessage, injectIntl } from 'react-intl'
 import { asField } from 'informed'
 import { isOnchain, isLn } from 'lib/utils/crypto'
 import TextArea from 'components/UI/TextArea'
-import FormFieldMessage from 'components/UI/FormFieldMessage'
+import Message from 'components/UI/Message'
 import messages from './messages'
 
 /**
@@ -76,14 +76,14 @@ const InformedTextArea = asField(({ fieldState, fieldApi, ...props }) => {
       <TextArea {...rest} />
       {value &&
         !fieldState.error && (
-          <FormFieldMessage variant="success" mt={2}>
+          <Message variant="success" mt={2}>
             <FormattedMessage
               {...messages.valid_request}
               values={{
                 chain: chainName
               }}
             />
-          </FormFieldMessage>
+          </Message>
         )}
     </React.Fragment>
   )

app/components/UI/FormFieldMessage.js → app/components/UI/Message.js

@@ -9,16 +9,16 @@ import styled from 'styled-components'
 import { variant } from 'styled-system'
 
 const messageStyle = variant({ key: 'messages' })
-const Message = styled(Flex)(messageStyle)
+const StyledMessage = styled(Flex)(messageStyle)
 
 /**
  * @render react
- * @name FormFieldMessage
+ * @name Message
  * @example
- * <FormFieldMessage message="Error message" />
+ * <Message message="Error message" />
  */
-class FormFieldMessage extends React.Component {
+class Message extends React.Component {
-  static displayName = 'FormFieldMessage'
+  static displayName = 'Message'
 
   static propTypes = {
     variant: PropTypes.string,
@@ -28,7 +28,7 @@ class FormFieldMessage extends React.Component {
   render() {
     const { children, variant, ...rest } = this.props
     return (
-      <Message {...rest} variant={variant} alignItems="center">
+      <StyledMessage {...rest} variant={variant} alignItems="center">
         <Box mr={1}>
           {variant === 'success' && <Success />}
           {variant === 'warning' && <Warning />}
@@ -37,9 +37,9 @@ class FormFieldMessage extends React.Component {
         <Text fontSize="s" fontWeight="normal">
           {children}
         </Text>
-      </Message>
+      </StyledMessage>
     )
   }
 }
 
-export default FormFieldMessage
+export default Message

app/components/UI/TextArea.js

@@ -4,7 +4,7 @@ import system from '@rebass/components'
 import { styles } from 'styled-system'
 import { withTheme } from 'styled-components'
 import { Flex } from 'rebass'
-import { FormFieldMessage } from 'components/UI'
+import { Message } from 'components/UI'
 
 // Create an html textarea element that accepts all style props from styled-system.
 const SystemTextArea = system(
@@ -122,13 +122,9 @@ class TextArea extends React.PureComponent {
           error={fieldState.error}
         />
         {fieldState.error && (
-          <FormFieldMessage
+          <Message variant={hasFocus ? 'warning' : 'error'} justifyContent={justifyContent} mt={2}>
-            variant={hasFocus ? 'warning' : 'error'}
-            justifyContent={justifyContent}
-            mt={2}
-          >
             {fieldState.error}
-          </FormFieldMessage>
+          </Message>
         )}
       </Flex>
     )

app/components/UI/index.js

@@ -10,7 +10,7 @@ export DataRow from './DataRow'
 export Dropdown from './Dropdown'
 export FiatAmountInput from './FiatAmountInput'
 export Form from './Form'
-export FormFieldMessage from './FormFieldMessage'
+export Message from './Message'
 export GlobalStyle from './GlobalStyle'
 export Header from './Header'
 export Heading from './Heading'