rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add css variable for preferences background color [skip e2e]

Browse Source
This commit is contained in:
Aman Harwara
2024-04-11 13:20:13 +05:30
parent 432ebbdfbe
commit d983d6854c
4 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/src/components/assets/com.standardnotes.theme-proton/index.css
View File

@@ -40,6 +40,7 @@
--sn-stylekit-accessory-tint-color-3: var(--warning); --sn-stylekit-accessory-tint-color-3: var(--warning);
--sn-stylekit-accessory-tint-color-5: var(--success); --sn-stylekit-accessory-tint-color-5: var(--success);
--preferences-background-color: var(--background-strong);
--preferences-navigation-selected-background-color: var(--background-norm); --preferences-navigation-selected-background-color: var(--background-norm);
} }

5
packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx
View File

@@ -9,7 +9,10 @@ import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
const PreferencesCanvas: FunctionComponent<PreferencesProps & { menu: PreferencesSessionController }> = (props) => ( const PreferencesCanvas: FunctionComponent<PreferencesProps & { menu: PreferencesSessionController }> = (props) => (
<div className="flex min-h-0 flex-grow flex-col md:flex-row md:justify-between"> <div className="flex min-h-0 flex-grow flex-col md:flex-row md:justify-between">
<PreferencesMenuView menu={props.menu} /> <PreferencesMenuView menu={props.menu} />
<div className="min-h-0 flex-grow overflow-auto bg-contrast" tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}> <div
className="min-h-0 flex-grow overflow-auto bg-[--preferences-background-color]"
tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
>
<PaneSelector {...props} /> <PaneSelector {...props} />
</div> </div>
</div> </div>

2
packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
View File

@@ -24,7 +24,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
) )
return ( return (
<div className="border-b border-border bg-default px-5 py-2 md:border-0 md:bg-contrast md:px-0 md:py-0"> <div className="border-b border-border bg-default px-5 py-2 md:border-0 md:bg-[--preferences-background-color] md:px-0 md:py-0">
<div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex"> <div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex">
{menuItems.map((pref) => ( {menuItems.map((pref) => (
<PreferencesMenuItem <PreferencesMenuItem

1
packages/web/src/stylesheets/_theme.scss
View File

@@ -36,6 +36,7 @@
--preferences-navigation-icon-color: var(--sn-stylekit-neutral-color); --preferences-navigation-icon-color: var(--sn-stylekit-neutral-color);
--preferences-navigation-selected-background-color: var(--sn-stylekit-info-backdrop-color); --preferences-navigation-selected-background-color: var(--sn-stylekit-info-backdrop-color);
--preferences-background-color: var(--sn-stylekit-contrast-background-color);
--dropdown-menu-radio-button-inactive-color: var(--sn-stylekit-passive-color-1); --dropdown-menu-radio-button-inactive-color: var(--sn-stylekit-passive-color-1);