From dfbc449045a21de9a6041e7d8e799e8278c43fe3 Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Mon, 22 Jan 2024 10:34:39 +0100
Subject: [PATCH 1/7] :bug: Fix scrollbar on comments section

---
 .../src/app/main/ui/workspace/comments.scss   | 256 ++++++++++--------
 1 file changed, 136 insertions(+), 120 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/comments.scss b/frontend/src/app/main/ui/workspace/comments.scss
index b742ea589..71c824b6a 100644
--- a/frontend/src/app/main/ui/workspace/comments.scss
+++ b/frontend/src/app/main/ui/workspace/comments.scss
@@ -9,132 +9,148 @@
 .comments-section {
   position: relative;
   background-color: var(--panel-background-color);
-  .comments-section-title {
-    @include flexCenter;
-    @include tabTitleTipography;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: $s-32;
-    min-height: $s-32;
-    margin: $s-8 $s-8 0 $s-8;
-    border-radius: $br-8;
-    background-color: var(--panel-title-background-color);
-    span {
-      @include flexCenter;
-      flex-grow: 1;
-      color: var(--title-foreground-color-hover);
-    }
+  display: grid;
+  grid-template-rows: $s-40 $s-48 1fr;
+}
 
-    .close-button {
-      @extend .button-tertiary;
-      height: $s-28;
-      width: $s-28;
-      border-radius: $br-6;
-      svg {
-        @extend .button-icon;
-        stroke: var(--icon-foreground);
-      }
+.comments-section-title {
+  @include flexCenter;
+  @include tabTitleTipography;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: $s-32;
+  min-height: $s-32;
+  margin: $s-8 $s-8 0 $s-8;
+  border-radius: $br-8;
+  background-color: var(--panel-title-background-color);
+  span {
+    @include flexCenter;
+    flex-grow: 1;
+    color: var(--title-foreground-color-hover);
+  }
+}
+
+.close-button {
+  @extend .button-tertiary;
+  height: $s-28;
+  width: $s-28;
+  border-radius: $br-6;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
+}
+
+.mode-dropdown-wrapper {
+  @include buttonStyle;
+  @extend .asset-element;
+  background-color: var(--color-background-tertiary);
+  display: flex;
+  width: $s-256;
+  height: $s-32;
+  padding: $s-8;
+  border-radius: $br-8;
+  margin: $s-16 auto 0 auto;
+  cursor: pointer;
+  position: relative;
+}
+
+.mode-label {
+  padding-right: 8px;
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.icon {
+  @include flexCenter;
+  padding-right: 8px;
+  height: $s-24;
+  width: $s-24;
+  svg {
+    @extend .button-icon-small;
+    transform: rotate(90deg);
+    stroke: var(--icon-foreground);
+  }
+}
+
+.comment-mode-dropdown {
+  @extend .dropdown-wrapper;
+  top: $s-80;
+  left: $s-12;
+  width: $s-256;
+}
+
+.dropdown-item {
+  @extend .dropdown-element-base;
+  justify-content: space-between;
+  .icon {
+    @include flexCenter;
+    height: $s-24;
+    width: $s-24;
+    svg {
+      @extend .button-icon-small;
+      stroke: transparent;
     }
   }
-  .mode-dropdown-wrapper {
-    @include buttonStyle;
-    @extend .asset-element;
-    background-color: var(--color-background-tertiary);
-    display: flex;
-    width: $s-256;
-    height: $s-32;
-    padding: $s-8;
-    border-radius: $br-8;
-    margin: $s-16 auto 0 auto;
-    cursor: pointer;
-    position: relative;
-    .mode-label {
-      padding-right: 8px;
-      flex-grow: 1;
-      display: flex;
-      justify-content: flex-start;
-    }
-    .icon {
-      @include flexCenter;
-      padding-right: 8px;
-      height: $s-24;
-      width: $s-24;
-      svg {
-        @extend .button-icon-small;
-        transform: rotate(90deg);
-        stroke: var(--icon-foreground);
-      }
+  .label {
+    @include titleTipography;
+  }
+  &:hover {
+    .icon svg {
+      stroke: transparent;
     }
   }
-  .comment-mode-dropdown {
-    @extend .dropdown-wrapper;
-    top: $s-80;
-    left: $s-12;
-    width: $s-256;
-    .dropdown-item {
-      @extend .dropdown-element-base;
-      justify-content: space-between;
-      .icon {
-        @include flexCenter;
-        height: $s-24;
-        width: $s-24;
-        svg {
-          @extend .button-icon-small;
-          stroke: transparent;
-        }
-      }
-      .label {
-        @include titleTipography;
-      }
-      &:hover {
-        .icon svg {
-          stroke: transparent;
-        }
-      }
-      &.selected {
-        .label {
-          color: var(--menu-foreground-color);
-        }
-        .icon svg {
-          stroke: var(--icon-foreground-hover);
-        }
-      }
+  &.selected {
+    .label {
+      color: var(--menu-foreground-color);
     }
-    .separator {
-      height: $s-12;
-    }
-  }
-  .comments-section-content {
-    .thread-groups {
-      display: flex;
-      flex-direction: column;
-      gap: $s-24;
-    }
-    .thread-group-placeholder {
-      @include flexColumn;
-      align-items: center;
-      justify-content: flex-start;
-      margin-top: $s-36;
-      .placeholder-icon {
-        @include flexCenter;
-        height: $s-48;
-        width: $s-48;
-        border-radius: $br-circle;
-        background-color: var(--empty-message-background-color);
-        svg {
-          @extend .button-icon;
-          height: $s-28;
-          width: $s-28;
-          stroke: var(--empty-message-foreground-color);
-        }
-      }
-      .placeholder-label {
-        @include titleTipography;
-        text-align: center;
-        width: $s-184;
-        color: var(--empty-message-foreground-color);
-      }
+    .icon svg {
+      stroke: var(--icon-foreground-hover);
     }
   }
 }
+
+.separator {
+  height: $s-12;
+}
+
+.comments-section-content {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.thread-groups {
+  display: flex;
+  flex-direction: column;
+  gap: $s-24;
+}
+
+.thread-group-placeholder {
+  @include flexColumn;
+  align-items: center;
+  justify-content: flex-start;
+  margin-top: $s-36;
+}
+
+.placeholder-icon {
+  @include flexCenter;
+  height: $s-48;
+  width: $s-48;
+  border-radius: $br-circle;
+  background-color: var(--empty-message-background-color);
+  svg {
+    @extend .button-icon;
+    height: $s-28;
+    width: $s-28;
+    stroke: var(--empty-message-foreground-color);
+  }
+}
+
+.placeholder-label {
+  @include titleTipography;
+  text-align: center;
+  width: $s-184;
+  color: var(--empty-message-foreground-color);
+}

From cedcc15c9d3ac4439861d3a0c24f0736852199d5 Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Mon, 22 Jan 2024 10:43:03 +0100
Subject: [PATCH 2/7] :bug: Fix padding on design bar

---
 frontend/src/app/main/ui/workspace/sidebar/options.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.scss b/frontend/src/app/main/ui/workspace/sidebar/options.scss
index 7b67bcf8c..3fc519cef 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options.scss
@@ -17,7 +17,6 @@
 
 .tab-spacing {
   margin-right: $s-12;
-  margin-bottom: $s-8;
 }
 
 .content-class {
@@ -33,4 +32,5 @@
   display: flex;
   flex-direction: column;
   gap: $s-8;
+  padding-top: $s-8;
 }

From b66032f2cc2a5d0b1303000bffeb7a088d283f3e Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Mon, 22 Jan 2024 11:06:32 +0100
Subject: [PATCH 3/7] :bug: Fix create assets group modal

---
 .../ui/workspace/sidebar/assets/groups.cljs     | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
index bbc02f72a..2431c88b7 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
@@ -101,15 +101,15 @@
    ::mf/register-as :name-group-dialog}
   [{:keys [path last-path accept] :as ctx
     :or {path "" last-path ""}}]
-  (let [initial (mf/use-memo
-                 (mf/deps last-path)
-                 (constantly {:asset-name last-path}))
-        form  (fm/use-form :spec ::name-group-form
-                           :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"))]
-                           :initial initial)
+  (let [initial  (mf/use-memo
+                  (mf/deps last-path)
+                  (constantly {:asset-name last-path}))
+        form     (fm/use-form :spec ::name-group-form
+                              :validators [(fm/validate-not-empty :asset-name (tr "auth.name.not-all-space"))
+                                           (fm/validate-length :asset-name fm/max-length-allowed (tr "auth.name.too-long"))]
+                              :initial initial)
 
-        create? (empty? path)
+        create?  (empty? path)
 
         on-close (mf/use-fn #(modal/hide!))
 
@@ -122,6 +122,7 @@
                (accept asset-name)
                (accept path asset-name))
              (modal/hide!))))]
+
     [:div {:class (stl/css :modal-overlay)}
      [:div {:class (stl/css :modal-container)}
       [:div {:class (stl/css :modal-header)}

From a41841ebf4adc74fe2ddad644773bddec60d15a8 Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Mon, 22 Jan 2024 13:20:16 +0100
Subject: [PATCH 4/7] :bug: Fix close dropdown when option choosed

---
 .../sidebar/options/menus/frame_grid.cljs     | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
index 0e8d126b0..3859a60bd 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
@@ -55,6 +55,9 @@
         toggle-more-options
         (mf/use-fn #(swap! state* update :show-more-options not))
 
+        close-more-options
+        (mf/use-fn #(swap! state* assoc :show-more-options false))
+
         handle-toggle-visibility
         (mf/use-fn
          (mf/deps grid)
@@ -125,10 +128,15 @@
                             (assoc-in [:color :color] color)
                             (update :color dissoc :value))]
              (when on-change
-               (on-change (assoc grid :params params))))))
+               (on-change (assoc grid :params params)))
+             (close-more-options))))
 
         handle-set-as-default
-        (mf/use-fn (mf/deps grid) #(on-save-default grid))
+        (mf/use-fn
+         (mf/deps grid)
+         (fn []
+           (on-save-default grid)
+           (close-more-options)))
 
         is-default (= (->> grid :params)
                       (->> grid :type default-grid-params))]
@@ -180,7 +188,7 @@
        [:& advanced-options {:class (stl/css :grid-advanced-options)
                              :visible? open?
                              :on-close toggle-advanced-options}
-              ;; square
+        ;; square
         (when (= :square type)
           [:div {:class (stl/css :square-row)}
            [:div {:class (stl/css :advanced-row)}
@@ -269,15 +277,14 @@
 
             [:button {:class (stl/css-case :show-more-options true
                                            :selected show-more-options?)
-                      :on-click toggle-more-options}
+                      :on-click toggle-more-options
+                      :disabled is-default}
              i/menu-refactor]
             (when show-more-options?
               [:div {:class (stl/css :more-options)}
-               [:button {:disabled is-default
-                         :class (stl/css :option-btn)
+               [:button {:class (stl/css :option-btn)
                          :on-click handle-use-default} (tr "workspace.options.grid.params.use-default")]
-               [:button {:disabled is-default
-                         :class (stl/css :option-btn)
+               [:button {:class (stl/css :option-btn)
                          :on-click handle-set-as-default} (tr "workspace.options.grid.params.set-default")]])]])])]))
 
 (mf/defc frame-grid

From 8bc975e7174da1c01109ab08e1587917baa30892 Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Mon, 22 Jan 2024 16:10:39 +0100
Subject: [PATCH 5/7] :bug: Fix border on team selector

---
 frontend/src/app/main/ui/dashboard/sidebar.scss | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss
index dffbf86c1..d46cdcd3a 100644
--- a/frontend/src/app/main/ui/dashboard/sidebar.scss
+++ b/frontend/src/app/main/ui/dashboard/sidebar.scss
@@ -46,7 +46,7 @@
     height: $s-48;
     display: flex;
     width: 100%;
-    border: $s-1 solid transparent;
+    border: $s-1 solid $db-tertiary;
     align-items: center;
 
     svg {
@@ -76,7 +76,6 @@
     padding: 0 $s-12;
     background-color: transparent;
     border: none;
-    border-right: $s-1 solid $db-primary;
   }
 
   .team-name {
@@ -114,16 +113,13 @@
   }
 
   .switch-options {
-    display: flex;
+    @include buttonStyle;
+    @include flexCenter;
     max-width: $s-24;
     min-width: $s-28;
-    border-left: $s-1 solid $df-primary;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    background-color: transparent;
-    border: none;
     height: 100%;
+    border-left: $s-1 solid $db-primary;
+    background-color: transparent;
 
     svg {
       fill: $df-secondary;

From 43737ab52899c1a9c0c12cd98dee8d95431aae69 Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Tue, 23 Jan 2024 12:15:37 +0100
Subject: [PATCH 6/7] :bug: Fix component icon on zoom

---
 frontend/src/app/main/ui/workspace/viewport/widgets.cljs | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
index 83d35f7ad..b1288fc49 100644
--- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
@@ -144,8 +144,7 @@
                 :width 12
                 :height 12
                 :class "workspace-frame-icon"
-                :style {:stroke-width (/ 1 zoom)
-                        :stroke color
+                :style {:stroke color
                         :fill "none"}
                 :visibility (if show-artboard-names? "visible" "hidden")}
           (cond

From b440ea5eeeabc057f5e01abf6d9ec53f0e248cfa Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Tue, 23 Jan 2024 12:15:55 +0100
Subject: [PATCH 7/7] :bug: Fix alert text color

---
 .../resources/styles/common/refactor/design-tokens.scss     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index 03928cc3c..184d86ba7 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -293,11 +293,11 @@
 
   // ALERTS & STATUS
   --alert-background-color-ok: var(--ok-color);
-  --alert-foreground-color-ok: var(--color-background-secondary);
+  --alert-foreground-color-ok: var(--dark-gray-2); // We don't want this color to change with theme
   --alert-background-color-warning: var(--warning-color);
-  --alert-foreground-color-warning: var(--color-foreground-primary);
+  --alert-foreground-color-warning: var(--white); // We don't want this color to change with theme
   --alert-background-color-error: var(--error-color);
-  --alert-foreground-color-error: var(--color-foreground-primary);
+  --alert-foreground-color-error: var(--white); // We don't want this color to change with theme
   --alert-background-color-neutral: var(--color-background-quaternary);
   --alert-foreground-color-neutral: var(--color-foreground-secondary);
   --alert-foreground-color-neutral-active: var(--color-foreground-primary);