From 5cd449fe800b8950fab2599968933b120222d5fc Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Thu, 30 Jun 2022 01:03:25 +0530 Subject: [PATCH] fix(web): navigation styles (#1177) --- .../src/main.scss | 14 ++++++++------ .../org.standardnotes.theme-focus/src/main.scss | 12 ++++++------ .../src/main.scss | 15 ++++++++------- .../src/main.scss | 15 ++++++++------- .../src/main.scss | 17 +++++++++-------- .../src/main.scss | 11 ++++++----- packages/styles/src/Styles/_colors.scss | 8 ++++---- .../Components/AccountMenu/AdvancedOptions.tsx | 4 ++-- .../Components/AccountMenu/ConfirmPassword.tsx | 2 +- .../Components/AccountMenu/CreateAccount.tsx | 4 ++-- .../Components/AccountMenu/SignIn.tsx | 4 ++-- .../javascripts/Components/Bubble/Bubble.tsx | 2 +- .../ChallengeModal/ChallengePrompt.tsx | 4 ++-- .../src/javascripts/Components/Icon/Icon.tsx | 2 ++ .../Components/Input/DecoratedInput.tsx | 8 ++++---- .../Components/Input/DecoratedInputProps.ts | 5 ++++- .../NoAccountWarningContent.tsx | 2 +- .../javascripts/Components/NoteTags/NoteTag.tsx | 2 +- .../Panes/Account/OfflineSubscription.tsx | 2 +- .../Preferences/Panes/Security/PasscodeLock.tsx | 2 +- .../Panes/TwoFactorAuth/ScanQRCode.tsx | 2 +- .../Panes/TwoFactorAuth/Verification.tsx | 4 ++-- .../Components/SearchBar/SearchBar.tsx | 5 ++++- .../Components/Tags/SmartViewsListItem.tsx | 10 +++++----- .../Components/Tags/TagsListItem.tsx | 2 +- packages/web/src/stylesheets/_navigation.scss | 7 ++++++- packages/web/src/stylesheets/_theme.scss | 2 +- packages/web/tailwind.config.js | 1 + 28 files changed, 94 insertions(+), 74 deletions(-) diff --git a/packages/components/src/Packages/Themes/org.standardnotes.theme-autobiography/src/main.scss b/packages/components/src/Packages/Themes/org.standardnotes.theme-autobiography/src/main.scss index 8af1004c0..f334c9dc0 100644 --- a/packages/components/src/Packages/Themes/org.standardnotes.theme-autobiography/src/main.scss +++ b/packages/components/src/Packages/Themes/org.standardnotes.theme-autobiography/src/main.scss @@ -6,6 +6,13 @@ --highlight-color: #d68420; --highlight-contrast: #e3ae74; + --sn-stylekit-passive-color-0: #7e582a; + --sn-stylekit-passive-color-1: #a37337; + --sn-stylekit-passive-color-3: #d9c6b1; + --sn-stylekit-passive-color-4: #e3d5c4; + --sn-stylekit-passive-color-4-opacity-variant: #c9995e3d; + --sn-stylekit-passive-color-5: #e9d9c7; + --sn-stylekit-info-color: #a37337; --sn-stylekit-info-contrast-color: #ebcdaa; @@ -33,7 +40,7 @@ --sn-stylekit-contrast-foreground-color: var(--foreground-color); --sn-stylekit-contrast-border-color: var(--border-color); - --sn-stylekit-secondary-background-color: var(--background-1); + --sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4); --sn-stylekit-secondary-foreground-color: var(--foreground-color); --sn-stylekit-secondary-border-color: var(--border-color); @@ -51,11 +58,6 @@ --sn-desktop-titlebar-border-color: var(--border-color); --sn-desktop-titlebar-ui-color: var(--foreground-color); --sn-desktop-titlebar-ui-hover-color: var(--highlight-color); - - --sn-stylekit-passive-color-0: #7e582a; - --sn-stylekit-passive-color-1: #a37337; - --sn-stylekit-passive-color-4-opacity-variant: #c9995e3d; - --sn-stylekit-passive-color-5: #e9d9c7; } #notes-column .note.selected, diff --git a/packages/components/src/Packages/Themes/org.standardnotes.theme-focus/src/main.scss b/packages/components/src/Packages/Themes/org.standardnotes.theme-focus/src/main.scss index 1660127d2..4a6f7117c 100644 --- a/packages/components/src/Packages/Themes/org.standardnotes.theme-focus/src/main.scss +++ b/packages/components/src/Packages/Themes/org.standardnotes.theme-focus/src/main.scss @@ -12,6 +12,11 @@ // StyleKit Vars + --sn-stylekit-passive-color-0: #999999; + --sn-stylekit-passive-color-3: #28292b; + --sn-stylekit-passive-color-4: #1c1d1e; + --sn-stylekit-passive-color-5: #1d1f20; + --sn-stylekit-shadow-color: #000000; --sn-stylekit-info-color: var(--highlight-color); @@ -40,7 +45,7 @@ --sn-stylekit-contrast-foreground-color: #ffffff; --sn-stylekit-contrast-border-color: #000000; - --sn-stylekit-secondary-background-color: #0f1011; + --sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4); --sn-stylekit-secondary-foreground-color: #ffffff; --sn-stylekit-secondary-border-color: #000000; @@ -59,9 +64,4 @@ --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color); --sn-stylekit-menu-border: 1px solid #424242; - - --sn-stylekit-passive-color-0: #999999; - --sn-stylekit-passive-color-3: #28292b; - --sn-stylekit-passive-color-4: #1c1d1e; - --sn-stylekit-passive-color-5: #1d1f20; } diff --git a/packages/components/src/Packages/Themes/org.standardnotes.theme-futura/src/main.scss b/packages/components/src/Packages/Themes/org.standardnotes.theme-futura/src/main.scss index 8570ee3ef..03747239c 100644 --- a/packages/components/src/Packages/Themes/org.standardnotes.theme-futura/src/main.scss +++ b/packages/components/src/Packages/Themes/org.standardnotes.theme-futura/src/main.scss @@ -5,6 +5,13 @@ --border-color: #20222c; // StyleKit Vars + + --sn-stylekit-passive-color-0: #a4a5b3; + --sn-stylekit-passive-color-3: #3a3a48; + --sn-stylekit-passive-color-4: #2c2c39; + --sn-stylekit-passive-color-4-opacity-variant: #292937; + --sn-stylekit-passive-color-5: #2e2e3e; + --sn-stylekit-shadow-color: var(--border-color); --sn-stylekit-info-color: var(--highlight-color); @@ -33,7 +40,7 @@ --sn-stylekit-contrast-foreground-color: #a9aabe; --sn-stylekit-contrast-border-color: #0f1116; - --sn-stylekit-secondary-background-color: #20202b; + --sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4); --sn-stylekit-secondary-foreground-color: #a9aabe; --sn-stylekit-secondary-border-color: #20222c; @@ -52,10 +59,4 @@ --sn-desktop-titlebar-ui-hover-color: var(--highlight-color); --sn-stylekit-menu-border: 1px solid #434b60; - - --sn-stylekit-passive-color-0: #a4a5b3; - --sn-stylekit-passive-color-3: #3a3a48; - --sn-stylekit-passive-color-4: #2c2c39; - --sn-stylekit-passive-color-4-opacity-variant: #292937; - --sn-stylekit-passive-color-5: #2e2e3e; } diff --git a/packages/components/src/Packages/Themes/org.standardnotes.theme-midnight/src/main.scss b/packages/components/src/Packages/Themes/org.standardnotes.theme-midnight/src/main.scss index e23717835..54f394699 100644 --- a/packages/components/src/Packages/Themes/org.standardnotes.theme-midnight/src/main.scss +++ b/packages/components/src/Packages/Themes/org.standardnotes.theme-midnight/src/main.scss @@ -26,6 +26,13 @@ --sn-desktop-titlebar-ui-hover-color: var(--sn-stylekit-info-color); // StyleKit Vars + + --sn-stylekit-passive-color-0: #94979e; + --sn-stylekit-passive-color-3: #2c2c39; + --sn-stylekit-passive-color-4: #313142; + --sn-stylekit-passive-color-4-opacity-variant: #292937; + --sn-stylekit-passive-color-5: #313142; + --sn-stylekit-shadow-color: #20202b; --sn-stylekit-background-color: #20202b; @@ -36,7 +43,7 @@ --sn-stylekit-contrast-foreground-color: var(--ui-text-color); --sn-stylekit-contrast-border-color: var(--border-color); - --sn-stylekit-secondary-background-color: #292937; + --sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4); --sn-stylekit-secondary-foreground-color: var(--ui-text-color); --sn-stylekit-secondary-border-color: var(--border-color); @@ -53,10 +60,4 @@ --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color); --sn-stylekit-menu-border: 1px solid #494965; - - --sn-stylekit-passive-color-0: #94979e; - --sn-stylekit-passive-color-3: #2c2c39; - --sn-stylekit-passive-color-4: #313142; - --sn-stylekit-passive-color-4-opacity-variant: #292937; - --sn-stylekit-passive-color-5: #313142; } diff --git a/packages/components/src/Packages/Themes/org.standardnotes.theme-solarized-dark/src/main.scss b/packages/components/src/Packages/Themes/org.standardnotes.theme-solarized-dark/src/main.scss index a5e4b54fa..61b4073a6 100644 --- a/packages/components/src/Packages/Themes/org.standardnotes.theme-solarized-dark/src/main.scss +++ b/packages/components/src/Packages/Themes/org.standardnotes.theme-solarized-dark/src/main.scss @@ -25,6 +25,14 @@ --sn-component-inner-border-color: var(--highlight-color); // StyleKit Vars + + --sn-stylekit-passive-color-0: #a8bdbd; + --sn-stylekit-passive-color-1: #93a1a1; + --sn-stylekit-passive-color-3: #0d4f60; + --sn-stylekit-passive-color-4: #083642; + --sn-stylekit-passive-color-4-opacity-variant: #2aa1983d; + --sn-stylekit-passive-color-5: #003542; + --sn-stylekit-info-color: var(--highlight-color); --sn-stylekit-info-contrast-color: var(--foreground-color); @@ -52,7 +60,7 @@ --sn-stylekit-contrast-foreground-color: var(--foreground-color); --sn-stylekit-contrast-border-color: var(--border-color); - --sn-stylekit-secondary-background-color: var(--background-1); + --sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4); --sn-stylekit-secondary-foreground-color: var(--foreground-color); --sn-stylekit-secondary-border-color: var(--border-color); @@ -72,11 +80,4 @@ --sn-desktop-titlebar-ui-hover-color: var(--highlight-color); --sn-stylekit-menu-border: 1px solid #1f5461; - - --sn-stylekit-passive-color-0: #a8bdbd; - --sn-stylekit-passive-color-1: #93a1a1; - --sn-stylekit-passive-color-3: #0d4f60; - --sn-stylekit-passive-color-4: #083642; - --sn-stylekit-passive-color-4-opacity-variant: #2aa1983d; - --sn-stylekit-passive-color-5: #003542; } diff --git a/packages/components/src/Packages/Themes/org.standardnotes.theme-titanium/src/main.scss b/packages/components/src/Packages/Themes/org.standardnotes.theme-titanium/src/main.scss index 9a92a4746..f5b10f5ba 100644 --- a/packages/components/src/Packages/Themes/org.standardnotes.theme-titanium/src/main.scss +++ b/packages/components/src/Packages/Themes/org.standardnotes.theme-titanium/src/main.scss @@ -6,6 +6,10 @@ --border-color: var(--highlight-color); // StyleKit Vars + + --sn-stylekit-passive-color-0: #626166; + --sn-stylekit-passive-color-4-opacity-variant: #e9e9e9; + --sn-stylekit-shadow-color: var(--highlight-color); --sn-stylekit-info-color: var(--background-color); @@ -23,7 +27,7 @@ --sn-stylekit-danger-color: #f80324; --sn-stylekit-danger-contrast-color: #ffffff; - --sn-stylekit-background-color: #d9dbde; + --sn-stylekit-background-color: var(--sn-stylekit-passive-color-4); --sn-stylekit-foreground-color: #3d3c40; --sn-stylekit-border-color: #c9cccf; @@ -31,7 +35,7 @@ --sn-stylekit-contrast-foreground-color: #3d3c40; --sn-stylekit-contrast-border-color: #c9cccf; - --sn-stylekit-secondary-background-color: #d8d9de; + --sn-stylekit-secondary-background-color: #d9dbde; --sn-stylekit-secondary-foreground-color: #3d3c40; --sn-stylekit-secondary-border-color: #c9cccf; @@ -53,7 +57,4 @@ --sn-desktop-titlebar-ui-hover-color: var(--background-color); --sn-stylekit-menu-border: 1px solid #b2b2b3; - - --sn-stylekit-passive-color-0: #626166; - --sn-stylekit-passive-color-4-opacity-variant: #e9e9e9; } diff --git a/packages/styles/src/Styles/_colors.scss b/packages/styles/src/Styles/_colors.scss index 047e577ea..c15b8ba8f 100644 --- a/packages/styles/src/Styles/_colors.scss +++ b/packages/styles/src/Styles/_colors.scss @@ -1,5 +1,5 @@ :root { - --sn-stylekit-neutral-color: #989898; + --sn-stylekit-neutral-color: #72767e; --sn-stylekit-neutral-contrast-color: #ffffff; --sn-stylekit-info-color: #086dd6; @@ -20,14 +20,14 @@ --sn-stylekit-background-color: #ffffff; // For borders inside background-color --sn-stylekit-border-color: #dfe1e4; - --sn-stylekit-foreground-color: #000000; + --sn-stylekit-foreground-color: #19191C; // Colors for layers placed on top of non-prefixed background, border, and foreground - --sn-stylekit-contrast-background-color: #f6f6f6; + --sn-stylekit-contrast-background-color: rgba(244, 245, 247, 0.72); --sn-stylekit-contrast-foreground-color: #2e2e2e; --sn-stylekit-contrast-border-color: #e3e3e3; // For borders inside contrast-background-color // Alternative set of background and contrast options - --sn-stylekit-secondary-background-color: #f6f6f6; + --sn-stylekit-secondary-background-color: #EEEFF1; --sn-stylekit-secondary-foreground-color: #2e2e2e; --sn-stylekit-secondary-border-color: #e3e3e3; diff --git a/packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx b/packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx index bc8ef4a78..ec062f624 100644 --- a/packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx +++ b/packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx @@ -126,7 +126,7 @@ const AdvancedOptions: FunctionComponent = ({ {isPrivateWorkspace && ( <> ]} type="text" placeholder="Userphrase" @@ -135,7 +135,7 @@ const AdvancedOptions: FunctionComponent = ({ disabled={disabled} /> ]} type="text" placeholder="Name" diff --git a/packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx b/packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx index 6cdee6bc8..45043ab1b 100644 --- a/packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx +++ b/packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx @@ -119,7 +119,7 @@ const ConfirmPassword: FunctionComponent = ({
]} onChange={handlePasswordChange} diff --git a/packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx b/packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx index 4b12069f6..f3509965c 100644 --- a/packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx +++ b/packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx @@ -114,7 +114,7 @@ const CreateAccount: FunctionComponent = ({ ]} onChange={handleEmailChange} @@ -125,7 +125,7 @@ const CreateAccount: FunctionComponent = ({ value={email} /> ]} onChange={handlePasswordChange} onKeyDown={handleKeyDown} diff --git a/packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx b/packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx index ee17d4e2c..df51d3eac 100644 --- a/packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx +++ b/packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx @@ -153,7 +153,7 @@ const SignInPane: FunctionComponent = ({ application, viewControllerManag
]} type="email" placeholder="Email" @@ -165,7 +165,7 @@ const SignInPane: FunctionComponent = ({ application, viewControllerManag ref={emailInputRef} /> ]} onChange={handlePasswordChange} diff --git a/packages/web/src/javascripts/Components/Bubble/Bubble.tsx b/packages/web/src/javascripts/Components/Bubble/Bubble.tsx index 31258c9a2..98b5205ad 100644 --- a/packages/web/src/javascripts/Components/Bubble/Bubble.tsx +++ b/packages/web/src/javascripts/Components/Bubble/Bubble.tsx @@ -8,7 +8,7 @@ type Props = { const styles = { base: 'active:border-info active:bg-info active:text-neutral-contrast flex-grow cursor-pointer rounded-full border border-solid px-2 py-1 text-center transition', - unselected: 'text-neutral border-secondary-border', + unselected: 'text-neutral border-secondary-border bg-default', selected: 'text-neutral-contrast border-info bg-info', } diff --git a/packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx b/packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx index 7c3964451..92b27137a 100644 --- a/packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx +++ b/packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx @@ -65,14 +65,14 @@ const ChallengeModalPrompt: FunctionComponent = ({ prompt, values, index, onValueChange(value, prompt)} /> ) : ( onValueChange(value, prompt)} /> )} diff --git a/packages/web/src/javascripts/Components/Icon/Icon.tsx b/packages/web/src/javascripts/Components/Icon/Icon.tsx index 603807911..cb0e89cdf 100644 --- a/packages/web/src/javascripts/Components/Icon/Icon.tsx +++ b/packages/web/src/javascripts/Components/Icon/Icon.tsx @@ -56,6 +56,7 @@ import { MenuArrowRightIcon, MenuCloseIcon, MoreIcon, + NotesFilledIcon, NotesIcon, PasswordIcon, PencilFilledIcon, @@ -123,6 +124,7 @@ export const ICONS = { 'menu-arrow-down': MenuArrowDownIcon, 'menu-arrow-right': MenuArrowRightIcon, 'menu-close': MenuCloseIcon, + 'notes-filled': NotesFilledIcon, 'pencil-filled': PencilFilledIcon, 'pencil-off': PencilOffIcon, 'pin-filled': PinFilledIcon, diff --git a/packages/web/src/javascripts/Components/Input/DecoratedInput.tsx b/packages/web/src/javascripts/Components/Input/DecoratedInput.tsx index 4fc44cc13..d9b76dbdd 100644 --- a/packages/web/src/javascripts/Components/Input/DecoratedInput.tsx +++ b/packages/web/src/javascripts/Components/Input/DecoratedInput.tsx @@ -3,7 +3,7 @@ import { DecoratedInputProps } from './DecoratedInputProps' const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean, roundedFull?: boolean) => { return { - container: `position-relative flex items-stretch overflow-hidden border border-solid border-border bg-default text-sm focus-within:ring-2 focus-within:ring-info ${ + container: `position-relative flex items-stretch overflow-hidden border border-solid border-passive-3 bg-default text-sm focus-within:ring-2 focus-within:ring-info bg-clip-padding ${ !hasLeftDecorations && !hasRightDecorations ? 'px-2 py-1.5' : '' } ${roundedFull ? 'rounded-full' : 'rounded'}`, input: `focus:ring-none w-full border-0 bg-transparent text-text focus:shadow-none focus:outline-none ${ @@ -20,7 +20,7 @@ const DecoratedInput = forwardRef( ( { autocomplete = false, - className = '', + className, disabled = false, id, left, @@ -43,7 +43,7 @@ const DecoratedInput = forwardRef( const classNames = getClassNames(hasLeftDecorations, hasRightDecorations, roundedFull) return ( -
+
{left && (
{left.map((leftChild, index) => ( @@ -54,7 +54,7 @@ const DecoratedInput = forwardRef( +

Data not backed up

Sign in or register to back up your notes.

diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx index 72fbde83b..d6dff012f 100644 --- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx +++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx @@ -205,7 +205,7 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => { placeholder="Passcode" /> = ({ activation: act }) => {
]} diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/Verification.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/Verification.tsx index dd6b76232..91b4ca9d2 100644 --- a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/Verification.tsx +++ b/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/Verification.tsx @@ -28,7 +28,7 @@ const Verification: FunctionComponent = ({ activation: act }) => { Enter your secret key:
- +
@@ -37,7 +37,7 @@ const Verification: FunctionComponent = ({ activation: act }) => { Verify the authentication code generated by your authenticator app:
- +
diff --git a/packages/web/src/javascripts/Components/SearchBar/SearchBar.tsx b/packages/web/src/javascripts/Components/SearchBar/SearchBar.tsx index 39ed8d0c1..76ff9fc08 100644 --- a/packages/web/src/javascripts/Components/SearchBar/SearchBar.tsx +++ b/packages/web/src/javascripts/Components/SearchBar/SearchBar.tsx @@ -48,7 +48,10 @@ const SearchBar = ({ itemListController, searchOptionsController }: Props) => { { +const smartViewIconType = (view: SmartView, isSelected: boolean): IconType => { if (view.uuid === SystemViewId.AllNotes) { - return 'notes' + return isSelected ? 'notes-filled' : 'notes' } if (view.uuid === SystemViewId.Files) { - return 'file' + return 'folder' } if (view.uuid === SystemViewId.ArchivedNotes) { return 'archive' @@ -101,7 +101,7 @@ const SmartViewsListItem: FunctionComponent = ({ view, tagsState }) => { }, [tagsState, view]) const isFaded = false - const iconType = smartViewIconType(view) + const iconType = smartViewIconType(view, isSelected) return ( <> @@ -113,7 +113,7 @@ const SmartViewsListItem: FunctionComponent = ({ view, tagsState }) => { }} >
-
+
= observer(({ tag, features,
)} -
+