From b80038f607d7411912fa99366abf559a44874ef3 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Tue, 28 Jun 2022 02:50:52 +0530 Subject: [PATCH] feat(web): tailwind css (#1147) --- ...loader-npm-7.0.0-e0a0c61fcd-b8e51e9989.zip | Bin 0 -> 14617 bytes .../src/features/tasks/NotePreview.tsx | 2 +- packages/desktop/app/stylesheets/renderer.css | 2 +- packages/styles/src/Alert/Alert.ts | 2 +- packages/styles/src/Styles/_colors.scss | 68 +++ packages/styles/src/Styles/_panels.scss | 3 +- packages/styles/src/Styles/main.scss | 68 +-- packages/toast/src/Toast.tsx | 18 +- packages/toast/src/ToastContainer.tsx | 2 +- packages/web/package.json | 4 + packages/web/postcss.config.js | 6 + .../Components/AccountMenu/AccountMenu.tsx | 4 +- .../AccountMenu/AdvancedOptions.tsx | 14 +- .../AccountMenu/ConfirmPassword.tsx | 15 +- .../Components/AccountMenu/CreateAccount.tsx | 13 +- .../AccountMenu/GeneralAccountMenu.tsx | 33 +- .../Components/AccountMenu/SignIn.tsx | 18 +- .../WorkspaceSwitcher/WorkspaceMenuItem.tsx | 8 +- .../WorkspaceSwitcherMenu.tsx | 4 +- .../WorkspaceSwitcherOption.tsx | 22 +- .../ApplicationGroupView.tsx | 2 +- .../AttachedFilesButton.tsx | 8 +- .../AttachedFilesPopover.tsx | 26 +- .../AttachedFilesPopover/PopoverFileItem.tsx | 8 +- .../PopoverFileSubmenu.tsx | 46 +- .../javascripts/Components/Bubble/Bubble.tsx | 6 +- .../javascripts/Components/Button/Button.tsx | 101 +++- .../Components/Button/RoundIconButton.tsx | 7 +- .../ChallengeModal/ChallengeModal.tsx | 8 +- .../ChallengeModal/ChallengePrompt.tsx | 6 +- .../LockscreenWorkspaceSwitcher.tsx | 8 +- .../ChangeEditor/ChangeEditorButton.tsx | 4 +- .../ChangeEditor/ChangeEditorMenu.tsx | 8 +- .../ChangeEditor/createEditorMenuGroups.ts | 16 +- .../Components/Checkbox/Checkbox.tsx | 2 +- .../Components/ComponentView/IsDeprecated.tsx | 13 +- .../Components/ComponentView/IsExpired.tsx | 24 +- .../ComponentView/IssueOnLoading.tsx | 9 +- .../ComponentView/OfflineRestricted.tsx | 6 +- .../ConfirmSignoutModal.tsx | 22 +- .../ContentListView/ContentList.tsx | 2 +- .../ContentListView/ContentListView.tsx | 4 +- .../ContentListView/FileListItem.tsx | 8 +- .../Header/ContentListHeader.tsx | 16 +- .../Header/DisplayOptionsMenu.tsx | 24 +- .../Header/StyledDisplayOptionsButton.tsx | 6 +- .../ListItemConflictIndicator.tsx | 2 +- .../ContentListView/ListItemFlagIcons.tsx | 12 +- .../ContentListView/ListItemMetadata.tsx | 2 +- .../ContentListView/ListItemTags.tsx | 4 +- .../ContentListView/NoteListItem.tsx | 12 +- .../Components/Dropdown/Dropdown.tsx | 27 +- .../Dropdown/StyledListboxButton.tsx | 21 + .../Dropdown/StyledListboxOption.tsx | 38 ++ .../FileContextMenu/FileContextMenu.tsx | 2 +- .../FileContextMenu/FileMenuOptions.tsx | 49 +- .../FileContextMenu/FileOptionsPanel.tsx | 6 +- .../Components/FilePreview/FilePreview.tsx | 3 +- .../FilePreview/FilePreviewError.tsx | 9 +- .../FilePreview/FilePreviewInfoPanel.tsx | 2 +- .../FilePreview/FilePreviewModal.tsx | 16 +- .../Components/FilePreview/ImagePreview.tsx | 2 +- .../FileView/FileViewWithoutProtection.tsx | 7 +- .../javascripts/Components/Footer/Footer.tsx | 75 +-- .../src/javascripts/Components/Icon/Icon.tsx | 22 +- .../IndicatorCircle/IndicatorCircle.tsx | 18 + .../Components/Input/DecoratedInput.tsx | 6 +- .../Components/Input/DecoratedInputProps.ts | 1 + .../Input/DecoratedPasswordInput.tsx | 4 +- .../Components/Input/FloatingLabelInput.tsx | 10 +- .../javascripts/Components/Input/Input.tsx | 2 +- .../src/javascripts/Components/Menu/Menu.tsx | 2 +- .../javascripts/Components/Menu/MenuItem.tsx | 11 +- .../Components/Menu/MenuItemSeparator.tsx | 4 +- .../MultipleSelectedFiles.tsx | 4 +- .../MultipleSelectedNotes.tsx | 4 +- .../Components/Navigation/Navigation.tsx | 4 +- .../NoAccountWarningContent.tsx | 13 +- .../Components/NoteTags/NoteTag.tsx | 8 +- .../NoteView/EditingDisabledBanner.tsx | 6 +- .../Components/NoteView/NoteView.tsx | 48 +- .../NotesContextMenu/NotesContextMenu.tsx | 2 +- .../Components/NotesOptions/AddTagOption.tsx | 12 +- .../NotesOptions/ChangeEditorOption.tsx | 10 +- .../NotesOptions/ListedActionsMenu.tsx | 145 +++++ .../NotesOptions/ListedActionsOption.tsx | 213 +------- .../NotesOptions/ListedMenuGroup.tsx | 7 + .../NotesOptions/ListedMenuItem.tsx | 59 +++ .../Components/NotesOptions/NotesOptions.tsx | 89 ++-- .../NotesOptions/NotesOptionsPanel.tsx | 6 +- .../OtherSessionsSignOut.tsx | 20 +- .../PasswordWizard/PasswordWizard.tsx | 35 +- .../PermissionsModal/PermissionsModal.tsx | 70 +-- .../PinNoteButton/PinNoteButton.tsx | 7 +- .../Panes/Account/Authentication.tsx | 6 +- .../Panes/Account/ChangeEmail/ChangeEmail.tsx | 4 +- .../Account/ChangeEmail/ChangeEmailForm.tsx | 20 +- .../ChangeEmail/ChangeEmailSuccess.tsx | 4 +- .../Panes/Account/ClearSessionDataView.tsx | 5 +- .../Preferences/Panes/Account/Credentials.tsx | 3 +- .../Preferences/Panes/Account/Files.tsx | 3 +- .../Panes/Account/OfflineSubscription.tsx | 6 +- .../Preferences/Panes/Account/SignOutView.tsx | 14 +- .../Account/Subscription/NoSubscription.tsx | 4 +- .../Subscription/SubscriptionInformation.tsx | 7 +- .../Preferences/Panes/Account/Sync.tsx | 1 - .../CloudBackups/CloudBackupProvider.tsx | 12 +- .../Backups/CloudBackups/CloudBackups.tsx | 5 +- .../Preferences/Panes/Backups/DataBackups.tsx | 17 +- .../Panes/Backups/EmailBackups.tsx | 5 +- .../Panes/Backups/Files/BackupsDropZone.tsx | 5 +- .../Backups/Files/FileBackupsDesktop.tsx | 14 +- .../Extensions/ConfirmCustomExtension.tsx | 4 +- .../Panes/Extensions/ExtensionInfoCell.tsx | 2 +- .../Panes/Extensions/ExtensionItem.tsx | 15 +- .../Panes/Extensions/Extensions.tsx | 8 +- .../Preferences/Panes/General/Defaults.tsx | 4 +- .../Preferences/Panes/Listed/Listed.tsx | 1 - .../Panes/Listed/ListedAccountItem.tsx | 3 +- .../Panes/Security/EncryptionStatusItem.tsx | 4 +- .../Panes/Security/ErroredItems.tsx | 11 +- .../Panes/Security/PasscodeLock.tsx | 32 +- .../Preferences/Panes/Security/Privacy.tsx | 5 +- .../Panes/Security/Protections.tsx | 6 +- .../Panes/TwoFactorAuth/AuthAppInfoPopup.tsx | 4 +- .../Panes/TwoFactorAuth/SaveSecretKey.tsx | 6 +- .../Panes/TwoFactorAuth/ScanQRCode.tsx | 6 +- .../TwoFactorAuthView/TwoFactorAuthView.tsx | 2 +- .../TwoFactorAuthView/TwoFactorSwitch.tsx | 3 +- .../Panes/TwoFactorAuth/TwoFactorSuccess.tsx | 4 +- .../Panes/TwoFactorAuth/Verification.tsx | 10 +- .../PreferencesComponents/Content.tsx | 8 +- .../PreferencesComponents/MenuItem.tsx | 8 +- .../PreferencesGroup.tsx | 2 +- .../PreferencesComponents/PreferencesPane.tsx | 4 +- .../Preferences/PreferencesView.tsx | 2 +- .../PremiumFeaturesModal.tsx | 10 +- .../ProtectedItemOverlay.tsx | 14 +- .../PurchaseFlow/Panes/CreateAccount.tsx | 38 +- .../Components/PurchaseFlow/Panes/SignIn.tsx | 28 +- .../PurchaseFlow/PurchaseFlowView.tsx | 12 +- .../QuickSettingsMenu/FocusModeSwitch.tsx | 7 +- .../QuickSettingsMenu/QuickSettingsMenu.tsx | 36 +- .../QuickSettingsMenu/ThemesMenuButton.tsx | 7 +- .../RadioIndicator/RadioIndicator.tsx | 16 + .../HistoryListContainer.tsx | 8 +- .../RevisionHistoryModal/HistoryListItem.tsx | 7 +- .../HistoryModalContentPane.tsx | 7 +- .../HistoryModalDialog.tsx | 2 +- .../HistoryModalFooter.tsx | 15 +- .../LegacyHistoryList.tsx | 2 +- .../RemoteHistoryList.tsx | 7 +- .../RevisionContentLocked.tsx | 4 +- .../SelectedRevisionContent.tsx | 4 +- .../SessionHistoryList.tsx | 4 +- .../SessionsModal/SessionsModal.tsx | 126 ++--- .../Components/Shared/HorizontalSeparator.tsx | 2 +- .../Components/Shared/ModalDialog.tsx | 31 +- .../Components/Shared/ModalDialogButtons.tsx | 2 +- .../Shared/ModalDialogDescription.tsx | 4 +- .../Components/Shared/ModalDialogLabel.tsx | 18 +- .../Components/Spinner/Spinner.tsx | 9 + .../javascripts/Components/Switch/Switch.tsx | 17 +- .../SyncResolutionMenu/SyncResolutionMenu.tsx | 29 +- .../TagAutocomplete/AutocompleteTagHint.tsx | 9 +- .../TagAutocomplete/AutocompleteTagInput.tsx | 6 +- .../TagAutocomplete/AutocompleteTagResult.tsx | 6 +- .../Components/Tags/RootTagDropZone.tsx | 2 +- .../Components/Tags/SmartViewsListItem.tsx | 8 +- .../Components/Tags/TagContextMenu.tsx | 10 +- .../Components/Tags/TagsListItem.tsx | 16 +- .../Components/Tags/TagsSectionAddButton.tsx | 2 +- .../Components/Tags/TagsSectionTitle.tsx | 12 +- .../javascripts/Components/TitleBar/Title.tsx | 2 +- .../Components/TitleBar/TitleBar.tsx | 4 +- packages/web/src/stylesheets/_animation.scss | 63 +++ packages/web/src/stylesheets/_editor.scss | 3 - packages/web/src/stylesheets/_footer.scss | 27 - .../web/src/stylesheets/_items-column.scss | 11 +- packages/web/src/stylesheets/_main.scss | 56 +- packages/web/src/stylesheets/_menus.scss | 13 - packages/web/src/stylesheets/_modals.scss | 22 +- packages/web/src/stylesheets/_navigation.scss | 14 +- .../web/src/stylesheets/_preferences.scss | 43 -- packages/web/src/stylesheets/_reach-sub.scss | 10 +- .../web/src/stylesheets/_sessions-modal.scss | 3 - packages/web/src/stylesheets/_sn.scss | 500 ++++-------------- .../web/src/stylesheets/_stylekit-sub.scss | 8 - packages/web/src/stylesheets/_ui.scss | 191 ------- packages/web/src/stylesheets/index.css.scss | 18 +- .../web/src/stylesheets/utils/_border.scss | 52 -- .../web/src/stylesheets/utils/_color.scss | 86 --- .../web/src/stylesheets/utils/_height.scss | 63 --- .../web/src/stylesheets/utils/_leading.scss | 11 - .../web/src/stylesheets/utils/_margin.scss | 100 ---- .../web/src/stylesheets/utils/_padding.scss | 162 ------ .../web/src/stylesheets/utils/_position.scss | 139 ----- .../web/src/stylesheets/utils/_width.scss | 131 ----- packages/web/tailwind.config.js | 117 ++++ packages/web/web.webpack.config.js | 1 + yarn.lock | 20 +- 201 files changed, 1824 insertions(+), 2699 deletions(-) create mode 100644 .yarn/cache/postcss-loader-npm-7.0.0-e0a0c61fcd-b8e51e9989.zip create mode 100644 packages/styles/src/Styles/_colors.scss create mode 100644 packages/web/postcss.config.js create mode 100644 packages/web/src/javascripts/Components/Dropdown/StyledListboxButton.tsx create mode 100644 packages/web/src/javascripts/Components/Dropdown/StyledListboxOption.tsx create mode 100644 packages/web/src/javascripts/Components/IndicatorCircle/IndicatorCircle.tsx create mode 100644 packages/web/src/javascripts/Components/NotesOptions/ListedActionsMenu.tsx create mode 100644 packages/web/src/javascripts/Components/NotesOptions/ListedMenuGroup.tsx create mode 100644 packages/web/src/javascripts/Components/NotesOptions/ListedMenuItem.tsx create mode 100644 packages/web/src/javascripts/Components/RadioIndicator/RadioIndicator.tsx create mode 100644 packages/web/src/javascripts/Components/Spinner/Spinner.tsx create mode 100644 packages/web/src/stylesheets/_animation.scss delete mode 100644 packages/web/src/stylesheets/utils/_border.scss delete mode 100644 packages/web/src/stylesheets/utils/_color.scss delete mode 100644 packages/web/src/stylesheets/utils/_height.scss delete mode 100644 packages/web/src/stylesheets/utils/_leading.scss delete mode 100644 packages/web/src/stylesheets/utils/_margin.scss delete mode 100644 packages/web/src/stylesheets/utils/_padding.scss delete mode 100644 packages/web/src/stylesheets/utils/_position.scss delete mode 100644 packages/web/src/stylesheets/utils/_width.scss create mode 100644 packages/web/tailwind.config.js 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 0000000000000000000000000000000000000000..944aeea2dac365d8ae7ff4b8473c85e64dc75803 GIT binary patch literal 14617 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 = ({ 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 ( -