From b41b3de46d14e9f0111a9536b011d9a876c7f44f Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Wed, 13 Mar 2024 13:07:39 +0100
Subject: [PATCH] :recycle: Refactor libraries css

---
 .../src/app/main/ui/workspace/libraries.cljs  | 251 +++++-----
 .../src/app/main/ui/workspace/libraries.scss  | 447 +++++++++---------
 2 files changed, 347 insertions(+), 351 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs
index e88013b76..4cf953ae8 100644
--- a/frontend/src/app/main/ui/workspace/libraries.cljs
+++ b/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,16 +203,15 @@
                                        :graphics-count (count media)
                                        :colors-count (count colors)
                                        :typography-count (count typographies)}]]]
-        [:div
-         (if ^boolean shared?
-           [:input {:class (stl/css :item-unpublish)
-                    :type "button"
-                    :value (tr "common.unpublish")
-                    :on-click unpublish}]
-           [:input {:class (stl/css :item-publish)
-                    :type "button"
-                    :value (tr "common.publish")
-                    :on-click publish}])]]
+        (if ^boolean shared?
+          [:input {:class (stl/css :item-unpublish)
+                   :type "button"
+                   :value (tr "common.unpublish")
+                   :on-click unpublish}]
+          [:input {:class (stl/css :item-publish)
+                   :type "button"
+                   :value (tr "common.publish")
+                   :on-click publish}])]
 
        (for [{:keys [id name] :as library} linked-libraries]
          [:div {:class (stl/css :section-list-item)
@@ -348,106 +350,107 @@
                                (dwl/set-updating-library true)
                                (dwl/sync-file file-id library-id))))))]
 
-    [:div {:class (stl/css :section)}
-     (if (empty? libs-assets)
-       [:div {:class (stl/css :section-list-empty)}
-        (tr "workspace.libraries.no-libraries-need-sync")]
-       [:*
-        [:div {:class (stl/css :section-title)} (tr "workspace.libraries.library-updates")]
+    [:div {:class (stl/css :updates-content)}
+     [:div {:class (stl/css :section)}
+      (if (empty? libs-assets)
+        [:div {:class (stl/css :section-list-empty)}
+         (tr "workspace.libraries.no-libraries-need-sync")]
+        [:*
+         [:div {:class (stl/css :section-title)} (tr "workspace.libraries.library-updates")]
 
-        [:div {:class (stl/css :section-list)}
-         (for [[{:keys [id name] :as library}
-                exceeded
-                {:keys [components colors typographies]}] libs-assets]
-           [:div {:class (stl/css :section-list-item)
-                  :key (dm/str id)}
-            [:div
-             [:div {:class (stl/css :item-name)} name]
-             [:ul {:class (stl/css :item-contents)} (describe-library
-                                                     (count components)
-                                                     0
-                                                     (count colors)
-                                                     (count typographies))]]
-            [:button {:type "button"
-                      :class (stl/css :item-update)
-                      :disabled updating?
-                      :data-library-id (dm/str id)
-                      :on-click update}
-             (tr "workspace.libraries.update")]
+         [:div {:class (stl/css :section-list)}
+          (for [[{:keys [id name] :as library}
+                 exceeded
+                 {:keys [components colors typographies]}] libs-assets]
+            [:div {:class (stl/css :section-list-item)
+                   :key (dm/str id)}
+             [:div
+              [:div {:class (stl/css :item-name)} name]
+              [:ul {:class (stl/css :item-contents)} (describe-library
+                                                      (count components)
+                                                      0
+                                                      (count colors)
+                                                      (count typographies))]]
+             [:button {:type "button"
+                       :class (stl/css :item-update)
+                       :disabled updating?
+                       :data-library-id (dm/str id)
+                       :on-click update}
+              (tr "workspace.libraries.update")]
 
-            [:div {:class (stl/css :libraries-updates)}
-             (when-not (empty? components)
-               [:div {:class (stl/css :libraries-updates-column)}
-                (for [component components]
-                  [:div {:class (stl/css :libraries-updates-item)
-                         :key (dm/str (:id component))}
-                   (let [component (ctf/load-component-objects (:data library) component)
-                         root-shape (ctf/get-component-root (:data library) component)]
-                     [:*
-                      [:& component-svg {:root-shape root-shape
-                                         :objects (:objects component)}]
-                      [:div {:class (stl/css :name-block)}
-                       [:span {:class (stl/css :item-name)
-                               :title (:name component)}
-                        (:name component)]]])])
-                (when (:components exceeded)
-                  [:div {:class (stl/css :libraries-updates-item)
-                         :key (uuid/next)}
-                   [:div {:class (stl/css :name-block.ellipsis)}
-                    [:span {:class (stl/css :item-name)} "(...)"]]])])
+             [:div {:class (stl/css :libraries-updates)}
+              (when-not (empty? components)
+                [:div {:class (stl/css :libraries-updates-column)}
+                 (for [component components]
+                   [:div {:class (stl/css :libraries-updates-item)
+                          :key (dm/str (:id component))}
+                    (let [component (ctf/load-component-objects (:data library) component)
+                          root-shape (ctf/get-component-root (:data library) component)]
+                      [:*
+                       [:& component-svg {:root-shape root-shape
+                                          :objects (:objects component)}]
+                       [:div {:class (stl/css :name-block)}
+                        [:span {:class (stl/css :item-name)
+                                :title (:name component)}
+                         (:name component)]]])])
+                 (when (:components exceeded)
+                   [:div {:class (stl/css :libraries-updates-item)
+                          :key (uuid/next)}
+                    [:div {:class (stl/css :name-block.ellipsis)}
+                     [:span {:class (stl/css :item-name)} "(...)"]]])])
 
-             (when-not (empty? colors)
-               [:div {:class (stl/css :libraries-updates-column)
-                      :style #js {"--bullet-size" "24px"}}
-                (for [color colors]
-                  (let [default-name (cond
-                                       (:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
-                                       (:color color) (:color color)
-                                       :else (:value color))]
-                    [:div {:class (stl/css :libraries-updates-item)
-                           :key (dm/str (:id color))}
-                     [:*
-                      [:& cb/color-bullet {:color {:color (:color color)
-                                                   :id (:id color)
-                                                   :opacity (:opacity color)}}]
-                      [:div {:class (stl/css :name-block)}
-                       [:span {:class (stl/css :item-name)
-                               :title (:name color)}
-                        (:name color)]
-                       (when-not (= (:name color) default-name)
-                         [:span.color-value (:color color)])]]]))
-                (when (:colors exceeded)
-                  [:div {:class (stl/css :libraries-updates-item)
-                         :key (uuid/next)}
-                   [:div {:class (stl/css :name-block.ellipsis)}
-                    [:span {:class (stl/css :item-name)} "(...)"]]])])
+              (when-not (empty? colors)
+                [:div {:class (stl/css :libraries-updates-column)
+                       :style #js {"--bullet-size" "24px"}}
+                 (for [color colors]
+                   (let [default-name (cond
+                                        (:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
+                                        (:color color) (:color color)
+                                        :else (:value color))]
+                     [:div {:class (stl/css :libraries-updates-item)
+                            :key (dm/str (:id color))}
+                      [:*
+                       [:& cb/color-bullet {:color {:color (:color color)
+                                                    :id (:id color)
+                                                    :opacity (:opacity color)}}]
+                       [:div {:class (stl/css :name-block)}
+                        [:span {:class (stl/css :item-name)
+                                :title (:name color)}
+                         (:name color)]
+                        (when-not (= (:name color) default-name)
+                          [:span.color-value (:color color)])]]]))
+                 (when (:colors exceeded)
+                   [:div {:class (stl/css :libraries-updates-item)
+                          :key (uuid/next)}
+                    [:div {:class (stl/css :name-block.ellipsis)}
+                     [:span {:class (stl/css :item-name)} "(...)"]]])])
 
-             (when-not (empty? typographies)
-               [:div {:class (stl/css :libraries-updates-column)}
-                (for [typography typographies]
-                  [:div {:class (stl/css :libraries-updates-item)
-                         :key (dm/str (:id typography))}
-                   [:*
-                    [:div {:style {:font-family (:font-family typography)
-                                   :font-weight (:font-weight typography)
-                                   :font-style (:font-style typography)}}
-                     (tr "workspace.assets.typography.sample")]
-                    [:div {:class (stl/css :name-block)}
-                     [:span {:class (stl/css :item-name)
-                             :title (:name typography)}
-                      (:name typography)]]]])
-                (when (:typographies exceeded)
-                  [:div {:class (stl/css :libraries-updates-item)
-                         :key (uuid/next)}
-                   [:div {:class (stl/css :name-block.ellipsis)}
-                    [:span {:class (stl/css :item-name)} "(...)"]]])])]
+              (when-not (empty? typographies)
+                [:div {:class (stl/css :libraries-updates-column)}
+                 (for [typography typographies]
+                   [:div {:class (stl/css :libraries-updates-item)
+                          :key (dm/str (:id typography))}
+                    [:*
+                     [:div {:style {:font-family (:font-family typography)
+                                    :font-weight (:font-weight typography)
+                                    :font-style (:font-style typography)}}
+                      (tr "workspace.assets.typography.sample")]
+                     [:div {:class (stl/css :name-block)}
+                      [:span {:class (stl/css :item-name)
+                              :title (:name typography)}
+                       (:name typography)]]]])
+                 (when (:typographies exceeded)
+                   [:div {:class (stl/css :libraries-updates-item)
+                          :key (uuid/next)}
+                    [:div {:class (stl/css :name-block.ellipsis)}
+                     [:span {:class (stl/css :item-name)} "(...)"]]])])]
 
-            (when (or (pos? (:components exceeded))
-                      (pos? (:colors exceeded))
-                      (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") ")")}]])])]])]))
+             (when (or (pos? (:components exceeded))
+                       (pos? (:colors exceeded))
+                       (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") ")")}]])])]])]]))
 
 (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"]
-      [: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}]]]
-         [:& 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}]]]]]]]]))
+       (tr "workspace.libraries.libraries")]
+      [:& tab-container
+       {:on-change-tab on-tab-change
+        :selected selected-tab
+        :collapsable false}
+       [:& tab-element {:id :libraries :title (tr "workspace.libraries.libraries")}
+        [:& libraries-tab {:file-id file-id
+                           :shared? shared?
+                           :linked-libraries libraries
+                           :shared-libraries shared-libraries}]]
+       [:& tab-element {:id :updates :title (tr "workspace.libraries.updates")}
+        [:& updates-tab {:file-id file-id
+                         :file-data file-data
+                         :libraries libraries}]]]]]))
 
 (mf/defc v2-info-dialog
   {::mf/register modal/components
diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss
index ec759217e..79c12bf94 100644
--- a/frontend/src/app/main/ui/workspace/libraries.scss
+++ b/frontend/src/app/main/ui/workspace/libraries.scss
@@ -6,175 +6,169 @@
 
 @import "refactor/common-refactor.scss";
 
+// Library
 .modal-overlay {
-  @include flexCenter;
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  z-index: $z-index-modal;
-  background-color: var(--overlay-color);
+  @extend .modal-overlay-base;
 }
 
 .modal-dialog {
-  position: relative;
+  @extend .modal-container-base;
   height: $s-520;
-  max-height: 100%;
+  max-height: $s-520;
   width: $s-712;
-  padding: $s-32;
-  border-radius: $br-10;
-  background-color: var(--modal-background-color);
-  .close {
-    @extend .button-tertiary;
-    position: absolute;
-    top: $s-8;
-    right: $s-8;
-    width: $s-28;
-    height: $s-32;
-    border-radius: $br-8;
-    svg {
-      @extend .button-icon;
-      stroke: var(--icon-foreground);
-    }
-  }
+  max-width: $s-712;
+}
 
-  .modal-title {
-    @include headlineMediumTypography;
-    margin-bottom: $s-16;
-    color: var(--modal-title-foreground-color);
+.close-btn {
+  @extend .modal-close-btn-base;
+}
+
+.close-icon {
+  @extend .button-icon;
+  stroke: var(--icon-foreground);
+}
+
+.modal-title {
+  @include headlineMediumTypography;
+  margin-bottom: $s-16;
+  color: var(--modal-title-foreground-color);
+}
+
+// Tabs content
+.libraries-content,
+.updates-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $s-32;
+  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;
+  column-gap: $s-12;
+  margin-bottom: $s-24;
+  &:last-child {
+    margin-bottom: $s-8;
   }
 }
 
-.modal-content {
-  height: 100%;
-  .libraries-header {
-    height: 100%;
+.item-name {
+  @include bodyLargeTypography;
+  color: var(--library-name-foreground-color);
+}
+
+.item-publish,
+.item-unpublish {
+  @extend .button-primary;
+  @include uppercaseTitleTipography;
+  height: $s-32;
+  min-width: $s-92;
+  padding: $s-8 $s-24;
+  border-radius: $br-8;
+}
+
+.item-unpublish {
+  @extend .button-secondary;
+}
+
+.item-button,
+.item-button-shared {
+  @extend .button-secondary;
+  padding: $s-8 $s-24;
+  height: $s-32;
+  border-radius: $br-8;
+  margin-right: $s-2;
+  padding: $s-8;
+  width: $s-32;
+  margin-left: $s-8;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
   }
-  .libraries-content,
-  .updates-content {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: $s-32;
-    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;
-          column-gap: $s-12;
-          margin-bottom: $s-24;
-          &:last-child {
-            margin-bottom: $s-8;
-          }
-          .item-name {
-            @include bodyLargeTypography;
-            color: var(--library-name-foreground-color);
-          }
-          .item-publish,
-          .item-unpublish {
-            @extend .button-primary;
-            @include uppercaseTitleTipography;
-            height: $s-32;
-            min-width: $s-92;
-            padding: $s-8 $s-24;
-            border-radius: $br-8;
-          }
+}
 
-          .item-unpublish {
-            @extend .button-secondary;
-          }
-          .item-button,
-          .item-button-shared {
-            @extend .button-secondary;
-            padding: $s-8 $s-24;
-            height: $s-32;
-            border-radius: $br-8;
-            margin-right: $s-2;
-            padding: $s-8;
-            width: $s-32;
-            margin-left: $s-8;
-            svg {
-              @extend .button-icon;
-              stroke: var(--icon-foreground);
-            }
-          }
-
-          .item-button-icon {
-            width: $s-28;
-            height: $s-28;
-            svg {
-              @extend .button-icon;
-              stroke: var(--icon-foreground);
-            }
-          }
-        }
-      }
-      .section-list-shared {
-        max-height: $s-272;
-      }
-
-      .section-title {
-        @include bodyLargeTypography;
-        color: var(--modal-title-foreground-color);
-        margin-bottom: $s-12;
-      }
-
-      .libraries-search {
-        margin: $s-12 0;
-        .search-icon {
-          @include flexCenter;
-          padding: 0 0 0 $s-8;
-          width: $s-20;
-          svg {
-            @extend .button-icon-small;
-            stroke: var(--icon-foreground);
-          }
-        }
-      }
-      .section-list-empty {
-        @include bodyLargeTypography;
-        @include flexCenter;
-        color: var(--empty-message-foreground-color);
-
-        svg {
-          @extend .button-icon-small;
-          stroke: var(--icon-foreground);
-          width: $s-16;
-          height: $s-16;
-        }
-      }
-    }
-
-    .libraries-updates-see-all {
-      direction: rtl;
-      grid-column: span 3;
-      margin-top: $s-8;
-      margin-right: $s-8;
-      & input {
-        @extend .link;
-        margin: 0;
-      }
-    }
+.item-button-icon {
+  width: $s-28;
+  height: $s-28;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
   }
-  .updates-content {
-    grid-template-columns: 1fr;
+}
+
+.section-list-shared {
+  max-height: $s-272;
+}
+
+.section-title {
+  @include bodyLargeTypography;
+  color: var(--modal-title-foreground-color);
+  margin-bottom: $s-12;
+}
+
+.libraries-search {
+  margin: $s-12 0;
+}
+
+.search-icon {
+  @include flexCenter;
+  padding: 0 0 0 $s-8;
+  width: $s-20;
+  svg {
+    @extend .button-icon-small;
+    stroke: var(--icon-foreground);
   }
 }
 
+.section-list-empty {
+  @include bodyLargeTypography;
+  @include flexCenter;
+  color: var(--empty-message-foreground-color);
+
+  svg {
+    @extend .button-icon-small;
+    stroke: var(--icon-foreground);
+    width: $s-16;
+    height: $s-16;
+  }
+}
+
+.libraries-updates-see-all {
+  direction: rtl;
+  grid-column: span 3;
+  margin-top: $s-8;
+  margin-right: $s-8;
+  & input {
+    @extend .link;
+    margin: 0;
+  }
+}
+
+.updates-content {
+  grid-template-columns: 1fr;
+}
+
 .libraries-updates {
   display: grid;
   grid-column: span 3;
@@ -182,43 +176,43 @@
   grid-gap: $s-24;
   font-size: $fs-12;
   margin-top: $s-16;
+}
 
-  .libraries-updates-item {
-    display: flex;
-    align-items: center;
-    color: var(--library-content-foreground-color);
+.libraries-updates-item {
+  display: flex;
+  align-items: center;
+  color: var(--library-content-foreground-color);
 
-    &:not(:first-child) {
-      margin-top: $s-8;
+  &:not(:first-child) {
+    margin-top: $s-8;
+  }
+
+  & svg {
+    background-color: var(--color-canvas);
+    border-radius: $br-4;
+    border: $s-2 solid transparent;
+    height: $s-24;
+    width: $s-24;
+    min-height: $s-24;
+    min-width: $s-24;
+  }
+
+  & .name-block {
+    color: var(--gray-20-color);
+    margin-left: $s-8;
+    width: $s-168;
+
+    &.ellipsis {
+      padding-left: calc($s-24 + #{$s-8});
     }
+  }
 
-    & svg {
-      background-color: var(--color-canvas);
-      border-radius: $br-4;
-      border: $s-2 solid transparent;
-      height: $s-24;
-      width: $s-24;
-      min-height: $s-24;
-      min-width: $s-24;
-    }
-
-    & .name-block {
-      color: var(--gray-20-color);
-      margin-left: $s-8;
-      width: $s-168;
-
-      &.ellipsis {
-        padding-left: calc($s-24 + #{$s-8});
-      }
-    }
-
-    & .item-name {
-      display: block;
-      margin: 0;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
+  & .item-name {
+    display: block;
+    margin: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
   }
 }
 
@@ -264,55 +258,58 @@
   display: flex;
   flex-direction: column;
   gap: $s-24;
+}
 
-  .info-block {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    column-gap: $s-20;
-    grid-template:
-      "icon title"
-      "icon content";
-  }
+.info-block {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: $s-20;
+  grid-template:
+    "icon title"
+    "icon content";
+}
 
-  .info-icon {
-    grid-area: icon;
-    width: $s-52;
-    height: $s-52;
-    margin-top: $s-8;
-    border-radius: $br-circle;
-    background: $db-quaternary;
+.info-icon {
+  grid-area: icon;
+  width: $s-52;
+  height: $s-52;
+  margin-top: $s-8;
+  border-radius: $br-circle;
+  background: $db-quaternary;
 
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-    svg {
-      width: $s-32;
-      height: $s-32;
-      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;
+  svg {
+    width: $s-32;
+    height: $s-32;
+    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;
-  }
+}
+
+.primary-button {
+  @extend .button-primary;
+  @include uppercaseTitleTipography;
+  padding: $s-0 $s-16;
 }