Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-03 21:09:00 -05:00
Code Issues Activity

♻️ Unnest scss of dashboard comments file

Browse source
This commit is contained in:
Eva Marco 2024-03-07 10:16:04 +01:00 • committed by Andrey Antukh
parent 9f7d1be0a9
commit cf41982ee2
3 changed files with 15 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -156,6 +156,7 @@
--icon-foreground-accept: var(--status-color-success-500); --icon-foreground-accept: var(--status-color-success-500);
--icon-foreground-discard: var(--status-color-error-500); --icon-foreground-discard: var(--status-color-error-500);
--icon-foreground-active: var(--color-accent-primary); --icon-foreground-active: var(--color-accent-primary);
--icon-foreground-selected: var(--color-accent-tertiary);
// INPUTS, SELECTS, DROPDOWNS // INPUTS, SELECTS, DROPDOWNS

4
frontend/src/app/main/ui/dashboard/comments.cljs
View file

@ -55,7 +55,7 @@
:on-click on-show-comments :on-click on-show-comments
:on-key-down handle-keydown :on-key-down handle-keydown
:data-test "open-comments" :data-test "open-comments"
:class (stl/css-case :button true :class (stl/css-case :comment-button true
:open show? :open show?
:unread (boolean (seq tgroups)))} :unread (boolean (seq tgroups)))}
comments-icon-small]])) comments-icon-small]]))
@ -101,7 +101,7 @@
[:& dropdown {:show show? :on-close on-hide-comments} [:& dropdown {:show show? :on-close on-hide-comments}
[:div {:class (stl/css :dropdown :comments-section :comment-threads-section)} [:div {:class (stl/css :dropdown :comments-section :comment-threads-section)}
[:div {:class (stl/css :header)} [:div {:class (stl/css :header)}
[:h3 (tr "labels.comments")] [:h3 {:class (stl/css :header-title)} (tr "labels.comments")]
[:button {:class (stl/css :close-btn) [:button {:class (stl/css :close-btn)
:tab-index (if show? "0" "-1") :tab-index (if show? "0" "-1")
:on-click on-hide-comments :on-click on-hide-comments

39
frontend/src/app/main/ui/dashboard/comments.scss
View file

@ -7,17 +7,9 @@
@use "common/refactor/common-refactor.scss" as *; @use "common/refactor/common-refactor.scss" as *;
.dashboard-comments-section { .dashboard-comments-section {
display: flex; @include flexCenter;
align-items: center;
justify-content: center;
position: relative; position: relative;
border-radius: $br-8; border-radius: $br-8;
button {
cursor: pointer;
background: none;
border: none;
}
} }
.thread-groups { .thread-groups {
@ -25,13 +17,6 @@
overflow-y: scroll; overflow-y: scroll;
max-height: $s-440; max-height: $s-440;
overflow: auto; overflow: auto;
hr {
background-color: $df-primary;
border: 0;
height: $s-1;
margin: 0;
}
} }
.thread-group { .thread-group {
@ -58,10 +43,9 @@
margin-bottom: $s-24; margin-bottom: $s-24;
} }
.button { .comment-button {
display: flex; @include buttonStyle;
align-items: center; @include flexCenter;
justify-content: center;
border-radius: $br-8; border-radius: $br-8;
height: $s-32; height: $s-32;
width: $s-32; width: $s-32;
@ -107,13 +91,14 @@
height: $s-40; height: $s-40;
align-items: center; align-items: center;
padding: 0 $s-12; padding: 0 $s-12;
h3 { }
color: $df-secondary;
font-size: $fs-11; .header-title {
line-height: 1.28; color: $df-secondary;
flex-grow: 1; font-size: $fs-11;
text-transform: uppercase; line-height: 1.28;
} flex-grow: 1;
text-transform: uppercase;
} }
.close-btn { .close-btn {