Fix welcome view ui details #72

src/components/Header/component/Layout.jsx

@@ -31,9 +31,9 @@ const styles = () => ({
     left: '4px',
   },
   summary: {
-    borderBottom: `solid 2px ${border}`,
+    borderBottom: `solid 1px ${border}`,
     alignItems: 'center',
-    height: '52px',
+    height: '53px',
     backgroundColor: 'white',
   },
   logo: {

src/components/layout/Heading/index.scss

@@ -6,7 +6,7 @@
 
 .h1 {
   line-height: 36px;
-  font-weight: 500;
+  font-weight: $bolderFont;
   letter-spacing: -1px;
   font-size: $(fontSizeHeadingLg)px;
 }
@@ -29,7 +29,6 @@
 
 .h4 {
   line-height: 21px;
-  letter-spacing: -0.5px;
   font-family: 'Roboto Mono', monospace;
   font-size: $(fontSizeHeadingXs)px;
 }

src/index.scss

@@ -15,6 +15,9 @@ body {
   font-size: $mediumFontSize;
   margin: 0;
   background-color: $background;
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body>div:first-child {

src/routes/welcome/components/Layout.jsx

@@ -6,7 +6,7 @@ import Img from '~/components/layout/Img'
 import Button from '~/components/layout/Button'
 import Link from '~/components/layout/Link'
 import { OPEN_ADDRESS } from '~/routes/routes'
-import { sm } from '~/theme/variables'
+import { marginButtonImg } from '~/theme/variables'
 import styles from './Layout.scss'
 
 const safe = require('../assets/safe.svg')
@@ -22,7 +22,7 @@ type SafeProps = {
 }
 
 const buttonStyle = {
-  marginLeft: sm,
+  marginLeft: marginButtonImg,
 }
 
 export const CreateSafe = ({ size, provider }: SafeProps) => (
@@ -35,7 +35,7 @@ export const CreateSafe = ({ size, provider }: SafeProps) => (
     disabled={!provider}
     minWidth={240}
   >
-    <Img src={plus} height={16} alt="Safe" />
+    <Img src={plus} height={14} alt="Safe" />
     <div style={buttonStyle}>Create new Safe</div>
   </Button>
 )
@@ -50,7 +50,7 @@ export const LoadSafe = ({ size, provider }: SafeProps) => (
     disabled={!provider}
     minWidth={240}
   >
-    <Img src={safe} height={16} alt="Safe" />
+    <Img src={safe} height={14} alt="Safe" />
     <div style={buttonStyle}>Load existing Safe</div>
   </Button>
 )
@@ -58,10 +58,8 @@ export const LoadSafe = ({ size, provider }: SafeProps) => (
 
 const Welcome = ({ provider }: Props) => (
   <Block className={styles.safe}>
-    <Heading tag="h1" align="center">
-      Welcome to the Gnosis
-    </Heading>
     <Heading tag="h1" align="center" margin="lg">
+      Welcome to the Gnosis <br />
       Safe Team Edition
     </Heading>
     <Heading tag="h4" align="center" margin="xl">

src/theme/mui.js

@@ -1,7 +1,7 @@
 // @flow
 import red from '@material-ui/core/colors/red'
 import { createMuiTheme } from '@material-ui/core/styles'
-import { largeFontSize, mediumFontSize, smallFontSize, disabled, primary, secondary, md, lg, background, bolderFont, boldFont } from './variables'
+import { largeFontSize, mediumFontSize, smallFontSize, disabled, primary, secondary, md, lg, background, bolderFont, boldFont, buttonLargeFontSize } from './variables'
 
 export type WithStyles = {
   classes: Object,
@@ -29,7 +29,7 @@ export default createMuiTheme({
     MuiButton: {
       root: {
         fontFamily: 'Roboto Mono, monospace',
-        letterSpacing: '1px',
+        letterSpacing: '0.9px',
         '&:disabled': {
           color: disabled,
         },
@@ -38,13 +38,17 @@ export default createMuiTheme({
       disabled: {
         cursor: 'pointer',
       },
+      contained: {
+        boxShadow: 'none',
+      },
       containedPrimary: {
         backgroundColor: secondary,
       },
       sizeLarge: {
         padding: `${md} ${lg}`,
         minHeight: '52px',
-        fontSize: mediumFontSize,
+        fontSize: buttonLargeFontSize,
+        fontWeight: boldFont,
       },
       sizeSmall: {
         minWidth: '130px',

src/theme/variables.js

@@ -1,5 +1,5 @@
 // @flow
-const border = '#eaebef'
+const border = '#e4e8f1'
 const background = '#f4f4f9'
 const primary = '#4a5579'
 const secondary = '#467ee5' // '#13222b'
@@ -14,6 +14,7 @@ const md = '16px'
 const lg = '24px'
 const xl = '32px'
 const xxl = '40px'
+const marginButtonImg = '12px'
 
 module.exports = Object.assign({}, {
   primary,
@@ -31,10 +32,12 @@ module.exports = Object.assign({}, {
   xl,
   xxl,
   border,
+  marginButtonImg,
   fontSizeHeadingXs: 13,
   fontSizeHeadingSm: 18,
   fontSizeHeadingMd: 21,
   fontSizeHeadingLg: 32,
+  buttonLargeFontSize: '12px',
   lightFont: 300,
   regularFont: 400,
   bolderFont: 500,