From f0735417f424f3ffa22b6a82c07ffd6b335fa57d Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Mon, 25 Nov 2024 14:11:49 +0100
Subject: [PATCH] :recycle: Update download button icon

---
 .../resources/images/icons/import-export.svg  |  3 +++
 .../main/ui/ds/foundations/assets/icon.cljs   |  1 +
 .../app/main/ui/workspace/tokens/sidebar.cljs | 13 +++++++------
 .../app/main/ui/workspace/tokens/sidebar.scss | 19 +------------------
 frontend/translations/en.po                   |  8 ++++++++
 frontend/translations/es.po                   |  9 +++++++++
 6 files changed, 29 insertions(+), 24 deletions(-)
 create mode 100644 frontend/resources/images/icons/import-export.svg

diff --git a/frontend/resources/images/icons/import-export.svg b/frontend/resources/images/icons/import-export.svg
new file mode 100644
index 0000000000..26ef0f81a5
--- /dev/null
+++ b/frontend/resources/images/icons/import-export.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m8.5 8.658-2-1.657m0 0-2 1.657m2-1.657V11.5m6 1.842-2 1.657m0 0-2-1.657m2 1.657V10.5m3.15.104a3.18 3.18 0 0 0-1.832-5.78h-.802A5.088 5.088 0 1 0 2.278 9.46"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
index 5609a37491..6411cff7e5 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
+++ b/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")
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index a6b28ecb6e..4818ff8792 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/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]
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
index 023534ac21..81ce6b2703 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
+++ b/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};
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index a557545303..4773520d36 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -1721,6 +1721,10 @@ msgstr "Expired"
 msgid "labels.export"
 msgstr "Export"
 
+#: src/app/main/ui/exports/assets.cljs:177
+msgid "labels.import"
+msgstr "Import"
+
 #: src/app/main/ui/settings/feedback.cljs:48
 msgid "labels.feedback-disabled"
 msgstr "Feedback disabled"
@@ -6613,6 +6617,10 @@ msgstr "Create one."
 msgid "workspace.token.add set"
 msgstr "Add set"
 
+#: src/app/main/ui/workspace/tokens/sidebar.cljs
+msgid "workspace.token.tools"
+msgstr "Tools"
+
 #: src/app/main/ui/workspace/tokens/modals/themes.cljs
 msgid "workspace.token.save-theme"
 msgstr "Save theme"
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index 5735227031..40929a6c99 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -1727,6 +1727,11 @@ msgstr "Expirada"
 msgid "labels.export"
 msgstr "Exportar"
 
+
+#: src/app/main/ui/exports/assets.cljs:177
+msgid "labels.import"
+msgstr "Importar"
+
 #: src/app/main/ui/settings/feedback.cljs:48
 msgid "labels.feedback-disabled"
 msgstr "El modulo de recepción de opiniones esta deshabilitado"
@@ -6612,6 +6617,10 @@ msgstr "Crear uno."
 msgid "workspace.token.add set"
 msgstr "Añadir set"
 
+#: src/app/main/ui/workspace/tokens/sidebar.cljs
+msgid "workspace.token.tools"
+msgstr "Herramientas"
+
 #: src/app/main/ui/workspace/tokens/modals/themes.cljs
 msgid "workspace.token.save-theme"
 msgstr "Guardar tema"