github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-11-06 10:00:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Move the dashboard header styles to the DS (#12676)

Browse Source 
* ♻️ Move the dashboard header styles to the DS

The page header of the dashboard and settings pages took its styles from
common/refactor/common-dashboard.scss. Move the rules still in use to
dashboard/common/header.scss, written with DS tokens:

- The page titles become heading* (title-large) with a class instead of
  a bare h1; the team section links get a class, and the active class
  moves from the li to the link.
- Drop the rules that matched nothing: .element-name, .context-menu,
  .icon and .btn-secondary inside the header, and the global .btn-primary
  and .btn-secondary (only the fonts page uses them; it keeps the old
  import until its open change lands).
- The sidebar and subscription styles imported the file without using
  it; drop the import.

The header looks the same (0 px in the new visual test). The title line
height goes from 1.15 to 1.4, which does not move the text.

AI-assisted-by: claude-opus-5-5

* ♻️ Move the dashboard libraries and search styles to the DS

Replace the deprecated spacing, size and border variables with DS
tokens and logical properties, and drop the refactor/ import.

- The search placeholder icon gets a class for its color instead of a
  .icon svg rule; its xl size already gives the 32px box.
- Delete the selectors no markup uses: .dashboard-projects in both
  files and .dashboard-shared in search.

No visual change (0 px in the new libraries and search visual test).

AI-assisted-by: claude-opus-5-5

* 🔥 Move the fonts page header to the DS and delete common-dashboard

The fonts page was the last user of common/refactor/common-dashboard.scss:
its header now uses the shared DS header styles and a DS heading, like
the other dashboard pages. Nothing else imports common-dashboard, so it
is deleted.

No visual change.

AI-assisted-by: claude-opus-5-5

* 📎 Remove a double blank line in the dashboard sidebar styles

Prettier rejects the two blank lines left after the imports, which made
the frontend lint fail in CI.

AI-assisted-by: claude-opus-5-5

* 📎 Remove a blank line between the subscription style imports

Stylelint (at-rule-empty-line-before) rejects the blank line left between
the @use rules after the common-dashboard import was dropped.

AI-assisted-by: claude-opus-5-5
This commit is contained in:
Eva Marco 2026-11-05 17:01:04 +01:00 committed by GitHub
parent 0f7e3fe92e
commit eb6e976c01
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
21 changed files with 255 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/playwright/ui/visual-specs/visual-dashboard.spec.js
View File

@ -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 };

159
frontend/resources/styles/common/refactor/common-dashboard.scss
View File

@ -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;
}

91
frontend/src/app/main/ui/dashboard/common/header.scss Normal file
View File

@ -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);
}
}

7
frontend/src/app/main/ui/dashboard/deleted.cljs
View File

@ -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}]]])

4
frontend/src/app/main/ui/dashboard/deleted.scss
View File

@ -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 *;

16
frontend/src/app/main/ui/dashboard/files.cljs
View File

@ -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)}

2
frontend/src/app/main/ui/dashboard/files.scss
View File

@ -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 *;

5
frontend/src/app/main/ui/dashboard/fonts.cljs
View File

@ -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}

4
frontend/src/app/main/ui/dashboard/fonts.scss
View File

@ -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);

7
frontend/src/app/main/ui/dashboard/libraries.cljs
View File

@ -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}

14
frontend/src/app/main/ui/dashboard/libraries.scss
View File

@ -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);
}

11
frontend/src/app/main/ui/dashboard/projects.cljs
View File

@ -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

2
frontend/src/app/main/ui/dashboard/projects.scss
View File

@ -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 *;

19
frontend/src/app/main/ui/dashboard/search.cljs
View File

@ -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

36
frontend/src/app/main/ui/dashboard/search.scss
View File

@ -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);
}

4
frontend/src/app/main/ui/dashboard/sidebar.scss
View File

@ -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;

4
frontend/src/app/main/ui/dashboard/subscription.scss
View File

@ -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 *;

39
frontend/src/app/main/ui/dashboard/team.cljs
View File

@ -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

5
frontend/src/app/main/ui/dashboard/team.scss
View File

@ -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 *;

8
frontend/src/app/main/ui/settings.cljs
View File

@ -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]}]

2
frontend/src/app/main/ui/settings.scss
View File

@ -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 *;