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/atoms/button/Toggle.scss

@@ -22,8 +22,7 @@
     height: 16px;
     background-color: var(--tc-surface-low);
     border-radius: calc(var(--bo-radius) / 2);
-    transition: transform 200ms ease-in-out,
-      opacity 200ms ease-in-out;
+    transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
     opacity: 0.6;
   }
 
@@ -36,8 +35,8 @@
       @include dir.prop(transform, var(--ltr), var(--rtl));
 
       transform: translateX(calc(125%));
-      background-color: white;
+      background-color: var(--bg-surface);
       opacity: 1;
     }
   }
-}
+}

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">

src/app/features/room-nav/RoomNavCategoryButton.tsx

@@ -19,7 +19,7 @@ export const RoomNavCategoryButton = as<'button', { closed?: boolean }>(
       {...props}
       ref={ref}
     >
-      <Text size="O400" priority="400" truncate>
+      <Text size="O400" priority="300" truncate>
         {children}
       </Text>
     </Chip>

src/app/features/room/RoomView.tsx

@@ -22,7 +22,6 @@ import navigation from '../../../client/state/navigation';
 
 const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
   const { code } = evt;
-  console.log(code);
   if (evt.metaKey || evt.altKey || evt.ctrlKey) {
     return false;
   }
@@ -77,7 +76,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
         ) {
           return;
         }
-        if (shouldFocusMessageField(evt) || isKeyHotkey('mod+v')) {
+        if (shouldFocusMessageField(evt) || isKeyHotkey('mod+v', evt)) {
           ReactEditor.focus(editor);
         }
       },

src/app/pages/client/home/Home.tsx

@@ -62,6 +62,11 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
     requestClose();
   };
 
+  const handleJoinAddress = () => {
+    openJoinAlias();
+    requestClose();
+  };
+
   return (
     <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
       <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
@@ -76,6 +81,16 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
             Mark as Read
           </Text>
         </MenuItem>
+        <MenuItem
+          onClick={handleJoinAddress}
+          size="300"
+          radii="300"
+          after={<Icon size="100" src={Icons.Link} />}
+        >
+          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+            Join with Address
+          </Text>
+        </MenuItem>
       </Box>
     </Menu>
   );