feat: dark theme and UI improvements

src/app/__tests__/__snapshots__/index.test.tsx.snap

@@ -40,16 +40,15 @@ exports[`<App /> should render and match the snapshot 1`] = `
     />
   </Helmet>
   <Box
+    background="background-back"
     direction="row-responsive"
     fill={true}
   >
     <Navigation />
     <Box
       flex={true}
     >
-      <Styled(Main)
-        background="light-2"
-      >
+      <Styled(Main)>
         <Toolbar />
         <TransitionGroup
           childFactory={[Function]}

src/app/components/MnemonicGrid/index.tsx

@@ -21,7 +21,7 @@ let noSelect: React.CSSProperties = {
 
 function MnemonicWord(props: WordProp) {
   return (
-    <Box background="light-1" margin="xsmall" direction="row" pad="xsmall">
+    <Box background="background-contrast" margin="xsmall" direction="row" pad="xsmall">
       <Box pad={{ right: 'small' }}>
         <Text style={noSelect}>{props.id}.</Text>
       </Box>

src/app/components/Sidebar/index.tsx

@@ -19,14 +19,15 @@ import { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { NavLink, useHistory, useLocation } from 'react-router-dom'
+import { ThemeSwitcher } from '../ThemeSwitcher'
 
 interface SidebarButtonProps extends ButtonType {
   secure?: boolean
   route?: string
   label: string
 }
 
-const SidebarButton = ({ secure, icon, label, route, ...rest }: SidebarButtonProps) => {
+export const SidebarButton = ({ secure, icon, label, route, ...rest }: SidebarButtonProps) => {
   const status = useSelector(selectStatus)
   const size = useContext(ResponsiveContext)
   const location = useLocation()
@@ -41,7 +42,7 @@ const SidebarButton = ({ secure, icon, label, route, ...rest }: SidebarButtonPro
     <Box
       pad={{ vertical: 'small', right: 'medium' }}
       margin="none"
-      background={isActive ? 'brand' : 'neutral-2'}
+      background={isActive ? 'background-oasis-blue' : 'component-sidebar'}
       round={{ size: 'medium', corner: 'right' }}
     >
       {label}
@@ -52,7 +53,8 @@ const SidebarButton = ({ secure, icon, label, route, ...rest }: SidebarButtonPro
     <Tip content={isMediumSize ? tooltip : undefined} dropProps={{ align: { left: 'right' } }} plain={true}>
       <Box
         pad={{ vertical: 'small', left: isMediumSize ? 'none' : 'medium' }}
-        background={isActive ? 'brand' : undefined}
+        background={isActive ? 'background-oasis-blue' : undefined}
+        responsive={false}
       >
         <Button
           a11yTitle={label}
@@ -100,7 +102,7 @@ const SidebarHeader = (props: SidebarHeaderProps) => {
       direction="row"
       margin={{ bottom: size !== 'small' ? 'medium' : undefined }}
       pad="medium"
-      alignSelf={size !== 'medium' ? undefined : 'center'}
+      alignSelf={size === 'large' ? undefined : 'center'}
     >
       <Avatar src={src} size={sizeLogo[size]} />
       {size !== 'medium' && <Text>Oasis Wallet</Text>}
@@ -124,9 +126,10 @@ const SidebarFooter = (props: SidebarFooterProps) => {
   }
 
   return (
-    <Nav gap="medium">
+    <Nav gap="small">
+      <ThemeSwitcher />
       <SidebarButton icon={<Logout />} label={t('menu.closeWallet')} secure={true} onClick={() => logout()} />
-      <Box pad={{ horizontal: 'small' }} align="center">
+      <Box pad={{ horizontal: 'small', top: 'small' }} align="center">
         <Menu
           hoverIndicator={false}
           dropProps={{ align: { bottom: 'bottom', left: 'left' } }}
@@ -135,7 +138,7 @@ const SidebarFooter = (props: SidebarFooterProps) => {
             { label: 'English', onClick: () => setLanguage('en') },
           ]}
         >
-          <Box direction="row" round="4px" border={{ color: 'light-2' }}>
+          <Box direction="row" round="4px" border={{ size: '1px' }}>
             <Box pad="small">
               <Language />
             </Box>
@@ -189,11 +192,13 @@ export function Sidebar() {
 
   return (
     <GSidebar
-      background="neutral-2"
+      background="component-sidebar"
       header={<SidebarHeader size={size} />}
       footer={<SidebarFooter size={size} />}
       pad={{ left: 'none', right: 'none', vertical: 'medium' }}
+      gap="small"
       width={size === 'medium' ? undefined : '220px'}
+      border={{ side: 'end' }}
       // direction={size === 'small' ? 'row' : undefined}
       // height={size === 'small' ? '64px' : undefined}
     >
@@ -218,11 +223,11 @@ export function Navigation() {
   return (
     <>
       {size === 'small' && (
-        <Box background="neutral-2" height="64px" fill="horizontal" direction="row" justify="between">
+        <Box background="component-sidebar" height="64px" fill="horizontal" direction="row">
+          <Button onClick={() => toggleSidebar()} icon={<MenuIcon />} focusIndicator={false} />
           <Box justify="center">
             <SidebarHeader size="small" />
           </Box>
-          <Button onClick={() => toggleSidebar()} icon={<MenuIcon />} focusIndicator={false} />
         </Box>
       )}
       {size === 'small' && sidebarVisible && (

src/app/components/ThemeSwitcher/index.tsx

@@ -0,0 +1,41 @@
+/**
+ *
+ * ThemeSwitcher
+ *
+ */
+import { Moon, Sun } from 'grommet-icons/icons'
+import React, { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDispatch, useSelector } from 'react-redux'
+import { useThemeSlice } from 'styles/theme/slice'
+import { selectTheme } from 'styles/theme/slice/selectors'
+
+import { SidebarButton } from '../Sidebar'
+
+interface Props {}
+
+export const ThemeSwitcher = memo((props: Props) => {
+  const { t } = useTranslation()
+  const themeActions = useThemeSlice().actions
+  const theme = useSelector(selectTheme)
+  const dispatch = useDispatch()
+
+  const modes = {
+    light: {
+      icon: <Moon />,
+      label: t('theme.darkMode', 'Dark mode'),
+    },
+    dark: {
+      icon: <Sun />,
+      label: t('theme.ligthMode', 'Light mode'),
+    },
+  }
+
+  const currentMode = modes[theme]
+  const switchTheme = () => {
+    const newTheme = theme === 'dark' ? 'light' : 'dark'
+    dispatch(themeActions.changeTheme(newTheme))
+  }
+
+  return <SidebarButton icon={currentMode.icon} label={currentMode.label} onClick={switchTheme} />
+})

src/app/components/Toolbar/Features/AccountSelector/index.tsx

@@ -114,23 +114,28 @@ export const AccountSelector = memo((props: Props) => {
       onClickOutside={props.closeHandler}
       onEsc={props.closeHandler}
       animation="slide"
-      background="light-2"
+      background="background-front"
       modal
     >
-      <Box background="light-2" pad="small" margin="medium" width={size === 'small' ? 'auto' : '660px'}>
+      <Box pad={{ vertical: 'small' }} margin="medium" width={size === 'small' ? 'auto' : '700px'}>
         <Heading size="1" margin={{ vertical: 'small' }}>
           {t('toolbar.wallets.switchOtherWallet', 'Switch to another wallet')}
         </Heading>
         <Box
           gap="small"
-          pad={{ vertical: 'medium' }}
+          pad={{ vertical: 'medium', right: 'small' }}
           overflow={{ vertical: 'auto' }}
           height={{ max: '400px' }}
         >
           {accounts}
         </Box>
         <Box align="end" pad={{ top: 'medium' }}>
-          <Button primary style={{ borderRadius: '4px' }} label="Close" onClick={props.closeHandler} />
+          <Button
+            primary
+            style={{ borderRadius: '4px' }}
+            label={t('toolbar.wallets.close', 'Close')}
+            onClick={props.closeHandler}
+          />
         </Box>
       </Box>
     </Layer>

src/app/components/Toolbar/Features/AccountSelectorButton/index.tsx

@@ -5,16 +5,17 @@
  */
 import { ShortAddress } from 'app/components/ShortAddress'
 import { selectAddress } from 'app/state/wallet/selectors'
-import { Box, Button, Text } from 'grommet'
+import { Box, Button, ResponsiveContext, Text } from 'grommet'
 import { List } from 'grommet-icons/icons'
-import React, { memo, useState } from 'react'
+import React, { memo, useContext, useState } from 'react'
 import { useSelector } from 'react-redux'
 
 import { AccountSelector } from '../AccountSelector'
 
 interface Props {}
 
 export const AccountSelectorButton = memo((props: Props) => {
+  const size = useContext(ResponsiveContext)
   const [layerVisibility, setLayerVisibility] = useState(false)
   const address = useSelector(selectAddress)
 
@@ -23,9 +24,11 @@ export const AccountSelectorButton = memo((props: Props) => {
       <Button onClick={() => setLayerVisibility(true)}>
         <Box direction="row" gap="small" pad="small" responsive={false}>
           <List />
-          <Text>
-            <ShortAddress address={address} />
-          </Text>
+          {size !== 'small' && (
+            <Text>
+              <ShortAddress address={address} />
+            </Text>
+          )}
         </Box>
       </Button>
       {layerVisibility && <AccountSelector closeHandler={() => setLayerVisibility(false)} />}

src/app/components/Toolbar/Features/NetworkSelector/__tests__/__snapshots__/index.test.tsx.snap

@@ -109,18 +109,6 @@ exports[`<NetworkSelector  /> should match snapshot 1`] = `
   line-height: 24px;
 }
 
-@media only screen and (max-width:768px) {
-  .c1 {
-    padding: 6px;
-  }
-}
-
-@media only screen and (max-width:768px) {
-  .c3 {
-    width: 6px;
-  }
-}
-
 <button
   aria-label="Open Menu"
   class="c0"

src/app/components/Toolbar/Features/NetworkSelector/index.tsx

@@ -3,13 +3,15 @@
  * NetworkSelector
  *
  */
-import { Menu, Box, Text } from 'grommet'
+import { Menu, Box, Text, ResponsiveContext } from 'grommet'
 import { Network } from 'grommet-icons/icons'
-import React, { memo } from 'react'
+import React, { memo, useContext } from 'react'
 
 interface Props {}
 
 export const NetworkSelector = memo((props: Props) => {
+  const size = useContext(ResponsiveContext)
+
   return (
     <Menu
       dropProps={{
@@ -22,9 +24,9 @@ export const NetworkSelector = memo((props: Props) => {
       ]}
       fill
     >
-      <Box direction="row" gap="small" pad="small">
+      <Box direction="row" gap="small" pad="small" responsive={false}>
         <Network />
-        <Text>Testnet</Text>
+        {size !== 'small' && <Text>Testnet</Text>}
       </Box>
     </Menu>
   )

src/app/components/Toolbar/Features/SearchAddress/__tests__/__snapshots__/index.test.tsx.snap

@@ -46,7 +46,7 @@ exports[`<SearchAddress  /> should match snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: solid 2px #DADADA;
+  border: solid 1px rgba(0,0,0,0.33);
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: row;
@@ -62,10 +62,21 @@ exports[`<SearchAddress  /> should match snapshot 1`] = `
 }
 
 .c3 {
-  margin: 36px;
-  font-size: 18px;
-  line-height: 24px;
-  color: #DADADA;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  margin-left: 36px;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
 }
 
 .c6 {
@@ -176,7 +187,13 @@ exports[`<SearchAddress  /> should match snapshot 1`] = `
 
 @media only screen and (max-width:768px) {
   .c0 {
-    border: solid 2px #DADADA;
+    border: solid 1px rgba(0,0,0,0.33);
+  }
+}
+
+@media only screen and (max-width:768px) {
+  .c3 {
+    margin-left: 36px;
   }
 }
 
@@ -190,11 +207,12 @@ exports[`<SearchAddress  /> should match snapshot 1`] = `
       <div
         class="c2"
       >
-        <span
+        <div
           class="c3"
+          style="text-overflow: ellipsis;"
         >
           toolbar.search.placeholder
-        </span>
+        </div>
       </div>
       <div
         class="c4"

src/app/components/Toolbar/Features/SearchAddress/index.tsx

@@ -43,7 +43,7 @@ export const SearchAddress = memo((props: Props) => {
     <Form onSubmit={() => goToAddress()}>
       <Box
         round="30px"
-        border={{ size: '2px', color: 'light-4' }}
+        border={{ size: '1px' }}
         fill="vertical"
         justify="center"
         align="center"
@@ -60,9 +60,14 @@ export const SearchAddress = memo((props: Props) => {
             updatePayload(e.target.value)
           }}
           placeholder={
-            <Text margin="36px" color="light-4">
+            <Box
+              margin={{ left: '36px' }}
+              max-height="30px"
+              style={{ textOverflow: 'ellipsis' }}
+              flex="shrink"
+            >
               {t('toolbar.search.placeholder', 'Search for an account or a validator')}
-            </Text>
+            </Box>
           }
         />
         {searchPayload && <Button icon={<FormClose />} onClick={() => updatePayload('')} />}