Feature #190: Sidebar improvements (#347)

* Change icons
Adds checked icon

* Adds safeParamAddressFromStateSelector for get current safe selected
Implements check icon on sidebar

* Remove overflow on sidebar
Start alignments

* Removes headerPlaceholder

* Improves header

* Improves header

* Fix header style

src/assets/icons/check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14">
+    <path fill="#008C73" fill-rule="evenodd" d="M5.6 10.6L1.4 6.4 0 7.8l5.6 5.6 12-12L16.2 0z"/>
+</svg>

src/assets/icons/shape.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" viewBox="0 0 20 15">
+    <path fill="#B2B5B2" fill-rule="evenodd" d="M3 8l-1.562.01a.5.5 0 0 1-.315-.89L9.969.036 10 0l.007.006.008-.006.03.037 8.845 7.091a.5.5 0 0 1-.313.89H17V15h-6v-5H9v5H3V8zm2-1.624V13h2V8h6v5h2V6.61L9.975 2.55 5 6.377z"/>
+</svg>

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

@@ -45,7 +45,6 @@ const SafeListHeader = ({ safesCount }: Props) => {
   return (
     <Col start="xs" middle="xs" className={classes.container}>
       Safes
-      {' '}
       <Paragraph size="xs" className={classes.counter}>
         {safesCount}
       </Paragraph>

src/components/Sidebar/SafeList/DefaultBadge.jsx

@@ -4,20 +4,23 @@ import { makeStyles } from '@material-ui/core/styles'
 import Img from '~/components/layout/Img'
 import Block from '~/components/layout/Block'
 import Paragraph from '~/components/layout/Paragraph'
-import { primary, sm } from '~/theme/variables'
-import StarIcon from './assets/star.svg'
+import { primary, secondaryBackground, md } from '~/theme/variables'
+import HomeIcon from '~/assets/icons/shape.svg'
 
 const useStyles = makeStyles({
   container: {
-    background: primary,
+    background: secondaryBackground,
     padding: '5px',
     boxSizing: 'border-box',
-    width: '73px',
+    width: '76px',
     justifyContent: 'space-around',
-    marginLeft: sm,
+    marginLeft: md,
     color: '#fff',
     borderRadius: '3px',
   },
+  defaultText: {
+    color: primary,
+  },
 })
 
 const DefaultBadge = () => {
@@ -25,9 +28,9 @@ const DefaultBadge = () => {
 
   return (
     <Block justify="left" className={classes.container}>
-      <Img src={StarIcon} alt="Star Icon" />
-      <Paragraph noMargin size="xs">
-        default
+      <Img src={HomeIcon} alt="Home Icon" />
+      <Paragraph noMargin size="xs" className={classes.defaultText}>
+        Default
       </Paragraph>
     </Block>
   )

src/components/Sidebar/SafeList/index.jsx

@@ -12,18 +12,21 @@ import Paragraph from '~/components/layout/Paragraph'
 import ButtonLink from '~/components/layout/ButtonLink'
 import Identicon from '~/components/Identicon'
 import {
-  mediumFontSize, sm, secondary, primary,
+  mediumFontSize, sm, primary, disabled, md,
 } from '~/theme/variables'
 import { formatAmount } from '~/logic/tokens/utils/formatAmount'
 import { shortVersionOf, sameAddress } from '~/logic/wallets/ethAddresses'
 import { type Safe } from '~/routes/safe/store/models/safe'
 import { SAFELIST_ADDRESS } from '~/routes/routes'
 import DefaultBadge from './DefaultBadge'
+import Img from '~/components/layout/Img'
+import check from '~/assets/icons/check.svg'
 
 export const SIDEBAR_SAFELIST_ROW_TESTID = 'SIDEBAR_SAFELIST_ROW_TESTID'
 
 type SafeListProps = {
   safes: List<Safe>,
+  currentSafe: string,
   onSafeClick: Function,
   setDefaultSafe: Function,
   defaultSafe: string,
@@ -33,9 +36,12 @@ const useStyles = makeStyles({
   icon: {
     marginRight: sm,
   },
+  checkIcon: {
+    marginRight: '10px',
+  },
   list: {
     overflow: 'hidden',
-    overflowY: 'scroll',
+    overflowY: 'hidden',
     padding: 0,
     height: '100%',
   },
@@ -50,21 +56,25 @@ const useStyles = makeStyles({
     },
   },
   safeName: {
-    color: secondary,
+    color: primary,
   },
   safeAddress: {
-    color: primary,
+    color: disabled,
     fontSize: mediumFontSize,
   },
   makeDefaultBtn: {
     padding: 0,
-    marginLeft: sm,
+    marginLeft: md,
     visibility: 'hidden',
   },
+  noIcon: {
+    visibility: 'hidden',
+    width: '28px',
+  },
 })
 
 const SafeList = ({
-  safes, onSafeClick, setDefaultSafe, defaultSafe,
+  safes, onSafeClick, setDefaultSafe, defaultSafe, currentSafe,
 }: SafeListProps) => {
   const classes = useStyles()
 
@@ -78,6 +88,11 @@ const SafeList = ({
             data-testid={SIDEBAR_SAFELIST_ROW_TESTID}
           >
             <ListItem classes={{ root: classes.listItemRoot }}>
+              { sameAddress(currentSafe, safe.address) ? (
+                <ListItemIcon>
+                  <Img src={check} alt="check" className={classes.checkIcon} />
+                </ListItemIcon>
+              ) : <div className={classes.noIcon}>placeholder</div> }
               <ListItemIcon>
                 <Identicon address={safe.address} diameter={32} className={classes.icon} />
               </ListItemIcon>

src/components/Sidebar/index.jsx

@@ -14,7 +14,10 @@ import Hairline from '~/components/layout/Hairline'
 import Row from '~/components/layout/Row'
 import { WELCOME_ADDRESS } from '~/routes/routes'
 import { type Safe } from '~/routes/safe/store/models/safe'
-import { defaultSafeSelector } from '~/routes/safe/store/selectors'
+import {
+  defaultSafeSelector,
+  safeParamAddressFromStateSelector,
+} from '~/routes/safe/store/selectors'
 import setDefaultSafe from '~/routes/safe/store/actions/setDefaultSafe'
 import { sortedSafeListSelector } from './selectors'
 import SafeList from './SafeList'
@@ -39,6 +42,7 @@ type SidebarProps = {
   safes: List<Safe>,
   setDefaultSafeAction: Function,
   defaultSafe: string,
+  currentSafe: string,
 }
 
 const filterBy = (filter: string, safes: List<Safe>): List<Safe> => safes.filter(
@@ -48,7 +52,7 @@ const filterBy = (filter: string, safes: List<Safe>): List<Safe> => safes.filter
 )
 
 const Sidebar = ({
-  children, safes, setDefaultSafeAction, defaultSafe,
+  children, safes, setDefaultSafeAction, defaultSafe, currentSafe,
 }: SidebarProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false)
   const [filter, setFilter] = useState<string>('')
@@ -97,7 +101,6 @@ const Sidebar = ({
           classes={{ paper: classes.sidebarPaper }}
           ModalProps={{ onBackdropClick: toggleSidebar }}
         >
-          <div className={classes.headerPlaceholder} />
           <Row align="center">
             <SearchIcon className={classes.searchIcon} />
             <SearchBar
@@ -108,7 +111,6 @@ const Sidebar = ({
               onCancelSearch={handleFilterCancel}
               value={filter}
             />
-            <Spacer />
             <Divider />
             <Spacer />
             <Button
@@ -130,6 +132,7 @@ const Sidebar = ({
             onSafeClick={toggleSidebar}
             setDefaultSafe={setDefaultSafeAction}
             defaultSafe={defaultSafe}
+            currentSafe={currentSafe}
           />
           <LegalLinks toggleSidebar={toggleSidebar} />
         </Drawer>
@@ -141,6 +144,6 @@ const Sidebar = ({
 
 export default connect<Object, Object, ?Function, ?Object>(
   // $FlowFixMe
-  (state) => ({ safes: sortedSafeListSelector(state), defaultSafe: defaultSafeSelector(state) }),
+  (state) => ({ safes: sortedSafeListSelector(state), defaultSafe: defaultSafeSelector(state), currentSafe: safeParamAddressFromStateSelector(state) }),
   { setDefaultSafeAction: setDefaultSafe },
 )(Sidebar)

src/components/Sidebar/style.js

@@ -5,13 +5,24 @@ import {
 } from '~/theme/variables'
 
 const sidebarWidth = '400px'
+const sidebarMarginLeft = '12px'
+const sidebarMarginTop = '12px'
+const sidebarMarginBottom = '12px'
+const sidebarBorderRadius = '8px'
 
 const useSidebarStyles = makeStyles({
   sidebar: {
     width: sidebarWidth,
+    marginLeft: sidebarMarginLeft,
+    borderRadius: sidebarBorderRadius,
+    top: sidebarMarginTop,
   },
   sidebarPaper: {
     width: sidebarWidth,
+    marginLeft: sidebarMarginLeft,
+    top: `calc(${headerHeight} + ${sidebarMarginTop})`,
+    maxHeight: `calc(100vh - ${headerHeight} - ${sidebarMarginTop} - ${sidebarMarginBottom})`,
+    borderRadius: sidebarBorderRadius,
   },
   headerPlaceholder: {
     minHeight: headerHeight,
@@ -37,7 +48,7 @@ const useSidebarStyles = makeStyles({
     },
   },
   searchContainer: {
-    width: '180px',
+    width: '190px',
     marginLeft: xs,
     marginRight: xs,
   },

src/routes/safe/store/selectors/index.js

@@ -70,6 +70,15 @@ export const safeTransactionsSelector: Selector<GlobalState, RouterProps, List<T
   },
 )
 
+export const safeParamAddressFromStateSelector = (state: GlobalState): string => {
+  const match = matchPath(
+    state.router.location.pathname,
+    { path: `${SAFELIST_ADDRESS}/:safeAddress` },
+  )
+
+  return match ? match.params.safeAddress : null
+}
+
 export const safeIncomingTransactionsSelector: Selector<GlobalState, RouterProps, List<IncomingTransaction>> = createSelector(
   incomingTransactionsSelector,
   safeParamAddressSelector,

src/theme/variables.js

@@ -13,6 +13,7 @@ const md = '16px'
 const primary = '#001428'
 const secondary = '#008C73'
 const secondaryTextOrSvg = '#B2B5B2'
+const secondaryBackground = '#f0efee'
 const sm = '8px'
 const warningColor = '#ffc05f'
 const xl = '32px'
@@ -57,6 +58,7 @@ module.exports = {
   secondary,
   secondaryFontFamily: 'Averta, monospace',
   secondaryText: secondaryTextOrSvg,
+  secondaryBackground,
   sm,
   smallFontSize: '12px',
   warning: warningColor,