Add search row

src/components/Header/component/SafeListHeader/index.jsx

@@ -48,7 +48,7 @@ const SafeListHeader = ({ safesCount }: Props) => {
         {safesCount}
       </Paragraph>
       <IconButton onClick={toggleSidebar} className={classes.icon} aria-label="Expand Safe List">
-        {isOpen ? <ExpandMoreIcon color="secondary" /> : <ExpandLessIcon />}
+        {isOpen ? <ExpandLessIcon /> : <ExpandMoreIcon color="secondary" />}
       </IconButton>
     </Col>
   )

src/components/Sidebar/SafeList.jsx

@@ -10,7 +10,9 @@ import Link from '~/components/layout/Link'
 import Hairline from '~/components/layout/Hairline'
 import Paragraph from '~/components/layout/Paragraph'
 import Identicon from '~/components/Identicon'
-import { mediumFontSize, sm, secondary, primary } from '~/theme/variables'
+import {
+  mediumFontSize, sm, secondary, primary,
+} from '~/theme/variables'
 import { shortVersionOf } from '~/logic/wallets/ethAddresses'
 import { type Safe } from '~/routes/safe/store/models/safe'
 import { SAFELIST_ADDRESS } from '~/routes/routes'

src/components/Sidebar/index.jsx

@@ -1,8 +1,16 @@
 // @flow
 import * as React from 'react'
 import { List } from 'immutable'
+import SearchBar from 'material-ui-search-bar'
 import { connect } from 'react-redux'
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import Drawer from '@material-ui/core/Drawer'
+import SearchIcon from '@material-ui/icons/Search'
+import Divider from '~/components/layout/Divider'
+import Button from '~/components/layout/Button'
+import Spacer from '~/components/Spacer'
+import Hairline from '~/components/layout/Hairline'
+import Row from '~/components/layout/Row'
 import { type Safe } from '~/routes/safe/store/models/safe'
 import { safesListSelector } from '~/routes/safeList/store/selectors'
 import useSidebarStyles from './style'
@@ -29,22 +37,49 @@ const Sidebar = ({ children, safes }: SidebarProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false)
   const classes = useSidebarStyles()
 
+  const searchClasses = {
+    input: classes.searchInput,
+    root: classes.searchRoot,
+    iconButton: classes.searchIconInput,
+    searchContainer: classes.searchContainer,
+  }
+
   const toggleSidebar = () => {
     setIsOpen((prevIsOpen) => !prevIsOpen)
   }
 
+  const handleEsc = (e: React.KeyboardEvent) => {
+    if (e.keyCode === 27) {
+      toggleSidebar()
+    }
+  }
+
   return (
     <SidebarContext.Provider value={{ isOpen, toggleSidebar }}>
+      <ClickAwayListener onClickAway={toggleSidebar}>
         <Drawer
           className={classes.sidebar}
           open={isOpen}
-        onKeyDown={toggleSidebar}
-        onClick={toggleSidebar}
+          onKeyDown={handleEsc}
           classes={{ paper: classes.sidebarPaper }}
+          ModalProps={{ onBackdropClick: toggleSidebar }}
         >
           <div className={classes.headerPlaceholder} />
+          <Row align="center">
+            <SearchIcon className={classes.searchIcon} />
+            <SearchBar classes={searchClasses} placeholder="Search by name or address" searchIcon={<div />} />
+            <Spacer />
+            <Divider />
+            <Spacer />
+            <Button className={classes.addSafeBtn} variant="contained" size="small" color="primary">
+              + Add Safe
+            </Button>
+            <Spacer />
+          </Row>
+          <Hairline />
           <SafeList safes={safes} />
         </Drawer>
+      </ClickAwayListener>
       {children}
     </SidebarContext.Provider>
   )

src/components/Sidebar/style.js

@@ -1,6 +1,8 @@
 // @flow
 import { makeStyles } from '@material-ui/core/styles'
-import { headerHeight } from '~/theme/variables'
+import {
+  xs, mediumFontSize, secondaryText, md, headerHeight,
+} from '~/theme/variables'
 
 const sidebarWidth = '400px'
 
@@ -14,6 +16,44 @@ const useSidebarStyles = makeStyles({
   headerPlaceholder: {
     height: headerHeight, // for some reason it didn't want to work with an imported variable 🤔
   },
+  addSafeBtn: {
+    fontSize: mediumFontSize,
+  },
+  searchIcon: {
+    color: secondaryText,
+    paddingLeft: md,
+  },
+  searchInput: {
+    backgroundColor: 'transparent',
+    lineHeight: 'initial',
+    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',
+    border: 'none',
+    boxShadow: 'none',
+    '& > button': {
+      display: 'none',
+    },
+  },
+  searchIconInput: {
+    '&:hover': {
+      backgroundColor: 'transparent !important',
+    },
+  },
 })
 
 export default useSidebarStyles

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

@@ -40,7 +40,7 @@ const Tokens = (props: Props) => {
   } = props
 
   return (
-    <React.Fragment>
+    <>
       <Row align="center" grow className={classes.heading}>
         <Paragraph className={classes.manage} noMargin weight="bolder">
           Manage Tokens
@@ -72,7 +72,7 @@ const Tokens = (props: Props) => {
           tokens={tokens}
         />
       )}
-    </React.Fragment>
+    </>
   )
 }
 

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

@@ -124,7 +124,7 @@ class Tokens extends React.Component<Props, State> {
     const filteredTokens = filterBy(filter, tokens)
 
     return (
-      <React.Fragment>
+      <>
         <Block className={classes.root}>
           <Row align="center" className={cn(classes.padding, classes.actions)}>
             <Search className={classes.search} />
@@ -179,7 +179,7 @@ class Tokens extends React.Component<Props, State> {
             )
           })}
         </MuiList>
-      </React.Fragment>
+      </>
     )
   }
 }