diff --git a/.yarn/cache/postcss-loader-npm-7.0.0-e0a0c61fcd-b8e51e9989.zip b/.yarn/cache/postcss-loader-npm-7.0.0-e0a0c61fcd-b8e51e9989.zip new file mode 100644 index 000000000..944aeea2d Binary files /dev/null and b/.yarn/cache/postcss-loader-npm-7.0.0-e0a0c61fcd-b8e51e9989.zip differ diff --git a/packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/features/tasks/NotePreview.tsx b/packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/features/tasks/NotePreview.tsx index d121baff5..b2ca8dbce 100644 --- a/packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/features/tasks/NotePreview.tsx +++ b/packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/features/tasks/NotePreview.tsx @@ -37,7 +37,7 @@ const GroupSummary: React.FC = ({ groups }) => { return (

{truncateText(group.name, MAX_GROUP_DESCRIPTION_LENGTH)} - + {totalCompletedTasks}/{totalTasks}

diff --git a/packages/desktop/app/stylesheets/renderer.css b/packages/desktop/app/stylesheets/renderer.css index db45764d1..5e04c02a6 100644 --- a/packages/desktop/app/stylesheets/renderer.css +++ b/packages/desktop/app/stylesheets/renderer.css @@ -69,7 +69,7 @@ panel-resizer { /* Required for BrowserWindow titleBarStyle: 'hiddenInset' */ .mac-desktop #navigation, .mac-desktop #navigation .section-title-bar, -.mac-desktop #notes-title-bar, +.mac-desktop #items-title-bar, .mac-desktop #editor-title-bar, .mac-desktop #lock-screen { -webkit-app-region: drag; diff --git a/packages/styles/src/Alert/Alert.ts b/packages/styles/src/Alert/Alert.ts index bb8d0d69c..fe8a54729 100644 --- a/packages/styles/src/Alert/Alert.ts +++ b/packages/styles/src/Alert/Alert.ts @@ -23,7 +23,7 @@ export class SKAlert { buttonsString() { const genButton = function (buttonDesc: AlertButton, index: number) { return ` - ` diff --git a/packages/styles/src/Styles/_colors.scss b/packages/styles/src/Styles/_colors.scss new file mode 100644 index 000000000..047e577ea --- /dev/null +++ b/packages/styles/src/Styles/_colors.scss @@ -0,0 +1,68 @@ +:root { + --sn-stylekit-neutral-color: #989898; + --sn-stylekit-neutral-contrast-color: #ffffff; + + --sn-stylekit-info-color: #086dd6; + --sn-stylekit-info-color-darkened: #065cb5; + --sn-stylekit-info-contrast-color: #ffffff; + --sn-stylekit-info-backdrop-color: #2b6fcf0f; + + --sn-stylekit-success-color: #007662; + --sn-stylekit-success-contrast-color: #ffffff; + + --sn-stylekit-warning-color: #ebad00; + --sn-stylekit-warning-contrast-color: #ffffff; + + --sn-stylekit-danger-color: #cc2128; + --sn-stylekit-danger-contrast-color: #ffffff; + + --sn-stylekit-shadow-color: #c8c8c8; + --sn-stylekit-background-color: #ffffff; + // For borders inside background-color + --sn-stylekit-border-color: #dfe1e4; + --sn-stylekit-foreground-color: #000000; + // Colors for layers placed on top of non-prefixed background, border, and foreground + --sn-stylekit-contrast-background-color: #f6f6f6; + --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-foreground-color: #2e2e2e; + --sn-stylekit-secondary-border-color: #e3e3e3; + + --sn-stylekit-secondary-contrast-background-color: #e3e3e3; + --sn-stylekit-secondary-contrast-foreground-color: #2e2e2e; + --sn-stylekit-secondary-contrast-border-color: #a2a2a2; + + --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color); + --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color); + + --sn-stylekit-paragraph-text-color: #454545; + + --sn-stylekit-input-placeholder-color: #a8a8a8; + --sn-stylekit-input-border-color: #e3e3e3; + + --sn-stylekit-scrollbar-thumb-color: #dfdfdf; + --sn-stylekit-scrollbar-track-border-color: #e7e7e7; + + --sn-stylekit-theme-type: light; + --sn-stylekit-theme-name: sn-light; + + --sn-stylekit-passive-color-0: #515357; + --sn-stylekit-passive-color-1: #72767e; + --sn-stylekit-passive-color-2: #bbbec4; + --sn-stylekit-passive-color-3: #dfe1e4; + --sn-stylekit-passive-color-4: #eeeff1; + --sn-stylekit-passive-color-4-opacity-variant: #bbbec43d; + --sn-stylekit-passive-color-5: #f4f5f7; + --sn-stylekit-passive-color-6: #e5e5e5; + --sn-stylekit-passive-color-super-light: #f9f9f9; + + --sn-stylekit-accessory-tint-color-1: #086dd6; + --sn-stylekit-accessory-tint-color-2: #ea6595; + --sn-stylekit-accessory-tint-color-3: #ebad00; + --sn-stylekit-accessory-tint-color-4: #7049cf; + --sn-stylekit-accessory-tint-color-5: #1aa772; + --sn-stylekit-accessory-tint-color-6: #f28c52; +} diff --git a/packages/styles/src/Styles/_panels.scss b/packages/styles/src/Styles/_panels.scss index 79fa9a343..86ae4b309 100644 --- a/packages/styles/src/Styles/_panels.scss +++ b/packages/styles/src/Styles/_panels.scss @@ -131,7 +131,8 @@ } .sk-panel-section-subtitle { - @extend .sk-label; + font-size: var(--sn-stylekit-font-size-p); + font-weight: bold; font-size: var(--sn-stylekit-font-size-h5); margin-bottom: 2px; diff --git a/packages/styles/src/Styles/main.scss b/packages/styles/src/Styles/main.scss index 39b3a901c..ee8f2bbe8 100644 --- a/packages/styles/src/Styles/main.scss +++ b/packages/styles/src/Styles/main.scss @@ -1,4 +1,5 @@ @import 'normalize'; +@import 'colors'; :root { --sn-stylekit-base-font-size: 0.8125rem; @@ -13,53 +14,6 @@ --sn-stylekit-font-size-h2: 0.975rem; --sn-stylekit-font-size-h1: 1.05625rem; - --sn-stylekit-neutral-color: #989898; - --sn-stylekit-neutral-contrast-color: #ffffff; - - --sn-stylekit-info-color: #086DD6; - --sn-stylekit-info-color-darkened: #065cb5; - --sn-stylekit-info-contrast-color: #ffffff; - --sn-stylekit-info-backdrop-color: #2b6fcf0f; - - --sn-stylekit-success-color: #007662; - --sn-stylekit-success-contrast-color: #ffffff; - - --sn-stylekit-warning-color: #EBAD00; - --sn-stylekit-warning-contrast-color: #ffffff; - - --sn-stylekit-danger-color: #cc2128; - --sn-stylekit-danger-contrast-color: #ffffff; - - --sn-stylekit-shadow-color: #c8c8c8; - --sn-stylekit-background-color: #ffffff; - // For borders inside background-color - --sn-stylekit-border-color: #dfe1e4; - --sn-stylekit-foreground-color: #000000; - // Colors for layers placed on top of non-prefixed background, border, and foreground - --sn-stylekit-contrast-background-color: #f6f6f6; - --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-foreground-color: #2e2e2e; - --sn-stylekit-secondary-border-color: #e3e3e3; - - --sn-stylekit-secondary-contrast-background-color: #e3e3e3; - --sn-stylekit-secondary-contrast-foreground-color: #2e2e2e; - --sn-stylekit-secondary-contrast-border-color: #a2a2a2; - - --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color); - --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color); - - --sn-stylekit-paragraph-text-color: #454545; - - --sn-stylekit-input-placeholder-color: #a8a8a8; - --sn-stylekit-input-border-color: #e3e3e3; - - --sn-stylekit-scrollbar-thumb-color: #dfdfdf; - --sn-stylekit-scrollbar-track-border-color: #e7e7e7; - --sn-stylekit-menu-border: none; --sn-stylekit-general-border-radius: 2px; @@ -70,26 +24,6 @@ --sn-stylekit-sans-serif-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', var(--sn-stylekit-simplified-chinese-font), sans-serif; --sn-stylekit-editor-font-family: var(--sn-stylekit-sans-serif-font); - - --sn-stylekit-theme-type: light; - --sn-stylekit-theme-name: sn-light; - - --sn-stylekit-passive-color-0: #515357; - --sn-stylekit-passive-color-1: #72767e; - --sn-stylekit-passive-color-2: #bbbec4; - --sn-stylekit-passive-color-3: #dfe1e4; - --sn-stylekit-passive-color-4: #eeeff1; - --sn-stylekit-passive-color-4-opacity-variant: #bbbec43d; - --sn-stylekit-passive-color-5: #f4f5f7; - --sn-stylekit-passive-color-6: #e5e5e5; - --sn-stylekit-passive-color-super-light: #f9f9f9; - - --sn-stylekit-accessory-tint-color-1: #086dd6; - --sn-stylekit-accessory-tint-color-2: #ea6595; - --sn-stylekit-accessory-tint-color-3: #ebad00; - --sn-stylekit-accessory-tint-color-4: #7049cf; - --sn-stylekit-accessory-tint-color-5: #1aa772; - --sn-stylekit-accessory-tint-color-6: #f28c52; } .sn-component { diff --git a/packages/toast/src/Toast.tsx b/packages/toast/src/Toast.tsx index 7a4a9f340..e970dcdc3 100644 --- a/packages/toast/src/Toast.tsx +++ b/packages/toast/src/Toast.tsx @@ -12,23 +12,23 @@ const prefersReducedMotion = () => { const colorForToastType = (type: ToastType) => { switch (type) { case ToastType.Success: - return 'color-success' + return 'text-success' case ToastType.Error: - return 'color-danger' + return 'text-danger' default: - return 'color-info' + return 'text-info' } } const iconForToastType = (type: ToastType) => { switch (type) { case ToastType.Success: - return + return case ToastType.Error: - return + return case ToastType.Progress: case ToastType.Loading: - return
+ return
default: return null } @@ -92,7 +92,7 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef
{icon ?
{icon}
: null} -
{toast.message}
+
{toast.message}
{hasActions && (
{toast.actions?.map((action, index) => ( @@ -116,9 +116,9 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef {hasProgress && ( -
+
{ } return ( -
+
{toasts.map((toast, index) => ( ))} diff --git a/packages/web/package.json b/packages/web/package.json index 523ff6be7..8daaa88df 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -28,6 +28,7 @@ "@types/react": "^17.0.42", "@types/react-dom": "^18.0.5", "@types/wicg-file-system-access": "^2020.9.5", + "autoprefixer": "^10.4.7", "babel-loader": "^8.2.5", "circular-dependency-plugin": "^5.2.2", "css-loader": "*", @@ -43,9 +44,12 @@ "mini-css-extract-plugin": "^2.6.0", "node-sass": "*", "npm-check-updates": "*", + "postcss": "^8.4.14", + "postcss-loader": "^7.0.0", "prettier": "*", "sass-loader": "*", "svg-jest": "^1.0.1", + "tailwindcss": "^3.1.4", "ts-jest": "^27.1.4", "ts-loader": "^9.2.8", "typescript": "*", diff --git a/packages/web/postcss.config.js b/packages/web/postcss.config.js new file mode 100644 index 000000000..33ad091d2 --- /dev/null +++ b/packages/web/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/packages/web/src/javascripts/Components/AccountMenu/AccountMenu.tsx b/packages/web/src/javascripts/Components/AccountMenu/AccountMenu.tsx index 0aec88f39..c1f249cda 100644 --- a/packages/web/src/javascripts/Components/AccountMenu/AccountMenu.tsx +++ b/packages/web/src/javascripts/Components/AccountMenu/AccountMenu.tsx @@ -58,8 +58,8 @@ const AccountMenu: FunctionComponent = ({ return (
diff --git a/packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx b/packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx index 474c79170..44c01245d 100644 --- a/packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx +++ b/packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx @@ -98,12 +98,12 @@ const AdvancedOptions: FunctionComponent = ({ return ( <> {showAdvanced ? ( @@ -119,7 +119,7 @@ const AdvancedOptions: FunctionComponent = ({ onChange={handleIsPrivateWorkspaceChange} /> - +
@@ -127,7 +127,7 @@ const AdvancedOptions: FunctionComponent = ({ <> ]} + left={[]} type="text" placeholder="Userphrase" value={privateWorkspaceUserphrase} @@ -136,7 +136,7 @@ const AdvancedOptions: FunctionComponent = ({ /> ]} + left={[]} type="text" placeholder="Name" value={privateWorkspaceName} @@ -161,7 +161,7 @@ const AdvancedOptions: FunctionComponent = ({ rel="noopener noreferrer" title="Learn more" > - +
)} @@ -175,7 +175,7 @@ const AdvancedOptions: FunctionComponent = ({ /> ]} + left={[]} placeholder="https://api.standardnotes.com" value={server} onChange={handleSyncServerChange} diff --git a/packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx b/packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx index 57393893d..3a7fe4d8a 100644 --- a/packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx +++ b/packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx @@ -105,34 +105,35 @@ const ConfirmPassword: FunctionComponent = ({ -
Confirm password
+
Confirm password
Because your notes are encrypted using your password,{' '} - Standard Notes does not have a password reset option. If you forget your + Standard Notes does not have a password reset option. If you forget your password, you will permanently lose access to your data.
]} + left={[]} onChange={handlePasswordChange} onKeyDown={handleKeyDown} placeholder="Confirm password" ref={passwordInputRef} value={confirmPassword} /> - {error ?
{error}
: null} + {error ?
{error}
: null}
]} + left={[]} onChange={handleEmailChange} onKeyDown={handleKeyDown} placeholder="Email" @@ -125,16 +126,16 @@ const CreateAccount: FunctionComponent = ({ /> ]} + left={[]} onChange={handlePasswordChange} onKeyDown={handleKeyDown} placeholder="Password" ref={passwordInputRef} value={password} /> -
-
+ = ({ return ( @@ -76,7 +76,7 @@ const WorkspaceMenuItem: FunctionComponent = ({
{descriptor.label}
)} {descriptor.primary && !hideOptions && ( -
+ )} diff --git a/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx b/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx index 240152321..caef9ea1a 100644 --- a/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx +++ b/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx @@ -78,13 +78,13 @@ const WorkspaceSwitcherMenu: FunctionComponent = ({ void mainApplicationGroup.unloadCurrentAndCreateNewDescriptor() }} > - + Add another workspace {!hideWorkspaceOptions && ( - + Sign out all workspaces )} diff --git a/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx b/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx index 014e50b3d..bc2275e3a 100644 --- a/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx +++ b/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx @@ -6,6 +6,8 @@ import { observer } from 'mobx-react-lite' import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react' import Icon from '@/Components/Icon/Icon' import WorkspaceSwitcherMenu from './WorkspaceSwitcherMenu' +import MenuItem from '@/Components/Menu/MenuItem' +import { MenuItemType } from '@/Components/Menu/MenuItemType' type Props = { mainApplicationGroup: ApplicationGroup @@ -43,21 +45,25 @@ const WorkspaceSwitcherOption: FunctionComponent = ({ mainApplicationGrou return ( <> - + + {isOpen && ( -
+
{ {message} diff --git a/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx index 533a07cb9..2a53dc075 100644 --- a/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx +++ b/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx @@ -270,12 +270,14 @@ const AttachedFilesButton: FunctionComponent = ({ } }} ref={buttonRef} - className={`sn-icon-button border-contrast ${attachedFilesCount > 0 ? 'py-1 px-3' : ''}`} + className={`flex justify-center items-center min-w-8 h-8 bg-text-padding hover:bg-contrast focus:bg-contrast text-neutral border border-solid border-border rounded-full cursor-pointer ${ + attachedFilesCount > 0 ? 'py-1 px-3' : '' + }`} onBlur={closeOnBlur} > Attached files - {attachedFilesCount > 0 && {attachedFilesCount}} + {attachedFilesCount > 0 && {attachedFilesCount}} { @@ -289,7 +291,7 @@ const AttachedFilesButton: FunctionComponent = ({ ...position, maxHeight, }} - className="sn-dropdown sn-dropdown--animated min-w-80 max-h-120 max-w-xs flex flex-col overflow-y-auto fixed" + className="bg-default rounded shadow-main transition-transform duration-150 slide-down-animation min-w-80 max-h-120 max-w-xs flex flex-col overflow-y-auto fixed" onBlur={closeOnBlur} > {open && ( diff --git a/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx b/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx index 5c005c338..2972542db 100644 --- a/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx +++ b/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx @@ -78,12 +78,12 @@ const AttachedFilesPopover: FunctionComponent = ({ border: isDraggingFiles ? '2px dashed var(--sn-stylekit-info-color)' : '', }} > -
+
{filteredList.length > 0 || searchQuery.length > 0 ? ( -
+
{ @@ -129,7 +129,7 @@ const AttachedFilesPopover: FunctionComponent = ({ }} onBlur={closeOnBlur} > - + )}
@@ -161,20 +161,20 @@ const AttachedFilesPopover: FunctionComponent = ({ ? 'No files attached to this note' : 'No files found in this account'}
- -
Or drop your files here
+
Or drop your files here
)}
{filteredList.length > 0 && ( )} diff --git a/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx b/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx index 0c6a0982d..bd403f65f 100644 --- a/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx +++ b/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx @@ -91,7 +91,7 @@ const PopoverFileItem: FunctionComponent = ({ {isRenamingFile ? ( = ({ /> ) : (
- {file.name} + {file.name} {file.protected && ( - + )}
)} -
+
{file.created_at.toLocaleString()} · {formatSizeToReadableString(file.decryptedSize)}
diff --git a/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx b/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx index 6622dcf43..3994fb988 100644 --- a/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx +++ b/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx @@ -7,6 +7,7 @@ import Switch from '@/Components/Switch/Switch' import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur' import { PopoverFileSubmenuProps } from './PopoverFileItemProps' import { PopoverFileItemActionType } from './PopoverFileItemAction' +import HorizontalSeparator from '../Shared/HorizontalSeparator' const PopoverFileSubmenu: FunctionComponent = ({ file, @@ -67,7 +68,7 @@ const PopoverFileSubmenu: FunctionComponent = ({ onBlur={closeOnBlur} className="w-7 h-7 p-1 rounded-full border-0 bg-transparent hover:bg-contrast cursor-pointer" > - + = ({ ...menuStyle, position: 'fixed', }} - className="sn-dropdown flex flex-col max-h-120 min-w-60 py-1 fixed overflow-y-auto" + className={`${ + isMenuOpen ? 'flex' : 'hidden' + } flex-col bg-default rounded shadow-main max-h-120 min-w-60 py-1 fixed overflow-y-auto`} > {isMenuOpen && ( <> {isAttachedToNote ? ( ) : ( )} -
+ -
+ +
+
+ File ID: {file.uuid} +
+
)} diff --git a/packages/web/src/javascripts/Components/Bubble/Bubble.tsx b/packages/web/src/javascripts/Components/Bubble/Bubble.tsx index 99c8f7bd8..268e49204 100644 --- a/packages/web/src/javascripts/Components/Bubble/Bubble.tsx +++ b/packages/web/src/javascripts/Components/Bubble/Bubble.tsx @@ -7,9 +7,9 @@ type Props = { } const styles = { - base: 'px-2 py-1.5 text-center rounded-full cursor-pointer transition border-1 border-solid active:border-info active:bg-info active:color-neutral-contrast', - unselected: 'color-neutral border-secondary', - selected: 'border-info bg-info color-neutral-contrast', + base: 'px-2 py-1 text-center rounded-full cursor-pointer transition border border-solid active:border-info active:bg-info active:text-neutral-contrast', + unselected: 'text-neutral border-secondary-border', + selected: 'border-info bg-info text-neutral-contrast', } const Bubble: FunctionComponent = ({ label, selected, onSelect }) => ( diff --git a/packages/web/src/javascripts/Components/Button/Button.tsx b/packages/web/src/javascripts/Components/Button/Button.tsx index 9e0a68960..00623b356 100644 --- a/packages/web/src/javascripts/Components/Button/Button.tsx +++ b/packages/web/src/javascripts/Components/Button/Button.tsx @@ -1,52 +1,99 @@ import { Ref, forwardRef, ReactNode, ComponentPropsWithoutRef } from 'react' -const baseClass = 'rounded px-4 py-1.75 font-bold text-sm fit-content' +type ButtonStyle = 'default' | 'contrast' | 'neutral' | 'info' | 'warning' | 'danger' | 'success' -type ButtonVariant = 'normal' | 'primary' - -const getClassName = (variant: ButtonVariant, danger: boolean, disabled: boolean) => { - const borders = variant === 'normal' ? 'border-solid border-main border-1' : 'no-border' - const cursor = disabled ? 'cursor-not-allowed' : 'cursor-pointer' - - let colors = variant === 'normal' ? 'bg-default color-text' : 'bg-info color-info-contrast' - - let focusHoverStates = - variant === 'normal' - ? 'focus:bg-contrast focus:outline-none hover:bg-contrast' - : 'hover:brightness-130 focus:outline-none focus:brightness-130' - - if (danger) { - colors = variant === 'normal' ? 'bg-default color-danger' : 'bg-danger color-info-contrast' +const getColorsForNormalVariant = (style: ButtonStyle) => { + switch (style) { + case 'default': + return 'bg-default text-text' + case 'contrast': + return 'bg-default text-contrast' + case 'neutral': + return 'bg-default text-neutral' + case 'info': + return 'bg-default text-info' + case 'warning': + return 'bg-default text-warning' + case 'danger': + return 'bg-default text-danger' + case 'success': + return 'bg-default text-success' } +} + +const getColorsForPrimaryVariant = (style: ButtonStyle) => { + switch (style) { + case 'default': + return 'bg-default text-foreground' + case 'contrast': + return 'bg-contrast text-text' + case 'neutral': + return 'bg-neutral text-neutral-contrast' + case 'info': + return 'bg-info text-info-contrast' + case 'warning': + return 'bg-warning text-warning-contrast' + case 'danger': + return 'bg-danger text-danger-contrast' + case 'success': + return 'bg-success text-success-contrast' + } +} + +const getClassName = ( + primary: boolean, + style: ButtonStyle, + disabled: boolean, + fullWidth?: boolean, + small?: boolean, + isRounded?: boolean, +) => { + const borders = primary ? 'no-border' : 'border-solid border-border border' + const cursor = disabled ? 'cursor-not-allowed' : 'cursor-pointer' + const width = fullWidth ? 'w-full' : 'w-fit' + const padding = small ? 'px-3 py-1.5' : 'px-4 py-1.5' + const textSize = small ? 'text-xs' : 'text-sm' + const rounded = isRounded ? 'rounded' : '' + + let colors = primary ? getColorsForPrimaryVariant(style) : getColorsForNormalVariant(style) + + let focusHoverStates = primary + ? 'hover:brightness-125 focus:outline-none focus:brightness-125' + : 'focus:bg-contrast focus:outline-none hover:bg-contrast' if (disabled) { - colors = variant === 'normal' ? 'bg-default color-passive-2' : 'bg-passive-2 color-info-contrast' - focusHoverStates = - variant === 'normal' - ? 'focus:bg-default focus:outline-none hover:bg-default' - : 'focus:brightness-default focus:outline-none hover:brightness-default' + colors = primary ? 'bg-passive-2 text-info-contrast' : 'bg-default text-passive-2' + focusHoverStates = primary + ? 'focus:brightness-100 focus:outline-none hover:brightness-100' + : 'focus:bg-default focus:outline-none hover:bg-default' } - return `${baseClass} ${colors} ${borders} ${focusHoverStates} ${cursor}` + return `${rounded} font-bold ${width} ${padding} ${textSize} ${colors} ${borders} ${focusHoverStates} ${cursor}` } interface ButtonProps extends ComponentPropsWithoutRef<'button'> { children?: ReactNode className?: string - variant?: ButtonVariant - dangerStyle?: boolean + primary?: boolean + colorStyle?: ButtonStyle label?: string + fullWidth?: boolean + small?: boolean + rounded?: boolean } const Button = forwardRef( ( { - variant = 'normal', + primary = false, label, className = '', - dangerStyle: danger = false, + colorStyle = primary ? 'info' : 'default', disabled = false, children, + fullWidth, + small, + rounded = true, ...props }: ButtonProps, ref: Ref, @@ -54,7 +101,7 @@ const Button = forwardRef( return ( ) diff --git a/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx b/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx index 7622a159a..4a9fa3a53 100644 --- a/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx +++ b/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx @@ -186,7 +186,7 @@ const ChallengeModal: FunctionComponent = ({ aria-label="Challenge modal" className={`challenge-modal flex flex-col items-center bg-default p-8 rounded relative ${ challenge.reason !== ChallengeReason.ApplicationUnlock - ? 'shadow-overlay-light border-1 border-solid border-main' + ? 'shadow-overlay-light border border-solid border-border' : 'focus:shadow-none' }`} > @@ -196,7 +196,7 @@ const ChallengeModal: FunctionComponent = ({ aria-label="Close modal" className="flex p-1 bg-transparent border-0 cursor-pointer absolute top-4 right-4" > - + )} @@ -224,7 +224,7 @@ const ChallengeModal: FunctionComponent = ({ /> ))} - {shouldShowForgotPasscode && ( @@ -250,7 +250,7 @@ const ChallengeModal: FunctionComponent = ({ }) }} > - + Forgot passcode? )} diff --git a/packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx b/packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx index c1d07b476..3f14e284a 100644 --- a/packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx +++ b/packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx @@ -38,8 +38,8 @@ const ChallengeModalPrompt: FunctionComponent = ({ prompt, values, index, return (
) } diff --git a/packages/web/src/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx b/packages/web/src/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx index a534cf018..0acd893c3 100644 --- a/packages/web/src/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx +++ b/packages/web/src/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx @@ -48,11 +48,15 @@ const LockscreenWorkspaceSwitcher: FunctionComponent = ({ mainApplication return (
{isOpen && ( -
+
= ({ }} onBlur={closeOnBlur} ref={buttonRef} - className="sn-icon-button border-contrast" + className="flex justify-center items-center min-w-8 h-8 hover:bg-contrast focus:bg-contrast text-neutral border border-solid border-border rounded-full cursor-pointer" > Change note type @@ -89,7 +89,7 @@ const ChangeEditorButton: FunctionComponent = ({ ...position, maxHeight, }} - className="sn-dropdown sn-dropdown--animated min-w-68 max-h-120 max-w-xs flex flex-col overflow-y-auto fixed" + className="bg-default rounded shadow-main transition-transform duration-150 slide-down-animation min-w-68 max-h-120 max-w-xs flex flex-col overflow-y-auto fixed" onBlur={closeOnBlur} > {isOpen && ( diff --git a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx index 2bc3d8a72..7c285adec 100644 --- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx +++ b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx @@ -183,7 +183,7 @@ const ChangeEditorMenu: FunctionComponent = ({ return ( -
+
{group.items.map((item) => { const onClickEditorItem = () => { selectEditor(item).catch(console.error) @@ -193,11 +193,9 @@ const ChangeEditorMenu: FunctionComponent = ({ key={item.name} type={MenuItemType.RadioButton} onClick={onClickEditorItem} - className={ - 'sn-dropdown-item py-2 text-input focus:bg-info-backdrop focus:shadow-none flex-row-reverse' - } + className={'py-2 flex-row-reverse'} onBlur={closeOnBlur} - checked={isSelectedEditor(item)} + checked={item.isEntitled ? isSelectedEditor(item) : undefined} >
diff --git a/packages/web/src/javascripts/Components/ChangeEditor/createEditorMenuGroups.ts b/packages/web/src/javascripts/Components/ChangeEditor/createEditorMenuGroups.ts index f9ff4b28e..369b3c1f7 100644 --- a/packages/web/src/javascripts/Components/ChangeEditor/createEditorMenuGroups.ts +++ b/packages/web/src/javascripts/Components/ChangeEditor/createEditorMenuGroups.ts @@ -75,49 +75,49 @@ export const createEditorMenuGroups = (application: WebApplication, editors: SNC const editorMenuGroups: EditorMenuGroup[] = [ { icon: 'plain-text', - iconClassName: 'color-accessory-tint-1', + iconClassName: 'text-accessory-tint-1', title: 'Plain text', items: editorItems.plain, }, { icon: 'rich-text', - iconClassName: 'color-accessory-tint-1', + iconClassName: 'text-accessory-tint-1', title: 'Rich text', items: editorItems['rich-text'], }, { icon: 'markdown', - iconClassName: 'color-accessory-tint-2', + iconClassName: 'text-accessory-tint-2', title: 'Markdown text', items: editorItems.markdown, }, { icon: 'tasks', - iconClassName: 'color-accessory-tint-3', + iconClassName: 'text-accessory-tint-3', title: 'Todo', items: editorItems.task, }, { icon: 'code', - iconClassName: 'color-accessory-tint-4', + iconClassName: 'text-accessory-tint-4', title: 'Code', items: editorItems.code, }, { icon: 'spreadsheets', - iconClassName: 'color-accessory-tint-5', + iconClassName: 'text-accessory-tint-5', title: 'Spreadsheet', items: editorItems.spreadsheet, }, { icon: 'authenticator', - iconClassName: 'color-accessory-tint-6', + iconClassName: 'text-accessory-tint-6', title: 'Authentication', items: editorItems.authentication, }, { icon: 'editor', - iconClassName: 'color-neutral', + iconClassName: 'text-neutral', title: 'Others', items: editorItems.others, }, diff --git a/packages/web/src/javascripts/Components/Checkbox/Checkbox.tsx b/packages/web/src/javascripts/Components/Checkbox/Checkbox.tsx index f06a73fa8..a941acfac 100644 --- a/packages/web/src/javascripts/Components/Checkbox/Checkbox.tsx +++ b/packages/web/src/javascripts/Components/Checkbox/Checkbox.tsx @@ -10,7 +10,7 @@ type CheckboxProps = { const Checkbox: FunctionComponent = ({ name, checked, onChange, disabled, label }) => { return ( -