Merge pull request #4243 from penpot/eva-bugfixing-ui-2

🐛 Fix some UI errors

frontend/resources/styles/common/framework.scss

@@ -1011,7 +1011,7 @@ input[type="range"]:focus::-ms-fill-upper {
     padding-left: 16px;
     top: 16px;
     right: 16px;
-    z-index: 1005;
+    z-index: 40;
 
     display: flex;
     align-items: center;

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -223,7 +223,6 @@
 .button-disabled {
   @include buttonStyle;
   @include flexCenter;
-  height: $s-32;
   background-color: var(--button-background-color-disabled);
   border: $s-1 solid var(--button-border-color-disabled);
   color: var(--button-foreground-color-disabled);
@@ -905,7 +904,7 @@
   margin: 0;
   margin-top: $s-1;
   border-radius: $br-8;
-  z-index: $z-index-3;
+  z-index: $z-index-4;
   overflow-y: auto;
   overflow-x: hidden;
   background-color: var(--menu-background-color);

frontend/resources/styles/common/refactor/z-index.scss

@@ -6,8 +6,9 @@
 
 $z-index-1: 1; // floating elements
 $z-index-2: 2; // sidebars
-$z-index-3: 3; // context menu
+$z-index-3: 3; // topbar
-$z-index-4: 4; // modal
+$z-index-4: 4; // context menu
+$z-index-5: 5; // modal
 $z-index-10: 10;
 $z-index-20: 20;
 $z-index-modal: 30; // When refactor finish we can reduce this number,

frontend/resources/styles/main-default.scss

@@ -60,9 +60,7 @@
 @import "main/partials/project-bar";
 @import "main/partials/sidebar";
 @import "main/partials/tab-container";
-@import "main/partials/tool-bar";
 @import "main/partials/user-settings";
 @import "main/partials/workspace";
-@import "main/partials/color-bullet";
 @import "main/partials/exception-page";
 @import "main/partials/signup-questions";

frontend/resources/styles/main/partials/color-bullet.scss

@@ -1,209 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-.color-bullet {
-  border: 2px solid $color-gray-30;
-  position: relative;
-  width: var(--bullet-size);
-  height: var(--bullet-size);
-
-  &:hover {
-    border-color: $color-primary;
-  }
-}
-.color-cell {
-  display: grid;
-  grid-template-columns: 100%;
-  grid-template-rows: 1fr auto;
-  height: 100%;
-  justify-items: center;
-  width: 65px;
-
-  .color-bullet {
-    border: 2px solid $color-gray-30;
-    position: relative;
-    width: var(--bullet-size);
-    height: var(--bullet-size);
-
-    &:hover {
-      border-color: $color-primary;
-    }
-  }
-
-  & > * {
-    overflow: hidden;
-  }
-}
-
-.color-cell.current {
-  .color-bullet {
-    border-color: $color-gray-30;
-  }
-}
-
-ul.palette-menu .color-bullet {
-  width: 20px;
-  height: 20px;
-  border: 1px solid $color-gray-30;
-  margin-right: 5px;
-  background-size: 8px;
-}
-.color-cell.add-color .color-bullet {
-  align-items: center;
-  background-color: $color-gray-50;
-  border: 3px dashed $color-gray-30;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  margin-bottom: 1rem;
-  padding: 0.6rem;
-
-  svg {
-    fill: $color-gray-10;
-    height: 30px;
-    width: 30px;
-  }
-}
-
-.colorpicker-content .color-bullet {
-  grid-area: color;
-  width: 20px;
-  height: 20px;
-  border: 1px solid $color-gray-30;
-  background-size: 8px;
-  overflow: hidden;
-}
-
-.asset-section .asset-list-item .color-bullet {
-  border: 1px solid $color-gray-30;
-  height: 20px;
-  margin-right: $size-1;
-  width: 20px;
-}
-.tool-window-content .asset-list .asset-list-item {
-  &:hover {
-    .color-bullet {
-      border: 1px solid $color-primary;
-    }
-  }
-}
-
-.color-cell.add-color:hover .color-bullet {
-  border-color: $color-gray-30;
-
-  svg {
-    fill: $color-gray-30;
-  }
-}
-
-.color-bullet {
-  display: flex;
-  flex-direction: row;
-  border-radius: 50%;
-
-  & .color-bullet-wrapper {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
-      left center;
-    background-color: $color-white;
-    clip-path: circle(50%);
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    width: 100%;
-  }
-
-  &.is-gradient {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
-      left center;
-    background-color: $color-white;
-  }
-
-  & .color-bullet-wrapper > * {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.color-data .color-bullet.multiple {
-  background: transparent;
-
-  &::before {
-    content: "?";
-  }
-}
-
-.color-data .color-bullet {
-  border: 1px solid $color-gray-30;
-  border-radius: 50%;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: $color-gray-10;
-  flex-shrink: 0;
-  height: 20px;
-  margin: 5px 4px 0 0;
-  width: 20px;
-
-  &.palette-th {
-    align-items: center;
-    border: 1px solid $color-gray-30;
-    display: flex;
-    justify-content: center;
-
-    svg {
-      fill: $color-gray-30;
-      height: 16px;
-      width: 16px;
-    }
-
-    &:hover {
-      border-color: $color-primary;
-      svg {
-        fill: $color-primary;
-      }
-    }
-  }
-}
-
-.colorpicker-content .libraries .selected-colors .color-bullet {
-  grid-area: auto;
-  margin-bottom: 0.25rem;
-  cursor: pointer;
-
-  &:hover {
-    border-color: $color-primary;
-    z-index: 10;
-  }
-
-  &.button {
-    background: $color-white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &.button svg {
-    width: 12px;
-    height: 12px;
-    fill: $color-gray-30;
-  }
-
-  &.plus-button svg {
-    width: 8px;
-    height: 8px;
-    fill: $color-black;
-  }
-}
-
-.color-bullet.is-not-library-color {
-  border-radius: $br3;
-  overflow: hidden;
-
-  & .color-bullet-wrapper {
-    clip-path: none;
-  }
-}

frontend/resources/styles/main/partials/context-menu.scss

@@ -8,7 +8,7 @@
   position: relative;
   visibility: hidden;
   opacity: 0;
-  z-index: 100;
+  z-index: 3;
 }
 
 .context-menu.is-open {

frontend/resources/styles/main/partials/dropdown.scss

@@ -4,7 +4,7 @@
   background-color: $color-white;
   border-radius: $br2;
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-  z-index: 12;
+  z-index: 3;
 
   hr {
     margin: 0 !important;

frontend/resources/styles/main/partials/exception-page.scss

@@ -12,7 +12,7 @@
   display: flex;
   align-items: center;
   padding: 32px;
-  z-index: 1000;
+  z-index: 40;
 
   cursor: pointer;
 

frontend/resources/styles/main/partials/loader.scss

@@ -9,7 +9,7 @@
   position: fixed;
   top: 0;
   width: 100%;
-  z-index: 999;
+  z-index: 40;
 }
 
 // full with loader CSS

frontend/resources/styles/main/partials/tool-bar.scss

@@ -1,48 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-.tool-bar {
-  background-color: $color-gray-40;
-  bottom: 0;
-  height: 100%;
-  position: fixed;
-  left: 0;
-  width: 50px;
-  z-index: 10;
-
-  .tool-bar-inside {
-    padding-top: 70px;
-
-    .main-tools {
-      align-items: center;
-      display: flex;
-      flex-direction: column;
-
-      li {
-        cursor: pointer;
-        margin-bottom: $size-5;
-
-        svg {
-          fill: $color-gray-20;
-          height: 25px;
-          width: 25px;
-        }
-
-        &:hover {
-          svg {
-            fill: $color-white;
-          }
-        }
-
-        &.current {
-          svg {
-            fill: $color-primary;
-          }
-        }
-      }
-    }
-  }
-}

frontend/src/app/main/ui/comments.scss

@@ -138,6 +138,7 @@
   width: $s-284;
   padding: $s-12;
   border-radius: $br-8;
+  border: $s-2 solid var(--modal-border-color);
   background-color: var(--comment-modal-background-color);
   .comments {
     display: flex;

frontend/src/app/main/ui/components/color_bullet.scss

@@ -39,13 +39,13 @@
     }
   }
   &.is-gradient {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
       left center;
     background-color: var(--color-bullet-background-color);
     transform: rotate(-90deg);
   }
   &.is-transparent {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
       left center;
     background-color: var(--color-bullet-background-color);
   }

frontend/src/app/main/ui/components/context_menu_a11y.scss

@@ -10,7 +10,7 @@
   position: relative;
   visibility: hidden;
   opacity: $op-0;
-  z-index: $z-index-3;
+  z-index: $z-index-4;
 
   &.is-open {
     position: relative;

frontend/src/app/main/ui/components/forms.scss

@@ -263,6 +263,7 @@
 
 :disabled {
   @extend .button-disabled;
+  min-height: $s-32;
 }
 
 // MULTI INPUT

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

@@ -21,7 +21,7 @@
 
 .dashboard-content {
   display: grid;
-  grid-template-rows: $s-64 1fr;
+  grid-template-rows: $s-64 auto auto 1fr;
   position: relative;
   grid-row: 1 / span 2;
   padding: $s-16 $s-16 0 0;

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

@@ -78,7 +78,7 @@
   min-height: $s-200;
   position: absolute;
   width: 100%;
-  z-index: $z-index-3;
+  z-index: $z-index-4;
 
   hr {
     margin: 0;

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

@@ -239,6 +239,7 @@
 
 .element-title {
   @include textEllipsis;
+  width: $s-256;
   color: var(--sidebar-element-foreground-color);
   font-size: $fs-14;
 }

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

@@ -42,7 +42,7 @@
   border-top-right-radius: $br-10;
   margin-right: $s-32;
   position: relative;
-  z-index: 1;
+  z-index: $z-index-1;
   background-color: $db-quaternary;
 }
 

frontend/src/app/main/ui/workspace/color_palette.scss

@@ -19,7 +19,7 @@
   height: 100%;
   width: $s-24;
   padding: 0;
-  z-index: $z-index-4;
+  z-index: $z-index-5;
   svg {
     @extend .button-icon;
     stroke: var(--icon-foreground);

frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss

@@ -13,7 +13,7 @@
   max-width: $s-480;
   padding: $s-4;
   margin: 0 0 $s-4 0;
-  z-index: $z-index-3;
+  z-index: $z-index-4;
   border-radius: $br-10;
   background-color: var(--context-menu-background-color);
 

frontend/src/app/main/ui/workspace/colorpicker/gradients.scss

@@ -19,7 +19,7 @@
   height: 100%;
   width: 100%;
   border-radius: $br-6;
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
     left center;
 }
 

frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss

@@ -54,12 +54,13 @@
   }
 
   &.opacity {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
       var(--background-repeat) center;
 
     &::after {
       content: "";
       position: absolute;
+      border-radius: $br-6;
       width: 100%;
       height: 100%;
       background: linear-gradient(

frontend/src/app/main/ui/workspace/context_menu.scss

@@ -19,7 +19,7 @@
   border-radius: $br-8;
   border: $s-2 solid var(--panel-border-color);
   background-color: var(--menu-background-color);
-  z-index: $z-index-3;
+  z-index: $z-index-4;
 }
 
 .separator {

frontend/src/app/main/ui/workspace/palette.scss

@@ -43,7 +43,7 @@
   .resize-area {
     grid-area: resize;
     height: $s-8;
-    z-index: $z-index-3;
+    z-index: $z-index-4;
     width: calc(100% - $s-8);
     border-radius: $br-circle;
     cursor: ns-resize;

frontend/src/app/main/ui/workspace/presence.scss

@@ -42,7 +42,7 @@
   padding: $s-8;
   margin: calc(-1 * $s-2) calc(-1 * $s-4) 0 0;
   background-color: var(--menu-background-color);
-  z-index: $z-index-3;
+  z-index: $z-index-4;
   .active-users-list {
     gap: $s-4;
     .users-num,

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

@@ -47,7 +47,7 @@ $width-settings-bar-max: $s-500;
   position: absolute;
   top: 0;
   left: unset;
-  z-index: $z-index-3;
+  z-index: $z-index-4;
   width: $s-8;
   cursor: ew-resize;
   height: 100%;

frontend/src/app/main/ui/workspace/sidebar/layer_item.scss

@@ -249,7 +249,7 @@
 :global(.sticky) {
   position: sticky;
   top: $s-0;
-  z-index: $z-index-3;
+  z-index: $z-index-4;
 }
 
 .tab-indentation {

frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss

@@ -224,7 +224,7 @@
     margin: 0 0 $s-40 0;
     margin-top: $s-4;
     border-radius: $br-8;
-    z-index: $z-index-3;
+    z-index: $z-index-4;
     overflow-y: auto;
     background-color: var(--menu-background-color);
     .option-btn {

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

@@ -351,7 +351,7 @@
   right: 0;
   height: 100%;
   width: 100%;
-  z-index: $z-index-3;
+  z-index: $z-index-4;
 }
 
 .show-recent {

frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss

@@ -13,7 +13,7 @@
   max-width: $s-480;
   padding: $s-4;
   margin: 0 0 $s-4 0;
-  z-index: $z-index-3;
+  z-index: $z-index-4;
   border-radius: $br-10;
   background-color: var(--context-menu-background-color);
 

frontend/src/app/main/ui/workspace/top_toolbar.scss

@@ -17,7 +17,7 @@
   padding: $s-8 $s-16;
   border-radius: $s-8;
   border: $s-2 solid var(--panel-border-color);
-  z-index: $z-index-10;
+  z-index: $z-index-3;
   background-color: var(--color-background-primary);
   transition:
     top 0.3s,