♻️ Refactor libraries css

frontend/src/app/main/ui/workspace/libraries.cljs

@@ -34,6 +34,9 @@
    [okulary.core :as l]
    [rumext.v2 :as mf]))
 
+(def ^:private close-icon
+  (i/icon-xref :close (stl/css :close-icon)))
+
 (def ref:workspace-file
   (l/derived :workspace-file st/state))
 
@@ -185,7 +188,7 @@
                        :on-cancel on-delete-cancel
                        :count-libraries 1}))))]
 
-    [:*
+    [:div {:class (stl/css :libraries-content)}
      [:div {:class (stl/css :section)}
       [:& title-bar {:collapsable false
                      :title       (tr "workspace.libraries.in-this-file")
@@ -200,7 +203,6 @@
                                        :graphics-count (count media)
                                        :colors-count (count colors)
                                        :typography-count (count typographies)}]]]
-        [:div
         (if ^boolean shared?
           [:input {:class (stl/css :item-unpublish)
                    :type "button"
@@ -209,7 +211,7 @@
           [:input {:class (stl/css :item-publish)
                    :type "button"
                    :value (tr "common.publish")
-                    :on-click publish}])]]
+                   :on-click publish}])]
 
        (for [{:keys [id name] :as library} linked-libraries]
          [:div {:class (stl/css :section-list-item)
@@ -348,6 +350,7 @@
                                (dwl/set-updating-library true)
                                (dwl/sync-file file-id library-id))))))]
 
+    [:div {:class (stl/css :updates-content)}
      [:div {:class (stl/css :section)}
       (if (empty? libs-assets)
         [:div {:class (stl/css :section-list-empty)}
@@ -447,7 +450,7 @@
                        (pos? (:typographies exceeded)))
                [:div {:class (stl/css :libraries-updates-see-all)}
                 [:& lb/link-button {:on-click see-all-assets
-                                   :value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}]])])]])]))
+                                    :value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}]])])]])]]))
 
 (mf/defc libraries-dialog
   {::mf/register modal/components
@@ -491,28 +494,24 @@
 
     [:div {:class (stl/css :modal-overlay) :on-click close-dialog-outside}
      [:div {:class (stl/css :modal-dialog)}
-      [:button {:class (stl/css :close)
+      [:button {:class (stl/css :close-btn)
                 :on-click close-dialog}
-       i/close]
+       close-icon]
       [:div {:class (stl/css :modal-title)}
-       "Libraries"]
+       (tr "workspace.libraries.libraries")]
-      [:div  {:class (stl/css :modal-content)}
-       [:div {:class (stl/css :libraries-header)}
       [:& tab-container
        {:on-change-tab on-tab-change
         :selected selected-tab
         :collapsable false}
        [:& tab-element {:id :libraries :title (tr "workspace.libraries.libraries")}
-          [:div {:class (stl/css :libraries-content)}
         [:& libraries-tab {:file-id file-id
                            :shared? shared?
                            :linked-libraries libraries
-                              :shared-libraries shared-libraries}]]]
+                           :shared-libraries shared-libraries}]]
        [:& tab-element {:id :updates :title (tr "workspace.libraries.updates")}
-          [:div {:class (stl/css :updates-content)}
         [:& updates-tab {:file-id file-id
                          :file-data file-data
-                            :libraries libraries}]]]]]]]]))
+                         :libraries libraries}]]]]]))
 
 (mf/defc v2-info-dialog
   {::mf/register modal/components

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

@@ -6,51 +6,35 @@
 
 @import "refactor/common-refactor.scss";
 
+// Library
 .modal-overlay {
-  @include flexCenter;
+  @extend .modal-overlay-base;
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  z-index: $z-index-modal;
-  background-color: var(--overlay-color);
 }
 
 .modal-dialog {
-  position: relative;
+  @extend .modal-container-base;
   height: $s-520;
-  max-height: 100%;
+  max-height: $s-520;
   width: $s-712;
-  padding: $s-32;
+  max-width: $s-712;
-  border-radius: $br-10;
+}
-  background-color: var(--modal-background-color);
+
-  .close {
+.close-btn {
-    @extend .button-tertiary;
+  @extend .modal-close-btn-base;
-    position: absolute;
+}
-    top: $s-8;
+
-    right: $s-8;
+.close-icon {
-    width: $s-28;
-    height: $s-32;
-    border-radius: $br-8;
-    svg {
   @extend .button-icon;
   stroke: var(--icon-foreground);
 }
-  }
 
 .modal-title {
   @include headlineMediumTypography;
   margin-bottom: $s-16;
   color: var(--modal-title-foreground-color);
 }
-}
 
-.modal-content {
+// Tabs content
-  height: 100%;
-  .libraries-header {
-    height: 100%;
-  }
 .libraries-content,
 .updates-content {
   display: grid;
@@ -59,19 +43,26 @@
   padding-top: $s-24;
   height: 100%;
   max-height: $s-400;
+}
+
 .section {
   display: flex;
   flex-direction: column;
   height: calc(100% - $s-12);
+}
+
 .title-spacing-lib {
   margin: 0 0 0 calc(-1 * $s-8);
 }
+
 .section-list,
 .section-list-shared {
   height: 100%;
   max-height: $s-320;
   margin-top: $s-12;
   overflow: auto;
+}
+
 .section-list-item {
   display: grid;
   grid-template-columns: 1fr auto;
@@ -80,10 +71,13 @@
   &:last-child {
     margin-bottom: $s-8;
   }
+}
+
 .item-name {
   @include bodyLargeTypography;
   color: var(--library-name-foreground-color);
 }
+
 .item-publish,
 .item-unpublish {
   @extend .button-primary;
@@ -97,6 +91,7 @@
 .item-unpublish {
   @extend .button-secondary;
 }
+
 .item-button,
 .item-button-shared {
   @extend .button-secondary;
@@ -121,8 +116,7 @@
     stroke: var(--icon-foreground);
   }
 }
-        }
+
-      }
 .section-list-shared {
   max-height: $s-272;
 }
@@ -135,6 +129,8 @@
 
 .libraries-search {
   margin: $s-12 0;
+}
+
 .search-icon {
   @include flexCenter;
   padding: 0 0 0 $s-8;
@@ -144,7 +140,7 @@
     stroke: var(--icon-foreground);
   }
 }
-      }
+
 .section-list-empty {
   @include bodyLargeTypography;
   @include flexCenter;
@@ -157,7 +153,6 @@
     height: $s-16;
   }
 }
-    }
 
 .libraries-updates-see-all {
   direction: rtl;
@@ -169,11 +164,10 @@
     margin: 0;
   }
 }
-  }
+
 .updates-content {
   grid-template-columns: 1fr;
 }
-}
 
 .libraries-updates {
   display: grid;
@@ -182,6 +176,7 @@
   grid-gap: $s-24;
   font-size: $fs-12;
   margin-top: $s-16;
+}
 
 .libraries-updates-item {
   display: flex;
@@ -220,7 +215,6 @@
     white-space: nowrap;
   }
 }
-}
 
 .modal-v2-info {
   width: $s-664;
@@ -264,6 +258,7 @@
   display: flex;
   flex-direction: column;
   gap: $s-24;
+}
 
 .info-block {
   display: grid;
@@ -292,27 +287,29 @@
     fill: $da-primary;
   }
 }
+
 .info-block-title {
   grid-area: title;
   font-size: $fs-16;
   color: $df-primary;
 }
+
 .info-block-content {
   grid-area: content;
   font-size: $fs-14;
   color: $df-secondary;
   line-height: 1.2;
 }
-}
 
 .info-bottom {
   margin-top: $s-24;
   margin-right: $s-8;
   display: flex;
   justify-content: flex-end;
+}
+
 .primary-button {
   @extend .button-primary;
   @include uppercaseTitleTipography;
   padding: $s-0 $s-16;
 }
-}