supnas/cinny
2
1
Fork 0
Code Issues 3 Pull requests Activity

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

Browse source 
* 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
This commit is contained in:
Ajay Bura 2024-07-21 11:13:33 +05:30 committed by GitHub
parent a1a822c5b6
commit c243b6104c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 197 additions and 145 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/app/atoms/button/Toggle.scss
View file

@ -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;
}
}
}
}

2
src/app/components/nav/NavItemContent.tsx
View file

@ -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} />
)
);

3
src/app/components/nav/styles.css.ts
View file

@ -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': {

2
src/app/components/page/style.css.ts
View file

@ -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({

4
src/app/components/unread-badge/UnreadBadge.tsx
View file

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

2
src/app/features/room-nav/RoomNavCategoryButton.tsx
View file

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

3
src/app/features/room/RoomView.tsx
View file

@ -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);
}
},

15
src/app/pages/client/home/Home.tsx
View file

@ -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>
);

162
src/colors.css.ts
View file

@ -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: {

142
src/index.scss
View file

@ -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%);