diff --git a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js index 9aa15856a0..e53180e4dc 100644 --- a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js +++ b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js @@ -779,6 +779,62 @@ test.describe("Team pages controls", () => { }); }); +test.describe("Dashboard headers", () => { + const shot = { maxDiffPixelRatio: 0, threshold: 0 }; + const header = (page) => page.getByTestId("dashboard-header"); + + test("Page headers", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupDashboardFull(); + + await dashboardPage.goToDashboard(); + await expect(header(page)).toHaveScreenshot(shot); + await dashboardPage.goToDrafts(); + await expect(header(page)).toHaveScreenshot(shot); + await dashboardPage.goToLibraries(); + await expect(header(page)).toHaveScreenshot(shot); + await dashboardPage.goToFonts(); + await expect(header(page)).toHaveScreenshot(shot); + await dashboardPage.goToDeleted(); + await expect(header(page)).toHaveScreenshot(shot); + await dashboardPage.goToSearch(); + await expect(dashboardPage.mainHeading).toBeVisible(); + await expect(header(page)).toHaveScreenshot(shot); + }); + + test("Team header menu", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupDashboardFull(); + await dashboardPage.goToSecondTeamMembersSection(); + await expect(dashboardPage.mainHeading).toHaveText("Members"); + + await page.mouse.move(10, 700); + await expect(header(page)).toHaveScreenshot(shot); + await header(page).getByText("Invitations").hover(); + await expect(header(page)).toHaveScreenshot(shot); + }); + + test("Libraries page and search placeholder", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupDashboardFull(); + await dashboardPage.goToLibraries(); + await expect(page).toHaveScreenshot(shot); + + await dashboardPage.goToSearch(); + const placeholder = page.locator("[class*='grid-empty-placeholder']"); + await expect(placeholder).toBeVisible(); + await expect(placeholder).toHaveScreenshot(shot); + }); + + test("Account header", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.goToDashboard(); + await dashboardPage.goToAccount(); + await expect(page.getByTestId("account-title")).toBeVisible(); + await expect(header(page)).toHaveScreenshot(shot); + }); +}); + test.describe("Settings controls", () => { const shot = { maxDiffPixelRatio: 0, threshold: 0 }; diff --git a/frontend/resources/styles/common/refactor/common-dashboard.scss b/frontend/resources/styles/common/refactor/common-dashboard.scss deleted file mode 100644 index ba38cd0b78..0000000000 --- a/frontend/resources/styles/common/refactor/common-dashboard.scss +++ /dev/null @@ -1,159 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. -// -// Copyright (c) KALEIDOS SUBSIDIARY SL - -@use "refactor/common-refactor" as *; - -.dashboard-header { - align-items: center; - display: flex; - height: $s-64; - max-height: $s-64; - justify-content: space-between; - padding: $s-4 $s-16 $s-4 $s-8; - position: relative; - user-select: none; - - &.team { - display: grid; - grid-template-columns: 20% 1fr 20%; - max-height: $s-64; - } - - .element-name { - margin-right: $s-8; - } - - .btn-secondary { - flex-shrink: 0; - height: $s-32; - - svg { - height: $s-16; - width: $s-16; - } - } - - nav { - display: flex; - align-items: flex-end; - justify-content: center; - - ul { - display: flex; - font-size: $fs-14; - justify-content: center; - margin: 0; - } - - li { - a { - display: flex; - align-items: center; - flex-basis: $s-140; - border-bottom: $s-3 solid transparent; - color: var(--color-foreground-secondary); - height: $s-40; - padding: $s-4 $s-24; - font-weight: $fw400; - - &:hover { - color: var(--color-background-secondary); - text-decoration: none; - } - } - } - } - - .dashboard-title { - display: flex; - align-items: center; - margin-left: $s-12; - - h1 { - color: var(--color-foreground-primary); - display: block; - flex-shrink: 0; - font-size: $fs-24; - font-weight: $fw400; - max-width: $s-712; - overflow: hidden; - text-overflow: ellipsis; - user-select: all; - white-space: nowrap; - width: 100%; - } - - .context-menu.is-open { - margin-top: $s-8; - } - } - - .icon { - display: flex; - align-items: center; - cursor: pointer; - - svg { - stroke: var(--color-foreground-secondary); - fill: none; - width: $s-16; - height: $s-16; - - &:hover { - stroke: var(--color-accent-tertiary); - fill: none; - } - } - } - - .dashboard-buttons { - display: flex; - justify-content: flex-end; - align-items: center; - } - - .dashboard-header-actions { - display: flex; - column-gap: $s-16; - } - - .dashboard-header-options { - li { - a { - font-size: $s-16; - color: var(--color-foreground-secondary); - border-color: transparent; - - &:hover { - color: var(--color-foreground-primary); - } - } - - &.active { - a { - color: var(--color-foreground-primary); - } - } - } - } -} - -.btn-primary { - @extend %button-primary; - - text-transform: uppercase; - font-size: $fs-14; - font-weight: $fw400; -} - -.btn-secondary { - @extend %button-secondary; - - color: var(--color-foreground-primary); - font-size: $fs-12; - text-transform: uppercase; - padding: 0 $s-16; -} diff --git a/frontend/src/app/main/ui/dashboard/common/header.scss b/frontend/src/app/main/ui/dashboard/common/header.scss new file mode 100644 index 0000000000..2baf23ca7b --- /dev/null +++ b/frontend/src/app/main/ui/dashboard/common/header.scss @@ -0,0 +1,91 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS SUBSIDIARY SL + +// Page header shared by the dashboard and settings pages. + +@use "ds/_sizes.scss" as *; +@use "ds/_utils.scss" as *; +@use "ds/typography.scss" as *; + +.dashboard-header { + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + block-size: $sz-64; + max-block-size: $sz-64; + padding: var(--sp-xs) var(--sp-l) var(--sp-xs) var(--sp-s); + user-select: none; + + &.team { + display: grid; + grid-template-columns: 20% 1fr 20%; + } +} + +.dashboard-title { + display: flex; + align-items: center; + margin-inline-start: var(--sp-m); +} + +.dashboard-title-text { + display: block; + flex-shrink: 0; + inline-size: 100%; + max-inline-size: $sz-712; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + user-select: all; + color: var(--color-foreground-primary); +} + +.dashboard-header-actions { + display: flex; + column-gap: var(--sp-l); +} + +.dashboard-buttons { + display: flex; + justify-content: flex-end; + align-items: center; +} + +.dashboard-header-menu { + display: flex; + align-items: flex-end; + justify-content: center; +} + +.dashboard-header-options { + display: flex; + justify-content: center; + margin: 0; +} + +.dashboard-header-link { + @include use-typography("body-large"); + + --dashboard-header-link-color: var(--color-foreground-secondary); + + display: flex; + align-items: center; + block-size: $sz-40; + padding: var(--sp-xs) var(--sp-xxl); + border-block-end: px2rem(3) solid transparent; + color: var(--dashboard-header-link-color); + + &:hover { + --dashboard-header-link-color: var(--color-foreground-primary); + + text-decoration: none; + } + + &.active { + --dashboard-header-link-color: var(--color-foreground-primary); + } +} diff --git a/frontend/src/app/main/ui/dashboard/deleted.cljs b/frontend/src/app/main/ui/dashboard/deleted.cljs index d2f8420121..014d744734 100644 --- a/frontend/src/app/main/ui/dashboard/deleted.cljs +++ b/frontend/src/app/main/ui/dashboard/deleted.cljs @@ -23,6 +23,8 @@ [app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.ds.foundations.typography :as t] + [app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]] [app.main.ui.hooks :as hooks] [app.util.dom :as dom] @@ -61,7 +63,10 @@ [:header {:class (stl/css :dashboard-header) :data-testid "dashboard-header"} [:div#dashboard-deleted-title {:class (stl/css :dashboard-title)} - [:h1 (tr "dashboard.projects-title")]] + [:> heading* {:level 1 + :typography t/title-large + :class (stl/css :dashboard-title-text)} + (tr "dashboard.projects-title")]] [:div {:class (stl/css :dashboard-header-actions)} [:> dashboard-mcp-menu*] [:> layout-toggle* {:layout layout :on-change on-change}]]]) diff --git a/frontend/src/app/main/ui/dashboard/deleted.scss b/frontend/src/app/main/ui/dashboard/deleted.scss index 7b9db012d6..48ca1cfd71 100644 --- a/frontend/src/app/main/ui/dashboard/deleted.scss +++ b/frontend/src/app/main/ui/dashboard/deleted.scss @@ -4,9 +4,7 @@ // // Copyright (c) KALEIDOS SUBSIDIARY SL -// The shared dashboard header styles move in their own change: they are -// used by ten dashboard modules. -@use "common/refactor/common-dashboard"; +@use "dashboard/common/header"; @use "ds/typography.scss" as *; @use "ds/spacing.scss" as *; @use "ds/z-index.scss" as *; diff --git a/frontend/src/app/main/ui/dashboard/files.cljs b/frontend/src/app/main/ui/dashboard/files.cljs index 2d6a98f519..b2df3175e5 100644 --- a/frontend/src/app/main/ui/dashboard/files.cljs +++ b/frontend/src/app/main/ui/dashboard/files.cljs @@ -23,6 +23,8 @@ [app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.ds.foundations.typography :as t] + [app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]] [app.main.ui.hooks :as hooks] [app.util.dom :as dom] @@ -84,7 +86,10 @@ :data-testid "dashboard-header"} (if (:is-default project) [:div#dashboard-drafts-title {:class (stl/css :dashboard-title)} - [:h1 (tr "labels.drafts")]] + [:> heading* {:level 1 + :typography t/title-large + :class (stl/css :dashboard-title-text)} + (tr "labels.drafts")]] (if (and (:edition @local) can-edit) [:& inline-edition @@ -97,9 +102,12 @@ (swap! local assoc :edition false))) :max-length 250}] [:div {:class (stl/css :dashboard-title)} - [:h1 {:on-double-click on-edit - :data-testid "project-title" - :id (:id project)} + [:> heading* {:level 1 + :typography t/title-large + :class (stl/css :dashboard-title-text) + :on-double-click on-edit + :data-testid "project-title" + :id (:id project)} (:name project)]])) [:div {:class (stl/css :dashboard-header-actions)} diff --git a/frontend/src/app/main/ui/dashboard/files.scss b/frontend/src/app/main/ui/dashboard/files.scss index 5ab0695cad..f8a5186c38 100644 --- a/frontend/src/app/main/ui/dashboard/files.scss +++ b/frontend/src/app/main/ui/dashboard/files.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS SUBSIDIARY SL -@use "common/refactor/common-dashboard"; +@use "dashboard/common/header"; @use "ds/_borders.scss" as *; @use "ds/_sizes.scss" as *; @use "ds/_utils.scss" as *; diff --git a/frontend/src/app/main/ui/dashboard/fonts.cljs b/frontend/src/app/main/ui/dashboard/fonts.cljs index ed27260fe9..b42014ffba 100644 --- a/frontend/src/app/main/ui/dashboard/fonts.cljs +++ b/frontend/src/app/main/ui/dashboard/fonts.cljs @@ -76,7 +76,10 @@ (use-page-title team section) [:header {:class (stl/css :dashboard-header) :data-testid "dashboard-header"} [:div#dashboard-fonts-title {:class (stl/css :dashboard-title)} - [:h1 (tr "labels.fonts")]]]) + [:> heading* {:level 1 + :typography t/title-large + :class (stl/css :dashboard-title-text)} + (tr "labels.fonts")]]]) (mf/defc font-variant-display-name* {::mf/private true} diff --git a/frontend/src/app/main/ui/dashboard/fonts.scss b/frontend/src/app/main/ui/dashboard/fonts.scss index e2e6430ede..cbf77c3966 100644 --- a/frontend/src/app/main/ui/dashboard/fonts.scss +++ b/frontend/src/app/main/ui/dashboard/fonts.scss @@ -4,15 +4,13 @@ // // Copyright (c) KALEIDOS SUBSIDIARY SL -// The shared dashboard header styles move in their own change: they are -// used by ten dashboard modules. -@use "common/refactor/common-dashboard"; @use "ds/_utils.scss" as *; @use "ds/_sizes.scss" as *; @use "ds/_borders.scss" as *; @use "ds/typography.scss" as *; @use "ds/spacing.scss" as *; @use "ds/mixins.scss" as *; +@use "dashboard/common/header"; .dashboard-fonts { border-block-start: $b-1 solid var(--color-background-quaternary); diff --git a/frontend/src/app/main/ui/dashboard/libraries.cljs b/frontend/src/app/main/ui/dashboard/libraries.cljs index 335d6ce621..e899521fca 100644 --- a/frontend/src/app/main/ui/dashboard/libraries.cljs +++ b/frontend/src/app/main/ui/dashboard/libraries.cljs @@ -13,6 +13,8 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.dashboard.grid :refer [grid*]] + [app.main.ui.ds.foundations.typography :as t] + [app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.hooks :as hooks] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -68,7 +70,10 @@ [:* [:header {:class (stl/css :dashboard-header) :data-testid "dashboard-header"} [:div#dashboard-libraries-title {:class (stl/css :dashboard-title)} - [:h1 (tr "dashboard.libraries-title")]]] + [:> heading* {:level 1 + :typography t/title-large + :class (stl/css :dashboard-title-text)} + (tr "dashboard.libraries-title")]]] [:section {:class (stl/css :dashboard-container :no-bg :dashboard-shared) :ref rowref} diff --git a/frontend/src/app/main/ui/dashboard/libraries.scss b/frontend/src/app/main/ui/dashboard/libraries.scss index ae28f34484..e5555cfb9b 100644 --- a/frontend/src/app/main/ui/dashboard/libraries.scss +++ b/frontend/src/app/main/ui/dashboard/libraries.scss @@ -4,17 +4,13 @@ // // Copyright (c) KALEIDOS SUBSIDIARY SL -@use "refactor/common-refactor.scss" as deprecated; -@use "common/refactor/common-dashboard"; +@use "ds/_borders.scss" as *; +@use "dashboard/common/header"; .dashboard-container { flex: 1 0 0; - margin-right: deprecated.$s-16; + margin-inline-end: var(--sp-l); overflow-y: auto; - width: 100%; - border-top: deprecated.$s-1 solid var(--color-background-quaternary); - - &.dashboard-projects { - user-select: none; - } + inline-size: 100%; + border-block-start: $b-1 solid var(--color-background-quaternary); } diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index ad7819e5b4..2371fb89ef 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -29,6 +29,8 @@ [app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]] + [app.main.ui.ds.foundations.typography :as t] + [app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.ds.layout.menu :refer [context-menu*]] [app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]] [app.main.ui.hooks :as hooks] @@ -48,9 +50,12 @@ [:header {:class (stl/css :dashboard-header) :data-testid "dashboard-header"} [:div#dashboard-projects-title {:class (stl/css :dashboard-title)} - [:h1 (if default-team? - (tr "dashboard.personal-projects") - (tr "dashboard.projects-title"))]] + [:> heading* {:level 1 + :typography t/title-large + :class (stl/css :dashboard-title-text)} + (if default-team? + (tr "dashboard.personal-projects") + (tr "dashboard.projects-title"))]] [:div {:class (stl/css :dashboard-header-actions)} [:> dashboard-mcp-menu*] [:> layout-toggle* {:layout layout diff --git a/frontend/src/app/main/ui/dashboard/projects.scss b/frontend/src/app/main/ui/dashboard/projects.scss index 7eeccbcfb3..050377b6a5 100644 --- a/frontend/src/app/main/ui/dashboard/projects.scss +++ b/frontend/src/app/main/ui/dashboard/projects.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS SUBSIDIARY SL -@use "common/refactor/common-dashboard"; +@use "dashboard/common/header"; @use "ds/typography.scss" as t; @use "ds/_borders.scss" as *; @use "ds/spacing.scss" as *; diff --git a/frontend/src/app/main/ui/dashboard/search.cljs b/frontend/src/app/main/ui/dashboard/search.cljs index 11d613f907..06393173cc 100644 --- a/frontend/src/app/main/ui/dashboard/search.cljs +++ b/frontend/src/app/main/ui/dashboard/search.cljs @@ -13,6 +13,8 @@ [app.main.store :as st] [app.main.ui.dashboard.grid :refer [grid*]] [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] + [app.main.ui.ds.foundations.typography :as t] + [app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.hooks :as hooks] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -55,7 +57,10 @@ [:* [:header {:class (stl/css :dashboard-header) :data-testid "dashboard-header"} [:div#dashboard-search-title {:class (stl/css :dashboard-title)} - [:h1 (tr "dashboard.title-search")]]] + [:> heading* {:level 1 + :typography t/title-large + :class (stl/css :dashboard-title-text)} + (tr "dashboard.title-search")]]] [:section {:class (stl/css :dashboard-container :search :no-bg) :ref rowref} @@ -63,19 +68,25 @@ (empty? search-term) [:div {:class (stl/css :grid-empty-placeholder :search)} [:div {:class (stl/css :icon)} - [:> icon* {:icon-id i/search :size "xl"}]] + [:> icon* {:icon-id i/search + :size "xl" + :class (stl/css :search-icon)}]] [:div {:class (stl/css :text)} (tr "dashboard.type-something")]] (nil? result) [:div {:class (stl/css :grid-empty-placeholder :search)} [:div {:class (stl/css :icon)} - [:> icon* {:icon-id i/search :size "xl"}]] + [:> icon* {:icon-id i/search + :size "xl" + :class (stl/css :search-icon)}]] [:div {:class (stl/css :text)} (tr "dashboard.searching-for" search-term)]] (empty? result) [:div {:class (stl/css :grid-empty-placeholder :search)} [:div {:class (stl/css :icon)} - [:> icon* {:icon-id i/search :size "xl"}]] + [:> icon* {:icon-id i/search + :size "xl" + :class (stl/css :search-icon)}]] [:div {:class (stl/css :text)} (tr "dashboard.no-matches-for" search-term)]] :else diff --git a/frontend/src/app/main/ui/dashboard/search.scss b/frontend/src/app/main/ui/dashboard/search.scss index 4848eeaa97..ad7569e52d 100644 --- a/frontend/src/app/main/ui/dashboard/search.scss +++ b/frontend/src/app/main/ui/dashboard/search.scss @@ -4,25 +4,17 @@ // // Copyright (c) KALEIDOS SUBSIDIARY SL -@use "refactor/common-refactor.scss" as deprecated; -@use "common/refactor/common-dashboard"; +@use "ds/_borders.scss" as *; +@use "ds/_sizes.scss" as *; +@use "dashboard/common/header"; @use "./placeholder"; .dashboard-container { flex: 1 0 0; - margin-right: deprecated.$s-16; + margin-inline-end: var(--sp-l); overflow-y: auto; - width: 100%; - border-top: deprecated.$s-1 solid var(--color-background-quaternary); - - &.dashboard-projects { - user-select: none; - } - - &.dashboard-shared { - width: calc(100vw - deprecated.$s-320); - margin-right: deprecated.$s-52; - } + inline-size: 100%; + border-block-start: $b-1 solid var(--color-background-quaternary); } .grid-empty-placeholder.search { @@ -30,18 +22,16 @@ display: flex; justify-content: center; flex-direction: column; - height: deprecated.$s-200; + block-size: $sz-200; background: transparent; - border: deprecated.$s-1 solid var(--color-background-quaternary); - border-radius: deprecated.$br-8; + border: $b-1 solid var(--color-background-quaternary); + border-radius: $br-8; .text { color: var(--color-foreground-primary); } - - .icon svg { - stroke: var(--color-foreground-secondary); - width: deprecated.$s-32; - height: deprecated.$s-32; - } +} + +.search-icon { + color: var(--color-foreground-secondary); } diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index 21a5c112bf..a00c120ed5 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/frontend/src/app/main/ui/dashboard/sidebar.scss @@ -13,10 +13,6 @@ @use "ds/z-index.scss" as *; @use "ds/mixins.scss" as *; -// The shared dashboard header styles move in their own change: they are -// used by ten dashboard modules. -@use "common/refactor/common-dashboard"; - // refactor/ stays for the menu placeholders (%menu-dropdown, // %menu-item-base) of the profile menu and its submenus. @use "common/refactor/common-refactor.scss" as deprecated; diff --git a/frontend/src/app/main/ui/dashboard/subscription.scss b/frontend/src/app/main/ui/dashboard/subscription.scss index e90a800019..4699b44d92 100644 --- a/frontend/src/app/main/ui/dashboard/subscription.scss +++ b/frontend/src/app/main/ui/dashboard/subscription.scss @@ -7,10 +7,6 @@ // refactor/ stays for the menu item placeholder (%menu-item-base) of the // power up submenu. @use "refactor/common-refactor.scss" as deprecated; - -// The shared dashboard header styles move in their own change: they are -// used by ten dashboard modules. -@use "common/refactor/common-dashboard"; @use "ds/typography.scss" as *; @use "ds/_borders.scss" as *; @use "ds/_utils.scss" as *; diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs index 8888c6d4e3..eb7b2f9798 100644 --- a/frontend/src/app/main/ui/dashboard/team.cljs +++ b/frontend/src/app/main/ui/dashboard/team.cljs @@ -94,23 +94,34 @@ [:header {:class (stl/css :dashboard-header :team) :data-testid "dashboard-header"} [:div {:class (stl/css :dashboard-title)} - [:h1 (cond - members-section? (tr "labels.members") - settings-section? (tr "labels.settings") - invitations-section? (tr "labels.invitations") - webhooks-section? (tr "labels.webhooks") - :else nil)]] + [:> heading* {:level 1 + :typography t/title-large + :class (stl/css :dashboard-title-text)} + (cond + members-section? (tr "labels.members") + settings-section? (tr "labels.settings") + invitations-section? (tr "labels.invitations") + webhooks-section? (tr "labels.webhooks") + :else nil)]] [:nav {:class (stl/css :dashboard-header-menu)} [:ul {:class (stl/css :dashboard-header-options)} - [:li {:class (when members-section? (stl/css :active))} - [:a {:on-click on-nav-members} (tr "labels.members")]] - [:li {:class (when invitations-section? (stl/css :active))} - [:a {:on-click on-nav-invitations} (tr "labels.invitations")]] + [:li + [:a {:class (stl/css-case :dashboard-header-link true + :active members-section?) + :on-click on-nav-members} (tr "labels.members")]] + [:li + [:a {:class (stl/css-case :dashboard-header-link true + :active invitations-section?) + :on-click on-nav-invitations} (tr "labels.invitations")]] (when (contains? cfg/flags :webhooks) - [:li {:class (when webhooks-section? (stl/css :active))} - [:a {:on-click on-nav-webhooks} (tr "labels.webhooks")]]) - [:li {:class (when settings-section? (stl/css :active))} - [:a {:on-click on-nav-settings} (tr "labels.settings")]]]] + [:li + [:a {:class (stl/css-case :dashboard-header-link true + :active webhooks-section?) + :on-click on-nav-webhooks} (tr "labels.webhooks")]]) + [:li + [:a {:class (stl/css-case :dashboard-header-link true + :active settings-section?) + :on-click on-nav-settings} (tr "labels.settings")]]]] [:div {:class (stl/css :dashboard-buttons)} (when (and (or invitations-section? members-section?) (not-empty invitations)) (let [invite-button (mf/html diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss index 2720ab6d58..4966b8ab87 100644 --- a/frontend/src/app/main/ui/dashboard/team.scss +++ b/frontend/src/app/main/ui/dashboard/team.scss @@ -5,10 +5,9 @@ // Copyright (c) KALEIDOS SUBSIDIARY SL // refactor/ stays for the component-family placeholders: %input-checkbox -// and %checkbox-icon (checkboxes, #12380) and %modal-* (modals). The shared -// dashboard header (common-dashboard) moves in its own change. +// and %checkbox-icon (checkboxes, #12380) and %modal-* (modals). @use "refactor/common-refactor.scss" as deprecated; -@use "common/refactor/common-dashboard"; +@use "dashboard/common/header"; @use "ds/_utils.scss" as *; @use "ds/typography.scss" as *; @use "ds/_sizes.scss" as *; diff --git a/frontend/src/app/main/ui/settings.cljs b/frontend/src/app/main/ui/settings.cljs index 97043fae0a..6303b7a5de 100644 --- a/frontend/src/app/main/ui/settings.cljs +++ b/frontend/src/app/main/ui/settings.cljs @@ -11,6 +11,8 @@ [app.main.refs :as refs] [app.main.router :as rt] [app.main.store :as st] + [app.main.ui.ds.foundations.typography :as t] + [app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.hooks :as hooks] [app.main.ui.modal :refer [modal-container*]] [app.main.ui.settings.change-email] @@ -33,7 +35,11 @@ [:header {:class (stl/css :dashboard-header) :data-testid "dashboard-header"} [:div {:class (stl/css :dashboard-title)} - [:h1 {:data-testid "account-title"} (tr "dashboard.your-account-title")]]]) + [:> heading* {:level 1 + :typography t/title-large + :class (stl/css :dashboard-title-text) + :data-testid "account-title"} + (tr "dashboard.your-account-title")]]]) (mf/defc settings* [{:keys [route type error-report-id error-href]}] diff --git a/frontend/src/app/main/ui/settings.scss b/frontend/src/app/main/ui/settings.scss index 5898dbac3b..62d4e141f1 100644 --- a/frontend/src/app/main/ui/settings.scss +++ b/frontend/src/app/main/ui/settings.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS SUBSIDIARY SL -@use "common/refactor/common-dashboard"; +@use "dashboard/common/header"; @use "ds/_utils.scss" as *; @use "ds/_sizes.scss" as *; @use "ds/_borders.scss" as *;