WIP

src/address-book/DialogAddressSelect.scss

@@ -10,5 +10,9 @@
       @extend %dialog-label;
       display: block;
     }
+
+    .ant-select-selector .ant-select-selection-item {
+      max-width: 120px;
+    }
   }
 }

src/antd-overrides/select.scss

@@ -41,7 +41,6 @@
       }
 
       .ant-select-selection-item {
-        max-width: 120px;
         padding-top: 8px;
         font-weight: 500;
       }

src/common/SyncStatus.scss

@@ -1,4 +1,4 @@
-@import '../themify', '../vars';
+@import '../themify', '../vars', '../partial';
 
 .SyncStatus {
   font-size: $font-size-s;
@@ -34,6 +34,15 @@
       stroke: themed('text-color');
     }
   }
+
+  .network {
+    font-weight: 500;
+  }
+}
+
+.ant-popover .syncStatusLine > strong {
+  @extend %monospace;
+  font-weight: 700;
 }
 
 @keyframes spin {

src/common/SyncStatus.tsx

@@ -4,9 +4,12 @@ import SVG from 'react-inlinesvg'
 import {Popover} from 'antd'
 import {EmptyProps} from 'antd/lib/empty'
 import {SynchronizationStatus, LoadedState} from './wallet-state'
+import {BackendState} from './backend-state'
+import {SettingsState} from '../settings-state'
 import {useInterval} from './hook-utils'
 import {withStatusGuard, PropsWithWalletState} from './wallet-status-guard'
 import {Trans} from './Trans'
+import {displayNameOfNetwork} from '../config/type'
 import refreshIcon from '../assets/icons/refresh.svg'
 import './SyncStatus.scss'
 
@@ -30,17 +33,21 @@ export const SyncMessage = ({syncStatus}: SyncStatusProps): JSX.Element => {
 }
 
 export const SyncStatusContent = ({syncStatus}: SyncStatusProps): JSX.Element => {
+  const {
+    translation: {t},
+  } = SettingsState.useContainer()
+  const {networkName} = BackendState.useContainer()
   const classes = classnames('SyncStatus', syncStatus.mode)
   const popoverContent = (
     <span>
-      <div>
+      <div className="syncStatusLine">
         <Trans
           k={['wallet', 'syncStatus', 'currentBlock']}
           values={{blockNumber: syncStatus.currentBlock}}
         />
       </div>
       {syncStatus.mode === 'online' && (
-        <div>
+        <div className="syncStatusLine">
           <Trans
             k={['wallet', 'syncStatus', 'highestBlock']}
             values={{blockNumber: syncStatus.highestKnownBlock}}
@@ -57,6 +64,7 @@ export const SyncStatusContent = ({syncStatus}: SyncStatusProps): JSX.Element =>
           <SVG src={refreshIcon} className="svg" />
         </span>
       </Popover>
+      <div className="network">{displayNameOfNetwork(networkName, t)}</div>
     </span>
   )
 }

src/functions.scss

@@ -16,27 +16,27 @@ $height-breakpoint: 900px;
 
 @mixin header-margin-top() {
   @media only screen and (max-height: $height-breakpoint) {
-    margin-top: 4rem;
+    margin-top: 6rem;
   }
   @media only screen and (min-height: $height-breakpoint) {
-    margin-top: 10rem;
+    margin-top: 15vh;
   }
 }
 
 @mixin address-book-padding-top() {
   @media only screen and (max-height: $height-breakpoint) {
-    padding-top: 4rem;
+    padding-top: 6rem;
   }
   @media only screen and (min-height: $height-breakpoint) {
-    padding-top: 10rem;
+    padding-top: 15vh;
   }
 }
 
 @mixin sidebar-margin-bottom() {
   @media only screen and (max-height: $height-breakpoint) {
-    margin-bottom: 4rem;
+    margin-bottom: 6rem;
   }
   @media only screen and (min-height: $height-breakpoint) {
-    margin-bottom: 14rem;
+    margin-bottom: 15vh;
   }
 }

src/layout/Sidebar.scss

@@ -1,14 +1,21 @@
 @import '../themify', '../vars', '../partial', '../functions';
 
 .Sidebar {
+  $small-font-size: Min(0.8vw, $font-size-m);
+
+  $balance-font-size: 5vw;
+  $balance-line-height: 4vw;
+
+  $link-font-size: $title-font-size;
+  $link-line-height: 4vw;
   $link-letter-spacing: 0.96px;
 
   width: 38vw;
   min-width: $sidebar-width;
   padding: $app-padding-vertical $app-padding-horizontal;
 
   .logo-wrapper {
-    @include sidebar-margin-bottom;
+    margin-bottom: 1rem;
 
     .logo {
       display: inline-block;
@@ -48,10 +55,11 @@
   }
 
   .sync-status-wrapper {
-    position: absolute;
-    top: $app-padding-vertical;
-    margin-top: 9px;
-    margin-left: 10rem;
+    @include sidebar-margin-bottom;
+
+    .SyncStatus {
+      font-size: $small-font-size;
+    }
   }
 
   .navigation {
@@ -63,14 +71,14 @@
 
       display: block;
       z-index: $zindex-sidebar;
-      transform: scale(0.3);
+      transform: scale(0.4);
       transform-origin: center left;
       transition: transform 0.3s ease-out;
       opacity: 0.6;
-      font-size: 40px;
+      font-size: $link-font-size;
       font-weight: 600;
       letter-spacing: $link-letter-spacing;
-      line-height: 70px;
+      line-height: $link-line-height;
       text-decoration: none;
       cursor: pointer;
       user-select: none;
@@ -101,6 +109,24 @@
 
   .balance-wrapper {
     margin-top: 15vh;
+
+    .BalanceDisplay {
+      .balances {
+        .label {
+          font-size: $small-font-size;
+        }
+
+        .available-balance {
+          margin-left: -4px;
+          font-size: $balance-font-size;
+          line-height: $balance-line-height;
+        }
+
+        .suffix {
+          font-size: $small-font-size;
+        }
+      }
+    }
   }
 
   .footer {
@@ -112,7 +138,7 @@
       @extend %disable-focus-outline;
 
       margin-right: 1.5rem;
-      font-size: $font-size-m;
+      font-size: $small-font-size;
       cursor: pointer;
 
       &:hover {

src/partial.scss

@@ -66,12 +66,14 @@
 }
 
 %title {
+  $font-size: Min(26px, #{$title-font-size}); // Min, because min() is a sass builtin
   margin-bottom: 2rem;
   margin-left: -3rem;
   overflow: hidden;
-  font-size: 26px;
+  font-size: $font-size;
   font-weight: 500;
   letter-spacing: $letter-spacing-small;
+  line-height: $font-size;
 }
 
 %dialog-info-link {

src/routes-config.ts

@@ -27,7 +27,7 @@ export type Menu = {
 
 export const MENU: Menu = {
   WALLETS: {
-    title: ['title', 'wallets'],
+    title: ['title', 'transactions'],
     route: 'WALLETS',
     icon: menuWalletsIcon,
   },

src/translations/en/renderer.json

@@ -2,7 +2,7 @@
   "title": {
     "mantis": "Mantis",
     "mantisWallet": "Mantis Wallet",
-    "wallets": "Wallet",
+    "transactions": "Transactions",
     "addressBook": "Address Book",
     "tokens": "Tokens",
     "settings": "Settings"
@@ -154,8 +154,9 @@
       "fullySynced": "Fully Synced",
       "syncingBlocks": "Syncing Blocks {{percentage}}%",
       "syncingState": "Syncing State {{percentage}}%",
-      "currentBlock": "Current block: {{blockNumber}}",
-      "highestBlock": "Highest block: {{blockNumber}}"
+      "currentBlock": "Current block: <strong>{{blockNumber}}</strong>",
+      "highestBlock": "Highest block: <strong>{{blockNumber}}</strong>",
+      "networkName": "Network: <strong>{{networkName}}</strong>"
     },
     "transactionStatus": {
       "pending": "Pending",

src/vars.scss

@@ -12,6 +12,8 @@ $font-size-l: 16px;
 $font-size-xl: 18px;
 $font-size-xxl: 20px;
 
+$title-font-size: 2vw;
+
 $font-size-root: $font-size-l;
 $font-size-input: $font-size-s;
 $font-size-title: $font-size-xxl;

src/wallets/BalanceDisplay.scss

@@ -5,19 +5,19 @@
 
   .balances {
     .label {
-      font-size: $font-size-m;
+      font-size: 0.8vw;
       font-weight: 600;
     }
 
     .available-balance {
       @extend %monospace;
       margin-left: -4px;
-      font-size: 80px;
-      line-height: 70px;
+      font-size: 5vw;
+      line-height: 4vw;
     }
 
     .suffix {
-      font-size: $font-size-m;
+      font-size: 0.8vw;
       font-weight: 600;
     }
   }