From ada96f8e9d5ae7d515f944bc5b9bad019525fde6 Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Wed, 28 Oct 2026 10:32:02 +0100
Subject: [PATCH] :recycle: Give the profile page links, title and photo
 classes

The links and the profile photo get their own classes instead of bare
a and img selectors, and the page title uses the DS heading with
title-large (it already used that typography). The link wrapper drops
a class with no styles, and the rule for the file input goes: the
shared uploader hides that input inline, so the rule did nothing. No
visual change.

AI-assisted-by: claude-opus-5-5
---
 .../src/app/main/ui/settings/profile.cljs     | 19 +++++--
 .../src/app/main/ui/settings/profile.scss     | 50 +++++++------------
 2 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/frontend/src/app/main/ui/settings/profile.cljs b/frontend/src/app/main/ui/settings/profile.cljs
index de5e3a89de..74f073ae36 100644
--- a/frontend/src/app/main/ui/settings/profile.cljs
+++ b/frontend/src/app/main/ui/settings/profile.cljs
@@ -17,6 +17,8 @@
    [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.components.forms :as fm]
    [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.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -71,7 +73,8 @@
 
       [:div {:class (stl/css :options)}
        [:div.change-email
-        [:a {:on-click on-show-change-email}
+        [:a {:class (stl/css :link)
+             :on-click on-show-change-email}
          (tr "dashboard.change-email")]]]]
 
      [:> fm/submit-button*
@@ -80,8 +83,9 @@
        :class (stl/css :btn-primary)}]
 
      [:div {:class (stl/css :links)}
-      [:div {:class (stl/css :link-item)}
-       [:a {:on-click on-show-delete-account
+      [:div
+       [:a {:class (stl/css :link)
+            :on-click on-show-delete-account
             :data-testid "remove-acount-btn"}
         (tr "dashboard.remove-account")]]]]))
 
@@ -123,7 +127,8 @@
                 :class (stl/css :update-overlay)
                 :on-click on-image-click}
        (tr "labels.update")]
-      [:img {:src photo}]
+      [:img {:class (stl/css :avatar-image)
+             :src photo}]
       (when has-photo?
         [:button {:type "button"
                   :class (stl/css :delete-overlay)
@@ -148,6 +153,10 @@
   [:section {:class (stl/css :dashboard-settings)
              :aria-labelledby "profile-section-title"}
    [:div {:class (stl/css :form-container)}
-    [:h2 {:id "profile-section-title"} (tr "labels.profile")]
+    [:> heading* {:level 2
+                  :typography t/title-large
+                  :id "profile-section-title"
+                  :class (stl/css :page-title)}
+     (tr "labels.profile")]
     [:> profile-photo-form*]
     [:> profile-form*]]])
diff --git a/frontend/src/app/main/ui/settings/profile.scss b/frontend/src/app/main/ui/settings/profile.scss
index 5ff3b2cae3..7dd5a434ec 100644
--- a/frontend/src/app/main/ui/settings/profile.scss
+++ b/frontend/src/app/main/ui/settings/profile.scss
@@ -17,11 +17,10 @@
   inline-size: 100%;
   justify-content: center;
   align-items: center;
+}
 
-  // The links have no class of their own.
-  a {
-    color: var(--color-foreground-secondary);
-  }
+.link {
+  color: var(--color-foreground-secondary);
 }
 
 .form-container {
@@ -32,17 +31,14 @@
   margin-block: px2rem(80) px2rem(120);
   margin-inline: auto;
   justify-content: center;
+}
 
-  // The page title has no class of its own.
-  h2 {
-    @include use-typography("title-large");
-
-    color: var(--color-foreground-primary);
-    display: flex;
-    align-items: center;
-    margin-block: var(--sp-l);
-    margin-inline: 0;
-  }
+.page-title {
+  color: var(--color-foreground-primary);
+  display: flex;
+  align-items: center;
+  margin-block: var(--sp-l);
+  margin-inline: 0;
 }
 
 .fields-row {
@@ -71,15 +67,14 @@
   block-size: px2rem(148);
   margin-block: var(--sp-l);
   margin-inline: 0;
+}
 
-  // The profile photo has no class of its own.
-  img {
-    border-radius: $br-circle;
-    flex-shrink: 0;
-    block-size: 100%;
-    margin-inline-end: var(--sp-l);
-    inline-size: 100%;
-  }
+.avatar-image {
+  border-radius: $br-circle;
+  flex-shrink: 0;
+  block-size: 100%;
+  margin-inline-end: var(--sp-l);
+  inline-size: 100%;
 }
 
 .image-change-field {
@@ -96,17 +91,6 @@
       opacity: 1;
     }
   }
-
-  // The shared file uploader renders the input without a class.
-  input[type="file"] {
-    inline-size: 100%;
-    block-size: 100%;
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    inset-block-start: 0;
-    z-index: var(--z-index-set);
-  }
 }
 
 .update-overlay {