From 1caf5e6b55ab9f9f0c1430f1ef1ef05c321b467d Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Wed, 28 Oct 2026 16:50:27 +0100
Subject: [PATCH] :fire: 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
---
 .../common/refactor/common-dashboard.scss     | 159 ------------------
 frontend/src/app/main/ui/dashboard/fonts.cljs |   5 +-
 frontend/src/app/main/ui/dashboard/fonts.scss |   4 +-
 3 files changed, 5 insertions(+), 163 deletions(-)
 delete mode 100644 frontend/resources/styles/common/refactor/common-dashboard.scss

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