create safe flow rebranding wip

src/routes/load/components/ReviewInformation/index.jsx

@@ -188,7 +188,7 @@ class ReviewComponent extends React.PureComponent<Props, State> {
                     </Block>
                   </Col>
                 </Row>
-                <Hairline />
+                {index !== owners.length - 1 && <Hairline />}
               </React.Fragment>
             ))}
           </Col>

src/routes/open/components/SafeOwnersConfirmationsForm/ScanQRModal/index.jsx

@@ -56,7 +56,7 @@ const ScanQRModal = ({
   return (
     <Modal title="Receive Tokens" description="Receive Tokens Form" handleClose={onClose} open={isOpen}>
       <Row align="center" grow className={classes.heading}>
-        <Paragraph className={classes.manage} weight="bolder" noMargin>
+        <Paragraph size="xl" noMargin>
           Scan QR
         </Paragraph>
         <IconButton onClick={onClose} disableRipple>
@@ -88,18 +88,15 @@ const ScanQRModal = ({
         <Button
           color="secondary"
           className={classes.button}
-          minHeight={42}
+          minWidth={154}
-          minWidth={140}
           onClick={onClose}
-          variant="contained"
         >
           Close
         </Button>
         <Button
           color="primary"
           className={classes.button}
-          minWidth={140}
+          minWidth={154}
-          minHeight={42}
           onClick={() => {
             if (hasWebcam) {
               setHasWebcam(false)

src/routes/open/components/SafeOwnersConfirmationsForm/ScanQRModal/style.js

@@ -3,7 +3,7 @@ import { lg, sm, background } from '~/theme/variables'
 
 export const styles = () => ({
   heading: {
-    padding: `${sm} ${lg}`,
+    padding: lg,
     justifyContent: 'space-between',
     maxHeight: '75px',
     boxSizing: 'border-box',
@@ -12,12 +12,9 @@ export const styles = () => ({
     width: '100%',
     height: '100%',
   },
-  manage: {
-    fontSize: '24px',
-  },
   close: {
-    height: '35px',
+    height: '25px',
-    width: '35px',
+    width: '25px',
   },
   detailsContainer: {
     backgroundColor: background,

src/routes/open/components/SafeOwnersConfirmationsForm/index.jsx

@@ -42,7 +42,7 @@ type Props = {
 
 const { useState } = React
 
-export const ADD_OWNER_BUTTON = '+ ADD ANOTHER OWNER'
+export const ADD_OWNER_BUTTON = '+ Add another owner'
 
 export const calculateValuesAfterRemoving = (index: number, notRemovedOwners: number, values: Object) => {
   const initialValues = { ...values }
@@ -176,7 +176,7 @@ const SafeOwners = (props: Props) => {
       </Block>
       <Row align="center" grow className={classes.add} margin="xl">
         <Button color="secondary" onClick={onAddOwner} data-testid="add-owner-btn">
-          <Paragraph weight="bold" size="md" noMargin>
+          <Paragraph size="md" noMargin>
             {ADD_OWNER_BUTTON}
           </Paragraph>
         </Button>

src/routes/open/components/SafeOwnersConfirmationsForm/style.js

@@ -1,5 +1,7 @@
 // @flow
-import { md, lg, sm } from '~/theme/variables'
+import {
+  md, lg, sm, disabled, extraSmallFontSize,
+} from '~/theme/variables'
 
 export const styles = () => ({
   root: {
@@ -17,6 +19,8 @@ export const styles = () => ({
   },
   header: {
     padding: `${sm} ${lg}`,
+    fontSize: extraSmallFontSize,
+    color: disabled,
   },
   name: {
     marginRight: `${sm}`,