From 7624797acf26a2873599547024a4b28e7d54e30d Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Thu, 15 Feb 2024 17:48:05 +0100 Subject: [PATCH] :recycle: Update onboarding modals --- .../images/beforeyoustartilustration.svg | 31 +++ .../resources/images/welcomeilustration.svg | 52 ++++ .../styles/common/refactor/basic-rules.scss | 46 ++-- .../styles/common/refactor/color-defs.scss | 2 + .../styles/common/refactor/design-tokens.scss | 1 + .../styles/common/refactor/fonts.scss | 1 + .../styles/common/refactor/mixins.scss | 45 ++-- .../styles/common/refactor/spacing.scss | 9 + .../common/refactor/themes/default-theme.scss | 2 +- .../common/refactor/themes/light-theme.scss | 2 +- frontend/src/app/main/ui.cljs | 6 - frontend/src/app/main/ui/comments.scss | 10 +- .../main/ui/components/color_bullet_new.scss | 2 +- .../main/ui/components/context_menu_a11y.scss | 2 +- .../main/ui/components/editable_label.scss | 2 +- .../src/app/main/ui/components/forms.cljs | 34 ++- .../src/app/main/ui/components/forms.scss | 145 +++++++----- .../app/main/ui/components/radio_buttons.scss | 2 +- .../src/app/main/ui/components/select.cljs | 9 +- .../src/app/main/ui/components/select.scss | 158 +++++++------ .../app/main/ui/components/tab_container.scss | 2 +- .../src/app/main/ui/components/title_bar.scss | 4 +- .../app/main/ui/dashboard/change_owner.scss | 4 +- .../src/app/main/ui/dashboard/import.scss | 10 +- frontend/src/app/main/ui/dashboard/team.scss | 10 +- .../src/app/main/ui/dashboard/team_form.scss | 6 +- .../app/main/ui/debug/components_preview.scss | 4 +- frontend/src/app/main/ui/delete_shared.scss | 2 +- frontend/src/app/main/ui/export.scss | 7 +- frontend/src/app/main/ui/messages.scss | 6 +- frontend/src/app/main/ui/onboarding.cljs | 129 +++++----- frontend/src/app/main/ui/onboarding.scss | 74 +++--- .../app/main/ui/onboarding/newsletter.cljs | 40 ++-- .../app/main/ui/onboarding/newsletter.scss | 69 +++--- .../src/app/main/ui/onboarding/questions.cljs | 175 ++++++++------ .../src/app/main/ui/onboarding/questions.scss | 108 +++++++-- .../app/main/ui/onboarding/team_choice.cljs | 104 ++++---- .../app/main/ui/onboarding/team_choice.scss | 223 +++++++++++------- .../app/main/ui/settings/access_tokens.scss | 8 +- .../app/main/ui/settings/change_email.scss | 6 +- .../app/main/ui/settings/delete_account.scss | 6 +- frontend/src/app/main/ui/viewer.scss | 4 +- frontend/src/app/main/ui/viewer/comments.scss | 4 +- frontend/src/app/main/ui/viewer/header.scss | 10 +- .../main/ui/viewer/inspect/annotation.scss | 2 +- .../ui/viewer/inspect/attributes/common.scss | 14 +- .../ui/viewer/inspect/attributes/image.scss | 2 +- .../ui/viewer/inspect/attributes/svg.scss | 2 +- .../ui/viewer/inspect/attributes/text.scss | 2 +- .../src/app/main/ui/viewer/inspect/code.scss | 8 +- .../app/main/ui/viewer/inspect/exports.scss | 2 +- .../main/ui/viewer/inspect/right_sidebar.scss | 6 +- .../src/app/main/ui/viewer/interactions.scss | 4 +- frontend/src/app/main/ui/viewer/login.scss | 4 +- .../src/app/main/ui/viewer/share_link.scss | 10 +- .../src/app/main/ui/viewer/thumbnails.scss | 4 +- .../app/main/ui/workspace/color_palette.scss | 2 +- .../ui/workspace/color_palette_ctx_menu.scss | 2 +- .../app/main/ui/workspace/colorpicker.scss | 4 +- .../main/ui/workspace/colorpicker/hsva.scss | 2 +- .../src/app/main/ui/workspace/comments.scss | 6 +- .../app/main/ui/workspace/context_menu.scss | 4 +- .../app/main/ui/workspace/left_header.scss | 4 +- .../src/app/main/ui/workspace/libraries.scss | 4 +- .../app/main/ui/workspace/right_header.scss | 2 +- .../app/main/ui/workspace/sidebar/assets.scss | 4 +- .../ui/workspace/sidebar/assets/colors.scss | 4 +- .../ui/workspace/sidebar/assets/common.scss | 2 +- .../workspace/sidebar/assets/components.scss | 8 +- .../sidebar/assets/file_library.scss | 4 +- .../ui/workspace/sidebar/assets/graphics.scss | 4 +- .../ui/workspace/sidebar/assets/groups.scss | 4 +- .../app/main/ui/workspace/sidebar/debug.scss | 2 +- .../workspace/sidebar/debug_shape_info.scss | 2 +- .../main/ui/workspace/sidebar/history.scss | 4 +- .../main/ui/workspace/sidebar/layer_name.scss | 4 +- .../app/main/ui/workspace/sidebar/layers.scss | 10 +- .../workspace/sidebar/options/menus/blur.scss | 2 +- .../options/menus/color_selection.scss | 2 +- .../sidebar/options/menus/component.scss | 26 +- .../sidebar/options/menus/constraints.scss | 2 +- .../sidebar/options/menus/exports.scss | 2 +- .../sidebar/options/menus/grid_cell.scss | 2 +- .../sidebar/options/menus/interactions.scss | 10 +- .../options/menus/layout_container.scss | 4 +- .../sidebar/options/menus/measures.scss | 2 +- .../sidebar/options/menus/svg_attrs.scss | 4 +- .../workspace/sidebar/options/menus/text.scss | 2 +- .../sidebar/options/menus/typography.scss | 24 +- .../sidebar/options/rows/color_row.scss | 4 +- .../main/ui/workspace/sidebar/shortcuts.scss | 10 +- .../main/ui/workspace/sidebar/sitemap.scss | 6 +- .../app/main/ui/workspace/text_palette.scss | 4 +- .../ui/workspace/text_palette_ctx_menu.scss | 2 +- .../main/ui/workspace/viewport/widgets.scss | 2 +- frontend/translations/cs.po | 4 - frontend/translations/de.po | 4 - frontend/translations/en.po | 7 +- frontend/translations/es.po | 7 +- frontend/translations/fr.po | 4 - frontend/translations/ha.po | 4 - frontend/translations/he.po | 4 - frontend/translations/id.po | 4 - frontend/translations/lv.po | 4 - frontend/translations/nl.po | 4 - frontend/translations/pt_PT.po | 4 - frontend/translations/ro.po | 4 - frontend/translations/tr.po | 4 - frontend/translations/zh_CN.po | 4 - 109 files changed, 1054 insertions(+), 836 deletions(-) create mode 100644 frontend/resources/images/beforeyoustartilustration.svg create mode 100644 frontend/resources/images/welcomeilustration.svg diff --git a/frontend/resources/images/beforeyoustartilustration.svg b/frontend/resources/images/beforeyoustartilustration.svg new file mode 100644 index 000000000..970ed6106 --- /dev/null +++ b/frontend/resources/images/beforeyoustartilustration.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/resources/images/welcomeilustration.svg b/frontend/resources/images/welcomeilustration.svg new file mode 100644 index 000000000..18ced86fa --- /dev/null +++ b/frontend/resources/images/welcomeilustration.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 4dd70f856..2bbad3af6 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -39,7 +39,7 @@ @include buttonStyle; @include flexCenter; @include focusPrimary; - @include tabTitleTipography; + @include uppercaseTitleTipography; background-color: var(--button-primary-background-color-rest); border: $s-1 solid var(--button-primary-border-color-rest); color: var(--button-primary-foreground-color-rest); @@ -276,7 +276,7 @@ // INPUTS .input-base { @include removeInputStyle; - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; // @include focusInput; height: $s-28; @@ -302,7 +302,7 @@ } .input-label { - @include tabTitleTipography; + @include uppercaseTitleTipography; @include flexCenter; width: $s-20; padding-left: $s-8; @@ -311,7 +311,7 @@ } .input-element { - @include titleTipography; + @include bodyMedTipography; @include focusInput; display: flex; align-items: center; @@ -381,7 +381,7 @@ } .input-element-label { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: flex-start; padding: 0; @@ -486,7 +486,7 @@ display: flex; align-items: center; label { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; gap: $s-6; @@ -517,7 +517,7 @@ display: flex; flex-direction: column; label { - @include titleTipography; + @include bodyMedTipography; display: flex; flex-direction: column; justify-content: flex-start; @@ -527,7 +527,7 @@ input { @extend .input-base; - @include titleTipography; + @include bodyMedTipography; border-radius: $br-8; height: $s-32; min-height: $s-32; @@ -604,7 +604,7 @@ } .modal-hint-base { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-title-foreground-color); border-top: $s-1 solid var(--modal-hint-border-color); border-bottom: $s-1 solid var(--modal-hint-border-color); @@ -618,7 +618,7 @@ .modal-cancel-btn { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; padding: $s-8 $s-24; border-radius: $br-8; height: $s-32; @@ -627,7 +627,7 @@ .modal-accept-btn { @extend .button-primary; - @include tabTitleTipography; + @include uppercaseTitleTipography; padding: $s-8 $s-24; border-radius: $br-8; height: $s-32; @@ -636,7 +636,7 @@ .modal-danger-btn { @extend .button-primary; - @include tabTitleTipography; + @include uppercaseTitleTipography; padding: $s-8 $s-24; border-radius: $br-8; height: $s-32; @@ -664,7 +664,7 @@ } // UI ELEMENTS .asset-element { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; height: $s-32; @@ -685,7 +685,7 @@ } .shortcut-key-base { - @include titleTipography; + @include bodyMedTipography; @include flexCenter; height: $s-20; padding: $s-2 $s-6; @@ -695,7 +695,7 @@ .user-icon { @include flexCenter; - @include titleTipography; + @include bodyMedTipography; height: $s-24; width: $s-24; border-radius: $br-circle; @@ -707,7 +707,7 @@ } .mixed-bar { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; flex-grow: 1; @@ -783,7 +783,7 @@ gap: $s-4; height: $s-32; :global(.attr-label) { - @include titleTipography; + @include bodyMedTipography; @include twoLineTextEllipsis; width: $s-92; margin: auto 0; @@ -795,12 +795,12 @@ grid-area: content; display: flex; color: var(--entry-foreground-color-hover); - @include titleTipography; + @include bodyMedTipography; } } .copy-button-children { - @include titleTipography; + @include bodyMedTipography; color: var(--color-foreground-primary); text-align: left; margin: 0; @@ -814,7 +814,7 @@ } .comment-bubbles { - @include titleTipography; + @include bodyMedTipography; @include flexCenter; height: $s-32; width: $s-32; @@ -849,7 +849,7 @@ } .menu-item-base { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; justify-content: space-between; @@ -864,7 +864,7 @@ } .dropdown-element-base { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; gap: $s-8; @@ -911,7 +911,7 @@ } .select-wrapper { - @include titleTipography; + @include bodyMedTipography; position: relative; display: flex; align-items: center; diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss index b2e0cc7ab..22fa83699 100644 --- a/frontend/resources/styles/common/refactor/color-defs.scss +++ b/frontend/resources/styles/common/refactor/color-defs.scss @@ -10,6 +10,7 @@ // DARK // Dark background --db-primary: #18181a; + --db-primary-60: #{color.change(#18181a, $alpha: 0.6)}; --db-secondary: #000000; --db-secondary-30: #{color.change(#000000, $alpha: 0.3)}; --db-secondary-80: #{color.change(#000000, $alpha: 0.8)}; @@ -33,6 +34,7 @@ // LIGHT // Light background --lb-primary: #ffffff; + --lb-primary-60: #{color.change(#ffffff, $alpha: 0.6)}; --lb-secondary: #e8eaee; --lb-secondary-30: #{color.change(#e8eaee, $alpha: 0.3)}; --lb-secondary-80: #{color.change(#e8eaee, $alpha: 0.8)}; diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index f9c6f84b6..6c0cf1e85 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -308,6 +308,7 @@ --modal-button-foreground-color-error: var(--color-foreground-primary); --modal-link-foreground-color: var(--color-accent-primary); --modal-border-color: var(--color-background-quaternary); + --modal-separator-backogrund-color: var(--color-background-quaternary); // ALERTS NOTIFICATION TOAST & STATUS WIDGET --alert-background-color-success: var(--status-color-success-500); diff --git a/frontend/resources/styles/common/refactor/fonts.scss b/frontend/resources/styles/common/refactor/fonts.scss index c4bc4cb3f..81a8b5f67 100644 --- a/frontend/resources/styles/common/refactor/fonts.scss +++ b/frontend/resources/styles/common/refactor/fonts.scss @@ -16,6 +16,7 @@ $fs-12: math.div(12, $fs-base) + rem; $fs-14: math.div(14, $fs-base) + rem; $fs-16: math.div(16, $fs-base) + rem; $fs-18: math.div(18, $fs-base) + rem; +$fs-20: math.div(20, $fs-base) + rem; $fs-24: math.div(24, $fs-base) + rem; $fs-36: math.div(36, $fs-base) + rem; diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss index 2b9a05efd..25301cc90 100644 --- a/frontend/resources/styles/common/refactor/mixins.scss +++ b/frontend/resources/styles/common/refactor/mixins.scss @@ -34,7 +34,7 @@ outline: none; } -@mixin tabTitleTipography { +@mixin uppercaseTitleTipography { font-family: "worksans", sans-serif; font-size: $fs-11; font-weight: $fw500; @@ -42,20 +42,6 @@ text-transform: uppercase; } -@mixin titleTipography { - font-family: "worksans", sans-serif; - font-size: $fs-12; - font-weight: $fw400; - line-height: 1.2; -} - -@mixin medTitleTipography { - font-family: "worksans", sans-serif; - font-size: $fs-14; - font-weight: $fw400; - line-height: 1.2; -} - @mixin bigTitleTipography { font-family: "worksans", sans-serif; font-size: $fs-24; @@ -63,9 +49,16 @@ line-height: 1.2; } -@mixin codeTypography { - font-family: "robotomono", monospace; - font-size: $fs-12; +@mixin medTitleTipography { + font-family: "worksans", sans-serif; + font-size: $fs-20; + font-weight: $fw400; + line-height: 1.2; +} + +@mixin smallTitleTipography { + font-family: "worksans", sans-serif; + font-size: $fs-14; font-weight: $fw400; line-height: 1.2; } @@ -85,6 +78,20 @@ font-weight: normal; } +@mixin bodyMedTipography { + font-family: "worksans", sans-serif; + font-size: $fs-12; + font-weight: $fw400; + line-height: 1.2; +} + +@mixin codeTypography { + font-family: "robotomono", monospace; + font-size: $fs-12; + font-weight: $fw400; + line-height: 1.2; +} + @mixin textEllipsis { max-width: 99%; overflow: hidden; @@ -103,7 +110,7 @@ } @mixin inspectValue { - @include titleTipography; + @include bodyMedTipography; display: inline-block; width: fit-content; padding: 0; diff --git a/frontend/resources/styles/common/refactor/spacing.scss b/frontend/resources/styles/common/refactor/spacing.scss index 807214c7f..2a2eed457 100644 --- a/frontend/resources/styles/common/refactor/spacing.scss +++ b/frontend/resources/styles/common/refactor/spacing.scss @@ -141,12 +141,21 @@ $s-496: #{0.25 * 124}rem; $s-500: #{0.25 * 125}rem; $s-512: #{0.25 * 128}rem; $s-520: #{0.25 * 130}rem; +$s-536: #{0.25 * 134}rem; +$s-540: #{0.25 * 135}rem; +$s-548: #{0.25 * 137}rem; $s-580: #{0.25 * 145}rem; $s-612: #{0.25 * 153}rem; +$s-632: #{0.25 * 158}rem; $s-640: #{0.25 * 160}rem; +$s-648: #{0.25 * 162}rem; $s-664: #{0.25 * 166}rem; $s-688: #{0.25 * 172}rem; $s-712: #{0.25 * 178}rem; $s-736: #{0.25 * 184}rem; +$s-744: #{0.25 * 186}rem; $s-800: #{0.25 * 200}rem; +$s-908: #{0.25 * 227}rem; +$s-960: #{0.25 * 240}rem; +$s-968: #{0.25 * 242}rem; $s-1000: #{0.25 * 250}rem; diff --git a/frontend/resources/styles/common/refactor/themes/default-theme.scss b/frontend/resources/styles/common/refactor/themes/default-theme.scss index 64dafa89b..8f7dd0172 100644 --- a/frontend/resources/styles/common/refactor/themes/default-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/default-theme.scss @@ -24,7 +24,7 @@ --color-accent-quaternary: var(--da-quaternary); --color-component-highlight: var(--da-secondary); - --overlay-color: rgba(0, 0, 0, 0.4); + --overlay-color: var(--db-primary-60); --shadow-color: var(--db-secondary-30); --radio-button-box-shadow: 0 0 0 1px var(--db-secondary-30) inset; diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss index e2fe1b643..86e3ae7c8 100644 --- a/frontend/resources/styles/common/refactor/themes/light-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/light-theme.scss @@ -24,7 +24,7 @@ --color-accent-quaternary: var(--la-quaternary); --color-component-highlight: var(--la-secondary); - --overlay-color: var(--lf-secondary-50); + --overlay-color: var(--lb-primary-60); --shadow-color: var(--lf-secondary-40); --radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset; diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index 8d6306075..88f10e293 100644 --- a/frontend/src/app/main/ui.cljs +++ b/frontend/src/app/main/ui.cljs @@ -16,7 +16,6 @@ [app.main.ui.icons :as i] [app.main.ui.messages :as msgs] [app.main.ui.onboarding :refer [onboarding-modal]] - [app.main.ui.onboarding.questions :refer [questions-modal]] [app.main.ui.releases :refer [release-notes-modal]] [app.main.ui.static :as static] [app.util.dom :as dom] @@ -98,11 +97,6 @@ #_[:& app.main.ui.onboarding.team-choice/onboarding-team-modal] (when-let [props (get profile :props)] (cond - (and (contains? cf/flags :onboarding-questions) - (not (:onboarding-questions-answered props false)) - (not (:onboarding-viewed props false))) - [:& questions-modal] - (and (not (:onboarding-viewed props)) (contains? cf/flags :onboarding)) [:& onboarding-modal {}] diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss index 2c5e2275f..a8887da8a 100644 --- a/frontend/src/app/main/ui/comments.scss +++ b/frontend/src/app/main/ui/comments.scss @@ -19,7 +19,7 @@ } .section-title { - @include titleTipography; + @include bodyMedTipography; height: $s-32; display: flex; align-items: center; @@ -55,7 +55,7 @@ // Comment-thread .comment { - @include titleTipography; + @include bodyMedTipography; display: flex; flex-direction: column; gap: $s-12; @@ -98,7 +98,7 @@ } .content { - @include titleTipography; + @include bodyMedTipography; color: var(--color-foreground-primary); } @@ -151,7 +151,7 @@ .comment-container { position: relative; .comment { - @include titleTipography; + @include bodyMedTipography; .author { display: flex; gap: $s-8; @@ -195,7 +195,7 @@ .content { position: relative; .text { - @include titleTipography; + @include bodyMedTipography; } } } diff --git a/frontend/src/app/main/ui/components/color_bullet_new.scss b/frontend/src/app/main/ui/components/color_bullet_new.scss index 2dddb14b9..ba0cc18fc 100644 --- a/frontend/src/app/main/ui/components/color_bullet_new.scss +++ b/frontend/src/app/main/ui/components/color_bullet_new.scss @@ -71,7 +71,7 @@ .color-text { @include twoLineTextEllipsis; - @include titleTipography; + @include bodyMedTipography; width: $s-80; text-align: center; margin-top: $s-2; diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.scss b/frontend/src/app/main/ui/components/context_menu_a11y.scss index 2aa9fcea9..f08b5c307 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.scss +++ b/frontend/src/app/main/ui/components/context_menu_a11y.scss @@ -46,7 +46,7 @@ .context-menu-item { display: flex; .context-menu-action { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; justify-content: flex-start; diff --git a/frontend/src/app/main/ui/components/editable_label.scss b/frontend/src/app/main/ui/components/editable_label.scss index 168d73ad1..8dab5e8ae 100644 --- a/frontend/src/app/main/ui/components/editable_label.scss +++ b/frontend/src/app/main/ui/components/editable_label.scss @@ -8,7 +8,7 @@ .editable-label-input { @include textEllipsis; - @include titleTipography; + @include bodyMedTipography; @include removeInputStyle; flex-grow: 1; height: $s-28; diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs index bdebae979..d1f09ca60 100644 --- a/frontend/src/app/main/ui/components/forms.cljs +++ b/frontend/src/app/main/ui/components/forms.cljs @@ -214,7 +214,7 @@ [:span {:class (stl/css :hint)} hint])])) (mf/defc select - [{:keys [options disabled form default] :as props + [{:keys [options disabled form default dropdown-class] :as props :or {default ""}}] (let [input-name (get props :name) form (or form (mf/use-ctx form-ctx)) @@ -230,6 +230,7 @@ {:default-value value :disabled disabled :options options + :dropdown-class dropdown-class :on-change handle-change}]])) (mf/defc radio-buttons @@ -244,6 +245,7 @@ on-change (unchecked-get props "on-change") options (unchecked-get props "options") trim? (unchecked-get props "trim") + class (unchecked-get props "class") encode-fn (d/nilv (unchecked-get props "encode-fn") identity) decode-fn (d/nilv (unchecked-get props "decode-fn") identity) @@ -258,31 +260,39 @@ (when (fn? on-change) (on-change name value)))))] - [:div {:class (stl/css :custom-radio)} - (for [{:keys [image value label]} options] + [:div {:class (dm/str class " " (stl/css :custom-radio))} + (for [{:keys [image icon value label area]} options] (let [image? (some? image) + icon? (some? icon) value' (encode-fn value) checked? (= value current-value) key (str/ffmt "%-%" (d/name name) (d/name value'))] [:label {:for key :key key - :style {:background-image (when image? (str/ffmt "url(%)" image))} + :style {:grid-area area} :class (stl/css-case :radio-label true :global/checked checked? - :with-image image?)} + :with-image (or image? icon?))} + (cond + image? + [:span {:style {:background-image (str/ffmt "url(%)" image)} + :class (stl/css :image-inside)}] + icon? + [:span {:class (stl/css :icon-inside)} icon] + + :else + [:span {:class (stl/css-case :radio-icon true + :global/checked checked?)} + (when checked? [:span {:class (stl/css :radio-dot)}])]) + + label [:input {:on-change on-change' :type "radio" :class (stl/css :radio-input) :id key :name name :value value' - :checked checked?}] - (when (not image?) - [:span {:class (stl/css-case :radio-icon true - :global/checked checked?)} - (when checked? [:span {:class (stl/css :radio-dot)}])]) - - label]))])) + :checked checked?}]]))])) (mf/defc submit-button* {::mf/wrap-props false} diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss index ccfc5cf0b..433d61cdf 100644 --- a/frontend/src/app/main/ui/components/forms.scss +++ b/frontend/src/app/main/ui/components/forms.scss @@ -12,46 +12,6 @@ flex-direction: column; align-items: center; position: relative; - .input-with-label { - @include flexColumn; - gap: $s-8; - @include titleTipography; - justify-content: flex-start; - align-items: flex-start; - height: 100%; - width: 100%; - padding: 0; - cursor: pointer; - color: var(--modal-title-foreground-color); - text-transform: uppercase; - margin-bottom: $s-8; - input { - @extend .input-element; - color: var(--input-foreground-color-active); - margin-top: 0; - width: 100%; - height: 100%; - padding: 0 $s-16; - - &:focus { - outline: none; - border: $s-1 solid var(--input-border-color-focus); - border-radius: $br-8; - } - } - // Input autofill - input:-webkit-autofill, - input:-webkit-autofill:hover, - input:-webkit-autofill:focus, - input:-webkit-autofill:active { - -webkit-text-fill-color: var(--input-foreground-color-active); - -webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color); - border: $s-1 solid var(--input-border-color); - -webkit-background-clip: text; - transition: background-color 5000s ease-in-out 0s; - caret-color: var(--input-foreground-color-active); - } - } &.valid { input { border: $s-1 solid var(--input-border-color-success); @@ -78,11 +38,52 @@ } } +.input-with-label { + @include flexColumn; + gap: $s-8; + @include bodyMedTipography; + justify-content: flex-start; + align-items: flex-start; + height: 100%; + width: 100%; + padding: 0; + cursor: pointer; + color: var(--modal-title-foreground-color); + text-transform: uppercase; + margin-bottom: $s-8; + input { + @extend .input-element; + color: var(--input-foreground-color-active); + margin-top: 0; + width: 100%; + height: 100%; + padding: 0 $s-8; + + &:focus { + outline: none; + border: $s-1 solid var(--input-border-color-focus); + border-radius: $br-8; + } + } + // Input autofill + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + input:-webkit-autofill:active { + -webkit-text-fill-color: var(--input-foreground-color-active); + -webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color); + border: $s-1 solid var(--input-border-color); + -webkit-background-clip: text; + transition: background-color 5000s ease-in-out 0s; + caret-color: var(--input-foreground-color-active); + } +} + .input-and-icon { position: relative; width: var(--input-width, calc(100% - $s-1)); min-width: var(--input-min-width); - height: var(--input-height, $s-40); + height: var(--input-height, $s-32); } .help-icon { @@ -142,7 +143,7 @@ } .hint { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-text-foreground-color); width: 99%; } @@ -150,7 +151,7 @@ .checkbox { @extend .input-checkbox; .checkbox-label { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; flex-direction: row-reverse; @@ -185,7 +186,7 @@ background-color: var(--input-background-color); .main-content { @include flexColumn; - @include titleTipography; + @include bodyMedTipography; position: relative; justify-content: center; flex-grow: 1; @@ -230,7 +231,7 @@ select { @extend .menu-dropdown; - @include titleTipography; + @include bodyMedTipography; box-sizing: border-box; position: absolute; top: 0; @@ -246,7 +247,7 @@ background-color: transparent; cursor: pointer; option { - @include titleTipography; + @include bodyMedTipography; color: var(--title-foreground-color-hover); background-color: var(--menu-background-color); appearance: none; @@ -271,7 +272,7 @@ overflow-y: hidden; .inside-input { @include removeInputStyle; - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; width: 100%; max-width: calc(100% - $s-1); @@ -281,6 +282,7 @@ padding: $s-8; margin: 0; border-radius: $br-8; + color: var(--input-foreground-color-active); background-color: var(--input-background-color); border: $s-1 solid var(--input-border-color-active); &:focus { @@ -309,7 +311,7 @@ border: $s-1 solid var(--pill-background-color); box-sizing: border-box; .text { - @include titleTipography; + @include bodyMedTipography; padding-right: $s-8; color: var(--pill-foreground-color); } @@ -342,15 +344,20 @@ .custom-radio { display: grid; grid-template-columns: repeat(3, 1fr); + gap: $s-16; } .radio-label { - @include titleTipography; + @include bodyMedTipography; @include flexRow; + align-items: flex-start; + gap: $s-8; min-height: $s-32; + height: fit-content; border-radius: $br-8; - padding: $s-0 $s-2; + padding: $s-8; color: var(--input-foreground-color); + border: $s-1 solid transparent; &:focus, &:focus-within { outline: none; @@ -376,18 +383,16 @@ } .radio-label.with-image { - display: flex; - justify-content: center; - height: $s-120; - width: $s-140; - padding: $s-64 $s-4 0 $s-4; - margin-top: $s-16; - margin-right: 0; + @include smallTitleTipography; + display: grid; + grid-template-rows: auto auto 0px; + justify-items: center; + gap: 0; + height: $s-116; + width: $s-92; border-radius: $br-8; + margin: 0; border: 1px solid var(--color-background-tertiary); - background-size: 50px; - background-repeat: no-repeat; - background-position: center 0.75rem; cursor: pointer; &:global(.checked) { border: 1px solid var(--color-accent-primary); @@ -399,10 +404,28 @@ } } +.image-inside { + width: $s-60; + height: $s-48; + background-size: $s-48; + background-repeat: no-repeat; + background-position: center; +} + +.icon-inside { + width: $s-60; + height: $s-48; + svg { + width: $s-60; + height: $s-48; + stroke: var(--icon-foreground); + fill: none; + } +} //TEXTAREA .textarea-label { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); text-transform: uppercase; margin-bottom: $s-8; diff --git a/frontend/src/app/main/ui/components/radio_buttons.scss b/frontend/src/app/main/ui/components/radio_buttons.scss index 62e5c612f..48c85a38f 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.scss +++ b/frontend/src/app/main/ui/components/radio_buttons.scss @@ -30,7 +30,7 @@ stroke: var(--radio-btn-foreground-color); } .title-name { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--radio-btn-foreground-color); } &:hover { diff --git a/frontend/src/app/main/ui/components/select.cljs b/frontend/src/app/main/ui/components/select.cljs index ffacb7055..51c7874b4 100644 --- a/frontend/src/app/main/ui/components/select.cljs +++ b/frontend/src/app/main/ui/components/select.cljs @@ -107,7 +107,7 @@ [:span {:class (stl/css :dropdown-button)} i/arrow-refactor] [:& dropdown {:show is-open? :on-close close-dropdown} [:ul {:ref dropdown-element* :data-direction @dropdown-direction* - :class (dm/str (stl/css :custom-select-dropdown) " " dropdown-class)} + :class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))} (for [[index item] (d/enumerate options)] (if (= :separator item) [:li {:class (dom/classnames (stl/css :separator) true) @@ -116,9 +116,10 @@ icon-ref (i/key->icon icon)] [:li {:key (dm/str current-id "-" index) - :class (dom/classnames - (stl/css :checked-element) true - (stl/css :is-selected) (= value current-value)) + :class (stl/css-case + :checked-element true + :disabled (:disabled item) + :is-selected (= value current-value)) :data-value (pr-str value) :on-pointer-enter highlight-item :on-pointer-leave unhighlight-item diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss index e904c48ba..31aba1991 100644 --- a/frontend/src/app/main/ui/components/select.scss +++ b/frontend/src/app/main/ui/components/select.scss @@ -7,7 +7,12 @@ @import "refactor/common-refactor.scss"; .custom-select { - @include titleTipography; + --border-color: var(--menu-background-color); + --bg-color: var(--menu-background-color); + --icon-color: var(--icon-foreground); + --text-color: var(--menu-foreground-color); + @extend .new-scrollbar; + @include bodyMedTipography; position: relative; display: grid; grid-template-columns: 1fr auto; @@ -17,104 +22,105 @@ margin: 0; padding: $s-8; border-radius: $br-8; - background-color: var(--menu-background-color); - border: $s-1 solid var(--menu-background-color); - color: var(--menu-foreground-color); + background-color: var(--bg-color); + border: $s-1 solid var(--border-color); + color: var(--text-color); cursor: pointer; &.icon { grid-template-columns: auto 1fr auto; } - .current-icon { + &:hover { + --bg-color: var(--menu-background-color-hover); + --border-color: var(--menu-background-color); + --icon-color: var(--menu-foreground-color-hover); + } + + &:focus { + --bg-color: var(--menu-background-color-focus); + --border-color: var(--menu-background-focus); + } +} + +.disabled { + --bg-color: var(--menu-background-color-disabled); + --border-color: var(--menu-border-color-disabled); + --icon-color: var(--menu-foreground-color-disabled); + --text-color: var(--menu-foreground-color-disabled); + pointer-events: none; + cursor: default; +} + +.dropdown-button { + @include flexCenter; + svg { + @extend .button-icon-small; + transform: rotate(90deg); + stroke: var(--icon-color); + } +} + +.current-icon { + @include flexCenter; + width: $s-24; + padding-right: $s-4; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + } +} + +.custom-select-dropdown { + @extend .dropdown-wrapper; + .separator { + margin: 0; + height: $s-12; + border-block-start: $s-1 solid var(--dropdown-separator-color); + } +} + +.custom-select-dropdown[data-direction="up"] { + bottom: $s-32; + top: auto; +} + +.checked-element { + @extend .dropdown-element-base; + .icon { @include flexCenter; + height: $s-24; width: $s-24; padding-right: $s-4; svg { - @extend .button-icon-small; + @extend .button-icon; stroke: var(--icon-foreground); } } - .dropdown-button { + + .label { + flex-grow: 1; + width: 100%; + } + + .check-icon { @include flexCenter; svg { @extend .button-icon-small; - transform: rotate(90deg); + visibility: hidden; stroke: var(--icon-foreground); } } - .custom-select-dropdown { - @extend .dropdown-wrapper; - .separator { - margin: 0; - height: $s-12; - border-top: $s-1 solid var(--dropdown-separator-color); - } - } - .custom-select-dropdown[data-direction="up"] { - bottom: $s-32; - top: auto; - } - - .checked-element { - @extend .dropdown-element-base; - .icon { - @include flexCenter; - height: $s-24; - width: $s-24; - padding-right: $s-4; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } + &.is-selected { + color: var(--menu-foreground-color); + .check-icon svg { + stroke: var(--menu-foreground-color); + visibility: visible; } - - .label { - flex-grow: 1; - width: 100%; - } - - .check-icon { - @include flexCenter; - svg { - @extend .button-icon-small; - visibility: hidden; - stroke: var(--icon-foreground); - } - } - - &.is-selected { - color: var(--menu-foreground-color); - .check-icon svg { - stroke: var(--menu-foreground-color); - visibility: visible; - } - } - } - - &:hover { - background-color: var(--menu-background-color-hover); - border: $s-1 solid var(--menu-background-color-hover); - .dropdown-button { - svg { - stroke: var(--menu-foreground-color-hover); - } - } - } - &:focus { - background-color: var(--menu-background-color-focus); - border: $s-1 solid var(--menu-border-color-focus); } &.disabled { - background-color: var(--menu-background-color-disabled); - color: var(--menu-foreground-color-disabled); - border: $s-1 solid var(--menu-border-color-disabled); - pointer-events: none; - cursor: default; - .dropdown-button svg { - stroke: var(--menu-foreground-color-disabled); - } + display: none; } } diff --git a/frontend/src/app/main/ui/components/tab_container.scss b/frontend/src/app/main/ui/components/tab_container.scss index d859680cf..86ac4c4f3 100644 --- a/frontend/src/app/main/ui/components/tab_container.scss +++ b/frontend/src/app/main/ui/components/tab_container.scss @@ -28,7 +28,7 @@ width: 100%; .tab-container-tab-title { @include flexCenter; - @include tabTitleTipography; + @include uppercaseTitleTipography; height: 100%; width: 100%; padding: 0 $s-8; diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss index bfbd756fc..2fbb8f2fc 100644 --- a/frontend/src/app/main/ui/components/title_bar.scss +++ b/frontend/src/app/main/ui/components/title_bar.scss @@ -19,7 +19,7 @@ .title, .title-only, .inspect-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; flex-grow: 1; @@ -119,7 +119,7 @@ .title, .title-only { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; flex-grow: 1; diff --git a/frontend/src/app/main/ui/dashboard/change_owner.scss b/frontend/src/app/main/ui/dashboard/change_owner.scss index c1f6bf7d9..d8bdd10d5 100644 --- a/frontend/src/app/main/ui/dashboard/change_owner.scss +++ b/frontend/src/app/main/ui/dashboard/change_owner.scss @@ -19,7 +19,7 @@ } .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -28,7 +28,7 @@ } .modal-content { - @include titleTipography; + @include bodyMedTipography; margin-bottom: $s-24; } diff --git a/frontend/src/app/main/ui/dashboard/import.scss b/frontend/src/app/main/ui/dashboard/import.scss index 4b76f7d6d..3b50b0e33 100644 --- a/frontend/src/app/main/ui/dashboard/import.scss +++ b/frontend/src/app/main/ui/dashboard/import.scss @@ -19,7 +19,7 @@ } .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -28,7 +28,7 @@ } .modal-content { - @include titleTipography; + @include bodyMedTipography; margin-bottom: $s-24; } @@ -51,7 +51,7 @@ } } .message { - @include titleTipography; + @include bodyMedTipography; } &.warning { background-color: var(--alert-background-color-warning); @@ -79,7 +79,7 @@ .modal-scd-msg, .modal-subtitle, .modal-msg { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-text-foreground-color); line-height: 1.5; } @@ -105,7 +105,7 @@ flex-grow: 1; } .file-name-label { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; gap: $s-12; diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss index 51cd9ac4f..c5f266131 100644 --- a/frontend/src/app/main/ui/dashboard/team.scss +++ b/frontend/src/app/main/ui/dashboard/team.scss @@ -612,7 +612,7 @@ } } .message { - @include titleTipography; + @include bodyMedTipography; color: var(--alert-foreground-color-error); } } @@ -636,7 +636,7 @@ } } .message { - @include titleTipography; + @include bodyMedTipography; color: var(--alert-foreground-color-warning); } } @@ -683,7 +683,7 @@ } .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -694,7 +694,7 @@ .modal-content { @include flexColumn; gap: $s-24; - @include titleTipography; + @include bodyMedTipography; margin-bottom: $s-24; } @@ -703,7 +703,7 @@ } .select-title { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-title-foreground-color); } diff --git a/frontend/src/app/main/ui/dashboard/team_form.scss b/frontend/src/app/main/ui/dashboard/team_form.scss index 8f401e227..573c53304 100644 --- a/frontend/src/app/main/ui/dashboard/team_form.scss +++ b/frontend/src/app/main/ui/dashboard/team_form.scss @@ -19,7 +19,7 @@ } .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -35,7 +35,7 @@ @extend .input-element-label; label { @include flexColumn; - @include titleTipography; + @include bodyMedTipography; align-items: flex-start; width: 100%; border: none; @@ -43,7 +43,7 @@ height: 100%; input { - @include titleTipography; + @include bodyMedTipography; margin-top: $s-8; } } diff --git a/frontend/src/app/main/ui/debug/components_preview.scss b/frontend/src/app/main/ui/debug/components_preview.scss index 8b28f3e0f..2e254fc79 100644 --- a/frontend/src/app/main/ui/debug/components_preview.scss +++ b/frontend/src/app/main/ui/debug/components_preview.scss @@ -53,7 +53,7 @@ flex-direction: column; border-radius: $s-8; h3 { - @include titleTipography; + @include bodyMedTipography; font-size: $fs-24; width: 100%; } @@ -65,7 +65,7 @@ max-height: $s-80; margin-bottom: $s-16; .component-name { - @include tabTitleTipography; + @include uppercaseTitleTipography; font-weight: bold; } } diff --git a/frontend/src/app/main/ui/delete_shared.scss b/frontend/src/app/main/ui/delete_shared.scss index bcd69bfba..0da1500c9 100644 --- a/frontend/src/app/main/ui/delete_shared.scss +++ b/frontend/src/app/main/ui/delete_shared.scss @@ -31,7 +31,7 @@ } .modal-content { - @include titleTipography; + @include bodyMedTipography; margin-bottom: $s-24; } diff --git a/frontend/src/app/main/ui/export.scss b/frontend/src/app/main/ui/export.scss index f528d2eeb..9918499e9 100644 --- a/frontend/src/app/main/ui/export.scss +++ b/frontend/src/app/main/ui/export.scss @@ -55,7 +55,7 @@ } .retry-btn { @extend .button-tertiary; - @include titleTipography; + @include bodyMedTipography; } .modal-close-button { @@ -96,10 +96,10 @@ .modal-content, .no-selection { - @include titleTipography; + @include bodyMedTipography; margin-bottom: $s-24; .modal-hint { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-text-foreground-color); } .modal-link { @@ -243,7 +243,6 @@ label { align-items: flex-start; .modal-subtitle { - // @include tabTitleTipography; @include bodyLargeTypography; color: var(--modal-title-foreground-color); } diff --git a/frontend/src/app/main/ui/messages.scss b/frontend/src/app/main/ui/messages.scss index 67e68c875..da126d3c9 100644 --- a/frontend/src/app/main/ui/messages.scss +++ b/frontend/src/app/main/ui/messages.scss @@ -102,12 +102,12 @@ } .text { - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; } .link { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-link-foreground-color); margin: 0; } @@ -119,7 +119,7 @@ .action-btn { @extend .button-tertiary; - @include tabTitleTipography; + @include uppercaseTitleTipography; min-height: $s-32; min-width: $s-32; svg { diff --git a/frontend/src/app/main/ui/onboarding.cljs b/frontend/src/app/main/ui/onboarding.cljs index 00a19a11a..3788ac3f5 100644 --- a/frontend/src/app/main/ui/onboarding.cljs +++ b/frontend/src/app/main/ui/onboarding.cljs @@ -38,48 +38,39 @@ (next))] [:div {:class (stl/css :modal-container)} [:div {:class (stl/css :modal-left)} - [:img {:src "images/onboarding-welcome.png" + [:img {:src "images/welcomeilustration.svg" :border "0" :alt (tr "onboarding.welcome.alt")}]] [:div {:class (stl/css :modal-right)} [:div {:class (stl/css :release)} "Version " (:main cf/version)] - [:div {:class (stl/css :modal-content)} - [:div {:class (stl/css :modal-header)} - [:h2 {:class (stl/css :modal-title) - :data-test "onboarding-welcome"} - (tr "onboarding-v2.welcome.title")]] + [:h1 {:class (stl/css :modal-title) + :data-test "onboarding-welcome"} + (tr "onboarding-v2.welcome.title")] + [:p {:class (stl/css :modal-text)} + (tr "onboarding-v2.welcome.desc1")] - [:div {:class (stl/css :modal-info)} - [:p {:class (stl/css :modal-text)} - (tr "onboarding-v2.welcome.desc1")] - [:div {:class (stl/css :property-block)} - [:img {:src "images/community.svg" - :border "0"}] - [:div {:class (stl/css :text-wrapper)} - [:div {:class (stl/css :property-title)} - [:a {:href "https://community.penpot.app/" - :target "_blank" - :on-click #(send-event "onboarding-community-link")} - (tr "onboarding-v2.welcome.desc2.title")]] - [:div {:class (stl/css :property-description)} - (tr "onboarding-v2.welcome.desc2")]]] + [:div {:class (stl/css :text-wrapper)} + [:div {:class (stl/css :property-title)} + [:a {:href "https://community.penpot.app/" + :target "_blank" + :on-click #(send-event "onboarding-community-link")} + (tr "onboarding-v2.welcome.desc2.title")]] + [:div {:class (stl/css :property-description)} + (tr "onboarding-v2.welcome.desc2")]] - [:div {:class (stl/css :property-block)} - [:img {:src "images/contributing.svg" - :border "0"}] - [:div {:class (stl/css :text-wrapper)} - [:div {:class (stl/css :property-title)} - [:a {:href "https://help.penpot.app/contributing-guide/" - :target "_blank" :on-click #(send-event "onboarding-contributing-link")} - (tr "onboarding-v2.welcome.desc3.title")]] - [:div {:class (stl/css :property-description)} - (tr "onboarding-v2.welcome.desc3")]]]]] + [:div {:class (stl/css :text-wrapper)} + [:div {:class (stl/css :property-title)} + [:a {:href "https://help.penpot.app/contributing-guide/" + :target "_blank" :on-click #(send-event "onboarding-contributing-link")} + (tr "onboarding-v2.welcome.desc3.title")]] + [:div {:class (stl/css :property-description)} + (tr "onboarding-v2.welcome.desc3")]] - [:div {:class (stl/css :modal-footer)} - [:button {:on-click go-next - :data-test "onboarding-next-btn"} - (tr "labels.continue")]]]])) + [:button {:on-click go-next + :class (stl/css :accept-btn) + :data-test "onboarding-next-btn"} + (tr "labels.continue")]]])) (mf/defc onboarding-before-start [{:keys [next] :as props}] @@ -89,49 +80,44 @@ (next))] [:div {:class (stl/css :modal-container)} [:div {:class (stl/css :modal-left)} - [:img {:src "images/onboarding-people.png" + [:img {:src "images/beforeyoustartilustration.svg" :border "0" :alt (tr "onboarding.welcome.alt")}]] [:div {:class (stl/css :modal-right)} [:div {:class (stl/css :release)} "Version " (:main cf/version)] - [:div {:class (stl/css :modal-content)} - [:div {:class (stl/css :modal-header)} - [:h2 {:class (stl/css :modal-title) - :data-test "onboarding-welcome"} - (tr "onboarding-v2.before-start.title")]] - [:div {:class (stl/css :modal-info)} - [:p {:class (stl/css :modal-text)} - (tr "onboarding-v2.before-start.desc1")] - [:div {:class (stl/css :property-block)} - [:img {:src "images/user-guide.svg" :border "0"}] - [:div {:class (stl/css :text-wrapper)} - [:div {:class (stl/css :property-title)} - [:a {:class (stl/css :modal-link) - :href "https://help.penpot.app/user-guide/" - :target "_blank" - :on-click #(send-event "onboarding-user-guide-link")} - (tr "onboarding-v2.before-start.desc2.title")]] - [:div {:class (stl/css :property-description)} - (tr "onboarding-v2.before-start.desc2")]]] + [:h1 {:class (stl/css :modal-title) + :data-test "onboarding-welcome"} + (tr "onboarding-v2.before-start.title")] + [:p {:class (stl/css :modal-text)} + (tr "onboarding-v2.before-start.desc1")] - [:div {:class (stl/css :property-block)} - [:img {:src "images/video-tutorials.svg" :border "0"}] - [:div {:class (stl/css :text-wrapper)} - [:div {:class (stl/css :property-title)} - [:a {:class (stl/css :modal-link) - :href "https://www.youtube.com/c/Penpot" - :target "_blank" - :on-click #(send-event "onboarding-video-tutorials-link")} - (tr "onboarding-v2.before-start.desc3.title")]] - [:div {:class (stl/css :property-description)} - (tr "onboarding-v2.before-start.desc3")]]]]] + [:div {:class (stl/css :text-wrapper)} + [:div {:class (stl/css :property-title)} + [:a {:class (stl/css :modal-link) + :href "https://help.penpot.app/user-guide/" + :target "_blank" + :on-click #(send-event "onboarding-user-guide-link")} + (tr "onboarding-v2.before-start.desc2.title")]] + [:div {:class (stl/css :property-description)} + (tr "onboarding-v2.before-start.desc2")]] - [:div {:class (stl/css :modal-footer)} - [:button {:on-click go-next - :data-test "onboarding-next-btn"} - (tr "labels.continue")]]]])) + [:div {:class (stl/css :text-wrapper)} + [:div {:class (stl/css :property-title)} + [:a {:class (stl/css :modal-link) + :href "https://www.youtube.com/c/Penpot" + :target "_blank" + :on-click #(send-event "onboarding-video-tutorials-link")} + (tr "onboarding-v2.before-start.desc3.title")]] + [:div {:class (stl/css :property-description)} + (tr "onboarding-v2.before-start.desc3")]] + + + [:button {:on-click go-next + :class (stl/css :accept-btn) + :data-test "onboarding-next-btn"} + (tr "labels.continue")]]])) (mf/defc onboarding-modal {::mf/register modal/components @@ -149,8 +135,11 @@ (st/emit! (modal/hide) (du/mark-onboarding-as-viewed)) (cond + (contains? cf/flags :onboarding-questions) + (modal/show! {:type :onboarding-questions}) + (contains? cf/flags :onboarding-newsletter) - (modal/show! {:type :onboarding-newsletter-modal}) + (modal/show! {:type :onboarding-newsletter}) (contains? cf/flags :onboarding-team) (modal/show! {:type :onboarding-team}))))] diff --git a/frontend/src/app/main/ui/onboarding.scss b/frontend/src/app/main/ui/onboarding.scss index 66ecddbe3..d0710fc42 100644 --- a/frontend/src/app/main/ui/onboarding.scss +++ b/frontend/src/app/main/ui/onboarding.scss @@ -13,70 +13,58 @@ .modal-container { @extend .modal-container-base; position: relative; - display: flex; - padding: 0; + display: grid; + grid-template-columns: auto auto; + gap: $s-32; + padding-inline: $s-100; + padding-block-start: $s-100; + padding-block-end: $s-72; margin: 0; - min-width: $s-712; + width: $s-960; + height: $s-632; + max-width: $s-960; + max-height: $s-632; } .modal-left { - width: $s-284; + width: $s-240; + margin-block-end: $s-64; img { - width: $s-284; + width: $s-240; height: 100%; border-radius: $br-8 0 0 $br-8; } } .modal-right { - @include flexColumn; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: $s-40 auto auto auto $s-32; + gap: $s-24; position: relative; - flex-grow: 1; - padding: $s-32; } .release { - @include titleTipography; + @include bodyMedTipography; position: absolute; - top: 0; + top: calc(-1 * $s-28); right: 0; padding: $s-8; color: var(--modal-text-foreground-color); } -.modal-content { - @include flexColumn; - @include titleTipography; - gap: $s-24; - flex-grow: 1; - margin-bottom: $s-24; -} - .modal-title { @include bigTitleTipography; color: var(--modal-title-foreground-color); } -.modal-info { - @include flexColumn; -} - -.modal-text { - @include titleTipography; +.modal-text, +.property-description { + @include bodyLargeTypography; + margin: 0; color: var(--modal-text-foreground-color); } -.property-block { - @include flexRow; - gap: $s-16; - margin-bottom: $s-24; - img { - @include flexCenter; - height: $s-40; - width: $s-40; - } -} - .modal-link { @include bodyLargeTypography; color: var(--modal-link-foreground-color); @@ -88,19 +76,11 @@ } .property-title a { - @include titleTipography; + @include medTitleTipography; color: var(--modal-title-foreground-color); } -.property-description { - @include titleTipography; - color: var(--modal-text-foreground-color); -} - -.modal-footer { - display: flex; - justify-content: flex-end; - button { - @extend .modal-accept-btn; - } +.accept-btn { + @extend .modal-accept-btn; + justify-self: flex-end; } diff --git a/frontend/src/app/main/ui/onboarding/newsletter.cljs b/frontend/src/app/main/ui/onboarding/newsletter.cljs index e25245285..00cbef5e8 100644 --- a/frontend/src/app/main/ui/onboarding/newsletter.cljs +++ b/frontend/src/app/main/ui/onboarding/newsletter.cljs @@ -15,9 +15,9 @@ [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) -(mf/defc onboarding-newsletter-modal +(mf/defc onboarding-newsletter {::mf/register modal/components - ::mf/register-as :onboarding-newsletter-modal} + ::mf/register-as :onboarding-newsletter} [] (let [message (tr "onboarding.newsletter.acceptance-message") newsletter-updates (mf/use-state false) @@ -39,13 +39,18 @@ [:div {:class (stl/css :modal-overlay)} [:div.animated.fadeInDown {:class (stl/css :modal-container)} - [:div {:class (stl/css :modal-header)} + [:div {:class (stl/css :modal-left)} + [:img {:src "images/deco-newsletter.png" + :border "0"}]] + + [:div {:class (stl/css :modal-right)} [:h2 {:class (stl/css :modal-title) :data-test "onboarding-newsletter-title"} (tr "onboarding.newsletter.title")] [:p {:class (stl/css :modal-text)} - (tr "onboarding-v2.newsletter.desc")]] - [:div {:class (stl/css :modal-content)} + (tr "onboarding-v2.newsletter.desc")] + + [:div {:class (stl/css :newsletter-options)} [:div {:class (stl/css :input-wrapper)} [:label {:for "newsletter-updates"} @@ -67,19 +72,14 @@ :id "newsletter-news" :on-change #(toggle newsletter-news)}]]]] - [:div {:class (stl/css :modal-info)} - [:p {:class (stl/css :modal-text)} - (tr "onboarding-v2.newsletter.privacy1") - [:a {:class (stl/css :modal-link) - :target "_blank" - :href "https://penpot.app/privacy"} - (tr "onboarding.newsletter.policy")]] - [:p {:class (stl/css :modal-text)} - (tr "onboarding-v2.newsletter.privacy2")]]] + [:p {:class (stl/css :modal-text)} + (tr "onboarding-v2.newsletter.privacy1") + [:a {:class (stl/css :modal-link) + :target "_blank" + :href "https://penpot.app/privacy"} + (tr "onboarding.newsletter.policy")]] + [:p {:class (stl/css :modal-text)} + (tr "onboarding-v2.newsletter.privacy2")] - [:div {:class (stl/css :modal-footer)} - [:button {:on-click accept} (tr "labels.continue")]] - - [:img {:class (stl/css-case :deco true - :top true) - :src "images/deco-newsletter.png" :border "0"}]]])) + [:button {:on-click accept + :class (stl/css :accept-btn)} (tr "labels.continue")]]]])) diff --git a/frontend/src/app/main/ui/onboarding/newsletter.scss b/frontend/src/app/main/ui/onboarding/newsletter.scss index 86f854597..20b4230df 100644 --- a/frontend/src/app/main/ui/onboarding/newsletter.scss +++ b/frontend/src/app/main/ui/onboarding/newsletter.scss @@ -13,69 +13,64 @@ .modal-container { @extend .modal-container-base; position: relative; - min-width: $s-712; + display: grid; + grid-template-columns: auto auto; + gap: $s-32; + padding-inline: $s-100; + padding-block-start: $s-100; + padding-block-end: $s-72; + margin: 0; + width: $s-960; + height: $s-632; + max-width: $s-960; + max-height: $s-632; } -.modal-header { - display: flex; - flex-direction: column; - justify-content: center; - margin-top: $s-80; - margin-bottom: $s-32; +.modal-left { + width: $s-172; + margin-block-end: $s-64; + img { + width: $s-172; + border-radius: $br-8 0 0 $br-8; + } +} + +.modal-right { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: $s-40 auto auto auto auto $s-32; + gap: $s-24; + position: relative; } .modal-title { @include bigTitleTipography; - text-align: center; color: var(--modal-title-foreground-color); - margin-bottom: $s-16; } .modal-text { - @include titleTipography; + @include bodyLargeTypography; color: var(--modal-text-foreground-color); margin: 0; } -.modal-content { - @include flexColumn; - @include titleTipography; - gap: $s-32; - margin-bottom: $s-24; -} - .newsletter-options { - @include flexColumn; + display: grid; gap: $s-16; + margin-inline-start: $s-16; } .input-wrapper { @extend .input-checkbox; } -.modal-info { - @include flexColumn; - gap: $s-16; - margin-bottom: $s-32; -} - .modal-link { @include bodyLargeTypography; color: var(--modal-link-foreground-color); margin: 0; } -.modal-footer { - display: flex; - justify-content: flex-end; - button { - @extend .modal-accept-btn; - } -} - -.deco { - position: absolute; - width: 183px; - top: -106px; - left: 261px; +.accept-btn { + @extend .modal-accept-btn; + justify-self: flex-end; } diff --git a/frontend/src/app/main/ui/onboarding/questions.cljs b/frontend/src/app/main/ui/onboarding/questions.cljs index 3d72a1011..c509ca987 100644 --- a/frontend/src/app/main/ui/onboarding/questions.cljs +++ b/frontend/src/app/main/ui/onboarding/questions.cljs @@ -10,18 +10,21 @@ (:require [app.common.data :as d] [app.common.data.macros :as dm] + [app.config :as cf] + [app.main.data.modal :as modal] [app.main.data.users :as du] [app.main.store :as st] [app.main.ui.components.forms :as fm] + [app.main.ui.icons :as i] [app.util.i18n :as i18n :refer [tr]] [cljs.spec.alpha :as s] [cuerdas.core :as str] [rumext.v2 :as mf])) (mf/defc step-container - [{:keys [form step on-next on-prev children] :as props}] + [{:keys [form step on-next on-prev children class] :as props}] - [:& fm/form {:form form :on-submit on-next} + [:& fm/form {:form form :on-submit on-next :class (dm/str class " " (stl/css :form-wrapper))} [:div {:class (stl/css :paginator)} (str/ffmt "%/4" step)] children @@ -41,39 +44,42 @@ (mf/defc step-1 [{:keys [on-next form] :as props}] - [:& step-container {:form form :step 1 :on-next on-next} + [:& step-container {:form form :step 1 :on-next on-next :class (stl/css :step-1)} [:img {:class (stl/css :header-image) :src "images/form/use-for-1.png" :alt (tr "questions.lets-get-started")}] [:h1 {:class (stl/css :modal-title)} (tr "questions.lets-get-started")] [:p {:class (stl/css :modal-text)} (tr "questions.your-feedback-will-help-us")] - [:h3 {:class (stl/css :modal-subtitle)} (tr "questions.questions-how-are-you-planning-to-use-penpot")] - [:& fm/select - {:options [{:label (tr "questions.select-option") - :value "" :key "questions-how-are-you-planning-to-use-penpot" - :disabled true} - {:label (tr "questions.discover-more-about-penpot") - :value "discover-more-about-penpot" - :key "discover-more-about-penpot"} - {:label (tr "questions.test-penpot-to-see-if-its-a-fit-for-team") - :value "test-penpot-to-see-if-its-a-fit-for-team" - :key "test-penpot-to-see-if-its-a-fit-for-team"} - {:label (tr "questions.start-to-work-on-my-project") - :value "start-to-work-on-my-project" - :key "start-to-work-on-my-project"} - {:label (tr "questions.get-the-code-from-my-team-project") - :value "get-the-code-from-my-team-project" - :key "get-the-code-from-my-team-project"} - {:label (tr "questions.leave-feedback-for-my-team-project") - :value "leave-feedback-for-my-team-project" - :key "leave-feedback-for-my-team-project"} - {:label (tr "questions.work-in-concept-ideas") - :value "work-in-concept-ideas" - :key "work-in-concept-ideas"} - {:label (tr "questions.try-out-before-using-penpot-on-premise") - :value "try-out-before-using-penpot-on-premise" - :key "try-out-before-using-penpot-on-premise"}] - :default "" - :name :planning}]]) + + [:div {:class (stl/css :modal-question)} + [:h3 {:class (stl/css :modal-subtitle)} (tr "questions.questions-how-are-you-planning-to-use-penpot")] + [:& fm/select + {:options [{:label (tr "questions.select-option") + :value "" :key "questions-how-are-you-planning-to-use-penpot" + :disabled true} + {:label (tr "questions.discover-more-about-penpot") + :value "discover-more-about-penpot" + :key "discover-more-about-penpot"} + {:label (tr "questions.test-penpot-to-see-if-its-a-fit-for-team") + :value "test-penpot-to-see-if-its-a-fit-for-team" + :key "test-penpot-to-see-if-its-a-fit-for-team"} + {:label (tr "questions.start-to-work-on-my-project") + :value "start-to-work-on-my-project" + :key "start-to-work-on-my-project"} + {:label (tr "questions.get-the-code-from-my-team-project") + :value "get-the-code-from-my-team-project" + :key "get-the-code-from-my-team-project"} + {:label (tr "questions.leave-feedback-for-my-team-project") + :value "leave-feedback-for-my-team-project" + :key "leave-feedback-for-my-team-project"} + {:label (tr "questions.work-in-concept-ideas") + :value "work-in-concept-ideas" + :key "work-in-concept-ideas"} + {:label (tr "questions.try-out-before-using-penpot-on-premise") + :value "try-out-before-using-penpot-on-premise" + :key "try-out-before-using-penpot-on-premise"}] + :default "" + :name :planning + :dropdown-class (stl/css :question-dropdown)}]]]) (s/def ::questions-form-step-2 (s/keys :req-un [::experience-branding-illustrations-marketing-pieces @@ -82,33 +88,42 @@ (mf/defc step-2 [{:keys [on-next on-prev form] :as props}] - [:& step-container {:form form :step 2 :on-next on-next :on-prev on-prev} - [:h3 {:class (stl/css :modal-subtitle)} + [:& step-container {:form form :step 2 :on-next on-next :on-prev on-prev :class (stl/css :step-2)} + [:h1 {:class (stl/css :modal-title)} (tr "questions.describe-your-experience-working-on")] - [:div {:class (stl/css :modal-question)} - [:div {:class (stl/css :modal-text)} + [:div {:class (stl/css-case :modal-question true + :question-centered true)} + [:div {:class (stl/css-case :modal-subtitle true + :centered true)} (tr "branding-illustrations-marketing-pieces")] [:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"} {:label (tr "questions.some") :value "some"} {:label (tr "questions.a-lot") :value "a-lot"}] - :name :experience-branding-illustrations-marketing-pieces}]] + :name :experience-branding-illustrations-marketing-pieces + :class (stl/css :radio-btns)}]] - [:div {:class (stl/css :modal-question)} - [:div {:class (stl/css :modal-text)} + [:div {:class (stl/css-case :modal-question true + :question-centered true)} + [:div {:class (stl/css-case :modal-subtitle true + :centered true)} (tr "questions.interface-design-visual-assets-design-systems")] [:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"} {:label (tr "questions.some") :value "some"} {:label (tr "questions.a-lot") :value "a-lot"}] - :name :experience-interface-design-visual-assets-design-systems}]] + :name :experience-interface-design-visual-assets-design-systems + :class (stl/css :radio-btns)}]] - [:div {:class (stl/css :modal-question)} - [:div {:class (stl/css :modal-text)} + [:div {:class (stl/css-case :modal-question true + :question-centered true)} + [:div {:class (stl/css-case :modal-subtitle true + :centered true)} (tr "questions.wireframes-user-journeys-flows-navigation-trees")] [:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"} {:label (tr "questions.some") :value "some"} {:label (tr "questions.a-lot") :value "a-lot"}] - :name :experience-interface-wireframes-user-journeys-flows-navigation-trees}]]]) + :name :experience-interface-wireframes-user-journeys-flows-navigation-trees + :class (stl/css :radio-btns)}]]]) (s/def ::questions-form-step-3 (s/keys :req-un [::experience-design-tool] @@ -140,23 +155,26 @@ (swap! form d/dissoc-in [:data :experience-design-tool-other]) (swap! form d/dissoc-in [:errors :experience-design-tool-other])))))] - [:& step-container {:form form :step 3 :on-next on-next :on-prev on-prev} - [:h3 {:class (stl/css :modal-subtitle)} + [:& step-container {:form form :step 3 :on-next on-next :on-prev on-prev :class (stl/css :step-3)} + [:h1 {:class (stl/css :modal-title)} (tr "question.design-tool-more-experienced-with")] - [:& fm/radio-buttons {:options [{:label (tr "questions.figma") :value "figma" :image "images/form/figma.png"} - {:label (tr "questions.sketch") :value "sketch" :image "images/form/sketch.png"} - {:label (tr "questions.adobe-xd") :value "adobe-xd" :image "images/form/adobe-xd.png"} - {:label (tr "questions.canva") :value "canva" :image "images/form/canva.png"} - {:label (tr "questions.invision") :value "invision" :image "images/form/invision.png"} - {:label (tr "questions.never-used-a-tool") :value "never-used-a-tool" :image "images/form/never-used.png"} - {:label (tr "questions.other") :value "other"}] - :name :experience-design-tool - :on-change on-design-tool-change}] + [:div {:class (stl/css :radio-wrapper)} + [:& fm/radio-buttons {:options [{:label (tr "questions.figma") :value "figma" :image "images/form/figma.png" :area "image1"} + {:label (tr "questions.sketch") :value "sketch" :image "images/form/sketch.png" :area "image2"} + {:label (tr "questions.adobe-xd") :value "adobe-xd" :image "images/form/adobe-xd.png" :area "image3"} + {:label (tr "questions.canva") :value "canva" :image "images/form/canva.png" :area "image4"} + {:label (tr "questions.invision") :value "invision" :image "images/form/invision.png" :area "image5"} + {:label (tr "questions.never-used-one") :area "image6" :value "never-used-a-tool" :icon i/curve-refactor} + {:label (tr "questions.other") :value "other" :area "other"}] + :name :experience-design-tool + :class (stl/css :image-radio) + :on-change on-design-tool-change}] - [:& fm/input {:name :experience-design-tool-other - :placeholder (tr "questions.other") - :label "" - :disabled (not= experience-design-tool "other")}]])) + [:& fm/input {:name :experience-design-tool-other + :class (stl/css :input-spacing) + :placeholder (tr "questions.other") + :label "" + :disabled (not= experience-design-tool "other")}]]])) (s/def ::questions-form-step-4 (s/keys :req-un [::team-size ::role] @@ -181,18 +199,23 @@ (swap! form d/dissoc-in [:data :role-other]) (swap! form d/dissoc-in [:errors :role-other])))))] - [:& step-container {:form form :step 4 :on-next on-next :on-prev on-prev} - [:h3 {:class (stl/css :modal-subtitle)} (tr "questions.role")] - [:& fm/radio-buttons {:options [{:label (tr "questions.designer") :value "designer"} - {:label (tr "questions.developer") :value "developer"} - {:label (tr "questions.manager") :value "manager"} - {:label (tr "questions.founder") :value "founder"} - {:label (tr "questions.marketing") :value "marketing"} - {:label (tr "questions.student-teacher") :value "student-teacher"} - {:label (tr "questions.other") :value "other"}] - :name :role - :on-change on-role-change}] - [:& fm/input {:name :role-other :label "" :placeholder (tr "questions.other") :disabled (not= role "other")}] + [:& step-container {:form form :step 4 :on-next on-next :on-prev on-prev :class (stl/css :step-4)} + [:h1 {:class (stl/css :modal-title)} (tr "questions.role")] + [:div {:class (stl/css :radio-wrapper)} + [:& fm/radio-buttons {:options [{:label (tr "questions.designer") :value "designer"} + {:label (tr "questions.developer") :value "developer"} + {:label (tr "questions.manager") :value "manager"} + {:label (tr "questions.founder") :value "founder"} + {:label (tr "questions.marketing") :value "marketing"} + {:label (tr "questions.student-teacher") :value "student-teacher"} + {:label (tr "questions.other") :value "other"}] + :name :role + :on-change on-role-change}] + [:& fm/input {:name :role-other + :class (stl/css :input-spacing) + :label "" + :placeholder (tr "questions.other") + :disabled (not= role "other")}]] [:div {:class (stl/css :modal-question)} [:h3 {:class (stl/css :modal-subtitle)} (tr "questions.team-size")] @@ -210,6 +233,8 @@ ;; this modal directly on the ui namespace. (mf/defc questions-modal + {::mf/register modal/components + ::mf/register-as :onboarding-questions} [] (let [container (mf/use-ref) step (mf/use-state 1) @@ -251,7 +276,17 @@ (fn [form] (let [questionnaire (merge @clean-data (:clean-data @form))] (reset! clean-data questionnaire) - (st/emit! (du/mark-questions-as-answered questionnaire)))))] + (st/emit! (du/mark-questions-as-answered questionnaire)) + + (cond + (contains? cf/flags :onboarding-newsletter) + (modal/show! {:type :onboarding-newsletter}) + + (contains? cf/flags :onboarding-team) + (modal/show! {:type :onboarding-team}) + + :else + (modal/hide!)))))] [:div {:class (stl/css :modal-overlay)} [:div {:class (stl/css :modal-container) diff --git a/frontend/src/app/main/ui/onboarding/questions.scss b/frontend/src/app/main/ui/onboarding/questions.scss index 999f41d12..c225e3ae6 100644 --- a/frontend/src/app/main/ui/onboarding/questions.scss +++ b/frontend/src/app/main/ui/onboarding/questions.scss @@ -11,25 +11,33 @@ } .modal-container { - @extend .modal-container-base; - min-width: $s-512; - position: relative; + max-width: $s-744; + max-height: fit-content; + width: $s-744; + padding-inline: $s-100; + padding-block-start: $s-40; + padding-block-end: $s-72; + border-radius: $br-8; + border: $s-2 solid var(--modal-border-color); + background-color: var(--modal-background-color); +} + +.form-wrapper { + display: grid; + grid-template-columns: 1fr; + gap: $s-24; } // STEP CONTAINER .paginator { - @include titleTipography; - position: absolute; - top: $s-8; - right: $s-8; - padding: $s-4; - border-radius: $br-6; - color: var(--color-foreground-secondary); + @include smallTitleTipography; + height: $s-20; + text-align: right; + color: var(--modal-text-foreground-color); } .action-buttons { @extend .modal-action-btns; - margin-top: $s-32; } .next-button { @extend .modal-accept-btn; @@ -41,31 +49,89 @@ // STEP 1 +// .step-1 { +// max-height: $s-468; +// height: $s-468; +// } + .header-image { - height: auto; - width: $s-200; + height: $s-112; + width: auto; + margin-inline-start: auto; } .modal-title { @include bigTitleTipography; color: var(--modal-title-foreground-color); - margin: $s-32 0 $s-8 0; + min-height: $s-32; + margin-block: auto; } .modal-subtitle { - @include titleTipography; + @include bodyLargeTypography; color: var(--modal-title-foreground-color); + margin: 0; + padding: 0; } -// STEP-2 - .modal-text { - @include titleTipography; + @include bodyLargeTypography; color: var(--modal-text-foreground-color); margin: 0; } -.modal-question { - @include flexColumn; - margin-top: $s-32; +// STEP-2 + +.step-2 { + grid-template-rows: $s-20 auto auto auto auto $s-32; +} + +.modal-question { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: $s-16 $s-32; + gap: $s-16; + height: fit-content; +} + +.question-centered { + width: $s-424; + grid-template-rows: auto $s-32; + margin: 0 auto; +} + +.radio-wrapper { + display: grid; + grid-template-columns: 1fr; + gap: $s-8; +} + +// STEP-3 +.step-3 { + grid-template-rows: $s-20 auto auto $s-32; +} + +.image-radio { + display: grid; + grid-template-rows: 1fr 1fr $s-32; + grid-template-columns: $s-88 $s-92 $s-92 $s-92 $s-88; + grid-template-areas: + ". image1 image2 image3 ." + ". image4 image5 image6 ." + "other other other other other"; + row-gap: $s-16; + column-gap: $s-24; +} + +.input-spacing { + height: $s-32; + width: calc(100% - $s-24); + margin-inline-start: $s-24; +} + +// STEP-4 + +.step-4 { + grid-template-rows: $s-20 auto auto auto $s-32; + row-gap: $s-16; } diff --git a/frontend/src/app/main/ui/onboarding/team_choice.cljs b/frontend/src/app/main/ui/onboarding/team_choice.cljs index 9cee007d9..4d30aaadb 100644 --- a/frontend/src/app/main/ui/onboarding/team_choice.cljs +++ b/frontend/src/app/main/ui/onboarding/team_choice.cljs @@ -7,6 +7,7 @@ (ns app.main.ui.onboarding.team-choice (:require-macros [app.main.style :as stl]) (:require + [app.common.data.macros :as dmc] [app.common.spec :as us] [app.main.data.dashboard :as dd] [app.main.data.events :as ev] @@ -27,33 +28,36 @@ (s/def ::team-form (s/keys :req-un [::name])) -(mf/defc team-modal-right +(mf/defc team-modal-left [] - [:div {:class (stl/css :modal-right)} + [:div {:class (stl/css :modal-left)} + [:h1 {:class (stl/css :modal-title)} + (tr "onboarding-v2.welcome.title")] + [:h2 {:class (stl/css :modal-subtitle)} - (tr "onboarding.team-modal.create-team")] + (tr "onboarding.team-modal.team-definition")] [:p {:class (stl/css :modal-text)} (tr "onboarding.team-modal.create-team-desc")] [:ul {:class (stl/css :team-features)} [:li {:class (stl/css :feature)} [:span {:class (stl/css :icon)} i/document-refactor] - [:p {:class (stl/css :modal-text)} + [:p {:class (stl/css :modal-desc)} (tr "onboarding.team-modal.create-team-feature-1")]] [:li {:class (stl/css :feature)} [:span {:class (stl/css :icon)} i/move-refactor] - [:p {:class (stl/css :modal-text)} + [:p {:class (stl/css :modal-desc)} (tr "onboarding.team-modal.create-team-feature-2")]] [:li {:class (stl/css :feature)} [:span {:class (stl/css :icon)} i/tree-refactor] - [:p {:class (stl/css :modal-text)} + [:p {:class (stl/css :modal-desc)} (tr "onboarding.team-modal.create-team-feature-3")]] [:li {:class (stl/css :feature)} [:span {:class (stl/css :icon)} i/user-refactor] - [:p {:class (stl/css :modal-text)} + [:p {:class (stl/css :modal-desc)} (tr "onboarding.team-modal.create-team-feature-4")]] [:li {:class (stl/css :feature)} [:span {:class (stl/css :icon)} i/tick-refactor] - [:p {:class (stl/css :modal-text)} + [:p {:class (stl/css :modal-desc)} (tr "onboarding.team-modal.create-team-feature-5")]]]]) (mf/defc onboarding-team-modal @@ -65,7 +69,7 @@ :validators [(fm/validate-not-empty :name (tr "auth.name.not-all-space")) (fm/validate-length :name fm/max-length-allowed (tr "auth.name.too-long"))]) on-submit - (mf/use-callback + (mf/use-fn (fn [form _] (let [tname (get-in @form [:clean-data :name])] (st/emit! (modal/show {:type :onboarding-team-invitations :name tname}) @@ -82,12 +86,18 @@ teams (mf/deref refs/teams)] - (if (< (count teams) 2) + (mf/with-effect [teams] + (when (> (count teams) 1) + (st/emit! (modal/hide)))) + + (when (< (count teams) 2) [:div {:class (stl/css :modal-overlay)} [:div.animated.fadeIn {:class (stl/css :modal-container)} - [:div {:class (stl/css :modal-left)} + [:& team-modal-left] + [:div {:class (stl/css :separator)}] + [:div {:class (stl/css :modal-right)} [:div {:class (stl/css :first-block)} - [:h2 {:class (stl/css :modal-title)} + [:h2 {:class (stl/css :modal-subtitle)} (tr "onboarding.team-modal.create-team")] [:p {:class (stl/css :modal-text)} (tr "onboarding.choice.team-up.create-team-desc")] @@ -106,7 +116,7 @@ {:class (stl/css :accept-button) :label (tr "onboarding.choice.team-up.continue-creating-team")}]]]] [:div {:class (stl/css :second-block)} - [:h2 {:class (stl/css :modal-title)} + [:h2 {:class (stl/css :modal-subtitle)} (tr "onboarding.choice.team-up.start-without-a-team")] [:p {:class (stl/css :modal-text)} (tr "onboarding.choice.team-up.start-without-a-team-description")] @@ -115,10 +125,8 @@ [:button {:class (stl/css :accept-button) :on-click on-skip} (tr "onboarding.choice.team-up.continue-without-a-team")]]]] - [:& team-modal-right] - [:div {:class (stl/css :paginator)} "1/2"]]] - (st/emit! (modal/hide))))) + [:div {:class (stl/css :paginator)} "1/2"]]]))) (defn get-available-roles [] @@ -135,8 +143,9 @@ (mf/defc onboarding-team-invitations-modal {::mf/register modal/components - ::mf/register-as :onboarding-team-invitations} - [{:keys [name] :as props}] + ::mf/register-as :onboarding-team-invitations + ::mf/props :obj} + [{:keys [name]}] (let [initial (mf/use-memo (constantly {:role "editor" :name name})) @@ -148,7 +157,7 @@ roles (mf/use-memo #(get-available-roles)) on-success - (mf/use-callback + (mf/use-fn (fn [_form response] (let [team-id (:id response)] (st/emit! @@ -158,13 +167,13 @@ (modal/hide)))))) on-error - (mf/use-callback + (mf/use-fn (fn [_form _response] (st/emit! (dm/error "Error on creating team.")))) ;; The SKIP branch only creates the team, without invitations on-invite-later - (mf/use-callback + (mf/use-fn (fn [_] (let [mdata {:on-success (partial on-success form) :on-error (partial on-error form)} @@ -177,8 +186,8 @@ ;; The SUBMIT branch creates the team with the invitations on-invite-now - (mf/use-callback - (fn [_] + (mf/use-fn + (fn [form] (let [mdata {:on-success (partial on-success form) :on-error (partial on-error form)} params (:clean-data @form) @@ -196,36 +205,39 @@ :step 2}))))) on-submit - (mf/use-callback - (fn [_] + (mf/use-fn + (fn [form] (let [params (:clean-data @form) emails (:emails params)] (if (> (count emails) 0) (on-invite-now form) - (on-invite-later form)))))] + (on-invite-later form)) + (modal/hide!))))] [:div {:class (stl/css :modal-overlay)} [:div.animated.fadeIn {:class (stl/css :modal-container)} - [:div {:class (stl/css :modal-left)} - [:h2 {:class (stl/css :modal-title)} (tr "onboarding.choice.team-up.invite-members")] + [:& team-modal-left] + + [:div {:class (stl/css :separator)}] + [:div {:class (stl/css :modal-right-invitations)} + [:h2 {:class (stl/css :modal-subtitle)} (tr "onboarding.choice.team-up.invite-members")] [:p {:class (stl/css :modal-text)} (tr "onboarding.choice.team-up.invite-members-info")] + [:& fm/form {:form form + :class (stl/css :modal-form-invitations) + :on-submit on-submit} + [:div {:class (stl/css :role-select)} + [:p {:class (stl/css :role-title)} (tr "onboarding.choice.team-up.roles")] + [:& fm/select {:name :role :options roles}]] - [:div {:class (stl/css :modal-form)} - [:& fm/form {:form form - :on-submit on-submit} - [:div {:class (stl/css :role-select)} - [:p {:class (stl/css :role-title)} (tr "onboarding.choice.team-up.roles")] - [:& fm/select {:name :role :options roles}]] - - [:div {:class (stl/css :invitation-row)} - [:& fm/multi-input {:type "email" - :name :emails - :auto-focus? true - :trim true - :valid-item-fn us/parse-email - :caution-item-fn #{} - :label (tr "modals.invite-member.emails") - :on-submit on-submit}]]] + [:div {:class (stl/css :invitation-row)} + [:& fm/multi-input {:type "email" + :name :emails + :auto-focus? true + :trim true + :valid-item-fn us/parse-email + :caution-item-fn #{} + :label (tr "modals.invite-member.emails") + :on-submit on-submit}]] [:div {:class (stl/css :action-buttons)} [:button {:class (stl/css :back-button) @@ -242,9 +254,9 @@ (tr "onboarding.choice.team-up.create-team-and-invite") (tr "onboarding.choice.team-up.create-team-without-invite"))}]] [:div {:class (stl/css :modal-hint)} - (tr "onboarding.choice.team-up.create-team-and-send-invites-description")]]] + (dmc/str "(" (tr "onboarding.choice.team-up.create-team-and-send-invites-description") ")")]]] + - [:& team-modal-right] [:div {:class (stl/css :paginator)} "2/2"]]])) diff --git a/frontend/src/app/main/ui/onboarding/team_choice.scss b/frontend/src/app/main/ui/onboarding/team_choice.scss index 42aaaef3d..956212241 100644 --- a/frontend/src/app/main/ui/onboarding/team_choice.scss +++ b/frontend/src/app/main/ui/onboarding/team_choice.scss @@ -11,32 +11,38 @@ } .modal-container { - @extend .modal-container-base; - padding: 0; - display: flex; position: relative; - min-width: $s-712; + display: grid; + grid-template-columns: 1fr $s-32 1fr; + gap: $s-24; + width: $s-908; + height: $s-632; + padding-inline: $s-100; + padding-block-start: $s-40; + padding-block-end: $s-72; + border-radius: $br-8; + background-color: var(--modal-background-color); + border: $s-2 solid var(--modal-border-color); } +.paginator { + @include bodyMedTipography; + position: absolute; + top: $s-40; + right: $s-100; + padding: $s-4; + border-radius: $br-6; + color: var(--color-foreground-secondary); +} + +// MODAL LEFT .modal-left { - width: $s-356; - padding: $s-48 $s-28 $s-48 $s-48; -} - -.first-block, -.second-block { - @include flexColumn; - width: 100%; -} - -.first-block { - margin-bottom: $s-72; -} - -.modal-right { - width: $s-356; - padding: $s-48; - background-color: var(--color-background-tertiary); + display: grid; + grid-template-columns: 1fr; + grid-template-rows: $s-32 auto auto 1fr; + gap: $s-16; + max-height: $s-512; + padding-block-start: $s-44; } .modal-title { @@ -46,70 +52,48 @@ } .modal-subtitle { - @include tabTitleTipography; + @include medTitleTipography; color: var(--modal-title-foreground-color); - margin-bottom: $s-8; } -.modal-text, -.modal-hint { - @include titleTipography; +.modal-text { + @include bodyLargeTypography; color: var(--modal-text-foreground-color); margin: 0; } -.modal-hint { - margin-top: $s-24; -} -.modal-form { - margin: $s-24 0; + +.modal-desc { + @include smallTitleTipography; + margin: 0; + color: var(--modal-title-foreground-color); } -.team-name-input { - @extend .input-element-label; - label { - @include flexColumn; - @include titleTipography; - align-items: flex-start; - width: 100%; - border: none; - background-color: transparent; - height: 100%; - - input { - @include titleTipography; - margin-top: $s-8; - } - } -} - -.role-select { +.team-features { @include flexColumn; - .role-title { - @include titleTipography; - margin: 0; - color: var(--modal-title-foreground-color); + gap: $s-16; + margin: 0; +} + +.feature { + @include flexRow; + gap: $s-16; +} + +.icon { + @include flexCenter; + height: $s-32; + width: $s-32; + border-radius: $br-circle; + border: $s-1 solid var(--color-accent-primary); + svg { + @extend .button-icon; + stroke: var(--color-accent-primary); } } -.invitation-row { - margin-top: $s-8; - margin-bottom: $s-24; -} - -.paginator { - @include titleTipography; - position: absolute; - top: $s-8; - right: $s-8; - padding: $s-4; - border-radius: $br-6; - color: var(--color-foreground-secondary); -} - .action-buttons { @extend .modal-action-btns; - justify-content: flex-start; - margin-top: $s-24; + justify-content: flex-end; } .accept-button { @@ -120,25 +104,88 @@ @extend .modal-cancel-btn; } -.team-features { - @include flexColumn; - gap: $s-24; - margin-top: $s-24; +// SEPARATOR +.separator { + width: $s-8; + height: $s-420; + border-radius: $br-8; + margin-block-start: $s-92; + opacity: 42%; + background-color: var(--modal-separator-backogrund-color); } -.feature { - @include flexRow; +// MODAL RIGHT TEAM +.modal-right { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr auto; + gap: $s-24; + max-height: $s-512; + margin-block-start: $s-92; +} + +.first-block, +.second-block { + @include flexColumn; + gap: $s-16; +} + +.modal-form { + display: grid; + grid-template-columns: 1fr; + gap: $s-16; +} + +.team-name-input { + @extend .input-element-label; + label { + @include flexColumn; + @include bodyMedTipography; + align-items: flex-start; + width: 100%; + border: none; + background-color: transparent; + height: 100%; + + input { + @include bodyMedTipography; + margin-top: $s-8; + } + } +} + +// MODAL RIGHT INVITATIONS + +.modal-right-invitations { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto auto 1fr; + gap: $s-16; + max-height: $s-512; + margin-block-start: $s-92; +} + +.modal-form-invitations { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto 1fr auto auto; + margin-block-end: $s-72; gap: $s-8; } -.icon { - @include flexCenter; - height: $s-32; - width: $s-32; - border-radius: $br-circle; - background-color: var(--color-accent-primary); - svg { - @extend .button-icon; - stroke: var(--color-background-tertiary); - } +.role-title { + @include uppercaseTitleTipography; + margin-block-end: $s-8; + color: var(--modal-title-foreground-color); +} + +.invitation-row { + margin: 0; + color: var(--modal-title-foreground-color); +} + +.modal-hint { + @include bodyMedTipography; + color: var(--modal-text-foreground-color); + text-align: right; } diff --git a/frontend/src/app/main/ui/settings/access_tokens.scss b/frontend/src/app/main/ui/settings/access_tokens.scss index e843c83f0..4a9b2e340 100644 --- a/frontend/src/app/main/ui/settings/access_tokens.scss +++ b/frontend/src/app/main/ui/settings/access_tokens.scss @@ -180,7 +180,7 @@ .modal-header { margin-bottom: $s-24; .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } .modal-close-btn { @@ -191,7 +191,7 @@ .modal-content { @include flexColumn; gap: $s-24; - @include titleTipography; + @include bodyMedTipography; margin-bottom: $s-24; } @@ -200,7 +200,7 @@ } .select-title { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-title-foreground-color); } @@ -223,7 +223,7 @@ .token-value { @include textEllipsis; - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; } diff --git a/frontend/src/app/main/ui/settings/change_email.scss b/frontend/src/app/main/ui/settings/change_email.scss index e6f150076..5980e211d 100644 --- a/frontend/src/app/main/ui/settings/change_email.scss +++ b/frontend/src/app/main/ui/settings/change_email.scss @@ -20,7 +20,7 @@ } .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -30,7 +30,7 @@ .modal-content { @include flexColumn; - @include titleTipography; + @include bodyMedTipography; gap: $s-24; margin-bottom: $s-24; } @@ -40,7 +40,7 @@ } .select-title { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-title-foreground-color); } diff --git a/frontend/src/app/main/ui/settings/delete_account.scss b/frontend/src/app/main/ui/settings/delete_account.scss index 148781eba..b60a2d012 100644 --- a/frontend/src/app/main/ui/settings/delete_account.scss +++ b/frontend/src/app/main/ui/settings/delete_account.scss @@ -20,7 +20,7 @@ } .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -30,7 +30,7 @@ .modal-content { @include flexColumn; - @include titleTipography; + @include bodyMedTipography; gap: $s-24; margin-bottom: $s-24; } @@ -40,7 +40,7 @@ } .select-title { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-title-foreground-color); } diff --git a/frontend/src/app/main/ui/viewer.scss b/frontend/src/app/main/ui/viewer.scss index 3a4e36d3f..8bdd338af 100644 --- a/frontend/src/app/main/ui/viewer.scss +++ b/frontend/src/app/main/ui/viewer.scss @@ -24,7 +24,7 @@ } .empty-state { - @include titleTipography; + @include bodyMedTipography; color: var(--empty-message-foreground-color); display: grid; place-items: center; @@ -133,7 +133,7 @@ .counter { @include flexCenter; - @include titleTipography; + @include bodyMedTipography; border-radius: $br-8; width: $s-64; height: $s-32; diff --git a/frontend/src/app/main/ui/viewer/comments.scss b/frontend/src/app/main/ui/viewer/comments.scss index 7dbbfcc83..c7f5f95db 100644 --- a/frontend/src/app/main/ui/viewer/comments.scss +++ b/frontend/src/app/main/ui/viewer/comments.scss @@ -8,7 +8,7 @@ // COMMENT DROPDOWN ON HEADER .view-options { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; position: relative; @@ -29,7 +29,7 @@ } .dropdown-title { - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; color: var(--input-foreground-color-active); } diff --git a/frontend/src/app/main/ui/viewer/header.scss b/frontend/src/app/main/ui/viewer/header.scss index da758dffe..ef5666cf8 100644 --- a/frontend/src/app/main/ui/viewer/header.scss +++ b/frontend/src/app/main/ui/viewer/header.scss @@ -53,7 +53,7 @@ } .project-name { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--title-foreground-color); } @@ -62,7 +62,7 @@ } .breadcrumb { - @include titleTipography; + @include bodyMedTipography; @include flexRow; color: var(--title-foreground-color); cursor: pointer; @@ -114,7 +114,7 @@ } .current-frame { - @include titleTipography; + @include bodyMedTipography; @include flexRow; flex-grow: 1; color: var(--title-foreground-color-hover); @@ -198,7 +198,7 @@ .go-log-btn { @extend .button-tertiary; - @include titleTipography; + @include bodyMedTipography; height: $s-32; padding: 0 $s-8; border-radius: $br-8; @@ -213,7 +213,7 @@ min-width: $s-64; border-radius: $br-8; .label { - @include titleTipography; + @include bodyMedTipography; color: var(--button-tertiary-foreground-color-rest); } diff --git a/frontend/src/app/main/ui/viewer/inspect/annotation.scss b/frontend/src/app/main/ui/viewer/inspect/annotation.scss index ddceb455d..94910fce2 100644 --- a/frontend/src/app/main/ui/viewer/inspect/annotation.scss +++ b/frontend/src/app/main/ui/viewer/inspect/annotation.scss @@ -15,6 +15,6 @@ } .annotation-content { - @include titleTipography; + @include bodyMedTipography; color: var(--entry-foreground-color); } diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss index 7f30931c3..818787903 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss @@ -27,7 +27,7 @@ } .image-format { - @include tabTitleTipography; + @include uppercaseTitleTipography; height: $s-32; padding: $s-8 0; color: var(--menu-foreground-color-rest); @@ -42,7 +42,7 @@ } .format-info { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; width: 100%; @@ -78,7 +78,7 @@ grid-template-rows: 1fr 1fr; } .color-name-wrapper { - @include titleTipography; + @include bodyMedTipography; @include flexColumn; padding: $s-8 $s-4 $s-8 $s-8; height: $s-32; @@ -89,21 +89,21 @@ max-width: $s-124; } .color-name-library { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; text-align: left; height: $s-16; color: var(--menu-foreground-color-rest); } .color-value-wrapper { - @include titleTipography; + @include bodyMedTipography; height: $s-16; color: var(--menu-foreground-color); } } .opacity-info { - @include titleTipography; + @include bodyMedTipography; color: var(--menu-foreground-color); padding: $s-8 0; } @@ -160,7 +160,7 @@ .download-button { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; height: $s-32; width: 100%; margin-top: $s-4; diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss index 80f753a2c..f9e128e30 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss @@ -39,7 +39,7 @@ .download-button { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; height: $s-32; margin-top: $s-4; } diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss index 38248e1fc..1ad6d6a8f 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss @@ -23,7 +23,7 @@ } .attributes-subtitle { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; justify-content: space-between; height: $s-32; diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss index d32a5a516..f9f49e032 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss @@ -36,7 +36,7 @@ border: $s-1 solid var(--menu-border-color-disabled); margin-top: $s-4; .content { - @include titleTipography; + @include bodyMedTipography; width: 100%; padding: $s-4 0; color: var(--color-foreground-secondary); diff --git a/frontend/src/app/main/ui/viewer/inspect/code.scss b/frontend/src/app/main/ui/viewer/inspect/code.scss index a383684c7..1b7b3f9ca 100644 --- a/frontend/src/app/main/ui/viewer/inspect/code.scss +++ b/frontend/src/app/main/ui/viewer/inspect/code.scss @@ -16,7 +16,7 @@ .download-button { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; height: $s-32; width: 100%; margin: $s-8 0; @@ -55,7 +55,7 @@ } .code-lang { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; } @@ -82,14 +82,14 @@ max-width: $s-108; } .code-lang-select { - @include tabTitleTipography; + @include uppercaseTitleTipography; width: $s-72; border: $s-1 solid transparent; background-color: transparent; color: var(--menu-foreground-color-disabled); } .code-lang-option { - @include tabTitleTipography; + @include uppercaseTitleTipography; width: $s-72; height: $s-32; padding: $s-8; diff --git a/frontend/src/app/main/ui/viewer/inspect/exports.scss b/frontend/src/app/main/ui/viewer/inspect/exports.scss index 28ad83a35..600262c4e 100644 --- a/frontend/src/app/main/ui/viewer/inspect/exports.scss +++ b/frontend/src/app/main/ui/viewer/inspect/exports.scss @@ -94,7 +94,7 @@ .export-btn { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; height: $s-32; width: $s-252; } diff --git a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss index 2610509b9..00ea349ec 100644 --- a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss +++ b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss @@ -46,7 +46,7 @@ } .layer-title { - @include titleTipography; + @include bodyMedTipography; @include text-ellipsis; height: $s-32; padding: $s-8 0; @@ -75,7 +75,7 @@ } .placeholder-label { - @include titleTipography; + @include bodyMedTipography; text-align: center; width: $s-200; color: var(--empty-message-foreground-color); @@ -83,7 +83,7 @@ .more-info-btn { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; height: $s-32; padding: $s-8 $s-24; } diff --git a/frontend/src/app/main/ui/viewer/interactions.scss b/frontend/src/app/main/ui/viewer/interactions.scss index 656bc7c93..3383ef35f 100644 --- a/frontend/src/app/main/ui/viewer/interactions.scss +++ b/frontend/src/app/main/ui/viewer/interactions.scss @@ -7,7 +7,7 @@ @use "common/refactor/common-refactor.scss" as *; .view-options { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; position: relative; @@ -19,7 +19,7 @@ cursor: pointer; } .dropdown-title { - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; color: var(--input-foreground-color-active); } diff --git a/frontend/src/app/main/ui/viewer/login.scss b/frontend/src/app/main/ui/viewer/login.scss index 6e39b53f6..40afaf4c9 100644 --- a/frontend/src/app/main/ui/viewer/login.scss +++ b/frontend/src/app/main/ui/viewer/login.scss @@ -19,7 +19,7 @@ } .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -29,7 +29,7 @@ .modal-content { @include flexColumn; - @include titleTipography; + @include bodyMedTipography; gap: $s-24; max-height: $s-400; width: $s-368; diff --git a/frontend/src/app/main/ui/viewer/share_link.scss b/frontend/src/app/main/ui/viewer/share_link.scss index 7219154c8..afc2dbb17 100644 --- a/frontend/src/app/main/ui/viewer/share_link.scss +++ b/frontend/src/app/main/ui/viewer/share_link.scss @@ -25,7 +25,7 @@ } .share-link-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -34,7 +34,7 @@ } .modal-content { - @include titleTipography; + @include bodyMedTipography; @include flexColumn; gap: $s-24; } @@ -86,7 +86,7 @@ } .description { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-text-foreground-color); margin-bottom: $s-24; } @@ -115,7 +115,7 @@ .manage-permissions { @include buttonStyle; - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--menu-foreground-color-rest); height: $s-32; display: flex; @@ -181,7 +181,7 @@ } .count-pages, .current-tag { - @include titleTipography; + @include bodyMedTipography; color: var(--input-foreground-color); } diff --git a/frontend/src/app/main/ui/viewer/thumbnails.scss b/frontend/src/app/main/ui/viewer/thumbnails.scss index 982a9b468..85225ba68 100644 --- a/frontend/src/app/main/ui/viewer/thumbnails.scss +++ b/frontend/src/app/main/ui/viewer/thumbnails.scss @@ -33,7 +33,7 @@ } .counter { - @include titleTipography; + @include bodyMedTipography; color: var(--viewer-thumbnails-control-foreground-color); } @@ -142,7 +142,7 @@ } .thumbnail-info { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; text-align: center; color: var(--viewer-thumbnails-control-foreground-color); diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss index 0a186880d..05323527b 100644 --- a/frontend/src/app/main/ui/workspace/color_palette.scss +++ b/frontend/src/app/main/ui/workspace/color_palette.scss @@ -97,6 +97,6 @@ } .color-palette-empty { - @include titleTipography; + @include bodyMedTipography; color: var(--palette-text-color); } diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss index 4aa4b2716..665d406cd 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss @@ -33,7 +33,7 @@ .option-wrapper { width: 100%; .library-name { - @include titleTipography; + @include bodyMedTipography; color: var(--context-menu-foreground-color); display: grid; grid-template-columns: 1fr $s-24; diff --git a/frontend/src/app/main/ui/workspace/colorpicker.scss b/frontend/src/app/main/ui/workspace/colorpicker.scss index 62a7e5527..7865e349f 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker.scss @@ -108,7 +108,7 @@ } .accept-color { - @include tabTitleTipography; + @include uppercaseTitleTipography; @extend .button-secondary; width: 100%; height: $s-32; @@ -161,7 +161,7 @@ .choose-image { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; width: 100%; margin-top: $s-12; height: $s-32; diff --git a/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss b/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss index be13a492b..4b02ceec6 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss @@ -19,7 +19,7 @@ } .hsva-selector-label { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; justify-content: flex-start; diff --git a/frontend/src/app/main/ui/workspace/comments.scss b/frontend/src/app/main/ui/workspace/comments.scss index b62b640f8..7e64da75d 100644 --- a/frontend/src/app/main/ui/workspace/comments.scss +++ b/frontend/src/app/main/ui/workspace/comments.scss @@ -15,7 +15,7 @@ .comments-section-title { @include flexCenter; - @include tabTitleTipography; + @include uppercaseTitleTipography; position: relative; height: $s-32; min-height: $s-32; @@ -96,7 +96,7 @@ } } .label { - @include titleTipography; + @include bodyMedTipography; } &:hover { .icon svg { @@ -150,7 +150,7 @@ } .placeholder-label { - @include titleTipography; + @include bodyMedTipography; text-align: center; width: $s-184; color: var(--empty-message-foreground-color); diff --git a/frontend/src/app/main/ui/workspace/context_menu.scss b/frontend/src/app/main/ui/workspace/context_menu.scss index b83f67bb4..a1758561b 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/context_menu.scss @@ -37,7 +37,7 @@ cursor: pointer; .title { - @include titleTipography; + @include bodyMedTipography; color: var(--menu-foreground-color); } .shortcut { @@ -45,7 +45,7 @@ gap: $s-2; color: var(--menu-shortcut-foreground-color); .shortcut-key { - @include titleTipography; + @include bodyMedTipography; @include flexCenter; height: $s-20; padding: $s-2 $s-6; diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss index 394ab5890..c6ebf454a 100644 --- a/frontend/src/app/main/ui/workspace/left_header.scss +++ b/frontend/src/app/main/ui/workspace/left_header.scss @@ -36,7 +36,7 @@ .project-name, .file-name { - @include tabTitleTipography; + @include uppercaseTitleTipography; @include textEllipsis; height: $s-16; width: 100%; @@ -47,7 +47,7 @@ } .file-name { - @include medTitleTipography; + @include smallTitleTipography; text-transform: none; color: var(--title-foreground-color-hover); } diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss index 3fa999a1e..9a511a5a6 100644 --- a/frontend/src/app/main/ui/workspace/libraries.scss +++ b/frontend/src/app/main/ui/workspace/libraries.scss @@ -85,7 +85,7 @@ .item-publish, .item-unpublish { @extend .button-primary; - @include tabTitleTipography; + @include uppercaseTitleTipography; height: $s-32; min-width: $s-92; padding: $s-8 $s-24; @@ -308,7 +308,7 @@ justify-content: flex-end; .primary-button { @extend .button-primary; - @include tabTitleTipography; + @include uppercaseTitleTipography; padding: $s-0 $s-16; } } diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss index c7a45ab87..f860b1240 100644 --- a/frontend/src/app/main/ui/workspace/right_header.scss +++ b/frontend/src/app/main/ui/workspace/right_header.scss @@ -36,7 +36,7 @@ width: $s-48; border-radius: $br-8; .label { - @include titleTipography; + @include bodyMedTipography; color: var(--button-tertiary-foreground-color-rest); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss index b5b44d3db..99d79ed62 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss @@ -19,7 +19,7 @@ .libraries-button { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; gap: $s-2; height: $s-32; width: 100%; @@ -113,7 +113,7 @@ } .section-item { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; justify-content: space-between; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss index c2ad1f970..1cf4a6088 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss @@ -45,7 +45,7 @@ border: $s-1 solid var(--input-border-color-focus); input.element-name { @include textEllipsis; - @include titleTipography; + @include bodyMedTipography; @include removeInputStyle; flex-grow: 1; height: $s-28; @@ -67,7 +67,7 @@ } .name-block { - @include titleTipography; + @include bodyMedTipography; display: grid; grid-template-columns: auto 1fr; margin: 0; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss index 063cfa831..1b33dcf6a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss @@ -7,7 +7,7 @@ @import "refactor/common-refactor.scss"; .title-name { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; flex-grow: 1; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss index d5189b67e..149f4a398 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss @@ -29,7 +29,7 @@ cursor: pointer; .cell-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; display: none; position: absolute; @@ -44,7 +44,7 @@ color: var(--assets-item-name-foreground-color); input { @include textEllipsis; - @include titleTipography; + @include bodyMedTipography; @include removeInputStyle; height: auto; padding: 0; @@ -132,13 +132,13 @@ } .item-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; order: 2; color: var(--assets-item-name-foreground-color); input { @include textEllipsis; - @include titleTipography; + @include bodyMedTipography; @include removeInputStyle; height: $s-32; padding: $s-4; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss index 73068d685..32673ec81 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss @@ -14,7 +14,7 @@ } .file-name { - @include titleTipography; + @include bodyMedTipography; display: flex; justify-content: flex-start; align-items: center; @@ -71,6 +71,6 @@ } .no-found-text { - @include titleTipography; + @include bodyMedTipography; color: var(--not-found-foreground-color); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss index d875778a6..834dbb544 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss @@ -36,7 +36,7 @@ height: 10vh; } .cell-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; display: none; position: absolute; @@ -110,7 +110,7 @@ } .item-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; padding-left: $s-8; color: var(--assets-item-name-foreground-color); diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss index 209c441e3..0bbca2d4e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss @@ -37,7 +37,7 @@ } .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } .modal-close-btn { @@ -45,7 +45,7 @@ } .modal-content { - @include titleTipography; + @include bodyMedTipography; margin-bottom: $s-24; } .input-wrapper { diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug.scss b/frontend/src/app/main/ui/workspace/sidebar/debug.scss index 96364d88e..6cb0c1405 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/debug.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/debug.scss @@ -14,7 +14,7 @@ .panel-title { @include flexCenter; - @include tabTitleTipography; + @include uppercaseTitleTipography; position: relative; height: $s-32; min-height: $s-32; diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss index 3b231ce61..516a1f705 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss @@ -17,7 +17,7 @@ .shape-info-title { @include flexCenter; - @include tabTitleTipography; + @include uppercaseTitleTipography; position: relative; height: $s-32; min-height: $s-32; diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.scss b/frontend/src/app/main/ui/workspace/sidebar/history.scss index 312967c78..221547c73 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/history.scss @@ -14,7 +14,7 @@ .history-toolbox-title { @include flexCenter; - @include tabTitleTipography; + @include uppercaseTitleTipography; position: relative; height: $s-32; min-height: $s-32; @@ -59,7 +59,7 @@ } .history-entry-empty-msg { - @include titleTipography; + @include bodyMedTipography; color: var(--empty-message-foreground-color); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss index 46ee41365..45dac4771 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss @@ -8,7 +8,7 @@ .element-name { @include textEllipsis; - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; color: var(--context-hover-color, var(--layer-row-foreground-color)); &.selected { @@ -27,7 +27,7 @@ } .element-name-input { @include textEllipsis; - @include titleTipography; + @include bodyMedTipography; @include removeInputStyle; flex-grow: 1; height: $s-28; diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index 25cf2cc4a..c84e3449b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss @@ -69,7 +69,7 @@ } .page-name { - @include tabTitleTipography; + @include uppercaseTitleTipography; padding: 0 $s-12; color: var(--title-foreground-color); } @@ -108,7 +108,7 @@ } .focus-name { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; height: 100%; @@ -124,7 +124,7 @@ .focus-mode-tag { @include flexCenter; - @include titleTipography; + @include bodyMedTipography; height: $s-20; padding: $s-4 $s-6; border: $s-1 solid var(--tag-background-color); @@ -160,7 +160,7 @@ .layer-filter-name { @include flexCenter; - @include titleTipography; + @include bodyMedTipography; color: var(--pill-foreground-color); } @@ -170,7 +170,7 @@ left: $s-12; width: $s-192; .filter-menu-item { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; justify-content: space-between; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss index a7f64e93b..442db729d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss @@ -57,7 +57,7 @@ } } .label { - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; display: flex; align-items: center; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss index 56e096768..0ded56cb7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss @@ -35,6 +35,6 @@ .more-colors-btn { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; height: $s-32; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss index 028e98536..16145e413 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss @@ -15,7 +15,7 @@ } .title-back { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; gap: $s-4; @@ -87,7 +87,7 @@ } .component-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; direction: rtl; text-align: left; @@ -95,7 +95,7 @@ } .component-parent-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; direction: rtl; text-align: left; @@ -134,7 +134,7 @@ } .copy-text { - @include titleTipography; + @include bodyMedTipography; height: 100%; display: flex; align-items: center; @@ -235,7 +235,7 @@ } .path-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; direction: rtl; height: $s-32; @@ -243,7 +243,7 @@ } .path-name-last { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; height: $s-32; padding: $s-8 0 $s-8 $s-2; @@ -251,7 +251,7 @@ } .component-list-empty { - @include titleTipography; + @include bodyMedTipography; margin: 0 $s-4 0 $s-8; color: $df-secondary; } @@ -337,7 +337,7 @@ object-fit: contain; } .component-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; display: none; position: absolute; @@ -383,7 +383,7 @@ } .element-set-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; height: $s-32; @@ -422,7 +422,7 @@ } .library-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; color: var(--title-foreground-color); padding: $s-8 0 $s-8 $s-2; @@ -443,7 +443,7 @@ } .component-group { - @include titleTipography; + @include bodyMedTipography; display: grid; grid-template-columns: 1fr $s-12; height: $s-32; @@ -486,7 +486,7 @@ // Component annotation .component-annotation { - @include titleTipography; + @include bodyMedTipography; color: var(--entry-foreground-color); border-radius: $br-8; @@ -604,7 +604,7 @@ } .counter { - @include titleTipography; + @include bodyMedTipography; text-align: right; color: var(--entry-foreground-color); margin: 0 $s-8 $s-8 0; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss index c3d33b3f1..2114b7cd0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss @@ -134,7 +134,7 @@ } label { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; gap: $s-2; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss index 6bbb39afd..49dd4fe1c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss @@ -96,7 +96,7 @@ .export-btn { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; height: $s-32; width: $s-252; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss index 602a13293..60e990dfa 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss @@ -26,7 +26,7 @@ .edit-grid-btn { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; width: 100%; padding: $s-8; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss index f9eb79f54..fe0d2b1b0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss @@ -55,12 +55,12 @@ } .after { - @include titleTipography; + @include bodyMedTipography; margin-top: $s-1; } .interactions-help { - @include titleTipography; + @include bodyMedTipography; text-align: center; color: var(--title-foreground-color); } @@ -120,7 +120,7 @@ } .interaction-name { @include twoLineTextEllipsis; - @include titleTipography; + @include bodyMedTipography; padding-left: $s-4; width: $s-92; margin: auto 0; @@ -287,7 +287,7 @@ } .flow-name-wrapper { - @include titleTipography; + @include bodyMedTipography; @include focusInput; display: flex; align-items: center; @@ -324,7 +324,7 @@ } .flow-input-wrapper { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; height: $s-28; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss index 93490738f..62ce26e4f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss @@ -176,14 +176,14 @@ .edit-mode-btn { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; width: 100%; padding: $s-8; } .exit-btn { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; padding: $s-8 $s-20; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss index c7e4e533b..f82052187 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss @@ -44,7 +44,7 @@ } .select-name { - @include titleTipography; + @include bodyMedTipography; display: flex; justify-content: flex-start; align-items: center; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss index 036c14ca1..4e8a97698 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss @@ -26,7 +26,7 @@ } .attr-name { - @include titleTipography; + @include bodyMedTipography; @include twoLineTextEllipsis; width: $s-88; margin: auto $s-4; @@ -60,7 +60,7 @@ } .attr-title { - @include titleTipography; + @include bodyMedTipography; font-size: $fs-10; text-transform: uppercase; margin-inline-start: $s-4; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss index 2e0c98298..e5daf0a5c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss @@ -33,7 +33,7 @@ } .multiple-text { - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; color: var(--input-foreground-color-active); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss index bec81db5b..9864dc284 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss @@ -72,7 +72,7 @@ .typography-name, .typography-font { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; display: flex; align-items: center; @@ -90,7 +90,7 @@ } .font-name-wrapper { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; height: $s-32; @@ -169,7 +169,7 @@ color: var(--assets-item-name-foreground-color-hover); } .typography-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; display: flex; align-items: center; @@ -178,7 +178,7 @@ color: var(--assets-item-name-foreground-color-hover); } .typography-font { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; margin-left: $s-6; display: flex; @@ -207,14 +207,14 @@ --calcualted-width: calc(var(--width) - $s-48); padding-left: $s-2; .info-label { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; width: calc(var(--calcualted-width) / 2); padding-top: $s-8; color: var(--assets-item-name-foreground-color); } .info-content { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; padding-top: $s-8; width: calc(var(--calcualted-width) / 2); @@ -223,7 +223,7 @@ } .link-btn { - @include tabTitleTipography; + @include uppercaseTitleTipography; @extend .button-secondary; width: 100%; height: $s-32; @@ -254,7 +254,7 @@ position: relative; } .font-option { - @include titleTipography; + @include bodyMedTipography; @extend .asset-element; padding: $s-8 0 $s-8 $s-8; cursor: pointer; @@ -277,7 +277,7 @@ gap: $s-4; .font-size-options { @extend .asset-element; - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; width: $s-60; margin: 0; @@ -331,7 +331,7 @@ .font-size-select { @include removeInputStyle; - @include titleTipography; + @include bodyMedTipography; height: $s-32; height: 100%; width: 100%; @@ -373,7 +373,7 @@ display: grid; row-gap: $s-2; .title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--title-foreground-color); margin: 0; padding: $s-12; @@ -410,7 +410,7 @@ } .label { - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss index 0eb672b73..f399ac696 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss @@ -61,7 +61,7 @@ } } .color-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; padding-inline: $s-6; border-radius: $br-8; @@ -80,7 +80,7 @@ stroke: var(--detach-icon-foreground-color); } .color-input-wrapper { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; height: $s-28; diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss index 530de5577..507e5d677 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss @@ -77,7 +77,7 @@ .shortcuts-header { @include flexCenter; - @include tabTitleTipography; + @include uppercaseTitleTipography; position: relative; height: $s-32; padding: $s-2 $s-2 $s-2 0; @@ -112,7 +112,7 @@ } .not-found { - @include titleTipography; + @include bodyMedTipography; color: var(--empty-message-foreground-color); margin: $s-12; } @@ -128,7 +128,7 @@ .section-title, .subsection-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; margin: 0; @@ -181,7 +181,7 @@ background-color: var(--pill-background-color); .command-name { - @include titleTipography; + @include bodyMedTipography; margin-left: $s-2; color: var(--pill-foreground-color); } @@ -191,7 +191,7 @@ color: var(--pill-foreground-color); .key { - @include titleTipography; + @include bodyMedTipography; @include flexCenter; text-transform: capitalize; height: $s-20; diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss index fef43646a..5c34dd671 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss @@ -35,7 +35,7 @@ .view-only-mode { @include flexCenter; - @include titleTipography; + @include bodyMedTipography; height: $s-20; padding: $s-4 $s-6; margin-right: $s-12; @@ -75,7 +75,7 @@ } .page-element { - @include titleTipography; + @include bodyMedTipography; min-height: $s-32; width: 100%; cursor: pointer; @@ -139,7 +139,7 @@ } input.element-name { @include textEllipsis; - @include titleTipography; + @include bodyMedTipography; @include removeInputStyle; flex-grow: 1; height: $s-28; diff --git a/frontend/src/app/main/ui/workspace/text_palette.scss b/frontend/src/app/main/ui/workspace/text_palette.scss index 43bbe062b..44f957573 100644 --- a/frontend/src/app/main/ui/workspace/text_palette.scss +++ b/frontend/src/app/main/ui/workspace/text_palette.scss @@ -80,7 +80,7 @@ } .typography-item { - @include titleTipography; + @include bodyMedTipography; display: flex; flex-direction: column; justify-content: center; @@ -135,6 +135,6 @@ } .text-palette-empty { - @include titleTipography; + @include bodyMedTipography; color: var(--palette-text-color); } diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss index d624d565a..921371e05 100644 --- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss @@ -32,7 +32,7 @@ margin-bottom: 0; } .library-name { - @include titleTipography; + @include bodyMedTipography; color: var(--context-menu-foreground-color); display: grid; grid-template-columns: 1fr $s-24; diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.scss b/frontend/src/app/main/ui/workspace/viewport/widgets.scss index 19d5e467f..be0c4d249 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.scss +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.scss @@ -26,7 +26,7 @@ cursor: pointer; display: flex; .content { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; height: $s-24; diff --git a/frontend/translations/cs.po b/frontend/translations/cs.po index e184dd3ff..8109be00d 100644 --- a/frontend/translations/cs.po +++ b/frontend/translations/cs.po @@ -4768,10 +4768,6 @@ msgstr "InVision" msgid "questions.leave-feedback-for-my-team-project" msgstr "Zanechte zpětnou vazbu pro můj týmový projekt" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Nikdy jsem nepoužil žádný designový nástroj" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" msgstr "Další" diff --git a/frontend/translations/de.po b/frontend/translations/de.po index 05363079a..8d6398809 100644 --- a/frontend/translations/de.po +++ b/frontend/translations/de.po @@ -4990,10 +4990,6 @@ msgstr[1] "Sie sind in keiner Datei aktiviert." msgid "questions.other" msgstr "Sonstiges (bitte angeben)" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Ich habe noch nie ein Design-Tool verwendet" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.test-penpot-to-see-if-its-a-fit-for-team" msgstr "Testen Sie Penpot, um zu sehen, ob es für das Team geeignet ist " diff --git a/frontend/translations/en.po b/frontend/translations/en.po index be4499c87..a9080cf39 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -2306,6 +2306,9 @@ msgstr "Want to receive Penpot news?" msgid "onboarding.team-modal.create-team" msgstr "Create a team" +msgid "onboarding.team-modal.team-definition" +msgstr "What's a team?" + msgid "onboarding.team-modal.create-team-desc" msgstr "" "A team allows you to collaborate with other Penpot users working in the " @@ -2428,8 +2431,8 @@ msgid "questions.more-than-50" msgstr "More than 50" #: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "I've never used a design tool before" +msgid "questions.never-used-one" +msgstr "None" #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index c121150b3..059f3c157 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -2346,6 +2346,9 @@ msgstr "¿Quieres recibir noticias sobre Penpot?" msgid "onboarding.team-modal.create-team" msgstr "Crea un equipo" +msgid "onboarding.team-modal.team-definition" +msgstr "¿Qué es un equipo?" + msgid "onboarding.team-modal.create-team-desc" msgstr "" "Un equipo permite colaborar en Penpot trabajando en los mismos archivos y " @@ -2468,8 +2471,8 @@ msgid "questions.more-than-50" msgstr "Más de 50" #: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Nunca antes he usado una herramienta de diseño" +msgid "questions.never-used-one" +msgstr "Ninguna" #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" diff --git a/frontend/translations/fr.po b/frontend/translations/fr.po index 6c1ec65db..fa4652678 100644 --- a/frontend/translations/fr.po +++ b/frontend/translations/fr.po @@ -4909,10 +4909,6 @@ msgstr "Sortie de la souris" msgid "workspace.assets.typography.text-styles" msgstr "Styles de texte" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Je n'ai jamais utilisé d'outil de design avant" - #: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs msgid "workspace.options.stroke-cap.circle-marker" msgstr "Marqueur cercle" diff --git a/frontend/translations/ha.po b/frontend/translations/ha.po index a0743aaf4..8824297ec 100644 --- a/frontend/translations/ha.po +++ b/frontend/translations/ha.po @@ -3367,10 +3367,6 @@ msgstr "idan akwai qari (bayyana)" msgid "workspace.assets.typography.text-styles" msgstr "salon rubutu" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "ban tava aiki da kayan zane ba" - #: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs msgid "workspace.options.stroke-cap.circle-marker" msgstr "da'irar kasuwa" diff --git a/frontend/translations/he.po b/frontend/translations/he.po index bcddbf5a5..8c69757fc 100644 --- a/frontend/translations/he.po +++ b/frontend/translations/he.po @@ -2315,10 +2315,6 @@ msgstr "שיווק" msgid "questions.more-than-50" msgstr "גדול מ־50" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "מעולם לא השתמשתי בכלי עיצוב בעבר" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" msgstr "הבאה" diff --git a/frontend/translations/id.po b/frontend/translations/id.po index 136a73573..8ace83fdb 100644 --- a/frontend/translations/id.po +++ b/frontend/translations/id.po @@ -2407,10 +2407,6 @@ msgstr "Pemasaran" msgid "questions.more-than-50" msgstr "Lebih dari 50" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Saya belum pernah menggunakan alat desain" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" msgstr "Berikutnya" diff --git a/frontend/translations/lv.po b/frontend/translations/lv.po index 1db73b1ce..12fdf513f 100644 --- a/frontend/translations/lv.po +++ b/frontend/translations/lv.po @@ -2406,10 +2406,6 @@ msgstr "Ķeramies pie darba!" msgid "questions.more-than-50" msgstr "Vairāk nekā 50" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Iepriekš neesmu izmantojis modelēšanas rīku" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" msgstr "Nākamais" diff --git a/frontend/translations/nl.po b/frontend/translations/nl.po index cd98311a2..edd30e96c 100644 --- a/frontend/translations/nl.po +++ b/frontend/translations/nl.po @@ -2458,10 +2458,6 @@ msgstr "Marketing" msgid "questions.more-than-50" msgstr "Meer dan 50" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Ik heb nog nooit een ontwerptool gebruikt" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" msgstr "Volgende" diff --git a/frontend/translations/pt_PT.po b/frontend/translations/pt_PT.po index 7a717474e..86bd41160 100644 --- a/frontend/translations/pt_PT.po +++ b/frontend/translations/pt_PT.po @@ -2401,10 +2401,6 @@ msgstr "Marketing" msgid "questions.more-than-50" msgstr "Mais de 50" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Nunca usei uma ferramenta de design no passado" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" msgstr "Seguinte" diff --git a/frontend/translations/ro.po b/frontend/translations/ro.po index 90c69efe1..571f34128 100644 --- a/frontend/translations/ro.po +++ b/frontend/translations/ro.po @@ -2441,10 +2441,6 @@ msgstr "Marketing" msgid "questions.more-than-50" msgstr "Mai mult de 50" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Nu am folosit o unealtă de design până acum" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" msgstr "Următor" diff --git a/frontend/translations/tr.po b/frontend/translations/tr.po index 5ce0c7757..099467000 100644 --- a/frontend/translations/tr.po +++ b/frontend/translations/tr.po @@ -4876,10 +4876,6 @@ msgstr "Satır yüksekliğini artır" msgid "questions.other" msgstr "Diğer (lütfen belirtiniz)" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Daha önce hiç tasarım aracı kullanmadım" - msgid "labels.discard" msgstr "At" diff --git a/frontend/translations/zh_CN.po b/frontend/translations/zh_CN.po index 3f58a1351..e471f03a1 100644 --- a/frontend/translations/zh_CN.po +++ b/frontend/translations/zh_CN.po @@ -4786,10 +4786,6 @@ msgstr "你最熟悉哪个设计工具？" msgid "questions.invision" msgstr "InVision" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "我之前从未用过设计工具" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.31-50" msgstr "31-50"