Update color theme to match with new design (#1821)

* update silver theme

* update unread badge style to look more slim

* update nav item style to look less sharp

* fix type focus message input typo

* decrease navigation drawer width to bring main chat layout to little more center

* increase sidebar width to make it less congested

* fix sidebar item style

* decrease dark theme contrast

* improve dark theme

* revert sidebar width change

* add join with address option in home context menu

* match legacy theme with latest themes

src/colors.css.ts

@@ -3,92 +3,92 @@ import { color } from 'folds';
 
 export const silverTheme = createTheme(color, {
   Background: {
-    Container: '#E6E6E6',
-    ContainerHover: '#DADADA',
-    ContainerActive: '#CECECE',
-    ContainerLine: '#C2C2C2',
+    Container: '#DEDEDE',
+    ContainerHover: '#D3D3D3',
+    ContainerActive: '#C7C7C7',
+    ContainerLine: '#BBBBBB',
     OnContainer: '#000000',
   },
 
   Surface: {
-    Container: '#F2F2F2',
-    ContainerHover: '#E6E6E6',
-    ContainerActive: '#DADADA',
-    ContainerLine: '#CECECE',
+    Container: '#EAEAEA',
+    ContainerHover: '#DEDEDE',
+    ContainerActive: '#D3D3D3',
+    ContainerLine: '#C7C7C7',
     OnContainer: '#000000',
   },
 
   SurfaceVariant: {
-    Container: '#E6E6E6',
-    ContainerHover: '#DADADA',
-    ContainerActive: '#CECECE',
-    ContainerLine: '#C2C2C2',
+    Container: '#DEDEDE',
+    ContainerHover: '#D3D3D3',
+    ContainerActive: '#C7C7C7',
+    ContainerLine: '#BBBBBB',
     OnContainer: '#000000',
   },
 
   Primary: {
-    Main: '#1858D5',
-    MainHover: '#164FC0',
-    MainActive: '#144BB5',
-    MainLine: '#1346AA',
+    Main: '#1245A8',
+    MainHover: '#103E97',
+    MainActive: '#0F3B8F',
+    MainLine: '#0E3786',
     OnMain: '#FFFFFF',
-    Container: '#E8EEFB',
-    ContainerHover: '#DCE6F9',
-    ContainerActive: '#D1DEF7',
-    ContainerLine: '#C5D5F5',
-    OnContainer: '#113E95',
+    Container: '#C4D0E9',
+    ContainerHover: '#B8C7E5',
+    ContainerActive: '#ACBEE1',
+    ContainerLine: '#A0B5DC',
+    OnContainer: '#0D3076',
   },
 
   Secondary: {
     Main: '#000000',
-    MainHover: '#0C0C0C',
-    MainActive: '#181818',
-    MainLine: '#303030',
-    OnMain: '#F2F2F2',
-    Container: '#CECECE',
-    ContainerHover: '#C2C2C2',
-    ContainerActive: '#B5B5B5',
-    ContainerLine: '#A9A9A9',
+    MainHover: '#171717',
+    MainActive: '#232323',
+    MainLine: '#2F2F2F',
+    OnMain: '#EAEAEA',
+    Container: '#C7C7C7',
+    ContainerHover: '#BBBBBB',
+    ContainerActive: '#AFAFAF',
+    ContainerLine: '#A4A4A4',
     OnContainer: '#0C0C0C',
   },
 
   Success: {
-    Main: '#00844C',
-    MainHover: '#007744',
-    MainActive: '#007041',
-    MainLine: '#006A3D',
+    Main: '#017343',
+    MainHover: '#01683C',
+    MainActive: '#016239',
+    MainLine: '#015C36',
     OnMain: '#FFFFFF',
-    Container: '#E5F3ED',
-    ContainerHover: '#D9EDE4',
-    ContainerActive: '#CCE6DB',
-    ContainerLine: '#BFE0D2',
-    OnContainer: '#005C35',
+    Container: '#BFDCD0',
+    ContainerHover: '#B3D5C7',
+    ContainerActive: '#A6CEBD',
+    ContainerLine: '#99C7B4',
+    OnContainer: '#01512F',
   },
 
   Warning: {
-    Main: '#A85400',
-    MainHover: '#974C00',
-    MainActive: '#8F4700',
-    MainLine: '#864300',
+    Main: '#864300',
+    MainHover: '#793C00',
+    MainActive: '#723900',
+    MainLine: '#6B3600',
     OnMain: '#FFFFFF',
-    Container: '#F6EEE5',
-    ContainerHover: '#F2E5D9',
-    ContainerActive: '#EEDDCC',
-    ContainerLine: '#E9D4BF',
-    OnContainer: '#763B00',
+    Container: '#E1D0BF',
+    ContainerHover: '#DBC7B2',
+    ContainerActive: '#D5BDA6',
+    ContainerLine: '#CFB499',
+    OnContainer: '#5E2F00',
   },
 
   Critical: {
-    Main: '#C40E0E',
-    MainHover: '#AC0909',
-    MainActive: '#A60C0C',
-    MainLine: '#9C0B0B',
+    Main: '#9D0F0F',
+    MainHover: '#8D0E0E',
+    MainActive: '#850D0D',
+    MainLine: '#7E0C0C',
     OnMain: '#FFFFFF',
-    Container: '#F9E7E7',
-    ContainerHover: '#F6DBDB',
-    ContainerActive: '#F3CFCF',
-    ContainerLine: '#F0C3C3',
-    OnContainer: '#890A0A',
+    Container: '#E7C3C3',
+    ContainerHover: '#E2B7B7',
+    ContainerActive: '#DDABAB',
+    ContainerLine: '#D89F9F',
+    OnContainer: '#6E0B0B',
   },
 
   Other: {
@@ -100,27 +100,27 @@ export const silverTheme = createTheme(color, {
 
 const darkThemeData = {
   Background: {
-    Container: '#15171A',
-    ContainerHover: '#1F2326',
-    ContainerActive: '#2A2E33',
-    ContainerLine: '#343A40',
-    OnContainer: '#ffffff',
+    Container: '#1A1A1A',
+    ContainerHover: '#262626',
+    ContainerActive: '#333333',
+    ContainerLine: '#404040',
+    OnContainer: '#F2F2F2',
   },
 
   Surface: {
-    Container: '#1F2326',
-    ContainerHover: '#2A2E33',
-    ContainerActive: '#343A40',
-    ContainerLine: '#3F464D',
-    OnContainer: '#ffffff',
+    Container: '#262626',
+    ContainerHover: '#333333',
+    ContainerActive: '#404040',
+    ContainerLine: '#4D4D4D',
+    OnContainer: '#F2F2F2',
   },
 
   SurfaceVariant: {
-    Container: '#2A2E33',
-    ContainerHover: '#343A40',
-    ContainerActive: '#3F464D',
-    ContainerLine: '#495159',
-    OnContainer: '#ffffff',
+    Container: '#333333',
+    ContainerHover: '#404040',
+    ContainerActive: '#4D4D4D',
+    ContainerLine: '#595959',
+    OnContainer: '#F2F2F2',
   },
 
   Primary: {
@@ -137,16 +137,16 @@ const darkThemeData = {
   },
 
   Secondary: {
-    Main: '#D1E8FF',
-    MainHover: '#BCD1E5',
-    MainActive: '#B2C5D9',
-    MainLine: '#A7BACC',
-    OnMain: '#15171A',
-    Container: '#343A40',
-    ContainerHover: '#3F464D',
-    ContainerActive: '#495159',
-    ContainerLine: '#545D66',
-    OnContainer: '#C7DCF2',
+    Main: '#FFFFFF',
+    MainHover: '#E5E5E5',
+    MainActive: '#D9D9D9',
+    MainLine: '#CCCCCC',
+    OnMain: '#1A1A1A',
+    Container: '#404040',
+    ContainerHover: '#4D4D4D',
+    ContainerActive: '#595959',
+    ContainerLine: '#666666',
+    OnContainer: '#F2F2F2',
   },
 
   Success: {