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/app/components/nav/NavItemContent.tsx

@@ -5,6 +5,6 @@ import * as css from './styles.css';
 
 export const NavItemContent = as<'p', ComponentProps<typeof Text>>(
   ({ className, ...props }, ref) => (
-    <Text className={classNames(css.NavItemContent, className)} size="T400" {...props} ref={ref} />
+    <Text className={classNames(css.NavItemContent, className)} size="T300" {...props} ref={ref} />
   )
 );

src/app/components/nav/styles.css.ts

@@ -52,7 +52,7 @@ const NavItemBase = style({
   backgroundColor: Container,
   color: OnContainer,
   outline: 'none',
-  minHeight: toRem(38),
+  minHeight: toRem(36),
 
   selectors: {
     '&:hover, &:focus-visible': {
@@ -111,6 +111,7 @@ export const NavItemContent = style({
   flexGrow: 1,
   display: 'flex',
   alignItems: 'center',
+  fontWeight: config.fontWeight.W500,
 
   selectors: {
     '&:hover': {

src/app/components/page/style.css.ts

@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 import { DefaultReset, color, config, toRem } from 'folds';
 
 export const PageNav = style({
-  width: toRem(280),
+  width: toRem(256),
 });
 
 export const PageNavHeader = style({

src/app/components/unread-badge/UnreadBadge.tsx

@@ -22,9 +22,9 @@ export function UnreadBadge({ highlight, count }: UnreadBadgeProps) {
     <Badge
       variant={highlight ? 'Success' : 'Secondary'}
       size={count > 0 ? '400' : '200'}
-      fill={count > 0 ? 'Solid' : 'Soft'}
+      fill="Solid"
       radii="Pill"
-      outlined
+      outlined={false}
     >
       {count > 0 && (
         <Text as="span" size="L400">