Refactor: Moving Token styles to separate file #73

src/routes/safe/component/Balances/Tokens/index.jsx

@@ -22,81 +22,9 @@ import Divider from '~/components/layout/Divider'
 import Hairline from '~/components/layout/Hairline'
 import Spacer from '~/components/Spacer'
 import Row from '~/components/layout/Row'
-import { lg, md, sm, xs, mediumFontSize, border } from '~/theme/variables'
 import { type Token } from '~/routes/tokens/store/model/token'
 import actions, { type Actions } from './actions'
-
+import { styles } from './style'
-const styles = () => ({
-  root: {
-    minHeight: '132px',
-  },
-  heading: {
-    padding: `${md} ${lg}`,
-    justifyContent: 'space-between',
-  },
-  manage: {
-    fontSize: '24px',
-  },
-  actions: {
-    height: '50px',
-  },
-  close: {
-    height: '35px',
-    width: '35px',
-  },
-  search: {
-    color: '#a2a8ba',
-    paddingLeft: sm,
-  },
-  padding: {
-    padding: `0 ${md}`,
-  },
-  add: {
-    fontWeight: 'normal',
-    paddingRight: md,
-    paddingLeft: md,
-  },
-  list: {
-    overflow: 'hidden',
-    overflowY: 'scroll',
-    padding: 0,
-  },
-  token: {
-    minHeight: '50px',
-    borderBottom: `1px solid ${border}`,
-  },
-  searchInput: {
-    backgroundColor: 'transparent',
-    lineHeight: 'initial',
-    fontSize: mediumFontSize,
-    padding: 0,
-    '& > input::placeholder': {
-      letterSpacing: '-0.5px',
-      fontSize: mediumFontSize,
-      color: 'black',
-    },
-    '& > input': {
-      letterSpacing: '-0.5px',
-    },
-  },
-  searchContainer: {
-    width: '180px',
-    marginLeft: xs,
-    marginRight: xs,
-  },
-  searchRoot: {
-    letterSpacing: '-0.5px',
-    fontFamily: 'Roboto Mono, monospace',
-    fontSize: mediumFontSize,
-    border: 'none',
-    boxShadow: 'none',
-  },
-  searchIcon: {
-    '&:hover': {
-      backgroundColor: 'transparent !important',
-    },
-  },
-})
 
 type Props = Actions & {
   onClose: () => void,

src/routes/safe/component/Balances/Tokens/style.js

@@ -0,0 +1,74 @@
+// @flow
+import { lg, md, sm, xs, mediumFontSize, border } from '~/theme/variables'
+
+export const styles = () => ({
+  root: {
+    minHeight: '132px',
+  },
+  heading: {
+    padding: `${md} ${lg}`,
+    justifyContent: 'space-between',
+  },
+  manage: {
+    fontSize: '24px',
+  },
+  actions: {
+    height: '50px',
+  },
+  close: {
+    height: '35px',
+    width: '35px',
+  },
+  search: {
+    color: '#a2a8ba',
+    paddingLeft: sm,
+  },
+  padding: {
+    padding: `0 ${md}`,
+  },
+  add: {
+    fontWeight: 'normal',
+    paddingRight: md,
+    paddingLeft: md,
+  },
+  list: {
+    overflow: 'hidden',
+    overflowY: 'scroll',
+    padding: 0,
+  },
+  token: {
+    minHeight: '50px',
+    borderBottom: `1px solid ${border}`,
+  },
+  searchInput: {
+    backgroundColor: 'transparent',
+    lineHeight: 'initial',
+    fontSize: mediumFontSize,
+    padding: 0,
+    '& > input::placeholder': {
+      letterSpacing: '-0.5px',
+      fontSize: mediumFontSize,
+      color: 'black',
+    },
+    '& > input': {
+      letterSpacing: '-0.5px',
+    },
+  },
+  searchContainer: {
+    width: '180px',
+    marginLeft: xs,
+    marginRight: xs,
+  },
+  searchRoot: {
+    letterSpacing: '-0.5px',
+    fontFamily: 'Roboto Mono, monospace',
+    fontSize: mediumFontSize,
+    border: 'none',
+    boxShadow: 'none',
+  },
+  searchIcon: {
+    '&:hover': {
+      backgroundColor: 'transparent !important',
+    },
+  },
+})

src/routes/safe/component/Balances/index.jsx

@@ -41,7 +41,7 @@ type Action = 'Token' | 'Send' | 'Receive'
 class Balances extends React.Component<Props, State> {
   state = {
     hideZero: false,
-    showToken: true,
+    showToken: false,
     showSend: false,
     showReceive: false,
   }