From 402d5a0074fa2da9e7cc4b8b2362cae3e8053968 Mon Sep 17 00:00:00 2001 From: apane Date: Thu, 12 Dec 2019 15:54:30 -0300 Subject: [PATCH 1/7] Change icons Adds checked icon --- src/assets/icons/check.svg | 3 +++ src/assets/icons/shape.svg | 3 +++ .../Sidebar/SafeList/DefaultBadge.jsx | 19 +++++++++++-------- src/components/Sidebar/SafeList/index.jsx | 16 ++++++++++++---- src/theme/variables.js | 2 ++ 5 files changed, 31 insertions(+), 12 deletions(-) create mode 100644 src/assets/icons/check.svg create mode 100644 src/assets/icons/shape.svg diff --git a/src/assets/icons/check.svg b/src/assets/icons/check.svg new file mode 100644 index 0000000000..e644005002 --- /dev/null +++ b/src/assets/icons/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/shape.svg b/src/assets/icons/shape.svg new file mode 100644 index 0000000000..318ccaba20 --- /dev/null +++ b/src/assets/icons/shape.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Sidebar/SafeList/DefaultBadge.jsx b/src/components/Sidebar/SafeList/DefaultBadge.jsx index a0c441a5c8..76e31cb267 100644 --- a/src/components/Sidebar/SafeList/DefaultBadge.jsx +++ b/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 ( - Star Icon - - default + Home Icon + + Default ) diff --git a/src/components/Sidebar/SafeList/index.jsx b/src/components/Sidebar/SafeList/index.jsx index 6f0dabd72b..77a1b7877a 100644 --- a/src/components/Sidebar/SafeList/index.jsx +++ b/src/components/Sidebar/SafeList/index.jsx @@ -12,13 +12,15 @@ 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' @@ -33,6 +35,9 @@ const useStyles = makeStyles({ icon: { marginRight: sm, }, + checkIcon: { + marginRight: '10px', + }, list: { overflow: 'hidden', overflowY: 'scroll', @@ -50,15 +55,15 @@ const useStyles = makeStyles({ }, }, safeName: { - color: secondary, + color: primary, }, safeAddress: { - color: primary, + color: disabled, fontSize: mediumFontSize, }, makeDefaultBtn: { padding: 0, - marginLeft: sm, + marginLeft: md, visibility: 'hidden', }, }) @@ -78,6 +83,9 @@ const SafeList = ({ data-testid={SIDEBAR_SAFELIST_ROW_TESTID} > + + check + diff --git a/src/theme/variables.js b/src/theme/variables.js index 8dc7a2dba1..7329831453 100644 --- a/src/theme/variables.js +++ b/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, From 9832a59d8bae62ff2629ac3f576ebafe2f7082a0 Mon Sep 17 00:00:00 2001 From: apane Date: Thu, 12 Dec 2019 16:44:16 -0300 Subject: [PATCH 2/7] Adds safeParamAddressFromStateSelector for get current safe selected Implements check icon on sidebar --- src/components/Sidebar/SafeList/index.jsx | 15 +++++++++++---- src/components/Sidebar/index.jsx | 11 ++++++++--- src/routes/safe/store/selectors/index.js | 13 +++++++++++-- 3 files changed, 30 insertions(+), 9 deletions(-) diff --git a/src/components/Sidebar/SafeList/index.jsx b/src/components/Sidebar/SafeList/index.jsx index 77a1b7877a..bf113dd95a 100644 --- a/src/components/Sidebar/SafeList/index.jsx +++ b/src/components/Sidebar/SafeList/index.jsx @@ -26,6 +26,7 @@ export const SIDEBAR_SAFELIST_ROW_TESTID = 'SIDEBAR_SAFELIST_ROW_TESTID' type SafeListProps = { safes: List, + currentSafe: string, onSafeClick: Function, setDefaultSafe: Function, defaultSafe: string, @@ -66,10 +67,14 @@ const useStyles = makeStyles({ marginLeft: md, visibility: 'hidden', }, + noIcon: { + visibility: 'hidden', + width: '28px', + }, }) const SafeList = ({ - safes, onSafeClick, setDefaultSafe, defaultSafe, + safes, onSafeClick, setDefaultSafe, defaultSafe, currentSafe, }: SafeListProps) => { const classes = useStyles() @@ -83,9 +88,11 @@ const SafeList = ({ data-testid={SIDEBAR_SAFELIST_ROW_TESTID} > - - check - + { sameAddress(currentSafe, safe.address) ? ( + + check + + ) :
placeholder
} diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx index 0ecfe17d5f..4472c7f5db 100644 --- a/src/components/Sidebar/index.jsx +++ b/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, setDefaultSafeAction: Function, defaultSafe: string, + currentSafe: string, } const filterBy = (filter: string, safes: List): List => safes.filter( @@ -48,7 +52,7 @@ const filterBy = (filter: string, safes: List): List => safes.filter ) const Sidebar = ({ - children, safes, setDefaultSafeAction, defaultSafe, + children, safes, setDefaultSafeAction, defaultSafe, currentSafe, }: SidebarProps) => { const [isOpen, setIsOpen] = useState(false) const [filter, setFilter] = useState('') @@ -130,6 +134,7 @@ const Sidebar = ({ onSafeClick={toggleSidebar} setDefaultSafe={setDefaultSafeAction} defaultSafe={defaultSafe} + currentSafe={currentSafe} /> @@ -141,6 +146,6 @@ const Sidebar = ({ export default connect( // $FlowFixMe - (state) => ({ safes: sortedSafeListSelector(state), defaultSafe: defaultSafeSelector(state) }), + (state) => ({ safes: sortedSafeListSelector(state), defaultSafe: defaultSafeSelector(state), currentSafe: safeParamAddressFromStateSelector(state) }), { setDefaultSafeAction: setDefaultSafe }, )(Sidebar) diff --git a/src/routes/safe/store/selectors/index.js b/src/routes/safe/store/selectors/index.js index 2155744cf1..2745a0af92 100644 --- a/src/routes/safe/store/selectors/index.js +++ b/src/routes/safe/store/selectors/index.js @@ -1,9 +1,9 @@ // @flow import { Map, List, Set } from 'immutable' -import { type Match } from 'react-router-dom' +import { type Match, matchPath } from 'react-router-dom' import { createSelector, createStructuredSelector, type Selector } from 'reselect' import { type GlobalState } from '~/store/index' -import { SAFE_PARAM_ADDRESS } from '~/routes/routes' +import { SAFE_PARAM_ADDRESS, SAFELIST_ADDRESS } from '~/routes/routes' import { type Safe } from '~/routes/safe/store/models/safe' import { type State as TransactionsState, TRANSACTIONS_REDUCER_ID } from '~/routes/safe/store/reducer/transactions' import { type Transaction } from '~/routes/safe/store/models/transaction' @@ -63,6 +63,15 @@ export const safeTransactionsSelector: Selector { + const match = matchPath( + state.router.location.pathname, + { path: `${SAFELIST_ADDRESS}/:safeAddress` }, + ) + const { safeAddress } = match.params + return safeAddress +} + export const confirmationsTransactionSelector: Selector = createSelector( oneTransactionSelector, (tx: Transaction) => { From 78919153783c3c9d860f44df7b177e84284e892f Mon Sep 17 00:00:00 2001 From: apane Date: Thu, 12 Dec 2019 17:24:44 -0300 Subject: [PATCH 3/7] Remove overflow on sidebar Start alignments --- src/components/Sidebar/SafeList/index.jsx | 2 +- src/components/Sidebar/style.js | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Sidebar/SafeList/index.jsx b/src/components/Sidebar/SafeList/index.jsx index bf113dd95a..7fa92edf6f 100644 --- a/src/components/Sidebar/SafeList/index.jsx +++ b/src/components/Sidebar/SafeList/index.jsx @@ -41,7 +41,7 @@ const useStyles = makeStyles({ }, list: { overflow: 'hidden', - overflowY: 'scroll', + overflowY: 'hidden', padding: 0, height: '100%', }, diff --git a/src/components/Sidebar/style.js b/src/components/Sidebar/style.js index 1083a530b3..7c81e7011e 100644 --- a/src/components/Sidebar/style.js +++ b/src/components/Sidebar/style.js @@ -9,9 +9,14 @@ const sidebarWidth = '400px' const useSidebarStyles = makeStyles({ sidebar: { width: sidebarWidth, + marginLeft: '12px', + borderRadius: '8px', }, sidebarPaper: { width: sidebarWidth, + marginLeft: '12px', + maxHeight: '946px', + borderRadius: '8px', }, headerPlaceholder: { minHeight: headerHeight, From e3aefb5602f761768477f93d8986118aa7a63d6b Mon Sep 17 00:00:00 2001 From: apane Date: Fri, 13 Dec 2019 11:07:35 -0300 Subject: [PATCH 4/7] Removes headerPlaceholder --- src/components/Sidebar/index.jsx | 1 - src/components/Sidebar/style.js | 20 +++++++++++--------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx index 4472c7f5db..876b256af0 100644 --- a/src/components/Sidebar/index.jsx +++ b/src/components/Sidebar/index.jsx @@ -101,7 +101,6 @@ const Sidebar = ({ classes={{ paper: classes.sidebarPaper }} ModalProps={{ onBackdropClick: toggleSidebar }} > -
Date: Fri, 13 Dec 2019 13:01:08 -0300 Subject: [PATCH 5/7] Improves header --- src/components/Header/components/Layout.jsx | 1 - src/components/Header/components/SafeListHeader/index.jsx | 2 +- src/routes/safe/store/selectors/index.js | 4 ++-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/Header/components/Layout.jsx b/src/components/Header/components/Layout.jsx index ac736753f6..3aa261bae6 100644 --- a/src/components/Header/components/Layout.jsx +++ b/src/components/Header/components/Layout.jsx @@ -71,7 +71,6 @@ const Layout = openHoc( Gnosis Team Safe - diff --git a/src/components/Header/components/SafeListHeader/index.jsx b/src/components/Header/components/SafeListHeader/index.jsx index dafbf3da8b..668ef842e9 100644 --- a/src/components/Header/components/SafeListHeader/index.jsx +++ b/src/components/Header/components/SafeListHeader/index.jsx @@ -19,6 +19,7 @@ const useStyles = makeStyles({ container: { flexGrow: 0, padding: `0 ${md}`, + marginLeft: '160px', }, counter: { background: border, @@ -45,7 +46,6 @@ const SafeListHeader = ({ safesCount }: Props) => { return ( Safes - {' '} {safesCount} diff --git a/src/routes/safe/store/selectors/index.js b/src/routes/safe/store/selectors/index.js index 2745a0af92..f7da526a58 100644 --- a/src/routes/safe/store/selectors/index.js +++ b/src/routes/safe/store/selectors/index.js @@ -68,8 +68,8 @@ export const safeParamAddressFromStateSelector = (state: GlobalState): string => state.router.location.pathname, { path: `${SAFELIST_ADDRESS}/:safeAddress` }, ) - const { safeAddress } = match.params - return safeAddress + + return match ? match.params.safeAddress : null } export const confirmationsTransactionSelector: Selector = createSelector( From 8c361b8569c1e05afd7dba099166af4501fc746c Mon Sep 17 00:00:00 2001 From: apane Date: Fri, 13 Dec 2019 14:55:20 -0300 Subject: [PATCH 6/7] Improves header --- src/components/Header/components/Layout.jsx | 1 + .../Header/components/SafeListHeader/index.jsx | 1 - src/components/Sidebar/style.js | 12 ++++++++---- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/Header/components/Layout.jsx b/src/components/Header/components/Layout.jsx index 3aa261bae6..ac736753f6 100644 --- a/src/components/Header/components/Layout.jsx +++ b/src/components/Header/components/Layout.jsx @@ -71,6 +71,7 @@ const Layout = openHoc( Gnosis Team Safe + diff --git a/src/components/Header/components/SafeListHeader/index.jsx b/src/components/Header/components/SafeListHeader/index.jsx index 668ef842e9..46116b2bea 100644 --- a/src/components/Header/components/SafeListHeader/index.jsx +++ b/src/components/Header/components/SafeListHeader/index.jsx @@ -19,7 +19,6 @@ const useStyles = makeStyles({ container: { flexGrow: 0, padding: `0 ${md}`, - marginLeft: '160px', }, counter: { background: border, diff --git a/src/components/Sidebar/style.js b/src/components/Sidebar/style.js index 2f2803b243..dad8fe511b 100644 --- a/src/components/Sidebar/style.js +++ b/src/components/Sidebar/style.js @@ -1,12 +1,13 @@ // @flow import { makeStyles } from '@material-ui/core/styles' import { - xs, mediumFontSize, secondaryText, md, + xs, mediumFontSize, secondaryText, md, headerHeight, } from '~/theme/variables' const sidebarWidth = '400px' const sidebarMarginLeft = '12px' -const sidebarMarginTop = '67px' +const sidebarMarginTop = '12px' +const sidebarMarginBottom = '12px' const sidebarBorderRadius = '8px' const useSidebarStyles = makeStyles({ @@ -19,9 +20,12 @@ const useSidebarStyles = makeStyles({ sidebarPaper: { width: sidebarWidth, marginLeft: sidebarMarginLeft, - maxHeight: '902px', + top: `calc(${headerHeight} + ${sidebarMarginTop})`, + maxHeight: `calc(100vh - ${headerHeight} - ${sidebarMarginTop} - ${sidebarMarginBottom})`, borderRadius: sidebarBorderRadius, - top: sidebarMarginTop, + }, + headerPlaceholder: { + minHeight: headerHeight, }, addSafeBtn: { fontSize: mediumFontSize, From 31d0e8ee643cd12b8a839fa1d663f6805b14c477 Mon Sep 17 00:00:00 2001 From: apane Date: Tue, 17 Dec 2019 10:16:34 -0300 Subject: [PATCH 7/7] Fix header style --- src/components/Sidebar/index.jsx | 1 - src/components/Sidebar/style.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx index 876b256af0..9ae7d2a26a 100644 --- a/src/components/Sidebar/index.jsx +++ b/src/components/Sidebar/index.jsx @@ -111,7 +111,6 @@ const Sidebar = ({ onCancelSearch={handleFilterCancel} value={filter} /> -