diff --git a/frontend/resources/images/icons/icon-list.svg b/frontend/resources/images/icons/icon-list.svg new file mode 100644 index 000000000..eb47d32f2 --- /dev/null +++ b/frontend/resources/images/icons/icon-list.svg @@ -0,0 +1 @@ + diff --git a/frontend/resources/locales.json b/frontend/resources/locales.json index 111dad521..844251b9c 100644 --- a/frontend/resources/locales.json +++ b/frontend/resources/locales.json @@ -56,7 +56,7 @@ "auth.forgot-password" : { "used-in" : [ "src/app/main/ui/auth/login.cljs:122" ], "translations" : { - "en" : "Forgot your password?", + "en" : "Forgot password?", "fr" : "Mot de passe oublié?", "ru" : "Забыли пароль?", "es" : "¿Olvidaste tu contraseña?" @@ -224,7 +224,7 @@ "auth.recovery-request-title" : { "used-in" : [ "src/app/main/ui/auth/recovery_request.cljs:61" ], "translations" : { - "en" : "Forgot your password?", + "en" : "Forgot password?", "fr" : "Vous avez oublié votre mot de passe?", "ru" : "Забыли пароль?", "es" : "¿Olvidaste tu contraseña?" diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index 815343e43..ec14acfb0 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/frontend/resources/styles/common/framework.scss @@ -1001,6 +1001,16 @@ input[type=range]:focus::-ms-fill-upper { } } + &.tooltip-left { + &:hover { + &::after { + left: unset; + right: 130%; + top: 15%; + } + } + } + &.tooltip-hover { &:hover { &::after { diff --git a/frontend/resources/styles/main/partials/color-bullet.scss b/frontend/resources/styles/main/partials/color-bullet.scss index b4ee15997..a8041e58b 100644 --- a/frontend/resources/styles/main/partials/color-bullet.scss +++ b/frontend/resources/styles/main/partials/color-bullet.scss @@ -9,11 +9,15 @@ .color-cell { .color-bullet { - background-color: $color-white; + background-color: transparent; // Creates strange artifacts border: 2px solid $color-gray-60; // box-shadow: 0 0 0 2px $color-gray-60; border-radius: 50%; + + &:hover { + border-color: $color-primary; + } } &.cell-big .color-bullet { @@ -74,10 +78,11 @@ ul.palette-menu .color-bullet { } .asset-group .group-list-item .color-bullet { - width: 20px; - height: 20px; + border: 1px solid $color-gray-20; border-radius: 10px; + height: 20px; margin-right: $x-small; + width: 20px; } .color-cell.add-color:hover .color-bullet { diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss index 90323f677..dd88e6b85 100644 --- a/frontend/resources/styles/main/partials/colorpicker.scss +++ b/frontend/resources/styles/main/partials/colorpicker.scss @@ -309,7 +309,7 @@ font-size: 0.75rem; color: $color-gray-40; cursor: pointer; - border-color: $color-gray-10; + border: 1px solid $color-gray-10; border-radius: 2px; option { diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss index 76cda8a6b..7f0364275 100644 --- a/frontend/resources/styles/main/partials/dashboard-grid.scss +++ b/frontend/resources/styles/main/partials/dashboard-grid.scss @@ -180,7 +180,7 @@ .project-th-actions { align-items: center; - bottom: 0; + bottom: 4px; display: none; left: 0; justify-content: flex-end; @@ -190,9 +190,9 @@ svg { fill: $color-gray-20; - height: 14px; + height: 18px; margin-right: $x-small; - width: 14px; + width: 18px; } span { @@ -208,13 +208,11 @@ margin-right: 0; svg { - fill: $color-gray-30; + fill: $color-gray-60; margin-right: 0; } &:hover { - transform: scale(1.4); - svg { fill: $color-primary-dark; } @@ -223,43 +221,6 @@ } - &.delete { - margin-right: 0; - - svg { - fill: $color-gray-30; - margin-right: 0; - } - - &:hover { - transform: scale(1.4); - - svg { - fill: $color-danger; - } - - } - - } - - &.edit { - margin-right: 0; - - svg { - fill: $color-gray-30; - } - - &:hover { - transform: scale(1.4); - - svg { - fill: $color-gray-60; - } - - } - - } - } } diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index 92100c35e..12a9ab1d0 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/frontend/resources/styles/main/partials/modal.scss @@ -59,7 +59,7 @@ // NEW GEN MODALS .modal-container { - border-radius: 8px; + border-radius: $br-medium; display: flex; flex-direction: column; width: 448px; @@ -78,10 +78,12 @@ .modal-header-title { display: flex; align-items: center; - font-size: $fs24; + font-size: $fs18; padding-left: 16px; h2 { + font-size: $fs18; + font-weight: 400; margin: 0; } } @@ -204,8 +206,9 @@ } .libraries-dialog { - width: 920px; + border-radius: $br-medium; height: 664px; + width: 920px; .modal-content { display: flex; @@ -257,8 +260,10 @@ } .section-title { + color: $color-black; font-size: $fs15; padding: 0 $size-4; + font-weight: 500; } .section-list { @@ -319,9 +324,9 @@ } .libraries-search { - border: 1px solid $color-gray-30; + border: 1px solid $color-gray-20; margin: $size-4; - padding: $x-small; + padding: $x-small $small; display: flex; align-items: center; diff --git a/frontend/resources/styles/main/partials/sidebar-assets.scss b/frontend/resources/styles/main/partials/sidebar-assets.scss index 29938b238..f19b1a297 100644 --- a/frontend/resources/styles/main/partials/sidebar-assets.scss +++ b/frontend/resources/styles/main/partials/sidebar-assets.scss @@ -26,9 +26,9 @@ svg { fill: $color-gray-30; - height: 20px; - width: 20px; - padding-right: $x-small; + height: 16px; + width: 16px; + padding-right: 6px; } } @@ -44,7 +44,7 @@ .search-block { border: 1px solid $color-gray-30; margin: $small $small 0 $small; - padding: $x-small; + padding: $x-small $small; display: flex; align-items: center; @@ -117,6 +117,7 @@ .asset-group { background-color: $color-gray-60; + border-top: 1px solid $color-gray-50; padding: $small; font-size: $fs12; color: $color-gray-20; @@ -164,10 +165,10 @@ } .group-grid { - margin-top: $small; + margin-top: $medium; display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-auto-rows: 7vh; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-auto-rows: 6vh; column-gap: 0.5rem; row-gap: 0.5rem; @@ -253,6 +254,10 @@ // overflow-y: scroll; // } + .group-list { + margin-top: $medium; + } + .group-list-item { display: flex; align-items: center; diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index b24ef1c5e..3c47a77c5 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -194,6 +194,7 @@ color: $color-white; font-size: $fs12; margin: $x-small; + min-width: 0; padding: $x-small; width: 100%; diff --git a/frontend/resources/styles/main/partials/viewer-header.scss b/frontend/resources/styles/main/partials/viewer-header.scss index 219048f6b..4648e1c09 100644 --- a/frontend/resources/styles/main/partials/viewer-header.scss +++ b/frontend/resources/styles/main/partials/viewer-header.scss @@ -126,8 +126,8 @@ svg { fill: $color-gray-20; - width: 24px; - height: 24px; + width: 20px; + height: 20px; } &.active { diff --git a/frontend/resources/styles/main/partials/workspace-header.scss b/frontend/resources/styles/main/partials/workspace-header.scss index 060688ff9..5506421c5 100644 --- a/frontend/resources/styles/main/partials/workspace-header.scss +++ b/frontend/resources/styles/main/partials/workspace-header.scss @@ -209,6 +209,11 @@ .label { color: $color-danger; } .icon svg { fill: $color-danger; } } + + &.pending { + .label { color: $color-warning; } + .icon svg { fill: $color-warning; } + } } .icon { diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index add203878..ccccec01e 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/frontend/resources/styles/main/partials/workspace.scss @@ -99,7 +99,7 @@ position: fixed; right: calc(#{$width-settings-bar} + 10px); text-align: center; - width: 100px; + width: 110px; padding-bottom: 2px; span { diff --git a/frontend/src/app/main/ui/auth/register.cljs b/frontend/src/app/main/ui/auth/register.cljs index 81674ebf1..756cd3b5b 100644 --- a/frontend/src/app/main/ui/auth/register.cljs +++ b/frontend/src/app/main/ui/auth/register.cljs @@ -133,4 +133,4 @@ [:span (t locale "auth.create-demo-profile") " "] [:a {:on-click #(st/emit! da/create-demo-profile) :tab-index "5"} - (t locale "auth.create-demo-profile")]]]]) + (t locale "auth.create-demo-account")]]]]) \ No newline at end of file diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 08ac0679d..5f9fc0705 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -49,6 +49,7 @@ (def grid (icon-xref :grid)) (def grid-snap (icon-xref :grid-snap)) (def icon-empty (icon-xref :icon-empty)) +(def icon-list (icon-xref :icon-list)) (def icon-lock (icon-xref :icon-lock)) (def icon-set (icon-xref :icon-set)) (def image (icon-xref :image)) diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index 4992e4b95..62bcb539a 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/frontend/src/app/main/ui/viewer/header.cljs @@ -164,12 +164,12 @@ [:span.counters (str (inc index) " / " total)]] [:div.mode-zone - [:button.mode-zone-button {:on-click #(when (not= screen :viewer) + [:button.mode-zone-button.tooltip.tooltip-bottom {:on-click #(when (not= screen :viewer) (change-screen :viewer)) - :class (when (= screen :viewer) "active")} i/play] - [:button.mode-zone-button {:on-click #(when (not= screen :handoff) + :class (when (= screen :viewer) "active") :alt "View mode"} i/play] + [:button.mode-zone-button.tooltip.tooltip-bottom {:on-click #(when (not= screen :handoff) (change-screen :handoff)) - :class (when (= screen :handoff) "active")} i/code]] + :class (when (= screen :handoff) "active") :alt "Code mode"} i/code]] [:div.options-zone [:& interactions-menu {:interactions-mode interactions-mode}] diff --git a/frontend/src/app/main/ui/workspace/header.cljs b/frontend/src/app/main/ui/workspace/header.cljs index 3ceaa5aaf..2ec8e2e0b 100644 --- a/frontend/src/app/main/ui/workspace/header.cljs +++ b/frontend/src/app/main/ui/workspace/header.cljs @@ -258,7 +258,7 @@ :on-zoom-fit #(st/emit! dw/zoom-to-fit-all) :on-zoom-selected #(st/emit! dw/zoom-to-selected-shape)}] - [:a.btn-icon-dark.btn-small + [:a.btn-icon-dark.btn-small.tooltip.tooltip-bottom {;; :target "__blank" :alt (t locale "workspace.header.viewer") :href (str "#" view-url)} i/play]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index 42f467851..4d9f56b84 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -570,7 +570,7 @@ [:span.tool-badge (t locale "workspace.assets.shared")])] [:* [:span (:name file)] - [:span.tool-link + [:span.tool-link.tooltip.tooltip-left {:alt "Open library file"} [:a {:href (str "#" url) :target "_blank"} i/chain]]])] (when @open? @@ -667,7 +667,7 @@ [:div.assets-bar-title (t locale "workspace.assets.assets") [:div.libraries-button {:on-click #(modal/show! :libraries-dialog {})} - i/libraries + i/text-align-justify (t locale "workspace.assets.libraries")]] [:div.search-block