🐛 Fix some visual errors

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

@@ -13,7 +13,7 @@
   width: 65px;
 
   .color-bullet {
-    border: 2px solid $color-gray-60;
+    border: 2px solid $color-gray-30;
     position: relative;
     width: var(--bullet-size);
     height: var(--bullet-size);
@@ -30,21 +30,21 @@
 
 .color-cell.current {
   .color-bullet {
-    border-color: $color-gray-50;
+    border-color: $color-gray-30;
   }
 }
 
 ul.palette-menu .color-bullet {
   width: 20px;
   height: 20px;
-  border: 1px solid $color-gray-10;
+  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-10;
+  border: 3px dashed $color-gray-30;
   cursor: pointer;
   display: flex;
   justify-content: center;
@@ -62,17 +62,24 @@ ul.palette-menu .color-bullet {
   grid-area: color;
   width: 20px;
   height: 20px;
-  border: 1px solid $color-gray-10;
+  border: 1px solid $color-gray-30;
   background-size: 8px;
   overflow: hidden;
 }
 
 .asset-section .asset-list-item .color-bullet {
-  border: 1px solid $color-gray-20;
+  border: 1px solid $color-gray-30;
   height: 20px;
   margin-right: $size-1;
   width: 20px;
 }
+.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;

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

@@ -522,6 +522,7 @@
       &:focus {
         border-color: $color-primary !important;
         color: $color-white;
+        outline: none;
       }
 
       &:hover {

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

@@ -148,7 +148,7 @@
       width: 24px;
       height: 24px;
       border-radius: 50%;
-      border: 1px solid $color-gray-60;
+      border: 1px solid $color-gray-30;
     }
 
     .hide-color .color-bullet {

frontend/resources/styles/main/partials/sidebar-assets.scss

@@ -67,6 +67,7 @@
 
       &:focus {
         color: lighten($color-gray-10, 8%);
+        outline: none;
       }
     }
 
@@ -99,6 +100,10 @@
       color: lighten($color-gray-10, 8%);
     }
 
+    &:active {
+      border-color: $color-primary;
+    }
+
     option {
       background: $color-white;
       color: $color-gray-60;

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -199,6 +199,7 @@
 
     &:focus {
       color: lighten($color-gray-10, 8%);
+      border-color: $color-primary;
     }
 
     option {
@@ -312,6 +313,14 @@
       border: 1px solid $color-gray-20;
     }
   }
+  .opened {
+    border: 1px solid $color-primary;
+    &:hover,
+    &:focus {
+      outline: none;
+      border: 1px solid $color-primary;
+    }
+  }
 
   .custom-select-dropdown {
     background-color: $color-white;
@@ -549,6 +558,11 @@
 }
 
 .presets {
+  &:focus,
+  &:focus-within {
+    outline: none;
+    border: 1px solid $color-primary;
+  }
   .custom-select-dropdown {
     width: 237px;
 
@@ -968,6 +982,15 @@
     input {
       margin-right: 1em;
       width: 74px;
+      &:focus {
+        border-color: $color-primary !important;
+        color: $color-white;
+        outline: none;
+      }
+
+      &:hover {
+        border-color: $color-gray-20;
+      }
     }
   }
 }

frontend/resources/styles/main/partials/sidebar-layers.scss

@@ -54,6 +54,9 @@
     span {
       color: $color-gray-60;
     }
+    input {
+      color: $color-white !important;
+    }
 
     .toggle-content {
       svg {
@@ -149,6 +152,9 @@
       span.element-name {
         color: $color-gray-60;
       }
+      input.element-name {
+        color: $color-white !important;
+      }
 
       svg {
         fill: $color-gray-60;
@@ -203,6 +209,14 @@
 
 input.element-name {
   max-width: 75%;
+  margin-right: 5px;
+  background-color: $color-gray-50;
+  color: $color-white;
+  &:focus,
+  &:focus-within {
+    outline: none;
+    border: 1px solid $color-primary;
+  }
 }
 
 span.element-name {
@@ -306,12 +320,16 @@ span.element-name {
 
     &.search {
       .search-box {
-        border: 1px solid $color-primary;
+        border: 1px solid $color-gray-20;
         border-radius: 4px;
         height: 32px;
         width: 100%;
         display: flex;
         align-items: center;
+        &:active,
+        &:focus-within {
+          border: 1px solid $color-primary;
+        }
         input {
           border: 0;
           width: 100%;
@@ -319,6 +337,9 @@ span.element-name {
           color: $color-white;
           font-size: 12px;
           height: 16px;
+          &:focus {
+            outline: none;
+          }
         }
         span {
           height: 16px;

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

@@ -390,6 +390,7 @@ button.collapse-sidebar {
     justify-content: center;
     align-items: center;
     padding: 12px 10px;
+
     .search-box {
       display: flex;
       justify-content: space-between;
@@ -397,6 +398,9 @@ button.collapse-sidebar {
       border: 1px solid $color-gray-30;
       border-radius: 2px;
       width: 100%;
+      &:focus-within {
+        border: 1px solid $color-primary;
+      }
       .input-text {
         margin: 0;
         background: $color-gray-50;

frontend/resources/styles/main/partials/workspace-header.scss

@@ -145,6 +145,12 @@
       background: $color-gray-50;
       color: $color-gray-10;
       margin-bottom: -1px;
+      &:focus,
+      &:focus-within {
+        outline: none;
+        border-radius: 3px;
+        border: 1px solid $color-primary;
+      }
     }
   }
 

frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs

@@ -282,7 +282,8 @@
        (when (and (options :presets)
                   (or (nil? all-types) (= (count all-types) 1))) ;; Don't show presets if multi selected
          [:div.row-flex                                          ;; some frames and some non frames
-          [:div.presets.custom-select.flex-grow {:on-click #(reset! show-presets-dropdown? true)}
+          [:div.presets.custom-select.flex-grow {:class (when @show-presets-dropdown? "opened")
+                                                 :on-click #(reset! show-presets-dropdown? true)}
            [:span (tr "workspace.options.size-presets")]
            [:span.dropdown-button i/arrow-down]
            [:& dropdown {:show @show-presets-dropdown?