github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-10-28 21:40:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Give the profile page links, title and photo classes

Browse Source 
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
This commit is contained in:
Eva Marco 2026-10-28 10:32:02 +01:00
parent 04cec3a329
commit ada96f8e9d
2 changed files with 31 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/app/main/ui/settings/profile.cljs
View File

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

50
frontend/src/app/main/ui/settings/profile.scss
View File

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