addCustomToken wip

src/components/layout/Block/index.scss

@@ -1,5 +1,4 @@
 .block {
-
 }
 
 .xs {
@@ -7,19 +6,19 @@
 }
 
 .sm {
-    margin-bottom: $sm;
+  margin-bottom: $sm;
 }
 
 .md {
-    margin-bottom: $md;
+  margin-bottom: $md;
 }
 
 .lg {
-    margin-bottom: $lg;
+  margin-bottom: $lg;
 }
 
 .xl {
-    margin-bottom: $xl;
+  margin-bottom: $xl;
 }
 
 .paddingXs {
@@ -57,4 +56,4 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-}
+}

src/components/layout/Paragraph/index.js

@@ -8,6 +8,7 @@ const cx = classNames.bind(styles)
 type Props = {
   align?: 'right' | 'center' | 'left',
   noMargin?: boolean,
+  noPadding?: boolean,
   weight?: 'light' | 'regular' | 'bolder' | 'bold',
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
   color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled',
@@ -25,7 +26,7 @@ class Paragraph extends React.PureComponent<Props> {
 
     return (
       <p
-        className={cx(styles.paragraph, className, weight, { noMargin }, { dot }, size, color, transform, align)}
+        className={cx(styles.paragraph, className, weight, { noMargin, dot }, size, color, transform, align)}
         {...props}
       >
         {children}

src/components/layout/Paragraph/index.scss

@@ -40,19 +40,19 @@
 }
 
 .capitalize {
-  text-transform: capitalize
+  text-transform: capitalize;
 }
 
 .lowercase {
-  text-transform: lowercase
+  text-transform: lowercase;
 }
 
 .uppercase {
-  text-transform: uppercase
+  text-transform: uppercase;
 }
 
-.noMargin{
-    margin: 0;
+.noMargin {
+  margin: 0;
 }
 
 .center {

src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx

@@ -1,14 +1,26 @@
 // @flow
 import React, { Component } from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import Block from '~/components/layout/Block'
+import Paragraph from '~/components/layout/Paragraph'
+import { styles } from './style'
 
 class AddCustomToken extends Component {
   render() {
+    const { classes } = this.props
+
     return (
-      <div>
-        Add a token :)
-      </div>
+      <React.Fragment>
+        <Block>
+          <Paragraph noMargin className={classes.title} size="lg">
+            Add custom token
+          </Paragraph>
+        </Block>
+      </React.Fragment>
     )
   }
 }
 
-export default AddCustomToken
+const AddCustomTokenComponent = withStyles(styles)(AddCustomToken)
+
+export default AddCustomTokenComponent

src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/style.js

@@ -0,0 +1,9 @@
+// @flow
+import { lg, bolderFont } from '~/theme/variables'
+
+export const styles = () => ({
+  title: {
+    padding: `${lg}`,
+    fontWeight: bolderFont,
+  },
+})

src/routes/safe/components/Balances/Tokens/screens/TokenList/style.js

@@ -15,10 +15,14 @@ export const styles = () => ({
     padding: `0 ${md}`,
   },
   add: {
+    fontSize: '11px',
     fontWeight: 'normal',
     paddingRight: md,
     paddingLeft: md,
   },
+  actions: {
+    height: '50px',
+  },
   list: {
     overflow: 'hidden',
     overflowY: 'scroll',
@@ -32,7 +36,7 @@ export const styles = () => ({
   searchInput: {
     backgroundColor: 'transparent',
     lineHeight: 'initial',
-    fontSize: mediumFontSize,
+    fontSize: '13px',
     padding: 0,
     '& > input::placeholder': {
       letterSpacing: '-0.5px',
@@ -51,9 +55,12 @@ export const styles = () => ({
   searchRoot: {
     letterSpacing: '-0.5px',
     fontFamily: 'Roboto Mono, monospace',
-    fontSize: mediumFontSize,
+    fontSize: '13px',
     border: 'none',
     boxShadow: 'none',
+    '& > button': {
+      display: 'none',
+    },
   },
   searchIcon: {
     '&:hover': {