From c243b6104c7c9ca98ff0b5b8bfdf3c32a98f5818 Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Sun, 21 Jul 2024 11:13:33 +0530 Subject: [PATCH] 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 | 7 +- src/app/components/nav/NavItemContent.tsx | 2 +- src/app/components/nav/styles.css.ts | 3 +- src/app/components/page/style.css.ts | 2 +- .../components/unread-badge/UnreadBadge.tsx | 4 +- .../room-nav/RoomNavCategoryButton.tsx | 2 +- src/app/features/room/RoomView.tsx | 3 +- src/app/pages/client/home/Home.tsx | 15 ++ src/colors.css.ts | 162 +++++++++--------- src/index.scss | 142 +++++++++------ 10 files changed, 197 insertions(+), 145 deletions(-) diff --git a/src/app/atoms/button/Toggle.scss b/src/app/atoms/button/Toggle.scss index bc6d8a9..ef21f6c 100644 --- a/src/app/atoms/button/Toggle.scss +++ b/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; } } -} \ No newline at end of file +} diff --git a/src/app/components/nav/NavItemContent.tsx b/src/app/components/nav/NavItemContent.tsx index dcd0edf..d6a5d13 100644 --- a/src/app/components/nav/NavItemContent.tsx +++ b/src/app/components/nav/NavItemContent.tsx @@ -5,6 +5,6 @@ import * as css from './styles.css'; export const NavItemContent = as<'p', ComponentProps>( ({ className, ...props }, ref) => ( - + ) ); diff --git a/src/app/components/nav/styles.css.ts b/src/app/components/nav/styles.css.ts index 06710dd..48b2a4d 100644 --- a/src/app/components/nav/styles.css.ts +++ b/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': { diff --git a/src/app/components/page/style.css.ts b/src/app/components/page/style.css.ts index 559d366..4807a22 100644 --- a/src/app/components/page/style.css.ts +++ b/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({ diff --git a/src/app/components/unread-badge/UnreadBadge.tsx b/src/app/components/unread-badge/UnreadBadge.tsx index f5dc09f..f8bfefa 100644 --- a/src/app/components/unread-badge/UnreadBadge.tsx +++ b/src/app/components/unread-badge/UnreadBadge.tsx @@ -22,9 +22,9 @@ export function UnreadBadge({ highlight, count }: UnreadBadgeProps) { 0 ? '400' : '200'} - fill={count > 0 ? 'Solid' : 'Soft'} + fill="Solid" radii="Pill" - outlined + outlined={false} > {count > 0 && ( diff --git a/src/app/features/room-nav/RoomNavCategoryButton.tsx b/src/app/features/room-nav/RoomNavCategoryButton.tsx index 7acbbe2..3af8aea 100644 --- a/src/app/features/room-nav/RoomNavCategoryButton.tsx +++ b/src/app/features/room-nav/RoomNavCategoryButton.tsx @@ -19,7 +19,7 @@ export const RoomNavCategoryButton = as<'button', { closed?: boolean }>( {...props} ref={ref} > - + {children} diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx index 84162fc..3eabd52 100644 --- a/src/app/features/room/RoomView.tsx +++ b/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); } }, diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx index 76034cf..a06e108 100644 --- a/src/app/pages/client/home/Home.tsx +++ b/src/app/pages/client/home/Home.tsx @@ -62,6 +62,11 @@ const HomeMenu = forwardRef(({ requestClose }, re requestClose(); }; + const handleJoinAddress = () => { + openJoinAlias(); + requestClose(); + }; + return ( @@ -76,6 +81,16 @@ const HomeMenu = forwardRef(({ requestClose }, re Mark as Read + } + > + + Join with Address + + ); diff --git a/src/colors.css.ts b/src/colors.css.ts index 9b854be..c4f122d 100644 --- a/src/colors.css.ts +++ b/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: { diff --git a/src/index.scss b/src/index.scss index 5290035..5903858 100644 --- a/src/index.scss +++ b/src/index.scss @@ -19,25 +19,25 @@ --bg-surface-active: rgba(0, 0, 0, 5%); --bg-surface-border: rgba(0, 0, 0, 6%); - --bg-primary: rgb(83, 110, 234); - --bg-primary-hover: rgba(83, 110, 234, 80%); - --bg-primary-active: rgba(83, 110, 234, 70%); - --bg-primary-border: rgba(83, 110, 234, 38%); + --bg-primary: rgb(18, 69, 168); + --bg-primary-hover: rgba(18, 69, 168, 80%); + --bg-primary-active: rgba(18, 69, 168, 70%); + --bg-primary-border: rgba(18, 69, 168, 38%); - --bg-positive: rgb(69, 184, 59); - --bg-positive-hover: rgba(69, 184, 59, 8%); - --bg-positive-active: rgba(69, 184, 59, 15%); - --bg-positive-border: rgba(69, 184, 59, 40%); + --bg-positive: rgb(1, 115, 67); + --bg-positive-hover: rgba(1, 115, 67, 8%); + --bg-positive-active: rgba(1, 115, 67, 15%); + --bg-positive-border: rgba(1, 115, 67, 40%); - --bg-caution: rgb(255, 179, 0); - --bg-caution-hover: rgba(255, 179, 0, 8%); - --bg-caution-active: rgba(255, 179, 0, 15%); - --bg-caution-border: rgba(255, 179, 0, 40%); + --bg-caution: rgb(134, 67, 0); + --bg-caution-hover: rgba(134, 67, 0, 8%); + --bg-caution-active: rgba(134, 67, 0, 15%); + --bg-caution-border: rgba(134, 67, 0, 40%); - --bg-danger: rgb(240, 71, 71); - --bg-danger-hover: rgba(240, 71, 71, 5%); - --bg-danger-active: rgba(240, 71, 71, 10%); - --bg-danger-border: rgba(240, 71, 71, 20%); + --bg-danger: rgb(157, 15, 15); + --bg-danger-hover: rgba(157, 15, 15, 5%); + --bg-danger-active: rgba(157, 15, 15, 10%); + --bg-danger-border: rgba(157, 15, 15, 20%); --bg-tooltip: #353535; --bg-badge: #989898; @@ -56,16 +56,16 @@ --tc-primary-low: rgba(255, 255, 255, 40%); --tc-positive-high: var(--bg-positive); - --tc-positive-normal: rgb(69, 184, 59, 80%); - --tc-positive-low: rgb(69, 184, 59, 60%); + --tc-positive-normal: rgb(1, 115, 67, 80%); + --tc-positive-low: rgb(1, 115, 67, 60%); --tc-caution-high: var(--bg-caution); - --tc-caution-normal: rgb(255, 179, 0, 80%); - --tc-caution-low: rgb(255, 179, 0, 60%); + --tc-caution-normal: rgb(134, 67, 0, 80%); + --tc-caution-low: rgb(134, 67, 0, 60%); --tc-danger-high: var(--bg-danger); - --tc-danger-normal: rgba(240, 71, 71, 88%); - --tc-danger-low: rgba(240, 71, 71, 60%); + --tc-danger-normal: rgba(157, 15, 15, 88%); + --tc-danger-low: rgba(157, 15, 15, 60%); --tc-code: #e62498; --tc-link: hsl(213deg 100% 45%); @@ -78,12 +78,12 @@ --ic-surface-low: #7c7c7c; --ic-primary-high: #ffffff; --ic-primary-normal: #ffffff; - --ic-positive-high: rgba(69, 184, 59); - --ic-positive-normal: rgba(69, 184, 59, 80%); - --ic-caution-high: rgba(255, 179, 0); - --ic-caution-normal: rgba(255, 179, 0, 80%); - --ic-danger-high: rgba(240, 71, 71); - --ic-danger-normal: rgba(240, 71, 71, 0.7); + --ic-positive-high: rgba(1, 115, 67); + --ic-positive-normal: rgba(1, 115, 67, 80%); + --ic-caution-high: rgba(134, 67, 0); + --ic-caution-normal: rgba(134, 67, 0, 80%); + --ic-danger-high: rgba(157, 15, 15); + --ic-danger-normal: rgba(157, 15, 15, 0.7); /* user mxid colors */ --mx-uc-1: hsl(208, 100%, 45%); @@ -210,20 +210,35 @@ .dark-theme, .butter-theme { /* background color | --bg-[background type]: value */ - --bg-surface: #1f2326; - --bg-surface-transparent: #1f232600; - --bg-surface-low: #15171a; - --bg-surface-low-transparent: #15171a00; - --bg-surface-extra-low: #15171a; - --bg-surface-extra-low-transparent: #15171a00; - --bg-surface-hover: #1f2326; - --bg-surface-active: #2a2e33; - --bg-surface-border: rgba(0, 0, 0, 20%); + --bg-surface: #262626; + --bg-surface-transparent: #26262600; + --bg-surface-low: #1a1a1a; + --bg-surface-low-transparent: #1a1a1a00; + --bg-surface-extra-low: #1a1a1a; + --bg-surface-extra-low-transparent: #1a1a1a00; + --bg-surface-hover: #333333; + --bg-surface-active: #404040; + --bg-surface-border: #404040; - --bg-primary: rgb(42, 98, 166); - --bg-primary-hover: rgba(42, 98, 166, 80%); - --bg-primary-active: rgba(42, 98, 166, 70%); - --bg-primary-border: rgba(42, 98, 166, 38%); + --bg-primary: rgb(189, 182, 236); + --bg-primary-hover: rgba(189, 182, 236, 0.8); + --bg-primary-active: rgba(189, 182, 236, 70%); + --bg-primary-border: rgba(189, 182, 236, 38%); + + --bg-positive: rgb(133, 224, 186); + --bg-positive-hover: rgba(133, 224, 186, 8%); + --bg-positive-active: rgba(133, 224, 186, 15%); + --bg-positive-border: rgba(133, 224, 186, 40%); + + --bg-caution: rgb(227, 186, 145); + --bg-caution-hover: rgba(227, 186, 145, 8%); + --bg-caution-active: rgba(227, 186, 145, 15%); + --bg-caution-border: rgba(227, 186, 145, 40%); + + --bg-danger: rgb(230, 157, 157); + --bg-danger-hover: rgba(230, 157, 157, 5%); + --bg-danger-active: rgba(230, 157, 157, 10%); + --bg-danger-border: rgba(230, 157, 157, 20%); --bg-tooltip: #000; --bg-badge: hsl(0, 0%, 75%); @@ -237,9 +252,21 @@ --tc-surface-normal-low: rgba(255, 255, 255, 60%); --tc-surface-low: rgba(255, 255, 255, 58%); - --tc-primary-high: #ffffff; - --tc-primary-normal: rgba(255, 255, 255, 0.68); - --tc-primary-low: rgba(255, 255, 255, 0.4); + --tc-primary-high: rgb(44, 40, 67); + --tc-primary-normal: rgba(44, 40, 67, 0.68); + --tc-primary-low: rgba(44, 40, 67, 0.4); + + --tc-positive-high: var(--bg-positive); + --tc-positive-normal: rgb(133, 224, 186, 80%); + --tc-positive-low: rgb(133, 224, 186, 60%); + + --tc-caution-high: var(--bg-caution); + --tc-caution-normal: rgb(227, 186, 145, 80%); + --tc-caution-low: rgb(227, 186, 145, 60%); + + --tc-danger-high: var(--bg-danger); + --tc-danger-normal: rgba(230, 157, 157, 88%); + --tc-danger-low: rgba(230, 157, 157, 60%); --tc-code: #e565b1; --tc-link: hsl(213deg 100% 80%); @@ -249,7 +276,15 @@ --ic-surface-high: rgb(255, 255, 255); --ic-surface-normal: rgba(255, 255, 255, 84%); --ic-surface-low: rgba(255, 255, 255, 64%); - --ic-primary-normal: #ffffff; + --ic-primary-high: var(--tc-primary-high); + --ic-primary-normal: var(--tc-primary-high); + --ic-primary-low: var(--tc-primary-high); + --ic-positive-high: rgba(133, 224, 186); + --ic-positive-normal: rgba(133, 224, 186, 80%); + --ic-caution-high: rgba(227, 186, 145); + --ic-caution-normal: rgba(227, 186, 145, 80%); + --ic-danger-high: rgba(230, 157, 157); + --ic-danger-normal: rgba(230, 157, 157, 0.7); --mx-uc-1: hsl(208, 100%, 75%); --mx-uc-2: hsl(301, 100%, 80%); @@ -296,17 +331,20 @@ .butter-theme { /* background color | --bg-[background type]: value */ - --bg-surface: hsl(64, 6%, 14%); - --bg-surface-transparent: hsla(64, 6%, 14%, 0); - --bg-surface-low: hsl(64, 6%, 10%); - --bg-surface-low-transparent: hsla(64, 6%, 10%, 0); - --bg-surface-extra-low: hsl(64, 6%, 8%); - --bg-surface-extra-low-transparent: hsla(64, 6%, 8%, 0); + --bg-surface: #262621; + --bg-surface-transparent: #26262100; + --bg-surface-low: #1a1916; + --bg-surface-low-transparent: #1a191600; + --bg-surface-extra-low: #1a1916; + --bg-surface-extra-low-transparent: #1a1916; + --bg-surface-hover: #33322c; + --bg-surface-active: #403f38; + --bg-surface-border: #403f38; --bg-badge: #c4c1ab; /* text color | --tc-[background type]-[priority]: value */ - --tc-surface-high: rgb(255, 251, 222, 94%); + --tc-surface-high: rgb(255, 251, 222); --tc-surface-normal: rgba(255, 251, 222, 94%); --tc-surface-normal-low: rgba(255, 251, 222, 60%); --tc-surface-low: rgba(255, 251, 222, 58%);