Merge pull request #4209 from penpot/eva-bugfixing-ui

Bugfixing

frontend/src/app/main/data/media.cljs

@@ -47,6 +47,7 @@
 (defn notify-start-loading
   []
   (st/emit! (msg/show {:content (tr "media.loading")
+                       :notification-type :toast
                        :type :info
                        :timeout nil})))
 

frontend/src/app/main/data/workspace/media.cljs

@@ -211,6 +211,7 @@
     (watch [_ _ _]
       (rx/concat
        (rx/of (msg/show {:content (tr "media.loading")
+                         :notification-type :toast
                          :type :info
                          :timeout nil
                          :tag :media-loading}))
@@ -440,6 +441,7 @@
 
         (rx/concat
          (rx/of (msg/show {:content (tr "media.loading")
+                           :notification-type :toast
                            :type :info
                            :timeout nil
                            :tag :media-loading}))

frontend/src/app/main/errors.cljs

@@ -124,6 +124,7 @@
     (let [message (tr "errors.paste-data-validation")]
       (st/async-emit!
        (msg/show {:content message
+                  :notification-type :toast
                   :type :error
                   :timeout 3000})))
 
@@ -138,6 +139,7 @@
   [error]
   (ts/schedule
    #(st/emit! (msg/show {:content "Internal Assertion Error"
+                         :notification-type :toast
                          :type :error
                          :timeout 3000})))
 
@@ -153,6 +155,7 @@
   (ts/schedule
    #(st/emit!
      (msg/show {:content "Something wrong has happened (on worker)."
+                :notification-type :toast
                 :type :error
                 :timeout 3000})))
 
@@ -166,6 +169,7 @@
   [_]
   (ts/schedule
    #(st/emit! (msg/show {:content "SVG is invalid or malformed"
+                         :notification-type :toast
                          :type :error
                          :timeout 3000}))))
 
@@ -174,6 +178,7 @@
   [_]
   (ts/schedule
    #(st/emit! (msg/show {:content "There was an error with the comment"
+                         :notification-type :toast
                          :type :error
                          :timeout 3000}))))
 

frontend/src/app/main/ui/dashboard/team_form.cljs

@@ -89,7 +89,9 @@
 
     [:div {:class (stl/css :modal-overlay)}
      [:div {:class (stl/css :modal-container)}
-      [:& fm/form {:form form :on-submit on-submit}
+      [:& fm/form {:form form
+                   :on-submit on-submit
+                   :class (stl/css :team-form)}
 
        [:div {:class (stl/css :modal-header)}
         (if team

frontend/src/app/main/ui/dashboard/team_form.scss

@@ -31,6 +31,10 @@
   margin-bottom: $s-24;
 }
 
+.team-form {
+  min-width: $s-400;
+}
+
 .group-name-input {
   @extend .input-element-label;
   label {
@@ -44,7 +48,6 @@
 
     input {
       @include bodySmallTypography;
-      margin-top: $s-8;
     }
   }
 }

frontend/src/app/main/ui/messages.cljs

@@ -33,6 +33,7 @@
                          :links (:links message)
                          :content (:content message)}
 
+        is-context-msg (and (nil? (:timeout message)) (nil? (:actions message)))
         is-toast-msg   (or (= :toast (:notification-type message)) (some? (:timeout message)))
         is-inline-msg  (or (= :inline (:notification-type message)) (and (some? (:position message)) (= :floating (:position message))))]
 
@@ -42,5 +43,7 @@
         [:& toast-notification toast-message]
         is-inline-msg
         [:& inline-notification inline-message]
+        is-context-msg
+        [:& context-notification context-message]
         :else
-        [:& context-notification context-message]))))
+        [:& toast-notification toast-message]))))

frontend/src/app/main/ui/notifications/toast_notification.scss

@@ -44,10 +44,10 @@
 }
 
 .info {
-  --bg-color: var(--alert-background-color-info);
+  --toast-notification-bg-color: var(--alert-background-color-info);
-  --fg-color: var(--alert-text-foreground-color-info);
+  --toast-notification-fg-color: var(--alert-text-foreground-color-info);
-  --icon-color: var(--alert-icon-foreground-color-info);
+  --toast-notification-icon-color: var(--alert-icon-foreground-color-info);
-  --border-color: var(--alert-border-color-info);
+  --toast-notification-border-color: var(--alert-border-color-info);
 }
 
 .default {

frontend/src/app/main/ui/viewer/share_link.cljs

@@ -135,6 +135,7 @@
         (fn [_]
           (wapi/write-to-clipboard current-link)
           (st/emit! (msg/show {:type :info
+                               :notification-type :toast
                                :content (tr "common.share-link.link-copied-success")
                                :timeout 1000})))
 

frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs

@@ -224,10 +224,10 @@
               :on-double-click rename-color-clicked}
 
         (if (= (:name color) default-name)
-          [:span  {:class (stl/css :default-name-only)} default-name]
+          [:span  {:class (stl/css :default-name)} default-name]
           [:*
-           [:span  {:class (stl/css :name)} (:name color)]
+           (:name color)
-           [:span  {:class (stl/css :default-name)} default-name]])])
+           [:span  {:class (stl/css :default-name :default-name-with-color)} default-name]])])
 
      (when local?
        [:& cmm/assets-context-menu

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

@@ -6,10 +6,15 @@
 
 @import "refactor/common-refactor.scss";
 
+// TODO: we should be using subgrid in the common "assets component" to avoid
+// using this SCSS variable here (we cannot use a CSS var in this CSS module because
+// the elements are not part of the same cascade).
+$assets-button-width: $s-28;
+
 .assets-btn {
   @extend .button-tertiary;
   height: $s-32;
-  width: $s-28;
+  width: $assets-button-width;
   padding: 0;
   border-radius: $br-8;
   svg {
@@ -28,10 +33,12 @@
 
 .asset-list-item {
   position: relative;
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr #{$assets-button-width};
   align-items: center;
   height: $s-32;
   padding: $s-8;
+  padding-inline-end: 0;
   margin-bottom: $s-4;
   border-radius: $br-8;
   background-color: var(--assets-item-background-color);
@@ -48,7 +55,6 @@
       @include bodySmallTypography;
       @include removeInputStyle;
       flex-grow: 1;
-      height: $s-28;
       max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
       margin: 0;
       color: var(--layer-row-foreground-color);
@@ -63,25 +69,23 @@
   @include flexCenter;
   height: 100%;
   justify-content: flex-start;
-  margin-right: $s-4;
+  margin-inline-end: $s-4;
 }
 
 .name-block {
   @include bodySmallTypography;
-  display: grid;
+  @include textEllipsis;
-  grid-template-columns: auto 1fr;
   margin: 0;
-  overflow: hidden;
+  color: var(--assets-item-name-foreground-color);
-  .default-name-only,
+}
-  .name {
+
-    color: var(--assets-item-name-foreground-color);
+.default-name {
-    margin-right: $s-6;
+  margin-inline-start: $s-4;
-    @include textEllipsis;
+  color: var(--assets-item-name-foreground-color-rest);
-  }
+}
-  .default-name {
+
-    min-width: 0;
+.default-name-with-color {
-    color: var(--assets-item-name-foreground-color-rest);
+  margin-left: $s-6;
-  }
 }
 
 .element-name {