[ETCM-384] Implement new layout

src/App.scss

@@ -4,9 +4,25 @@
   display: grid;
   grid-template-columns: auto 1fr;
   overflow: hidden;
+  transition: background-position 0.3s;
+  background-repeat: no-repeat;
+  background-position: 0 top;
+  background-size: contain;
+
+  &.wallets {
+    background-position: 125% top;
+  }
+
+  &.address_book {
+    background-position: 135% top;
+  }
+
+  &.settings {
+    background-position: 145% top;
+  }
 
   @include themify($themes) {
-    background-color: themed('component-background');
+    background-image: themed('bg-moving');
     color: themed('text-color');
   }
 }

src/App.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import classnames from 'classnames'
 import {createPersistentStore} from './common/store'
 import {WalletState} from './common/wallet-state'
 import {BackendState} from './common/backend-state'
@@ -8,7 +9,6 @@ import {TokensState} from './tokens/tokens-state'
 import {Router} from './layout/Router'
 import {Sidebar} from './layout/Sidebar'
 import {SplashScreen} from './SplashScreen'
-import {MANTIS_WALLET_VERSION} from './shared/version'
 import {config} from './config/renderer'
 import {createWeb3} from './web3'
 import './App.scss'
@@ -18,16 +18,19 @@ const store = createPersistentStore()
 
 const AppContent: React.FC = () => {
   const {isBackendRunning} = BackendState.useContainer()
+  const {
+    currentRoute: {menu},
+  } = RouterState.useContainer()
+
   return isBackendRunning ? (
-    <div className="App">
-      <RouterState.Provider>
-        <WalletState.Provider initialState={{web3, store}}>
-          <TokensState.Provider initialState={{web3, store}}>
-            <Sidebar version={MANTIS_WALLET_VERSION} />
-            <Router />
-          </TokensState.Provider>
-        </WalletState.Provider>
-      </RouterState.Provider>
+    <div className={classnames('App', menu.toLowerCase())}>
+      <WalletState.Provider initialState={{web3, store}}>
+        <TokensState.Provider initialState={{web3, store}}>
+          <Sidebar />
+          {/* FIXME: version={MANTIS_WALLET_VERSION} /> */}
+          <Router />
+        </TokensState.Provider>
+      </WalletState.Provider>
     </div>
   ) : (
     <SplashScreen />
@@ -38,7 +41,9 @@ const App: React.FC = () => {
   return (
     <BackendState.Provider initialState={{web3, store}}>
       <SettingsState.Provider initialState={{store}}>
-        <AppContent />
+        <RouterState.Provider>
+          <AppContent />
+        </RouterState.Provider>
       </SettingsState.Provider>
     </BackendState.Provider>
   )

src/Settings.scss

@@ -1,6 +1,8 @@
 @import './partial', './themify', './vars';
 
 .Settings {
+  margin-top: $router-top-margin;
+
   .main-title {
     margin-bottom: 3rem;
   }

src/Settings.tsx

@@ -5,7 +5,7 @@ import {EmptyProps} from 'antd/lib/empty'
 import {SettingsState, TIME_FORMATS, DATE_FORMATS, TimeFormat} from './settings-state'
 import {WalletState, canResetWallet} from './common/wallet-state'
 import {fillActionHandlers} from './common/util'
-import {HeaderWithSyncStatus} from './common/HeaderWithSyncStatus'
+import {Header} from './common/Header'
 import {DialogDropdown} from './common/dialog/DialogDropdown'
 import {ExportPrivateKeyModal} from './wallets/modals/ExportPrivateKey'
 import {Trans} from './common/Trans'
@@ -31,9 +31,9 @@ const LANGUAGES_DISPLAYED: Record<Language, string> = {
 const SettingsWrapper = ({children}: PropsWithChildren<EmptyProps>): JSX.Element => {
   return (
     <div className="Settings">
-      <HeaderWithSyncStatus>
+      <Header>
         <Trans k={['title', 'settings']} />
-      </HeaderWithSyncStatus>
+      </Header>
       <div className="content">{children}</div>
     </div>
   )

src/address-book/AddressBook.scss

@@ -1,6 +1,8 @@
 @import '../partial', '../vars';
 
 .AddressBook {
+  margin-top: $router-top-margin;
+
   .toolbar {
     display: grid;
     grid-template-columns: auto 1fr auto;

src/common/HeaderWithSyncStatus.scss → src/common/Header.scss

@@ -1,6 +1,6 @@
 @import '../partial', '../vars';
 
-.HeaderWithSyncStatus {
+.Header {
   .external-link {
     margin: 0 0 0 1px;
     font-size: $font-size-s;

src/common/HeaderWithSyncStatus.tsx → src/common/Header.tsx

@@ -1,23 +1,16 @@
 import React, {PropsWithChildren} from 'react'
-import {SyncStatus} from './SyncStatus'
 import {Link} from './Link'
-import './HeaderWithSyncStatus.scss'
+import './Header.scss'
 
-interface HeaderWithSyncStatusProps {
+interface HeaderProps {
   externalLink?: {
     text: string
     url: string
   }
 }
 
-export const HeaderWithSyncStatus = ({
-  externalLink,
-  children,
-}: PropsWithChildren<HeaderWithSyncStatusProps>): JSX.Element => (
-  <div className="HeaderWithSyncStatus">
-    <div className="right">
-      <SyncStatus />
-    </div>
+export const Header = ({externalLink, children}: PropsWithChildren<HeaderProps>): JSX.Element => (
+  <div className="Header">
     <div className="main-title">
       {children}
       {externalLink && (

src/common/MantisModal.scss

@@ -1,12 +1,6 @@
 @import '../themify', '../vars';
 
 .MantisModal.ant-modal {
-  margin-left: $sidebar-width;
-
-  @media screen and #{$sidebar-collapse-query} {
-    margin-left: $sidebar-collapsed-width;
-  }
-
   @include themify($themes) {
     color: themed('text-color');
   }

src/common/SyncStatus.tsx

@@ -52,7 +52,7 @@ export const SyncStatusContent = ({syncStatus}: SyncStatusProps): JSX.Element =>
   )
   return (
     <span className={classes}>
-      <Popover content={popoverContent} placement="left">
+      <Popover content={popoverContent} placement="bottom">
         <span>
           <SyncMessage syncStatus={syncStatus} />
           <SVG src={refreshIcon} className="svg" />

src/index.scss

@@ -5,7 +5,7 @@
 // fonts
 //
 
-@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Montserrat:wght@300;400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Montserrat:wght@300;400;600;700&display=swap');
 
 //
 // elements
@@ -19,6 +19,7 @@
 
 body {
   margin: 0;
+  overflow: hidden;
   font-family: $font-family;
   font-size: $font-size-root;
   text-rendering: optimizeLegibility; // could cause performance problems on mobile
@@ -57,7 +58,14 @@ h6 {
 }
 
 div#root {
+  @include themify($themes) {
+    background-image: themed('bg-base');
+  }
+
   min-height: 100vh;
+  margin: 0;
+  background-position: left top;
+  background-size: cover;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -319,14 +327,6 @@ input::placeholder {
     opacity: $secondary-opacity;
   }
 
-  .ant-message {
-    padding-left: $sidebar-width;
-
-    @media screen and #{$sidebar-collapse-query} {
-      padding-left: $sidebar-collapsed-width;
-    }
-  }
-
   .ant-form-item {
     margin-bottom: 0;
   }

src/layout/Router.scss

@@ -1,6 +1,8 @@
+@import '../vars';
+
 .Router {
   position: relative;
   height: 100vh;
-  padding: 36px;
+  padding: $app-padding-vertical $app-padding-horizontal;
   overflow: auto;
 }