safe page rebranding wip

src/components/layout/ButtonLink/index.scss

@@ -3,6 +3,7 @@
   border: none;
   text-decoration: underline;
   cursor: pointer;
+  font-family: inherit;
 }
 
 .sm {

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

@@ -1,5 +1,7 @@
 // @flow
-import { lg, sm, background } from '~/theme/variables'
+import {
+  lg, sm, background, secondaryText,
+} from '~/theme/variables'
 
 export const styles = () => ({
   heading: {
@@ -15,6 +17,7 @@ export const styles = () => ({
   close: {
     height: '25px',
     width: '25px',
+    color: secondaryText,
   },
   detailsContainer: {
     backgroundColor: background,

src/routes/opening/component/index.jsx

@@ -20,9 +20,6 @@ type Props = SelectorProps & {
 const vault = require('../assets/vault.svg')
 
 const styles = {
-  page: {
-    letterSpacing: '-1px',
-  },
   icon: {
     height: mediumFontSize,
     color: secondary,
@@ -38,7 +35,6 @@ const styles = {
     display: 'flex',
     alignItems: 'center',
     marginLeft: xs,
-    fontWeight: 'bolder',
   },
 }
 
@@ -46,7 +42,7 @@ const Opening = ({
   classes, name = 'Safe creation process', tx, network,
 }: Props) => (
   <Page align="center">
-    <Paragraph className={classes.page} color="secondary" size="xxl" weight="bolder" align="center">
+    <Paragraph color="primary" size="xxl" weight="bold" align="center">
       {name}
     </Paragraph>
     <Block margin="lg" align="center">

src/theme/variables.js

@@ -7,6 +7,7 @@ const fontColor = '#001428'
 const fancyColor = '#f02525'
 const warningColor = '#ffc05f'
 const errorColor = '#f02525'
+const secondaryTextOrSvg = '#B2B5B2'
 const connectedColor = '#008C73'
 const disabled = '#5D6D74'
 const xs = '4px'
@@ -23,6 +24,7 @@ module.exports = {
   disabled,
   background,
   fontColor,
+  secondaryText: secondaryTextOrSvg,
   fancy: fancyColor,
   warning: warningColor,
   error: errorColor,