🎉 Add new visual changes

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 {

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

@@ -260,8 +260,10 @@
     }
 
     .section-title {
+      color: $color-black;
       font-size: $fs15;
       padding: 0 $size-4;
+      font-weight: 500;
     }
 
     .section-list {

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

@@ -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;

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?