From 04cec3a329cbdd497a7601723eef5d99347a7568 Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Tue, 27 Oct 2026 09:44:08 +0100
Subject: [PATCH] :recycle: Move profile page styles off the deprecated styles

profile.scss imported the whole deprecated module and kept a long copy
of shared settings rules. It now uses the DS tokens, sizes, borders,
z-index and typography. The deprecated import stays only for
%button-primary: the save button is the shared forms submit button.

Deleted selectors that match nothing in profile.cljs: .btn-secondary
(both), .field, .field-title, .field-text, .custom-input,
.custom-select, .two-columns, .subtitle, .notification-icon,
.notification-text, .notification-text-email, .newsletter-subs, the h1,
h3, p and hr rules, the form rule (both forms set their own flex) and the
link hover underline (the global link rule already does it).

Typographies: the page title uses title-large (line-height 1.4 instead
of 1.15), the Change email link title-small (line-height 1.2 instead of
the default), and the Update overlay title-large with its own
line-height.

Visible change: the taller title line moves the title 3px down and the
rest of the page 6px down. Nothing else changes.

AI-assisted-by: claude-opus-5-5
---
 .../src/app/main/ui/settings/profile.scss     | 446 +++++-------------
 1 file changed, 119 insertions(+), 327 deletions(-)

diff --git a/frontend/src/app/main/ui/settings/profile.scss b/frontend/src/app/main/ui/settings/profile.scss
index d9e628c971..5ff3b2cae3 100644
--- a/frontend/src/app/main/ui/settings/profile.scss
+++ b/frontend/src/app/main/ui/settings/profile.scss
@@ -4,15 +4,22 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
-@use "common/refactor/common-refactor" as *;
+// Only for %button-primary: the save button is the shared forms submit
+// button, which moves to the DS with the forms component.
+@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
+@use "ds/typography.scss" as *;
 
 .dashboard-settings {
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   justify-content: center;
   align-items: center;
 
-  a:not(.button-primary, .link) {
+  // The links have no class of their own.
+  a {
     color: var(--color-foreground-secondary);
   }
 }
@@ -20,309 +27,65 @@
 .form-container {
   display: flex;
   flex-direction: column;
-  max-width: $s-500;
-  width: $s-580;
-  margin: $s-80 auto $s-120 auto;
+  max-inline-size: $sz-500;
+  inline-size: px2rem(580);
+  margin-block: px2rem(80) px2rem(120);
+  margin-inline: auto;
   justify-content: center;
 
-  form {
-    display: flex;
-    flex-direction: column;
-
-    .btn-secondary {
-      width: 100%;
-      font-size: $fs-11;
-      text-transform: uppercase;
-      background-color: var(--color-background-tertiary);
-      color: var(--color-foreground-primary);
-
-      &:hover {
-        color: var(--color-accent-primary);
-        background-color: var(--color-background-quaternary);
-      }
-    }
-
-    hr {
-      display: none;
-    }
-  }
-
-  .fields-row {
-    --input-height: #{$s-40};
-
-    margin-bottom: $s-20;
-    flex-direction: column;
-
-    .options {
-      display: flex;
-      justify-content: flex-end;
-      font-size: $fs-14;
-      margin-top: $s-12;
-    }
-  }
-
-  .field {
-    margin-bottom: $s-20;
-  }
-
-  .field-title {
-    color: var(--color-foreground-primary);
-
-    &:not(:first-child) {
-      margin-top: $s-64;
-    }
-  }
-
-  .field-text {
-    color: var(--color-foreground-secondary);
-  }
-
-  .custom-input,
-  .custom-select {
-    flex-direction: column-reverse;
-
-    label {
-      position: relative;
-      text-transform: uppercase;
-      color: var(--color-foreground-primary);
-      font-size: $fs-11;
-      margin-bottom: $s-12;
-      margin-left: calc(-1 * $s-4);
-    }
-
-    input,
-    select {
-      background-color: var(--color-background-tertiary);
-      border-radius: $br-8;
-      border-color: transparent;
-      color: var(--color-foreground-primary);
-      padding: 0 $s-16;
-
-      &:focus {
-        outline: $s-1 solid var(--color-accent-primary);
-      }
-
-      ::placeholder {
-        color: var(--color-foreground-secondary);
-      }
-    }
-
-    .help-icon {
-      bottom: $s-12;
-      top: auto;
-
-      svg {
-        fill: var(--color-foreground-secondary);
-      }
-    }
-
-    &.disabled {
-      input {
-        background-color: var(--input-background-color-disabled);
-        border-color: var(--color-background-quaternary);
-        color: var(--color-foreground-secondary);
-      }
-    }
-
-    .input-container {
-      background-color: var(--color-background-tertiary);
-      border-radius: $br-8;
-      border-color: transparent;
-      margin-top: $s-24;
-
-      .main-content {
-        label {
-          position: absolute;
-          top: calc(-1 * $s-24);
-        }
-
-        span {
-          color: var(--color-foreground-primary);
-        }
-      }
-
-      &:focus {
-        border: $s-1 solid var(--color-accent-primary);
-      }
-    }
-
-    textarea {
-      border-radius: $br-8;
-      padding: $s-12 $s-16;
-      background-color: var(--color-background-tertiary);
-      color: var(--color-foreground-primary);
-      border: none;
-
-      &:focus {
-        outline: $s-1 solid var(--color-accent-primary);
-      }
-    }
-  }
-
-  &.two-columns {
-    max-width: $s-520;
-    justify-content: space-between;
-    flex-direction: row;
-  }
-
-  h1 {
-    font-size: $fs-36;
-    color: var(--color-background-tertiary);
-    margin-bottom: $s-20;
-  }
-
-  .subtitle {
-    font-size: $fs-24;
-    color: var(--color-background-tertiary);
-    margin-bottom: $s-20;
-  }
-
-  .notification-icon {
-    justify-content: center;
-    display: flex;
-    margin-bottom: $s-48;
-
-    svg {
-      fill: var(--color-background-primary);
-      height: 40%;
-      width: 40%;
-    }
-  }
-
-  .notification-text {
-    font-size: $fs-16;
-    color: var(--color-background-primary);
-    margin-bottom: $s-20;
-  }
-
-  .notification-text-email {
-    background: var(--color-foreground-primary);
-    border-radius: $br-4;
-    color: var(--color-background-primary);
-    font-size: $fs-16;
-    font-weight: $fw500;
-    margin: $s-24 0 $s-40 0;
-    padding: $s-16;
-    text-align: center;
-  }
-
+  // The page title has no class of its own.
   h2 {
-    font-size: $fs-24;
-    font-weight: $fw400;
+    @include use-typography("title-large");
+
     color: var(--color-foreground-primary);
     display: flex;
     align-items: center;
-    margin: $s-16 0;
-  }
-
-  h3 {
-    font-size: $fs-12;
-    font-weight: $fw400;
-    color: var(--color-foreground-primary);
-    display: flex;
-    align-items: center;
-    margin: $s-8 0;
-    text-transform: uppercase;
-  }
-
-  a:not(.button-primary) {
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  p {
-    color: var(--color-background-primary);
-  }
-
-  hr {
-    border-color: var(--color-foreground-secondary);
-  }
-
-  .links {
-    margin-top: $s-12;
+    margin-block: var(--sp-l);
+    margin-inline: 0;
   }
 }
 
-form.avatar-form {
+.fields-row {
+  --input-height: #{$sz-40};
+
+  margin-block-end: var(--sp-xl);
+  flex-direction: column;
+}
+
+.options {
+  @include use-typography("title-small");
+
+  display: flex;
+  justify-content: flex-end;
+  margin-block-start: var(--sp-m);
+}
+
+.links {
+  margin-block-start: var(--sp-m);
+}
+
+.avatar-form {
   display: flex;
   flex-direction: column;
-  width: $s-148;
-  height: $s-148;
-  margin: $s-16 0;
+  inline-size: px2rem(148);
+  block-size: px2rem(148);
+  margin-block: var(--sp-l);
+  margin-inline: 0;
 
+  // The profile photo has no class of its own.
   img {
-    border-radius: 50%;
+    border-radius: $br-circle;
     flex-shrink: 0;
-    height: 100%;
-    margin-right: $s-16;
-    width: 100%;
+    block-size: 100%;
+    margin-inline-end: var(--sp-l);
+    inline-size: 100%;
   }
 }
 
 .image-change-field {
   position: relative;
-  width: 100%;
-  height: 100%;
-
-  .update-overlay {
-    opacity: 0;
-    cursor: pointer;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    font-size: $fs-24;
-    color: var(--color-foreground-primary);
-    line-height: 6;
-    text-align: center;
-    background: var(--color-accent-tertiary);
-    border: none;
-
-    // The button centers its 144px line in the 148px circle; the bottom
-    // padding keeps the label where the old span drew it.
-    padding: 0 0 $s-4;
-    z-index: $z-index-modal;
-
-    &:focus-visible {
-      opacity: 0.8;
-    }
-  }
-
-  .delete-overlay {
-    position: absolute;
-    top: $s-4;
-    inset-inline-end: $s-4;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: $s-32;
-    height: $s-32;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    background: var(--color-background-primary);
-    color: var(--color-foreground-primary);
-    cursor: pointer;
-    opacity: 0;
-    transition: opacity 0.15s ease-in-out;
-    z-index: calc(#{$z-index-modal} + 1);
-
-    &:hover {
-      background: var(--color-background-quaternary);
-      color: var(--color-accent-primary);
-    }
-  }
-
-  input[type="file"] {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    top: 0;
-    z-index: $z-index-modal;
-  }
+  inline-size: 100%;
+  block-size: 100%;
 
   &:hover {
     .update-overlay {
@@ -333,54 +96,83 @@ form.avatar-form {
       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 {
+  @include use-typography("title-large");
+
+  opacity: 0;
+  cursor: pointer;
+  position: absolute;
+  inline-size: 100%;
+  block-size: 100%;
+  border: none;
+  border-radius: $br-circle;
+  color: var(--color-foreground-primary);
+
+  // Draws the label in the middle of the circle.
+  line-height: 6;
+  text-align: center;
+  background: var(--color-accent-tertiary);
+
+  // The button centers its 144px line in the 148px circle; the bottom
+  // padding keeps the label where the old span drew it.
+  padding: 0 0 var(--sp-xs);
+  z-index: var(--z-index-set);
+
+  &:focus-visible {
+    opacity: 0.8;
+  }
+}
+
+.delete-overlay {
+  --delete-overlay-background-color: var(--color-background-primary);
+  --delete-overlay-foreground-color: var(--color-foreground-primary);
+
+  position: absolute;
+  inset-block-start: var(--sp-xs);
+  inset-inline-end: var(--sp-xs);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: $sz-32;
+  block-size: $sz-32;
+  padding: 0;
+  border: none;
+  border-radius: $br-circle;
+  background: var(--delete-overlay-background-color);
+  color: var(--delete-overlay-foreground-color);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease-in-out;
+  z-index: calc(var(--z-index-set) + 1);
+
+  &:hover {
+    --delete-overlay-background-color: var(--color-background-quaternary);
+    --delete-overlay-foreground-color: var(--color-accent-primary);
+  }
 }
 
 .profile-form {
   display: flex;
   flex-direction: column;
-  max-width: $s-368;
-  width: 100%;
-}
-
-.newsletter-subs {
-  border-bottom: $s-1 solid var(--color-foreground-secondary);
-  border-top: $s-1 solid var(--color-foreground-secondary);
-  padding: $s-32 0;
-  margin-bottom: $s-32;
-
-  .newsletter-title {
-    font-family: "worksans", "vazirmatn", sans-serif;
-    color: var(--color-foreground-secondary);
-    font-size: $fs-14;
-  }
-
-  label {
-    font-family: "worksans", "vazirmatn", sans-serif;
-    color: var(--color-background-primary);
-    font-size: $fs-12;
-    margin-right: calc(-1 * $s-16);
-    margin-bottom: $s-12;
-  }
-
-  .info {
-    color: var(--color-foreground-secondary);
-    font-size: $fs-12;
-    margin-bottom: $s-8;
-  }
-
-  .input-checkbox label {
-    align-items: flex-start;
-  }
-}
-
-.btn-secondary {
-  @extend %button-secondary;
-
-  height: $s-32;
+  max-inline-size: px2rem(368);
+  inline-size: 100%;
 }
 
 .btn-primary {
   @extend %button-primary;
 
-  height: $s-32;
+  block-size: $sz-32;
 }