♻️ Update download button icon

frontend/src/app/main/ui/ds/foundations/assets/icon.cljs

@@ -164,6 +164,7 @@
 (def ^:icon-id icon "icon")
 (def ^:icon-id img "img")
 (def ^:icon-id info "info")
+(def ^:icon-id import-export "import-export")
 (def ^:icon-id interaction "interaction")
 (def ^:icon-id join-nodes "join-nodes")
 (def ^:icon-id justify-content-column-around "justify-content-column-around")

frontend/src/app/main/ui/workspace/tokens/sidebar.cljs

@@ -333,6 +333,7 @@
                                               (js/JSON.stringify nil 2)
                                               (wapi/create-blob "application/json"))]
                       (dom/trigger-download "tokens.json" tokens-blob)))]
+
     [:div {:class (stl/css :import-export-button-wrapper)}
      [:input {:type "file"
               :ref input-ref
@@ -340,20 +341,20 @@
               :id "file-input"
               :accept ".json"
               :on-change on-import}]
-     [:button {:class (stl/css :import-export-button)
-               :on-click open-menu}
-      download-icon
-      "Tokens"]
+     [:> button* {:on-click open-menu
+                  :icon "import-export"
+                  :variant "secondary"}
+      (tr "workspace.token.tools")]
      [:& dropdown-menu {:show show-menu?
                         :on-close close-menu
                         :list-class (stl/css :import-export-menu)}
       [:> dropdown-menu-item* {:class (stl/css :import-export-menu-item)
                                :on-click #(.click (mf/ref-val input-ref))}
-       "Import"]
+       (tr "labels.import")]
 
       [:> dropdown-menu-item* {:class (stl/css :import-export-menu-item)
                                :on-click on-export}
-       "Export"]]]))
+       (tr "labels.export")]]]))
 
 (mf/defc tokens-sidebar-tab
   {::mf/wrap [mf/memo]

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

@@ -119,28 +119,11 @@
   flex-direction: row;
   align-items: end;
   justify-content: end;
-  padding: $s-16;
-  margin-top: $s-8;
+  padding: $s-8;
   background-color: var(--color-background-primary);
   box-shadow: var(--el-shadow-dark);
 }
 
-.import-export-button {
-  @extend .button-secondary;
-  display: flex;
-  align-items: center;
-  padding: $s-6 $s-8;
-  text-transform: uppercase;
-  gap: $s-8;
-
-  .download-icon {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-    width: 20px;
-    height: 20px;
-  }
-}
-
 .import-export-menu {
   @extend .menu-dropdown;
   top: -#{$s-6};