3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-22 18:16:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Update onboarding modals

Browse source
This commit is contained in:
Eva Marco 2024-02-15 17:48:05 +01:00 • committed by Andrey Antukh
parent 5590210088
commit 7624797acf
109 changed files with 1054 additions and 836 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/app/main/ui.cljs
View file

@ -16,7 +16,6 @@
[app.main.ui.icons :as i]
[app.main.ui.messages :as msgs]
[app.main.ui.onboarding :refer [onboarding-modal]]
[app.main.ui.onboarding.questions :refer [questions-modal]]
[app.main.ui.releases :refer [release-notes-modal]]
[app.main.ui.static :as static]
[app.util.dom :as dom]
@ -98,11 +97,6 @@
#_[:& app.main.ui.onboarding.team-choice/onboarding-team-modal]
(when-let [props (get profile :props)]
(cond
(and (contains? cf/flags :onboarding-questions)
(not (:onboarding-questions-answered props false))
(not (:onboarding-viewed props false)))
[:& questions-modal]
(and (not (:onboarding-viewed props))
(contains? cf/flags :onboarding))
[:& onboarding-modal {}]

10
frontend/src/app/main/ui/comments.scss
View file

@ -19,7 +19,7 @@
}
.section-title {
@include titleTipography;
@include bodyMedTipography;
height: $s-32;
display: flex;
align-items: center;
@ -55,7 +55,7 @@
// Comment-thread
.comment {
@include titleTipography;
@include bodyMedTipography;
display: flex;
flex-direction: column;
gap: $s-12;
@ -98,7 +98,7 @@
}
.content {
@include titleTipography;
@include bodyMedTipography;
color: var(--color-foreground-primary);
}
@ -151,7 +151,7 @@
.comment-container {
position: relative;
.comment {
@include titleTipography;
@include bodyMedTipography;
.author {
display: flex;
gap: $s-8;
@ -195,7 +195,7 @@
.content {
position: relative;
.text {
@include titleTipography;
@include bodyMedTipography;
}
}
}

2
frontend/src/app/main/ui/components/color_bullet_new.scss
View file

@ -71,7 +71,7 @@
.color-text {
@include twoLineTextEllipsis;
@include titleTipography;
@include bodyMedTipography;
width: $s-80;
text-align: center;
margin-top: $s-2;

2
frontend/src/app/main/ui/components/context_menu_a11y.scss
View file

@ -46,7 +46,7 @@
.context-menu-item {
display: flex;
.context-menu-action {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
justify-content: flex-start;

2
frontend/src/app/main/ui/components/editable_label.scss
View file

@ -8,7 +8,7 @@
.editable-label-input {
@include textEllipsis;
@include titleTipography;
@include bodyMedTipography;
@include removeInputStyle;
flex-grow: 1;
height: $s-28;

34
frontend/src/app/main/ui/components/forms.cljs
View file

@ -214,7 +214,7 @@
[:span {:class (stl/css :hint)} hint])]))
(mf/defc select
[{:keys [options disabled form default] :as props
[{:keys [options disabled form default dropdown-class] :as props
:or {default ""}}]
(let [input-name (get props :name)
form (or form (mf/use-ctx form-ctx))
@ -230,6 +230,7 @@
{:default-value value
:disabled disabled
:options options
:dropdown-class dropdown-class
:on-change handle-change}]]))
(mf/defc radio-buttons
@ -244,6 +245,7 @@
on-change (unchecked-get props "on-change")
options (unchecked-get props "options")
trim? (unchecked-get props "trim")
class (unchecked-get props "class")
encode-fn (d/nilv (unchecked-get props "encode-fn") identity)
decode-fn (d/nilv (unchecked-get props "decode-fn") identity)
@ -258,31 +260,39 @@
(when (fn? on-change)
(on-change name value)))))]
[:div {:class (stl/css :custom-radio)}
(for [{:keys [image value label]} options]
[:div {:class (dm/str class " " (stl/css :custom-radio))}
(for [{:keys [image icon value label area]} options]
(let [image? (some? image)
icon? (some? icon)
value' (encode-fn value)
checked? (= value current-value)
key (str/ffmt "%-%" (d/name name) (d/name value'))]
[:label {:for key
:key key
:style {:background-image (when image? (str/ffmt "url(%)" image))}
:style {:grid-area area}
:class (stl/css-case :radio-label true
:global/checked checked?
:with-image image?)}
:with-image (or image? icon?))}
(cond
image?
[:span {:style {:background-image (str/ffmt "url(%)" image)}
:class (stl/css :image-inside)}]
icon?
[:span {:class (stl/css :icon-inside)} icon]
:else
[:span {:class (stl/css-case :radio-icon true
:global/checked checked?)}
(when checked? [:span {:class (stl/css :radio-dot)}])])
label
[:input {:on-change on-change'
:type "radio"
:class (stl/css :radio-input)
:id key
:name name
:value value'
:checked checked?}]
(when (not image?)
[:span {:class (stl/css-case :radio-icon true
:global/checked checked?)}
(when checked? [:span {:class (stl/css :radio-dot)}])])
label]))]))
:checked checked?}]]))]))
(mf/defc submit-button*
{::mf/wrap-props false}

145
frontend/src/app/main/ui/components/forms.scss
View file

@ -12,46 +12,6 @@
flex-direction: column;
align-items: center;
position: relative;
.input-with-label {
@include flexColumn;
gap: $s-8;
@include titleTipography;
justify-content: flex-start;
align-items: flex-start;
height: 100%;
width: 100%;
padding: 0;
cursor: pointer;
color: var(--modal-title-foreground-color);
text-transform: uppercase;
margin-bottom: $s-8;
input {
@extend .input-element;
color: var(--input-foreground-color-active);
margin-top: 0;
width: 100%;
height: 100%;
padding: 0 $s-16;
&:focus {
outline: none;
border: $s-1 solid var(--input-border-color-focus);
border-radius: $br-8;
}
}
// Input autofill
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-text-fill-color: var(--input-foreground-color-active);
-webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color);
border: $s-1 solid var(--input-border-color);
-webkit-background-clip: text;
transition: background-color 5000s ease-in-out 0s;
caret-color: var(--input-foreground-color-active);
}
}
&.valid {
input {
border: $s-1 solid var(--input-border-color-success);
@ -78,11 +38,52 @@
}
}
.input-with-label {
@include flexColumn;
gap: $s-8;
@include bodyMedTipography;
justify-content: flex-start;
align-items: flex-start;
height: 100%;
width: 100%;
padding: 0;
cursor: pointer;
color: var(--modal-title-foreground-color);
text-transform: uppercase;
margin-bottom: $s-8;
input {
@extend .input-element;
color: var(--input-foreground-color-active);
margin-top: 0;
width: 100%;
height: 100%;
padding: 0 $s-8;
&:focus {
outline: none;
border: $s-1 solid var(--input-border-color-focus);
border-radius: $br-8;
}
}
// Input autofill
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-text-fill-color: var(--input-foreground-color-active);
-webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color);
border: $s-1 solid var(--input-border-color);
-webkit-background-clip: text;
transition: background-color 5000s ease-in-out 0s;
caret-color: var(--input-foreground-color-active);
}
}
.input-and-icon {
position: relative;
width: var(--input-width, calc(100% - $s-1));
min-width: var(--input-min-width);
height: var(--input-height, $s-40);
height: var(--input-height, $s-32);
}
.help-icon {
@ -142,7 +143,7 @@
}
.hint {
@include titleTipography;
@include bodyMedTipography;
color: var(--modal-text-foreground-color);
width: 99%;
}
@ -150,7 +151,7 @@
.checkbox {
@extend .input-checkbox;
.checkbox-label {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
flex-direction: row-reverse;
@ -185,7 +186,7 @@
background-color: var(--input-background-color);
.main-content {
@include flexColumn;
@include titleTipography;
@include bodyMedTipography;
position: relative;
justify-content: center;
flex-grow: 1;
@ -230,7 +231,7 @@
select {
@extend .menu-dropdown;
@include titleTipography;
@include bodyMedTipography;
box-sizing: border-box;
position: absolute;
top: 0;
@ -246,7 +247,7 @@
background-color: transparent;
cursor: pointer;
option {
@include titleTipography;
@include bodyMedTipography;
color: var(--title-foreground-color-hover);
background-color: var(--menu-background-color);
appearance: none;
@ -271,7 +272,7 @@
overflow-y: hidden;
.inside-input {
@include removeInputStyle;
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
width: 100%;
max-width: calc(100% - $s-1);
@ -281,6 +282,7 @@
padding: $s-8;
margin: 0;
border-radius: $br-8;
color: var(--input-foreground-color-active);
background-color: var(--input-background-color);
border: $s-1 solid var(--input-border-color-active);
&:focus {
@ -309,7 +311,7 @@
border: $s-1 solid var(--pill-background-color);
box-sizing: border-box;
.text {
@include titleTipography;
@include bodyMedTipography;
padding-right: $s-8;
color: var(--pill-foreground-color);
}
@ -342,15 +344,20 @@
.custom-radio {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: $s-16;
}
.radio-label {
@include titleTipography;
@include bodyMedTipography;
@include flexRow;
align-items: flex-start;
gap: $s-8;
min-height: $s-32;
height: fit-content;
border-radius: $br-8;
padding: $s-0 $s-2;
padding: $s-8;
color: var(--input-foreground-color);
border: $s-1 solid transparent;
&:focus,
&:focus-within {
outline: none;
@ -376,18 +383,16 @@
}
.radio-label.with-image {
display: flex;
justify-content: center;
height: $s-120;
width: $s-140;
padding: $s-64 $s-4 0 $s-4;
margin-top: $s-16;
margin-right: 0;
@include smallTitleTipography;
display: grid;
grid-template-rows: auto auto 0px;
justify-items: center;
gap: 0;
height: $s-116;
width: $s-92;
border-radius: $br-8;
margin: 0;
border: 1px solid var(--color-background-tertiary);
background-size: 50px;
background-repeat: no-repeat;
background-position: center 0.75rem;
cursor: pointer;
&:global(.checked) {
border: 1px solid var(--color-accent-primary);
@ -399,10 +404,28 @@
}
}
.image-inside {
width: $s-60;
height: $s-48;
background-size: $s-48;
background-repeat: no-repeat;
background-position: center;
}
.icon-inside {
width: $s-60;
height: $s-48;
svg {
width: $s-60;
height: $s-48;
stroke: var(--icon-foreground);
fill: none;
}
}
//TEXTAREA
.textarea-label {
@include tabTitleTipography;
@include uppercaseTitleTipography;
color: var(--modal-title-foreground-color);
text-transform: uppercase;
margin-bottom: $s-8;

2
frontend/src/app/main/ui/components/radio_buttons.scss
View file

@ -30,7 +30,7 @@
stroke: var(--radio-btn-foreground-color);
}
.title-name {
@include tabTitleTipography;
@include uppercaseTitleTipography;
color: var(--radio-btn-foreground-color);
}
&:hover {

9
frontend/src/app/main/ui/components/select.cljs
View file

@ -107,7 +107,7 @@
[:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
[:& dropdown {:show is-open? :on-close close-dropdown}
[:ul {:ref dropdown-element* :data-direction @dropdown-direction*
:class (dm/str (stl/css :custom-select-dropdown) " " dropdown-class)}
:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
(for [[index item] (d/enumerate options)]
(if (= :separator item)
[:li {:class (dom/classnames (stl/css :separator) true)
@ -116,9 +116,10 @@
icon-ref (i/key->icon icon)]
[:li
{:key (dm/str current-id "-" index)
:class (dom/classnames
(stl/css :checked-element) true
(stl/css :is-selected) (= value current-value))
:class (stl/css-case
:checked-element true
:disabled (:disabled item)
:is-selected (= value current-value))
:data-value (pr-str value)
:on-pointer-enter highlight-item
:on-pointer-leave unhighlight-item

158
frontend/src/app/main/ui/components/select.scss
View file

@ -7,7 +7,12 @@
@import "refactor/common-refactor.scss";
.custom-select {
@include titleTipography;
--border-color: var(--menu-background-color);
--bg-color: var(--menu-background-color);
--icon-color: var(--icon-foreground);
--text-color: var(--menu-foreground-color);
@extend .new-scrollbar;
@include bodyMedTipography;
position: relative;
display: grid;
grid-template-columns: 1fr auto;
@ -17,104 +22,105 @@
margin: 0;
padding: $s-8;
border-radius: $br-8;
background-color: var(--menu-background-color);
border: $s-1 solid var(--menu-background-color);
color: var(--menu-foreground-color);
background-color: var(--bg-color);
border: $s-1 solid var(--border-color);
color: var(--text-color);
cursor: pointer;
&.icon {
grid-template-columns: auto 1fr auto;
}
.current-icon {
&:hover {
--bg-color: var(--menu-background-color-hover);
--border-color: var(--menu-background-color);
--icon-color: var(--menu-foreground-color-hover);
}
&:focus {
--bg-color: var(--menu-background-color-focus);
--border-color: var(--menu-background-focus);
}
}
.disabled {
--bg-color: var(--menu-background-color-disabled);
--border-color: var(--menu-border-color-disabled);
--icon-color: var(--menu-foreground-color-disabled);
--text-color: var(--menu-foreground-color-disabled);
pointer-events: none;
cursor: default;
}
.dropdown-button {
@include flexCenter;
svg {
@extend .button-icon-small;
transform: rotate(90deg);
stroke: var(--icon-color);
}
}
.current-icon {
@include flexCenter;
width: $s-24;
padding-right: $s-4;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
}
.custom-select-dropdown {
@extend .dropdown-wrapper;
.separator {
margin: 0;
height: $s-12;
border-block-start: $s-1 solid var(--dropdown-separator-color);
}
}
.custom-select-dropdown[data-direction="up"] {
bottom: $s-32;
top: auto;
}
.checked-element {
@extend .dropdown-element-base;
.icon {
@include flexCenter;
height: $s-24;
width: $s-24;
padding-right: $s-4;
svg {
@extend .button-icon-small;
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
.dropdown-button {
.label {
flex-grow: 1;
width: 100%;
}
.check-icon {
@include flexCenter;
svg {
@extend .button-icon-small;
transform: rotate(90deg);
visibility: hidden;
stroke: var(--icon-foreground);
}
}
.custom-select-dropdown {
@extend .dropdown-wrapper;
.separator {
margin: 0;
height: $s-12;
border-top: $s-1 solid var(--dropdown-separator-color);
}
}
.custom-select-dropdown[data-direction="up"] {
bottom: $s-32;
top: auto;
}
.checked-element {
@extend .dropdown-element-base;
.icon {
@include flexCenter;
height: $s-24;
width: $s-24;
padding-right: $s-4;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
&.is-selected {
color: var(--menu-foreground-color);
.check-icon svg {
stroke: var(--menu-foreground-color);
visibility: visible;
}
.label {
flex-grow: 1;
width: 100%;
}
.check-icon {
@include flexCenter;
svg {
@extend .button-icon-small;
visibility: hidden;
stroke: var(--icon-foreground);
}
}
&.is-selected {
color: var(--menu-foreground-color);
.check-icon svg {
stroke: var(--menu-foreground-color);
visibility: visible;
}
}
}
&:hover {
background-color: var(--menu-background-color-hover);
border: $s-1 solid var(--menu-background-color-hover);
.dropdown-button {
svg {
stroke: var(--menu-foreground-color-hover);
}
}
}
&:focus {
background-color: var(--menu-background-color-focus);
border: $s-1 solid var(--menu-border-color-focus);
}
&.disabled {
background-color: var(--menu-background-color-disabled);
color: var(--menu-foreground-color-disabled);
border: $s-1 solid var(--menu-border-color-disabled);
pointer-events: none;
cursor: default;
.dropdown-button svg {
stroke: var(--menu-foreground-color-disabled);
}
display: none;
}
}

2
frontend/src/app/main/ui/components/tab_container.scss
View file

@ -28,7 +28,7 @@
width: 100%;
.tab-container-tab-title {
@include flexCenter;
@include tabTitleTipography;
@include uppercaseTitleTipography;
height: 100%;
width: 100%;
padding: 0 $s-8;

4
frontend/src/app/main/ui/components/title_bar.scss
View file

@ -19,7 +19,7 @@
.title,
.title-only,
.inspect-title {
@include tabTitleTipography;
@include uppercaseTitleTipography;
display: flex;
align-items: center;
flex-grow: 1;
@ -119,7 +119,7 @@
.title,
.title-only {
@include tabTitleTipography;
@include uppercaseTitleTipography;
display: flex;
align-items: center;
flex-grow: 1;

4
frontend/src/app/main/ui/dashboard/change_owner.scss
View file

@ -19,7 +19,7 @@
}
.modal-title {
@include tabTitleTipography;
@include uppercaseTitleTipography;
color: var(--modal-title-foreground-color);
}
@ -28,7 +28,7 @@
}
.modal-content {
@include titleTipography;
@include bodyMedTipography;
margin-bottom: $s-24;
}

10
frontend/src/app/main/ui/dashboard/import.scss vendored
View file

@ -19,7 +19,7 @@
}
.modal-title {
@include tabTitleTipography;
@include uppercaseTitleTipography;
color: var(--modal-title-foreground-color);
}
@ -28,7 +28,7 @@
}
.modal-content {
@include titleTipography;
@include bodyMedTipography;
margin-bottom: $s-24;
}
@ -51,7 +51,7 @@
}
}
.message {
@include titleTipography;
@include bodyMedTipography;
}
&.warning {
background-color: var(--alert-background-color-warning);
@ -79,7 +79,7 @@
.modal-scd-msg,
.modal-subtitle,
.modal-msg {
@include titleTipography;
@include bodyMedTipography;
color: var(--modal-text-foreground-color);
line-height: 1.5;
}
@ -105,7 +105,7 @@
flex-grow: 1;
}
.file-name-label {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
gap: $s-12;

10
frontend/src/app/main/ui/dashboard/team.scss
View file

@ -612,7 +612,7 @@
}
}
.message {
@include titleTipography;
@include bodyMedTipography;
color: var(--alert-foreground-color-error);
}
}
@ -636,7 +636,7 @@
}
}
.message {
@include titleTipography;
@include bodyMedTipography;
color: var(--alert-foreground-color-warning);
}
}
@ -683,7 +683,7 @@
}
.modal-title {
@include tabTitleTipography;
@include uppercaseTitleTipography;
color: var(--modal-title-foreground-color);
}
@ -694,7 +694,7 @@
.modal-content {
@include flexColumn;
gap: $s-24;
@include titleTipography;
@include bodyMedTipography;
margin-bottom: $s-24;
}
@ -703,7 +703,7 @@
}
.select-title {
@include titleTipography;
@include bodyMedTipography;
color: var(--modal-title-foreground-color);
}

6
frontend/src/app/main/ui/dashboard/team_form.scss
View file

@ -19,7 +19,7 @@
}
.modal-title {
@include tabTitleTipography;
@include uppercaseTitleTipography;
color: var(--modal-title-foreground-color);
}
@ -35,7 +35,7 @@
@extend .input-element-label;
label {
@include flexColumn;
@include titleTipography;
@include bodyMedTipography;
align-items: flex-start;
width: 100%;
border: none;
@ -43,7 +43,7 @@
height: 100%;
input {
@include titleTipography;
@include bodyMedTipography;
margin-top: $s-8;
}
}

4
frontend/src/app/main/ui/debug/components_preview.scss
View file

@ -53,7 +53,7 @@
flex-direction: column;
border-radius: $s-8;
h3 {
@include titleTipography;
@include bodyMedTipography;
font-size: $fs-24;
width: 100%;
}
@ -65,7 +65,7 @@
max-height: $s-80;
margin-bottom: $s-16;
.component-name {
@include tabTitleTipography;
@include uppercaseTitleTipography;
font-weight: bold;
}
}

2
frontend/src/app/main/ui/delete_shared.scss
View file

@ -31,7 +31,7 @@
}
.modal-content {
@include titleTipography;
@include bodyMedTipography;
margin-bottom: $s-24;
}

7
frontend/src/app/main/ui/export.scss
View file

@ -55,7 +55,7 @@
}
.retry-btn {
@extend .button-tertiary;
@include titleTipography;
@include bodyMedTipography;
}
.modal-close-button {
@ -96,10 +96,10 @@
.modal-content,
.no-selection {
@include titleTipography;
@include bodyMedTipography;
margin-bottom: $s-24;
.modal-hint {
@include titleTipography;
@include bodyMedTipography;
color: var(--modal-text-foreground-color);
}
.modal-link {
@ -243,7 +243,6 @@
label {
align-items: flex-start;
.modal-subtitle {
// @include tabTitleTipography;
@include bodyLargeTypography;
color: var(--modal-title-foreground-color);
}

6
frontend/src/app/main/ui/messages.scss
View file

@ -102,12 +102,12 @@
}
.text {
@include titleTipography;
@include bodyMedTipography;
flex-grow: 1;
}
.link {
@include titleTipography;
@include bodyMedTipography;
color: var(--modal-link-foreground-color);
margin: 0;
}
@ -119,7 +119,7 @@
.action-btn {
@extend .button-tertiary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
min-height: $s-32;
min-width: $s-32;
svg {

129
frontend/src/app/main/ui/onboarding.cljs
View file

@ -38,48 +38,39 @@
(next))]
[:div {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-left)}
[:img {:src "images/onboarding-welcome.png"
[:img {:src "images/welcomeilustration.svg"
:border "0"
:alt (tr "onboarding.welcome.alt")}]]
[:div {:class (stl/css :modal-right)}
[:div {:class (stl/css :release)}
"Version " (:main cf/version)]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)
:data-test "onboarding-welcome"}
(tr "onboarding-v2.welcome.title")]]
[:h1 {:class (stl/css :modal-title)
:data-test "onboarding-welcome"}
(tr "onboarding-v2.welcome.title")]
[:p {:class (stl/css :modal-text)}
(tr "onboarding-v2.welcome.desc1")]
[:div {:class (stl/css :modal-info)}
[:p {:class (stl/css :modal-text)}
(tr "onboarding-v2.welcome.desc1")]
[:div {:class (stl/css :property-block)}
[:img {:src "images/community.svg"
:border "0"}]
[:div {:class (stl/css :text-wrapper)}
[:div {:class (stl/css :property-title)}
[:a {:href "https://community.penpot.app/"
:target "_blank"
:on-click #(send-event "onboarding-community-link")}
(tr "onboarding-v2.welcome.desc2.title")]]
[:div {:class (stl/css :property-description)}
(tr "onboarding-v2.welcome.desc2")]]]
[:div {:class (stl/css :text-wrapper)}
[:div {:class (stl/css :property-title)}
[:a {:href "https://community.penpot.app/"
:target "_blank"
:on-click #(send-event "onboarding-community-link")}
(tr "onboarding-v2.welcome.desc2.title")]]
[:div {:class (stl/css :property-description)}
(tr "onboarding-v2.welcome.desc2")]]
[:div {:class (stl/css :property-block)}
[:img {:src "images/contributing.svg"
:border "0"}]
[:div {:class (stl/css :text-wrapper)}
[:div {:class (stl/css :property-title)}
[:a {:href "https://help.penpot.app/contributing-guide/"
:target "_blank" :on-click #(send-event "onboarding-contributing-link")}
(tr "onboarding-v2.welcome.desc3.title")]]
[:div {:class (stl/css :property-description)}
(tr "onboarding-v2.welcome.desc3")]]]]]
[:div {:class (stl/css :text-wrapper)}
[:div {:class (stl/css :property-title)}
[:a {:href "https://help.penpot.app/contributing-guide/"
:target "_blank" :on-click #(send-event "onboarding-contributing-link")}
(tr "onboarding-v2.welcome.desc3.title")]]
[:div {:class (stl/css :property-description)}
(tr "onboarding-v2.welcome.desc3")]]
[:div {:class (stl/css :modal-footer)}
[:button {:on-click go-next
:data-test "onboarding-next-btn"}
(tr "labels.continue")]]]]))
[:button {:on-click go-next
:class (stl/css :accept-btn)
:data-test "onboarding-next-btn"}
(tr "labels.continue")]]]))
(mf/defc onboarding-before-start
[{:keys [next] :as props}]
@ -89,49 +80,44 @@
(next))]
[:div {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-left)}
[:img {:src "images/onboarding-people.png"
[:img {:src "images/beforeyoustartilustration.svg"
:border "0"
:alt (tr "onboarding.welcome.alt")}]]
[:div {:class (stl/css :modal-right)}
[:div {:class (stl/css :release)}
"Version " (:main cf/version)]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)
:data-test "onboarding-welcome"}
(tr "onboarding-v2.before-start.title")]]
[:div {:class (stl/css :modal-info)}
[:p {:class (stl/css :modal-text)}
(tr "onboarding-v2.before-start.desc1")]
[:div {:class (stl/css :property-block)}
[:img {:src "images/user-guide.svg" :border "0"}]
[:div {:class (stl/css :text-wrapper)}
[:div {:class (stl/css :property-title)}
[:a {:class (stl/css :modal-link)
:href "https://help.penpot.app/user-guide/"
:target "_blank"
:on-click #(send-event "onboarding-user-guide-link")}
(tr "onboarding-v2.before-start.desc2.title")]]
[:div {:class (stl/css :property-description)}
(tr "onboarding-v2.before-start.desc2")]]]
[:h1 {:class (stl/css :modal-title)
:data-test "onboarding-welcome"}
(tr "onboarding-v2.before-start.title")]
[:p {:class (stl/css :modal-text)}
(tr "onboarding-v2.before-start.desc1")]
[:div {:class (stl/css :property-block)}
[:img {:src "images/video-tutorials.svg" :border "0"}]
[:div {:class (stl/css :text-wrapper)}
[:div {:class (stl/css :property-title)}
[:a {:class (stl/css :modal-link)
:href "https://www.youtube.com/c/Penpot"
:target "_blank"
:on-click #(send-event "onboarding-video-tutorials-link")}
(tr "onboarding-v2.before-start.desc3.title")]]
[:div {:class (stl/css :property-description)}
(tr "onboarding-v2.before-start.desc3")]]]]]
[:div {:class (stl/css :text-wrapper)}
[:div {:class (stl/css :property-title)}
[:a {:class (stl/css :modal-link)
:href "https://help.penpot.app/user-guide/"
:target "_blank"
:on-click #(send-event "onboarding-user-guide-link")}
(tr "onboarding-v2.before-start.desc2.title")]]
[:div {:class (stl/css :property-description)}
(tr "onboarding-v2.before-start.desc2")]]
[:div {:class (stl/css :modal-footer)}
[:button {:on-click go-next
:data-test "onboarding-next-btn"}
(tr "labels.continue")]]]]))
[:div {:class (stl/css :text-wrapper)}
[:div {:class (stl/css :property-title)}
[:a {:class (stl/css :modal-link)
:href "https://www.youtube.com/c/Penpot"
:target "_blank"
:on-click #(send-event "onboarding-video-tutorials-link")}
(tr "onboarding-v2.before-start.desc3.title")]]
[:div {:class (stl/css :property-description)}
(tr "onboarding-v2.before-start.desc3")]]
[:button {:on-click go-next
:class (stl/css :accept-btn)
:data-test "onboarding-next-btn"}
(tr "labels.continue")]]]))
(mf/defc onboarding-modal
{::mf/register modal/components
@ -149,8 +135,11 @@
(st/emit! (modal/hide)
(du/mark-onboarding-as-viewed))
(cond
(contains? cf/flags :onboarding-questions)
(modal/show! {:type :onboarding-questions})
(contains? cf/flags :onboarding-newsletter)
(modal/show! {:type :onboarding-newsletter-modal})
(modal/show! {:type :onboarding-newsletter})
(contains? cf/flags :onboarding-team)
(modal/show! {:type :onboarding-team}))))]

74
frontend/src/app/main/ui/onboarding.scss
View file

@ -13,70 +13,58 @@
.modal-container {
@extend .modal-container-base;
position: relative;
display: flex;
padding: 0;
display: grid;
grid-template-columns: auto auto;
gap: $s-32;
padding-inline: $s-100;
padding-block-start: $s-100;
padding-block-end: $s-72;
margin: 0;
min-width: $s-712;
width: $s-960;
height: $s-632;
max-width: $s-960;
max-height: $s-632;
}
.modal-left {
width: $s-284;
width: $s-240;
margin-block-end: $s-64;
img {
width: $s-284;
width: $s-240;
height: 100%;
border-radius: $br-8 0 0 $br-8;
}
}
.modal-right {
@include flexColumn;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: $s-40 auto auto auto $s-32;
gap: $s-24;
position: relative;
flex-grow: 1;
padding: $s-32;
}
.release {
@include titleTipography;
@include bodyMedTipography;
position: absolute;
top: 0;
top: calc(-1 * $s-28);
right: 0;
padding: $s-8;
color: var(--modal-text-foreground-color);
}
.modal-content {
@include flexColumn;
@include titleTipography;
gap: $s-24;
flex-grow: 1;
margin-bottom: $s-24;
}
.modal-title {
@include bigTitleTipography;
color: var(--modal-title-foreground-color);
}
.modal-info {
@include flexColumn;
}
.modal-text {
@include titleTipography;
.modal-text,
.property-description {
@include bodyLargeTypography;
margin: 0;
color: var(--modal-text-foreground-color);
}
.property-block {
@include flexRow;
gap: $s-16;
margin-bottom: $s-24;
img {
@include flexCenter;
height: $s-40;
width: $s-40;
}
}
.modal-link {
@include bodyLargeTypography;
color: var(--modal-link-foreground-color);
@ -88,19 +76,11 @@
}
.property-title a {
@include titleTipography;
@include medTitleTipography;
color: var(--modal-title-foreground-color);
}
.property-description {
@include titleTipography;
color: var(--modal-text-foreground-color);
}
.modal-footer {
display: flex;
justify-content: flex-end;
button {
@extend .modal-accept-btn;
}
.accept-btn {
@extend .modal-accept-btn;
justify-self: flex-end;
}

40
frontend/src/app/main/ui/onboarding/newsletter.cljs
View file

@ -15,9 +15,9 @@
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
(mf/defc onboarding-newsletter-modal
(mf/defc onboarding-newsletter
{::mf/register modal/components
::mf/register-as :onboarding-newsletter-modal}
::mf/register-as :onboarding-newsletter}
[]
(let [message (tr "onboarding.newsletter.acceptance-message")
newsletter-updates (mf/use-state false)
@ -39,13 +39,18 @@
[:div {:class (stl/css :modal-overlay)}
[:div.animated.fadeInDown {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-header)}
[:div {:class (stl/css :modal-left)}
[:img {:src "images/deco-newsletter.png"
:border "0"}]]
[:div {:class (stl/css :modal-right)}
[:h2 {:class (stl/css :modal-title)
:data-test "onboarding-newsletter-title"}
(tr "onboarding.newsletter.title")]
[:p {:class (stl/css :modal-text)}
(tr "onboarding-v2.newsletter.desc")]]
[:div {:class (stl/css :modal-content)}
(tr "onboarding-v2.newsletter.desc")]
[:div {:class (stl/css :newsletter-options)}
[:div {:class (stl/css :input-wrapper)}
[:label {:for "newsletter-updates"}
@ -67,19 +72,14 @@
:id "newsletter-news"
:on-change #(toggle newsletter-news)}]]]]
[:div {:class (stl/css :modal-info)}
[:p {:class (stl/css :modal-text)}
(tr "onboarding-v2.newsletter.privacy1")
[:a {:class (stl/css :modal-link)
:target "_blank"
:href "https://penpot.app/privacy"}
(tr "onboarding.newsletter.policy")]]
[:p {:class (stl/css :modal-text)}
(tr "onboarding-v2.newsletter.privacy2")]]]
[:p {:class (stl/css :modal-text)}
(tr "onboarding-v2.newsletter.privacy1")
[:a {:class (stl/css :modal-link)
:target "_blank"
:href "https://penpot.app/privacy"}
(tr "onboarding.newsletter.policy")]]
[:p {:class (stl/css :modal-text)}
(tr "onboarding-v2.newsletter.privacy2")]
[:div {:class (stl/css :modal-footer)}
[:button {:on-click accept} (tr "labels.continue")]]
[:img {:class (stl/css-case :deco true
:top true)
:src "images/deco-newsletter.png" :border "0"}]]]))
[:button {:on-click accept
:class (stl/css :accept-btn)} (tr "labels.continue")]]]]))

69
frontend/src/app/main/ui/onboarding/newsletter.scss
View file

@ -13,69 +13,64 @@
.modal-container {
@extend .modal-container-base;
position: relative;
min-width: $s-712;
display: grid;
grid-template-columns: auto auto;
gap: $s-32;
padding-inline: $s-100;
padding-block-start: $s-100;
padding-block-end: $s-72;
margin: 0;
width: $s-960;
height: $s-632;
max-width: $s-960;
max-height: $s-632;
}
.modal-header {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: $s-80;
margin-bottom: $s-32;
.modal-left {
width: $s-172;
margin-block-end: $s-64;
img {
width: $s-172;
border-radius: $br-8 0 0 $br-8;
}
}
.modal-right {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: $s-40 auto auto auto auto $s-32;
gap: $s-24;
position: relative;
}
.modal-title {
@include bigTitleTipography;
text-align: center;
color: var(--modal-title-foreground-color);
margin-bottom: $s-16;
}
.modal-text {
@include titleTipography;
@include bodyLargeTypography;
color: var(--modal-text-foreground-color);
margin: 0;
}
.modal-content {
@include flexColumn;
@include titleTipography;
gap: $s-32;
margin-bottom: $s-24;
}
.newsletter-options {
@include flexColumn;
display: grid;
gap: $s-16;
margin-inline-start: $s-16;
}
.input-wrapper {
@extend .input-checkbox;
}
.modal-info {
@include flexColumn;
gap: $s-16;
margin-bottom: $s-32;
}
.modal-link {
@include bodyLargeTypography;
color: var(--modal-link-foreground-color);
margin: 0;
}
.modal-footer {
display: flex;
justify-content: flex-end;
button {
@extend .modal-accept-btn;
}
}
.deco {
position: absolute;
width: 183px;
top: -106px;
left: 261px;
.accept-btn {
@extend .modal-accept-btn;
justify-self: flex-end;
}

175
frontend/src/app/main/ui/onboarding/questions.cljs
View file

@ -10,18 +10,21 @@
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.config :as cf]
[app.main.data.modal :as modal]
[app.main.data.users :as du]
[app.main.store :as st]
[app.main.ui.components.forms :as fm]
[app.main.ui.icons :as i]
[app.util.i18n :as i18n :refer [tr]]
[cljs.spec.alpha :as s]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
(mf/defc step-container
[{:keys [form step on-next on-prev children] :as props}]
[{:keys [form step on-next on-prev children class] :as props}]
[:& fm/form {:form form :on-submit on-next}
[:& fm/form {:form form :on-submit on-next :class (dm/str class " " (stl/css :form-wrapper))}
[:div {:class (stl/css :paginator)} (str/ffmt "%/4" step)]
children
@ -41,39 +44,42 @@
(mf/defc step-1
[{:keys [on-next form] :as props}]
[:& step-container {:form form :step 1 :on-next on-next}
[:& step-container {:form form :step 1 :on-next on-next :class (stl/css :step-1)}
[:img {:class (stl/css :header-image)
:src "images/form/use-for-1.png" :alt (tr "questions.lets-get-started")}]
[:h1 {:class (stl/css :modal-title)} (tr "questions.lets-get-started")]
[:p {:class (stl/css :modal-text)} (tr "questions.your-feedback-will-help-us")]
[:h3 {:class (stl/css :modal-subtitle)} (tr "questions.questions-how-are-you-planning-to-use-penpot")]
[:& fm/select
{:options [{:label (tr "questions.select-option")
:value "" :key "questions-how-are-you-planning-to-use-penpot"
:disabled true}
{:label (tr "questions.discover-more-about-penpot")
:value "discover-more-about-penpot"
:key "discover-more-about-penpot"}
{:label (tr "questions.test-penpot-to-see-if-its-a-fit-for-team")
:value "test-penpot-to-see-if-its-a-fit-for-team"
:key "test-penpot-to-see-if-its-a-fit-for-team"}
{:label (tr "questions.start-to-work-on-my-project")
:value "start-to-work-on-my-project"
:key "start-to-work-on-my-project"}
{:label (tr "questions.get-the-code-from-my-team-project")
:value "get-the-code-from-my-team-project"
:key "get-the-code-from-my-team-project"}
{:label (tr "questions.leave-feedback-for-my-team-project")
:value "leave-feedback-for-my-team-project"
:key "leave-feedback-for-my-team-project"}
{:label (tr "questions.work-in-concept-ideas")
:value "work-in-concept-ideas"
:key "work-in-concept-ideas"}
{:label (tr "questions.try-out-before-using-penpot-on-premise")
:value "try-out-before-using-penpot-on-premise"
:key "try-out-before-using-penpot-on-premise"}]
:default ""
:name :planning}]])
[:div {:class (stl/css :modal-question)}
[:h3 {:class (stl/css :modal-subtitle)} (tr "questions.questions-how-are-you-planning-to-use-penpot")]
[:& fm/select
{:options [{:label (tr "questions.select-option")
:value "" :key "questions-how-are-you-planning-to-use-penpot"
:disabled true}
{:label (tr "questions.discover-more-about-penpot")
:value "discover-more-about-penpot"
:key "discover-more-about-penpot"}
{:label (tr "questions.test-penpot-to-see-if-its-a-fit-for-team")
:value "test-penpot-to-see-if-its-a-fit-for-team"
:key "test-penpot-to-see-if-its-a-fit-for-team"}
{:label (tr "questions.start-to-work-on-my-project")
:value "start-to-work-on-my-project"
:key "start-to-work-on-my-project"}
{:label (tr "questions.get-the-code-from-my-team-project")
:value "get-the-code-from-my-team-project"
:key "get-the-code-from-my-team-project"}
{:label (tr "questions.leave-feedback-for-my-team-project")
:value "leave-feedback-for-my-team-project"
:key "leave-feedback-for-my-team-project"}
{:label (tr "questions.work-in-concept-ideas")
:value "work-in-concept-ideas"
:key "work-in-concept-ideas"}
{:label (tr "questions.try-out-before-using-penpot-on-premise")
:value "try-out-before-using-penpot-on-premise"
:key "try-out-before-using-penpot-on-premise"}]
:default ""
:name :planning
:dropdown-class (stl/css :question-dropdown)}]]])
(s/def ::questions-form-step-2
(s/keys :req-un [::experience-branding-illustrations-marketing-pieces
@ -82,33 +88,42 @@
(mf/defc step-2
[{:keys [on-next on-prev form] :as props}]
[:& step-container {:form form :step 2 :on-next on-next :on-prev on-prev}
[:h3 {:class (stl/css :modal-subtitle)}
[:& step-container {:form form :step 2 :on-next on-next :on-prev on-prev :class (stl/css :step-2)}
[:h1 {:class (stl/css :modal-title)}
(tr "questions.describe-your-experience-working-on")]
[:div {:class (stl/css :modal-question)}
[:div {:class (stl/css :modal-text)}
[:div {:class (stl/css-case :modal-question true
:question-centered true)}
[:div {:class (stl/css-case :modal-subtitle true
:centered true)}
(tr "branding-illustrations-marketing-pieces")]
[:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"}
{:label (tr "questions.some") :value "some"}
{:label (tr "questions.a-lot") :value "a-lot"}]
:name :experience-branding-illustrations-marketing-pieces}]]
:name :experience-branding-illustrations-marketing-pieces
:class (stl/css :radio-btns)}]]
[:div {:class (stl/css :modal-question)}
[:div {:class (stl/css :modal-text)}
[:div {:class (stl/css-case :modal-question true
:question-centered true)}
[:div {:class (stl/css-case :modal-subtitle true
:centered true)}
(tr "questions.interface-design-visual-assets-design-systems")]
[:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"}
{:label (tr "questions.some") :value "some"}
{:label (tr "questions.a-lot") :value "a-lot"}]
:name :experience-interface-design-visual-assets-design-systems}]]
:name :experience-interface-design-visual-assets-design-systems
:class (stl/css :radio-btns)}]]
[:div {:class (stl/css :modal-question)}
[:div {:class (stl/css :modal-text)}
[:div {:class (stl/css-case :modal-question true
:question-centered true)}
[:div {:class (stl/css-case :modal-subtitle true
:centered true)}
(tr "questions.wireframes-user-journeys-flows-navigation-trees")]
[:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"}
{:label (tr "questions.some") :value "some"}
{:label (tr "questions.a-lot") :value "a-lot"}]
:name :experience-interface-wireframes-user-journeys-flows-navigation-trees}]]])
:name :experience-interface-wireframes-user-journeys-flows-navigation-trees
:class (stl/css :radio-btns)}]]])
(s/def ::questions-form-step-3
(s/keys :req-un [::experience-design-tool]
@ -140,23 +155,26 @@
(swap! form d/dissoc-in [:data :experience-design-tool-other])
(swap! form d/dissoc-in [:errors :experience-design-tool-other])))))]
[:& step-container {:form form :step 3 :on-next on-next :on-prev on-prev}
[:h3 {:class (stl/css :modal-subtitle)}
[:& step-container {:form form :step 3 :on-next on-next :on-prev on-prev :class (stl/css :step-3)}
[:h1 {:class (stl/css :modal-title)}
(tr "question.design-tool-more-experienced-with")]
[:& fm/radio-buttons {:options [{:label (tr "questions.figma") :value "figma" :image "images/form/figma.png"}
{:label (tr "questions.sketch") :value "sketch" :image "images/form/sketch.png"}
{:label (tr "questions.adobe-xd") :value "adobe-xd" :image "images/form/adobe-xd.png"}
{:label (tr "questions.canva") :value "canva" :image "images/form/canva.png"}
{:label (tr "questions.invision") :value "invision" :image "images/form/invision.png"}
{:label (tr "questions.never-used-a-tool") :value "never-used-a-tool" :image "images/form/never-used.png"}
{:label (tr "questions.other") :value "other"}]
:name :experience-design-tool
:on-change on-design-tool-change}]
[:div {:class (stl/css :radio-wrapper)}
[:& fm/radio-buttons {:options [{:label (tr "questions.figma") :value "figma" :image "images/form/figma.png" :area "image1"}
{:label (tr "questions.sketch") :value "sketch" :image "images/form/sketch.png" :area "image2"}
{:label (tr "questions.adobe-xd") :value "adobe-xd" :image "images/form/adobe-xd.png" :area "image3"}
{:label (tr "questions.canva") :value "canva" :image "images/form/canva.png" :area "image4"}
{:label (tr "questions.invision") :value "invision" :image "images/form/invision.png" :area "image5"}
{:label (tr "questions.never-used-one") :area "image6" :value "never-used-a-tool" :icon i/curve-refactor}
{:label (tr "questions.other") :value "other" :area "other"}]
:name :experience-design-tool
:class (stl/css :image-radio)
:on-change on-design-tool-change}]
[:& fm/input {:name :experience-design-tool-other
:placeholder (tr "questions.other")
:label ""
:disabled (not= experience-design-tool "other")}]]))
[:& fm/input {:name :experience-design-tool-other
:class (stl/css :input-spacing)
:placeholder (tr "questions.other")
:label ""
:disabled (not= experience-design-tool "other")}]]]))
(s/def ::questions-form-step-4
(s/keys :req-un [::team-size ::role]
@ -181,18 +199,23 @@
(swap! form d/dissoc-in [:data :role-other])
(swap! form d/dissoc-in [:errors :role-other])))))]
[:& step-container {:form form :step 4 :on-next on-next :on-prev on-prev}
[:h3 {:class (stl/css :modal-subtitle)} (tr "questions.role")]
[:& fm/radio-buttons {:options [{:label (tr "questions.designer") :value "designer"}
{:label (tr "questions.developer") :value "developer"}
{:label (tr "questions.manager") :value "manager"}
{:label (tr "questions.founder") :value "founder"}
{:label (tr "questions.marketing") :value "marketing"}
{:label (tr "questions.student-teacher") :value "student-teacher"}
{:label (tr "questions.other") :value "other"}]
:name :role
:on-change on-role-change}]
[:& fm/input {:name :role-other :label "" :placeholder (tr "questions.other") :disabled (not= role "other")}]
[:& step-container {:form form :step 4 :on-next on-next :on-prev on-prev :class (stl/css :step-4)}
[:h1 {:class (stl/css :modal-title)} (tr "questions.role")]
[:div {:class (stl/css :radio-wrapper)}
[:& fm/radio-buttons {:options [{:label (tr "questions.designer") :value "designer"}
{:label (tr "questions.developer") :value "developer"}
{:label (tr "questions.manager") :value "manager"}
{:label (tr "questions.founder") :value "founder"}
{:label (tr "questions.marketing") :value "marketing"}
{:label (tr "questions.student-teacher") :value "student-teacher"}
{:label (tr "questions.other") :value "other"}]
:name :role
:on-change on-role-change}]
[:& fm/input {:name :role-other
:class (stl/css :input-spacing)
:label ""
:placeholder (tr "questions.other")
:disabled (not= role "other")}]]
[:div {:class (stl/css :modal-question)}
[:h3 {:class (stl/css :modal-subtitle)} (tr "questions.team-size")]
@ -210,6 +233,8 @@
;; this modal directly on the ui namespace.
(mf/defc questions-modal
{::mf/register modal/components
::mf/register-as :onboarding-questions}
[]
(let [container (mf/use-ref)
step (mf/use-state 1)
@ -251,7 +276,17 @@
(fn [form]
(let [questionnaire (merge @clean-data (:clean-data @form))]
(reset! clean-data questionnaire)
(st/emit! (du/mark-questions-as-answered questionnaire)))))]
(st/emit! (du/mark-questions-as-answered questionnaire))
(cond
(contains? cf/flags :onboarding-newsletter)
(modal/show! {:type :onboarding-newsletter})
(contains? cf/flags :onboarding-team)
(modal/show! {:type :onboarding-team})
:else
(modal/hide!)))))]
[:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-container)

108
frontend/src/app/main/ui/onboarding/questions.scss
View file

@ -11,25 +11,33 @@
}
.modal-container {
@extend .modal-container-base;
min-width: $s-512;
position: relative;
max-width: $s-744;
max-height: fit-content;
width: $s-744;
padding-inline: $s-100;
padding-block-start: $s-40;
padding-block-end: $s-72;
border-radius: $br-8;
border: $s-2 solid var(--modal-border-color);
background-color: var(--modal-background-color);
}
.form-wrapper {
display: grid;
grid-template-columns: 1fr;
gap: $s-24;
}
// STEP CONTAINER
.paginator {
@include titleTipography;
position: absolute;
top: $s-8;
right: $s-8;
padding: $s-4;
border-radius: $br-6;
color: var(--color-foreground-secondary);
@include smallTitleTipography;
height: $s-20;
text-align: right;
color: var(--modal-text-foreground-color);
}
.action-buttons {
@extend .modal-action-btns;
margin-top: $s-32;
}
.next-button {
@extend .modal-accept-btn;
@ -41,31 +49,89 @@
// STEP 1
// .step-1 {
// max-height: $s-468;
// height: $s-468;
// }
.header-image {
height: auto;
width: $s-200;
height: $s-112;
width: auto;
margin-inline-start: auto;
}
.modal-title {
@include bigTitleTipography;
color: var(--modal-title-foreground-color);
margin: $s-32 0 $s-8 0;
min-height: $s-32;
margin-block: auto;
}
.modal-subtitle {
@include titleTipography;
@include bodyLargeTypography;
color: var(--modal-title-foreground-color);
margin: 0;
padding: 0;
}
// STEP-2
.modal-text {
@include titleTipography;
@include bodyLargeTypography;
color: var(--modal-text-foreground-color);
margin: 0;
}
.modal-question {
@include flexColumn;
margin-top: $s-32;
// STEP-2
.step-2 {
grid-template-rows: $s-20 auto auto auto auto $s-32;
}
.modal-question {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: $s-16 $s-32;
gap: $s-16;
height: fit-content;
}
.question-centered {
width: $s-424;
grid-template-rows: auto $s-32;
margin: 0 auto;
}
.radio-wrapper {
display: grid;
grid-template-columns: 1fr;
gap: $s-8;
}
// STEP-3
.step-3 {
grid-template-rows: $s-20 auto auto $s-32;
}
.image-radio {
display: grid;
grid-template-rows: 1fr 1fr $s-32;
grid-template-columns: $s-88 $s-92 $s-92 $s-92 $s-88;
grid-template-areas:
". image1 image2 image3 ."
". image4 image5 image6 ."
"other other other other other";
row-gap: $s-16;
column-gap: $s-24;
}
.input-spacing {
height: $s-32;
width: calc(100% - $s-24);
margin-inline-start: $s-24;
}
// STEP-4
.step-4 {
grid-template-rows: $s-20 auto auto auto $s-32;
row-gap: $s-16;
}

104
frontend/src/app/main/ui/onboarding/team_choice.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.onboarding.team-choice
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dmc]
[app.common.spec :as us]
[app.main.data.dashboard :as dd]
[app.main.data.events :as ev]
@ -27,33 +28,36 @@
(s/def ::team-form
(s/keys :req-un [::name]))
(mf/defc team-modal-right
(mf/defc team-modal-left
[]
[:div {:class (stl/css :modal-right)}
[:div {:class (stl/css :modal-left)}
[:h1 {:class (stl/css :modal-title)}
(tr "onboarding-v2.welcome.title")]
[:h2 {:class (stl/css :modal-subtitle)}
(tr "onboarding.team-modal.create-team")]
(tr "onboarding.team-modal.team-definition")]
[:p {:class (stl/css :modal-text)}
(tr "onboarding.team-modal.create-team-desc")]
[:ul {:class (stl/css :team-features)}
[:li {:class (stl/css :feature)}
[:span {:class (stl/css :icon)} i/document-refactor]
[:p {:class (stl/css :modal-text)}
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-1")]]
[:li {:class (stl/css :feature)}
[:span {:class (stl/css :icon)} i/move-refactor]
[:p {:class (stl/css :modal-text)}
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-2")]]
[:li {:class (stl/css :feature)}
[:span {:class (stl/css :icon)} i/tree-refactor]
[:p {:class (stl/css :modal-text)}
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-3")]]
[:li {:class (stl/css :feature)}
[:span {:class (stl/css :icon)} i/user-refactor]
[:p {:class (stl/css :modal-text)}
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-4")]]
[:li {:class (stl/css :feature)}
[:span {:class (stl/css :icon)} i/tick-refactor]
[:p {:class (stl/css :modal-text)}
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-5")]]]])
(mf/defc onboarding-team-modal
@ -65,7 +69,7 @@
:validators [(fm/validate-not-empty :name (tr "auth.name.not-all-space"))
(fm/validate-length :name fm/max-length-allowed (tr "auth.name.too-long"))])
on-submit
(mf/use-callback
(mf/use-fn
(fn [form _]
(let [tname (get-in @form [:clean-data :name])]
(st/emit! (modal/show {:type :onboarding-team-invitations :name tname})
@ -82,12 +86,18 @@
teams (mf/deref refs/teams)]
(if (< (count teams) 2)
(mf/with-effect [teams]
(when (> (count teams) 1)
(st/emit! (modal/hide))))
(when (< (count teams) 2)
[:div {:class (stl/css :modal-overlay)}
[:div.animated.fadeIn {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-left)}
[:& team-modal-left]
[:div {:class (stl/css :separator)}]
[:div {:class (stl/css :modal-right)}
[:div {:class (stl/css :first-block)}
[:h2 {:class (stl/css :modal-title)}
[:h2 {:class (stl/css :modal-subtitle)}
(tr "onboarding.team-modal.create-team")]
[:p {:class (stl/css :modal-text)}
(tr "onboarding.choice.team-up.create-team-desc")]
@ -106,7 +116,7 @@
{:class (stl/css :accept-button)
:label (tr "onboarding.choice.team-up.continue-creating-team")}]]]]
[:div {:class (stl/css :second-block)}
[:h2 {:class (stl/css :modal-title)}
[:h2 {:class (stl/css :modal-subtitle)}
(tr "onboarding.choice.team-up.start-without-a-team")]
[:p {:class (stl/css :modal-text)}
(tr "onboarding.choice.team-up.start-without-a-team-description")]
@ -115,10 +125,8 @@
[:button {:class (stl/css :accept-button)
:on-click on-skip}
(tr "onboarding.choice.team-up.continue-without-a-team")]]]]
[:& team-modal-right]
[:div {:class (stl/css :paginator)} "1/2"]]]
(st/emit! (modal/hide)))))
[:div {:class (stl/css :paginator)} "1/2"]]])))
(defn get-available-roles
[]
@ -135,8 +143,9 @@
(mf/defc onboarding-team-invitations-modal
{::mf/register modal/components
::mf/register-as :onboarding-team-invitations}
[{:keys [name] :as props}]
::mf/register-as :onboarding-team-invitations
::mf/props :obj}
[{:keys [name]}]
(let [initial (mf/use-memo (constantly
{:role "editor"
:name name}))
@ -148,7 +157,7 @@
roles (mf/use-memo #(get-available-roles))
on-success
(mf/use-callback
(mf/use-fn
(fn [_form response]
(let [team-id (:id response)]
(st/emit!
@ -158,13 +167,13 @@
(modal/hide))))))
on-error
(mf/use-callback
(mf/use-fn
(fn [_form _response]
(st/emit! (dm/error "Error on creating team."))))
;; The SKIP branch only creates the team, without invitations
on-invite-later
(mf/use-callback
(mf/use-fn
(fn [_]
(let [mdata {:on-success (partial on-success form)
:on-error (partial on-error form)}
@ -177,8 +186,8 @@
;; The SUBMIT branch creates the team with the invitations
on-invite-now
(mf/use-callback
(fn [_]
(mf/use-fn
(fn [form]
(let [mdata {:on-success (partial on-success form)
:on-error (partial on-error form)}
params (:clean-data @form)
@ -196,36 +205,39 @@
:step 2})))))
on-submit
(mf/use-callback
(fn [_]
(mf/use-fn
(fn [form]
(let [params (:clean-data @form)
emails (:emails params)]
(if (> (count emails) 0)
(on-invite-now form)
(on-invite-later form)))))]
(on-invite-later form))
(modal/hide!))))]
[:div {:class (stl/css :modal-overlay)}
[:div.animated.fadeIn {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-left)}
[:h2 {:class (stl/css :modal-title)} (tr "onboarding.choice.team-up.invite-members")]
[:& team-modal-left]
[:div {:class (stl/css :separator)}]
[:div {:class (stl/css :modal-right-invitations)}
[:h2 {:class (stl/css :modal-subtitle)} (tr "onboarding.choice.team-up.invite-members")]
[:p {:class (stl/css :modal-text)} (tr "onboarding.choice.team-up.invite-members-info")]
[:& fm/form {:form form
:class (stl/css :modal-form-invitations)
:on-submit on-submit}
[:div {:class (stl/css :role-select)}
[:p {:class (stl/css :role-title)} (tr "onboarding.choice.team-up.roles")]
[:& fm/select {:name :role :options roles}]]
[:div {:class (stl/css :modal-form)}
[:& fm/form {:form form
:on-submit on-submit}
[:div {:class (stl/css :role-select)}
[:p {:class (stl/css :role-title)} (tr "onboarding.choice.team-up.roles")]
[:& fm/select {:name :role :options roles}]]
[:div {:class (stl/css :invitation-row)}
[:& fm/multi-input {:type "email"
:name :emails
:auto-focus? true
:trim true
:valid-item-fn us/parse-email
:caution-item-fn #{}
:label (tr "modals.invite-member.emails")
:on-submit on-submit}]]]
[:div {:class (stl/css :invitation-row)}
[:& fm/multi-input {:type "email"
:name :emails
:auto-focus? true
:trim true
:valid-item-fn us/parse-email
:caution-item-fn #{}
:label (tr "modals.invite-member.emails")
:on-submit on-submit}]]
[:div {:class (stl/css :action-buttons)}
[:button {:class (stl/css :back-button)
@ -242,9 +254,9 @@
(tr "onboarding.choice.team-up.create-team-and-invite")
(tr "onboarding.choice.team-up.create-team-without-invite"))}]]
[:div {:class (stl/css :modal-hint)}
(tr "onboarding.choice.team-up.create-team-and-send-invites-description")]]]
(dmc/str "(" (tr "onboarding.choice.team-up.create-team-and-send-invites-description") ")")]]]
[:& team-modal-right]
[:div {:class (stl/css :paginator)} "2/2"]]]))

223
frontend/src/app/main/ui/onboarding/team_choice.scss
View file

@ -11,32 +11,38 @@
}
.modal-container {
@extend .modal-container-base;
padding: 0;
display: flex;
position: relative;
min-width: $s-712;
display: grid;
grid-template-columns: 1fr $s-32 1fr;
gap: $s-24;
width: $s-908;
height: $s-632;
padding-inline: $s-100;
padding-block-start: $s-40;
padding-block-end: $s-72;
border-radius: $br-8;
background-color: var(--modal-background-color);
border: $s-2 solid var(--modal-border-color);
}
.paginator {
@include bodyMedTipography;
position: absolute;
top: $s-40;
right: $s-100;
padding: $s-4;
border-radius: $br-6;
color: var(--color-foreground-secondary);
}
// MODAL LEFT
.modal-left {
width: $s-356;
padding: $s-48 $s-28 $s-48 $s-48;
}
.first-block,
.second-block {
@include flexColumn;
width: 100%;
}
.first-block {
margin-bottom: $s-72;
}
.modal-right {
width: $s-356;
padding: $s-48;
background-color: var(--color-background-tertiary);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: $s-32 auto auto 1fr;
gap: $s-16;
max-height: $s-512;
padding-block-start: $s-44;
}
.modal-title {
@ -46,70 +52,48 @@
}
.modal-subtitle {
@include tabTitleTipography;
@include medTitleTipography;
color: var(--modal-title-foreground-color);
margin-bottom: $s-8;
}
.modal-text,
.modal-hint {
@include titleTipography;
.modal-text {
@include bodyLargeTypography;
color: var(--modal-text-foreground-color);
margin: 0;
}
.modal-hint {
margin-top: $s-24;
}
.modal-form {
margin: $s-24 0;
.modal-desc {
@include smallTitleTipography;
margin: 0;
color: var(--modal-title-foreground-color);
}
.team-name-input {
@extend .input-element-label;
label {
@include flexColumn;
@include titleTipography;
align-items: flex-start;
width: 100%;
border: none;
background-color: transparent;
height: 100%;
input {
@include titleTipography;
margin-top: $s-8;
}
}
}
.role-select {
.team-features {
@include flexColumn;
.role-title {
@include titleTipography;
margin: 0;
color: var(--modal-title-foreground-color);
gap: $s-16;
margin: 0;
}
.feature {
@include flexRow;
gap: $s-16;
}
.icon {
@include flexCenter;
height: $s-32;
width: $s-32;
border-radius: $br-circle;
border: $s-1 solid var(--color-accent-primary);
svg {
@extend .button-icon;
stroke: var(--color-accent-primary);
}
}
.invitation-row {
margin-top: $s-8;
margin-bottom: $s-24;
}
.paginator {
@include titleTipography;
position: absolute;
top: $s-8;
right: $s-8;
padding: $s-4;
border-radius: $br-6;
color: var(--color-foreground-secondary);
}
.action-buttons {
@extend .modal-action-btns;
justify-content: flex-start;
margin-top: $s-24;
justify-content: flex-end;
}
.accept-button {
@ -120,25 +104,88 @@
@extend .modal-cancel-btn;
}
.team-features {
@include flexColumn;
gap: $s-24;
margin-top: $s-24;
// SEPARATOR
.separator {
width: $s-8;
height: $s-420;
border-radius: $br-8;
margin-block-start: $s-92;
opacity: 42%;
background-color: var(--modal-separator-backogrund-color);
}
.feature {
@include flexRow;
// MODAL RIGHT TEAM
.modal-right {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
gap: $s-24;
max-height: $s-512;
margin-block-start: $s-92;
}
.first-block,
.second-block {
@include flexColumn;
gap: $s-16;
}
.modal-form {
display: grid;
grid-template-columns: 1fr;
gap: $s-16;
}
.team-name-input {
@extend .input-element-label;
label {
@include flexColumn;
@include bodyMedTipography;
align-items: flex-start;
width: 100%;
border: none;
background-color: transparent;
height: 100%;
input {
@include bodyMedTipography;
margin-top: $s-8;
}
}
}
// MODAL RIGHT INVITATIONS
.modal-right-invitations {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
gap: $s-16;
max-height: $s-512;
margin-block-start: $s-92;
}
.modal-form-invitations {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto auto;
margin-block-end: $s-72;
gap: $s-8;
}
.icon {
@include flexCenter;
height: $s-32;
width: $s-32;
border-radius: $br-circle;
background-color: var(--color-accent-primary);
svg {
@extend .button-icon;
stroke: var(--color-background-tertiary);
}
.role-title {
@include uppercaseTitleTipography;
margin-block-end: $s-8;
color: var(--modal-title-foreground-color);
}
.invitation-row {
margin: 0;
color: var(--modal-title-foreground-color);
}
.modal-hint {
@include bodyMedTipography;
color: var(--modal-text-foreground-color);
text-align: right;
}

8
frontend/src/app/main/ui/settings/access_tokens.scss
View file

@ -180,7 +180,7 @@
.modal-header {
margin-bottom: $s-24;
.modal-title {
@include tabTitleTipography;
@include uppercaseTitleTipography;
color: var(--modal-title-foreground-color);
}
.modal-close-btn {
@ -191,7 +191,7 @@
.modal-content {
@include flexColumn;
gap: $s-24;
@include titleTipography;
@include bodyMedTipography;
margin-bottom: $s-24;
}
@ -200,7 +200,7 @@
}
.select-title {
@include titleTipography;
@include bodyMedTipography;
color: var(--modal-title-foreground-color);
}
@ -223,7 +223,7 @@
.token-value {
@include textEllipsis;
@include titleTipography;
@include bodyMedTipography;
flex-grow: 1;
}

6
frontend/src/app/main/ui/settings/change_email.scss
View file

@ -20,7 +20,7 @@
}
.modal-title {
@include tabTitleTipography;
@include uppercaseTitleTipography;
color: var(--modal-title-foreground-color);
}
@ -30,7 +30,7 @@
.modal-content {
@include flexColumn;
@include titleTipography;
@include bodyMedTipography;
gap: $s-24;
margin-bottom: $s-24;
}
@ -40,7 +40,7 @@
}
.select-title {
@include titleTipography;
@include bodyMedTipography;
color: var(--modal-title-foreground-color);
}

6
frontend/src/app/main/ui/settings/delete_account.scss
View file

@ -20,7 +20,7 @@
}
.modal-title {
@include tabTitleTipography;
@include uppercaseTitleTipography;
color: var(--modal-title-foreground-color);
}
@ -30,7 +30,7 @@
.modal-content {
@include flexColumn;
@include titleTipography;
@include bodyMedTipography;
gap: $s-24;
margin-bottom: $s-24;
}
@ -40,7 +40,7 @@
}
.select-title {
@include titleTipography;
@include bodyMedTipography;
color: var(--modal-title-foreground-color);
}

4
frontend/src/app/main/ui/viewer.scss
View file

@ -24,7 +24,7 @@
}
.empty-state {
@include titleTipography;
@include bodyMedTipography;
color: var(--empty-message-foreground-color);
display: grid;
place-items: center;
@ -133,7 +133,7 @@
.counter {
@include flexCenter;
@include titleTipography;
@include bodyMedTipography;
border-radius: $br-8;
width: $s-64;
height: $s-32;

4
frontend/src/app/main/ui/viewer/comments.scss
View file

@ -8,7 +8,7 @@
// COMMENT DROPDOWN ON HEADER
.view-options {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
position: relative;
@ -29,7 +29,7 @@
}
.dropdown-title {
@include titleTipography;
@include bodyMedTipography;
flex-grow: 1;
color: var(--input-foreground-color-active);
}

10
frontend/src/app/main/ui/viewer/header.scss
View file

@ -53,7 +53,7 @@
}
.project-name {
@include tabTitleTipography;
@include uppercaseTitleTipography;
color: var(--title-foreground-color);
}
@ -62,7 +62,7 @@
}
.breadcrumb {
@include titleTipography;
@include bodyMedTipography;
@include flexRow;
color: var(--title-foreground-color);
cursor: pointer;
@ -114,7 +114,7 @@
}
.current-frame {
@include titleTipography;
@include bodyMedTipography;
@include flexRow;
flex-grow: 1;
color: var(--title-foreground-color-hover);
@ -198,7 +198,7 @@
.go-log-btn {
@extend .button-tertiary;
@include titleTipography;
@include bodyMedTipography;
height: $s-32;
padding: 0 $s-8;
border-radius: $br-8;
@ -213,7 +213,7 @@
min-width: $s-64;
border-radius: $br-8;
.label {
@include titleTipography;
@include bodyMedTipography;
color: var(--button-tertiary-foreground-color-rest);
}

2
frontend/src/app/main/ui/viewer/inspect/annotation.scss
View file

@ -15,6 +15,6 @@
}
.annotation-content {
@include titleTipography;
@include bodyMedTipography;
color: var(--entry-foreground-color);
}

14
frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
View file

@ -27,7 +27,7 @@
}
.image-format {
@include tabTitleTipography;
@include uppercaseTitleTipography;
height: $s-32;
padding: $s-8 0;
color: var(--menu-foreground-color-rest);
@ -42,7 +42,7 @@
}
.format-info {
@include tabTitleTipography;
@include uppercaseTitleTipography;
display: flex;
align-items: center;
width: 100%;
@ -78,7 +78,7 @@
grid-template-rows: 1fr 1fr;
}
.color-name-wrapper {
@include titleTipography;
@include bodyMedTipography;
@include flexColumn;
padding: $s-8 $s-4 $s-8 $s-8;
height: $s-32;
@ -89,21 +89,21 @@
max-width: $s-124;
}
.color-name-library {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
text-align: left;
height: $s-16;
color: var(--menu-foreground-color-rest);
}
.color-value-wrapper {
@include titleTipography;
@include bodyMedTipography;
height: $s-16;
color: var(--menu-foreground-color);
}
}
.opacity-info {
@include titleTipography;
@include bodyMedTipography;
color: var(--menu-foreground-color);
padding: $s-8 0;
}
@ -160,7 +160,7 @@
.download-button {
@extend .button-secondary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
height: $s-32;
width: 100%;
margin-top: $s-4;

2
frontend/src/app/main/ui/viewer/inspect/attributes/image.scss
View file

@ -39,7 +39,7 @@
.download-button {
@extend .button-secondary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
height: $s-32;
margin-top: $s-4;
}

2
frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss
View file

@ -23,7 +23,7 @@
}
.attributes-subtitle {
@include tabTitleTipography;
@include uppercaseTitleTipography;
display: flex;
justify-content: space-between;
height: $s-32;

2
frontend/src/app/main/ui/viewer/inspect/attributes/text.scss
View file

@ -36,7 +36,7 @@
border: $s-1 solid var(--menu-border-color-disabled);
margin-top: $s-4;
.content {
@include titleTipography;
@include bodyMedTipography;
width: 100%;
padding: $s-4 0;
color: var(--color-foreground-secondary);

8
frontend/src/app/main/ui/viewer/inspect/code.scss
View file

@ -16,7 +16,7 @@
.download-button {
@extend .button-secondary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
height: $s-32;
width: 100%;
margin: $s-8 0;
@ -55,7 +55,7 @@
}
.code-lang {
@include tabTitleTipography;
@include uppercaseTitleTipography;
display: flex;
align-items: center;
}
@ -82,14 +82,14 @@
max-width: $s-108;
}
.code-lang-select {
@include tabTitleTipography;
@include uppercaseTitleTipography;
width: $s-72;
border: $s-1 solid transparent;
background-color: transparent;
color: var(--menu-foreground-color-disabled);
}
.code-lang-option {
@include tabTitleTipography;
@include uppercaseTitleTipography;
width: $s-72;
height: $s-32;
padding: $s-8;

2
frontend/src/app/main/ui/viewer/inspect/exports.scss
View file

@ -94,7 +94,7 @@
.export-btn {
@extend .button-secondary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
height: $s-32;
width: $s-252;
}

6
frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
View file

@ -46,7 +46,7 @@
}
.layer-title {
@include titleTipography;
@include bodyMedTipography;
@include text-ellipsis;
height: $s-32;
padding: $s-8 0;
@ -75,7 +75,7 @@
}
.placeholder-label {
@include titleTipography;
@include bodyMedTipography;
text-align: center;
width: $s-200;
color: var(--empty-message-foreground-color);
@ -83,7 +83,7 @@
.more-info-btn {
@extend .button-secondary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
height: $s-32;
padding: $s-8 $s-24;
}

4
frontend/src/app/main/ui/viewer/interactions.scss
View file

@ -7,7 +7,7 @@
@use "common/refactor/common-refactor.scss" as *;
.view-options {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
position: relative;
@ -19,7 +19,7 @@
cursor: pointer;
}
.dropdown-title {
@include titleTipography;
@include bodyMedTipography;
flex-grow: 1;
color: var(--input-foreground-color-active);
}

4
frontend/src/app/main/ui/viewer/login.scss
View file

@ -19,7 +19,7 @@
}
.modal-title {
@include tabTitleTipography;
@include uppercaseTitleTipography;
color: var(--modal-title-foreground-color);
}
@ -29,7 +29,7 @@
.modal-content {
@include flexColumn;
@include titleTipography;
@include bodyMedTipography;
gap: $s-24;
max-height: $s-400;
width: $s-368;

10
frontend/src/app/main/ui/viewer/share_link.scss
View file

@ -25,7 +25,7 @@
}
.share-link-title {
@include tabTitleTipography;
@include uppercaseTitleTipography;
color: var(--modal-title-foreground-color);
}
@ -34,7 +34,7 @@
}
.modal-content {
@include titleTipography;
@include bodyMedTipography;
@include flexColumn;
gap: $s-24;
}
@ -86,7 +86,7 @@
}
.description {
@include titleTipography;
@include bodyMedTipography;
color: var(--modal-text-foreground-color);
margin-bottom: $s-24;
}
@ -115,7 +115,7 @@
.manage-permissions {
@include buttonStyle;
@include tabTitleTipography;
@include uppercaseTitleTipography;
color: var(--menu-foreground-color-rest);
height: $s-32;
display: flex;
@ -181,7 +181,7 @@
}
.count-pages,
.current-tag {
@include titleTipography;
@include bodyMedTipography;
color: var(--input-foreground-color);
}

4
frontend/src/app/main/ui/viewer/thumbnails.scss
View file

@ -33,7 +33,7 @@
}
.counter {
@include titleTipography;
@include bodyMedTipography;
color: var(--viewer-thumbnails-control-foreground-color);
}
@ -142,7 +142,7 @@
}
.thumbnail-info {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
text-align: center;
color: var(--viewer-thumbnails-control-foreground-color);

2
frontend/src/app/main/ui/workspace/color_palette.scss
View file

@ -97,6 +97,6 @@
}
.color-palette-empty {
@include titleTipography;
@include bodyMedTipography;
color: var(--palette-text-color);
}

2
frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
View file

@ -33,7 +33,7 @@
.option-wrapper {
width: 100%;
.library-name {
@include titleTipography;
@include bodyMedTipography;
color: var(--context-menu-foreground-color);
display: grid;
grid-template-columns: 1fr $s-24;

4
frontend/src/app/main/ui/workspace/colorpicker.scss
View file

@ -108,7 +108,7 @@
}
.accept-color {
@include tabTitleTipography;
@include uppercaseTitleTipography;
@extend .button-secondary;
width: 100%;
height: $s-32;
@ -161,7 +161,7 @@
.choose-image {
@extend .button-secondary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
width: 100%;
margin-top: $s-12;
height: $s-32;

2
frontend/src/app/main/ui/workspace/colorpicker/hsva.scss
View file

@ -19,7 +19,7 @@
}
.hsva-selector-label {
@include tabTitleTipography;
@include uppercaseTitleTipography;
display: flex;
align-items: center;
justify-content: flex-start;

6
frontend/src/app/main/ui/workspace/comments.scss
View file

@ -15,7 +15,7 @@
.comments-section-title {
@include flexCenter;
@include tabTitleTipography;
@include uppercaseTitleTipography;
position: relative;
height: $s-32;
min-height: $s-32;
@ -96,7 +96,7 @@
}
}
.label {
@include titleTipography;
@include bodyMedTipography;
}
&:hover {
.icon svg {
@ -150,7 +150,7 @@
}
.placeholder-label {
@include titleTipography;
@include bodyMedTipography;
text-align: center;
width: $s-184;
color: var(--empty-message-foreground-color);

4
frontend/src/app/main/ui/workspace/context_menu.scss
View file

@ -37,7 +37,7 @@
cursor: pointer;
.title {
@include titleTipography;
@include bodyMedTipography;
color: var(--menu-foreground-color);
}
.shortcut {
@ -45,7 +45,7 @@
gap: $s-2;
color: var(--menu-shortcut-foreground-color);
.shortcut-key {
@include titleTipography;
@include bodyMedTipography;
@include flexCenter;
height: $s-20;
padding: $s-2 $s-6;

4
frontend/src/app/main/ui/workspace/left_header.scss
View file

@ -36,7 +36,7 @@
.project-name,
.file-name {
@include tabTitleTipography;
@include uppercaseTitleTipography;
@include textEllipsis;
height: $s-16;
width: 100%;
@ -47,7 +47,7 @@
}
.file-name {
@include medTitleTipography;
@include smallTitleTipography;
text-transform: none;
color: var(--title-foreground-color-hover);
}

4
frontend/src/app/main/ui/workspace/libraries.scss
View file

@ -85,7 +85,7 @@
.item-publish,
.item-unpublish {
@extend .button-primary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
height: $s-32;
min-width: $s-92;
padding: $s-8 $s-24;
@ -308,7 +308,7 @@
justify-content: flex-end;
.primary-button {
@extend .button-primary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
padding: $s-0 $s-16;
}
}

2
frontend/src/app/main/ui/workspace/right_header.scss
View file

@ -36,7 +36,7 @@
width: $s-48;
border-radius: $br-8;
.label {
@include titleTipography;
@include bodyMedTipography;
color: var(--button-tertiary-foreground-color-rest);
}

4
frontend/src/app/main/ui/workspace/sidebar/assets.scss
View file

@ -19,7 +19,7 @@
.libraries-button {
@extend .button-secondary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
gap: $s-2;
height: $s-32;
width: 100%;
@ -113,7 +113,7 @@
}
.section-item {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
justify-content: space-between;

4
frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
View file

@ -45,7 +45,7 @@
border: $s-1 solid var(--input-border-color-focus);
input.element-name {
@include textEllipsis;
@include titleTipography;
@include bodyMedTipography;
@include removeInputStyle;
flex-grow: 1;
height: $s-28;
@ -67,7 +67,7 @@
}
.name-block {
@include titleTipography;
@include bodyMedTipography;
display: grid;
grid-template-columns: auto 1fr;
margin: 0;

2
frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
View file

@ -7,7 +7,7 @@
@import "refactor/common-refactor.scss";
.title-name {
@include tabTitleTipography;
@include uppercaseTitleTipography;
display: flex;
align-items: center;
flex-grow: 1;

8
frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
View file

@ -29,7 +29,7 @@
cursor: pointer;
.cell-name {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
display: none;
position: absolute;
@ -44,7 +44,7 @@
color: var(--assets-item-name-foreground-color);
input {
@include textEllipsis;
@include titleTipography;
@include bodyMedTipography;
@include removeInputStyle;
height: auto;
padding: 0;
@ -132,13 +132,13 @@
}
.item-name {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
order: 2;
color: var(--assets-item-name-foreground-color);
input {
@include textEllipsis;
@include titleTipography;
@include bodyMedTipography;
@include removeInputStyle;
height: $s-32;
padding: $s-4;

4
frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
View file

@ -14,7 +14,7 @@
}
.file-name {
@include titleTipography;
@include bodyMedTipography;
display: flex;
justify-content: flex-start;
align-items: center;
@ -71,6 +71,6 @@
}
.no-found-text {
@include titleTipography;
@include bodyMedTipography;
color: var(--not-found-foreground-color);
}

4
frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss
View file

@ -36,7 +36,7 @@
height: 10vh;
}
.cell-name {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
display: none;
position: absolute;
@ -110,7 +110,7 @@
}
.item-name {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
padding-left: $s-8;
color: var(--assets-item-name-foreground-color);

4
frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
View file

@ -37,7 +37,7 @@
}
.modal-title {
@include tabTitleTipography;
@include uppercaseTitleTipography;
color: var(--modal-title-foreground-color);
}
.modal-close-btn {
@ -45,7 +45,7 @@
}
.modal-content {
@include titleTipography;
@include bodyMedTipography;
margin-bottom: $s-24;
}
.input-wrapper {

2
frontend/src/app/main/ui/workspace/sidebar/debug.scss
View file

@ -14,7 +14,7 @@
.panel-title {
@include flexCenter;
@include tabTitleTipography;
@include uppercaseTitleTipography;
position: relative;
height: $s-32;
min-height: $s-32;

2
frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss
View file

@ -17,7 +17,7 @@
.shape-info-title {
@include flexCenter;
@include tabTitleTipography;
@include uppercaseTitleTipography;
position: relative;
height: $s-32;
min-height: $s-32;

4
frontend/src/app/main/ui/workspace/sidebar/history.scss
View file

@ -14,7 +14,7 @@
.history-toolbox-title {
@include flexCenter;
@include tabTitleTipography;
@include uppercaseTitleTipography;
position: relative;
height: $s-32;
min-height: $s-32;
@ -59,7 +59,7 @@
}
.history-entry-empty-msg {
@include titleTipography;
@include bodyMedTipography;
color: var(--empty-message-foreground-color);
}

4
frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
View file

@ -8,7 +8,7 @@
.element-name {
@include textEllipsis;
@include titleTipography;
@include bodyMedTipography;
flex-grow: 1;
color: var(--context-hover-color, var(--layer-row-foreground-color));
&.selected {
@ -27,7 +27,7 @@
}
.element-name-input {
@include textEllipsis;
@include titleTipography;
@include bodyMedTipography;
@include removeInputStyle;
flex-grow: 1;
height: $s-28;

10
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View file

@ -69,7 +69,7 @@
}
.page-name {
@include tabTitleTipography;
@include uppercaseTitleTipography;
padding: 0 $s-12;
color: var(--title-foreground-color);
}
@ -108,7 +108,7 @@
}
.focus-name {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
height: 100%;
@ -124,7 +124,7 @@
.focus-mode-tag {
@include flexCenter;
@include titleTipography;
@include bodyMedTipography;
height: $s-20;
padding: $s-4 $s-6;
border: $s-1 solid var(--tag-background-color);
@ -160,7 +160,7 @@
.layer-filter-name {
@include flexCenter;
@include titleTipography;
@include bodyMedTipography;
color: var(--pill-foreground-color);
}
@ -170,7 +170,7 @@
left: $s-12;
width: $s-192;
.filter-menu-item {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
justify-content: space-between;

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
View file

@ -57,7 +57,7 @@
}
}
.label {
@include titleTipography;
@include bodyMedTipography;
flex-grow: 1;
display: flex;
align-items: center;

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss
View file

@ -35,6 +35,6 @@
.more-colors-btn {
@extend .button-secondary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
height: $s-32;
}

26
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
View file

@ -15,7 +15,7 @@
}
.title-back {
@include tabTitleTipography;
@include uppercaseTitleTipography;
display: flex;
align-items: center;
gap: $s-4;
@ -87,7 +87,7 @@
}
.component-name {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
direction: rtl;
text-align: left;
@ -95,7 +95,7 @@
}
.component-parent-name {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
direction: rtl;
text-align: left;
@ -134,7 +134,7 @@
}
.copy-text {
@include titleTipography;
@include bodyMedTipography;
height: 100%;
display: flex;
align-items: center;
@ -235,7 +235,7 @@
}
.path-name {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
direction: rtl;
height: $s-32;
@ -243,7 +243,7 @@
}
.path-name-last {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
height: $s-32;
padding: $s-8 0 $s-8 $s-2;
@ -251,7 +251,7 @@
}
.component-list-empty {
@include titleTipography;
@include bodyMedTipography;
margin: 0 $s-4 0 $s-8;
color: $df-secondary;
}
@ -337,7 +337,7 @@
object-fit: contain;
}
.component-name {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
display: none;
position: absolute;
@ -383,7 +383,7 @@
}
.element-set-title {
@include tabTitleTipography;
@include uppercaseTitleTipography;
display: flex;
align-items: center;
height: $s-32;
@ -422,7 +422,7 @@
}
.library-name {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
color: var(--title-foreground-color);
padding: $s-8 0 $s-8 $s-2;
@ -443,7 +443,7 @@
}
.component-group {
@include titleTipography;
@include bodyMedTipography;
display: grid;
grid-template-columns: 1fr $s-12;
height: $s-32;
@ -486,7 +486,7 @@
// Component annotation
.component-annotation {
@include titleTipography;
@include bodyMedTipography;
color: var(--entry-foreground-color);
border-radius: $br-8;
@ -604,7 +604,7 @@
}
.counter {
@include titleTipography;
@include bodyMedTipography;
text-align: right;
color: var(--entry-foreground-color);
margin: 0 $s-8 $s-8 0;

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
View file

@ -134,7 +134,7 @@
}
label {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
gap: $s-2;

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
View file

@ -96,7 +96,7 @@
.export-btn {
@extend .button-secondary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
height: $s-32;
width: $s-252;
}

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss
View file

@ -26,7 +26,7 @@
.edit-grid-btn {
@extend .button-secondary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
width: 100%;
padding: $s-8;
}

10
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
View file

@ -55,12 +55,12 @@
}
.after {
@include titleTipography;
@include bodyMedTipography;
margin-top: $s-1;
}
.interactions-help {
@include titleTipography;
@include bodyMedTipography;
text-align: center;
color: var(--title-foreground-color);
}
@ -120,7 +120,7 @@
}
.interaction-name {
@include twoLineTextEllipsis;
@include titleTipography;
@include bodyMedTipography;
padding-left: $s-4;
width: $s-92;
margin: auto 0;
@ -287,7 +287,7 @@
}
.flow-name-wrapper {
@include titleTipography;
@include bodyMedTipography;
@include focusInput;
display: flex;
align-items: center;
@ -324,7 +324,7 @@
}
.flow-input-wrapper {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
height: $s-28;

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
View file

@ -176,14 +176,14 @@
.edit-mode-btn {
@extend .button-secondary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
width: 100%;
padding: $s-8;
}
.exit-btn {
@extend .button-secondary;
@include tabTitleTipography;
@include uppercaseTitleTipography;
padding: $s-8 $s-20;
}

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
View file

@ -44,7 +44,7 @@
}
.select-name {
@include titleTipography;
@include bodyMedTipography;
display: flex;
justify-content: flex-start;
align-items: center;

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss
View file

@ -26,7 +26,7 @@
}
.attr-name {
@include titleTipography;
@include bodyMedTipography;
@include twoLineTextEllipsis;
width: $s-88;
margin: auto $s-4;
@ -60,7 +60,7 @@
}
.attr-title {
@include titleTipography;
@include bodyMedTipography;
font-size: $fs-10;
text-transform: uppercase;
margin-inline-start: $s-4;

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
View file

@ -33,7 +33,7 @@
}
.multiple-text {
@include titleTipography;
@include bodyMedTipography;
flex-grow: 1;
color: var(--input-foreground-color-active);
}

24
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
View file

@ -72,7 +72,7 @@
.typography-name,
.typography-font {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
display: flex;
align-items: center;
@ -90,7 +90,7 @@
}
.font-name-wrapper {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
height: $s-32;
@ -169,7 +169,7 @@
color: var(--assets-item-name-foreground-color-hover);
}
.typography-name {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
display: flex;
align-items: center;
@ -178,7 +178,7 @@
color: var(--assets-item-name-foreground-color-hover);
}
.typography-font {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
margin-left: $s-6;
display: flex;
@ -207,14 +207,14 @@
--calcualted-width: calc(var(--width) - $s-48);
padding-left: $s-2;
.info-label {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
width: calc(var(--calcualted-width) / 2);
padding-top: $s-8;
color: var(--assets-item-name-foreground-color);
}
.info-content {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
padding-top: $s-8;
width: calc(var(--calcualted-width) / 2);
@ -223,7 +223,7 @@
}
.link-btn {
@include tabTitleTipography;
@include uppercaseTitleTipography;
@extend .button-secondary;
width: 100%;
height: $s-32;
@ -254,7 +254,7 @@
position: relative;
}
.font-option {
@include titleTipography;
@include bodyMedTipography;
@extend .asset-element;
padding: $s-8 0 $s-8 $s-8;
cursor: pointer;
@ -277,7 +277,7 @@
gap: $s-4;
.font-size-options {
@extend .asset-element;
@include titleTipography;
@include bodyMedTipography;
flex-grow: 1;
width: $s-60;
margin: 0;
@ -331,7 +331,7 @@
.font-size-select {
@include removeInputStyle;
@include titleTipography;
@include bodyMedTipography;
height: $s-32;
height: 100%;
width: 100%;
@ -373,7 +373,7 @@
display: grid;
row-gap: $s-2;
.title {
@include tabTitleTipography;
@include uppercaseTitleTipography;
color: var(--title-foreground-color);
margin: 0;
padding: $s-12;
@ -410,7 +410,7 @@
}
.label {
@include titleTipography;
@include bodyMedTipography;
flex-grow: 1;
}
}

4
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
View file

@ -61,7 +61,7 @@
}
}
.color-name {
@include titleTipography;
@include bodyMedTipography;
@include textEllipsis;
padding-inline: $s-6;
border-radius: $br-8;
@ -80,7 +80,7 @@
stroke: var(--detach-icon-foreground-color);
}
.color-input-wrapper {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
height: $s-28;

10
frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
View file

@ -77,7 +77,7 @@
.shortcuts-header {
@include flexCenter;
@include tabTitleTipography;
@include uppercaseTitleTipography;
position: relative;
height: $s-32;
padding: $s-2 $s-2 $s-2 0;
@ -112,7 +112,7 @@
}
.not-found {
@include titleTipography;
@include bodyMedTipography;
color: var(--empty-message-foreground-color);
margin: $s-12;
}
@ -128,7 +128,7 @@
.section-title,
.subsection-title {
@include tabTitleTipography;
@include uppercaseTitleTipography;
display: flex;
align-items: center;
margin: 0;
@ -181,7 +181,7 @@
background-color: var(--pill-background-color);
.command-name {
@include titleTipography;
@include bodyMedTipography;
margin-left: $s-2;
color: var(--pill-foreground-color);
}
@ -191,7 +191,7 @@
color: var(--pill-foreground-color);
.key {
@include titleTipography;
@include bodyMedTipography;
@include flexCenter;
text-transform: capitalize;
height: $s-20;

6
frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
View file

@ -35,7 +35,7 @@
.view-only-mode {
@include flexCenter;
@include titleTipography;
@include bodyMedTipography;
height: $s-20;
padding: $s-4 $s-6;
margin-right: $s-12;
@ -75,7 +75,7 @@
}
.page-element {
@include titleTipography;
@include bodyMedTipography;
min-height: $s-32;
width: 100%;
cursor: pointer;
@ -139,7 +139,7 @@
}
input.element-name {
@include textEllipsis;
@include titleTipography;
@include bodyMedTipography;
@include removeInputStyle;
flex-grow: 1;
height: $s-28;

4
frontend/src/app/main/ui/workspace/text_palette.scss
View file

@ -80,7 +80,7 @@
}
.typography-item {
@include titleTipography;
@include bodyMedTipography;
display: flex;
flex-direction: column;
justify-content: center;
@ -135,6 +135,6 @@
}
.text-palette-empty {
@include titleTipography;
@include bodyMedTipography;
color: var(--palette-text-color);
}

2
frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
View file

@ -32,7 +32,7 @@
margin-bottom: 0;
}
.library-name {
@include titleTipography;
@include bodyMedTipography;
color: var(--context-menu-foreground-color);
display: grid;
grid-template-columns: 1fr $s-24;

2
frontend/src/app/main/ui/workspace/viewport/widgets.scss
View file

@ -26,7 +26,7 @@
cursor: pointer;
display: flex;
.content {
@include titleTipography;
@include bodyMedTipography;
display: flex;
align-items: center;
height: $s-24;