✨ Add new toggle and translations

frontend/src/app/main/ui/dashboard/templates.cljs

@@ -81,16 +81,21 @@
       [:span {:class (stl/css :title-text)}
        (tr "dashboard.libraries-and-templates")]
       (if ^boolean is-collapsed
+        [:span {:class (stl/css :title-icon-container)}
+         [:span {:class (stl/css :title-icon-text)} (tr "labels.show")] 
          [:span {:class (stl/css :title-icon :title-icon-collapsed)}
-         arrow-icon]
+          arrow-icon]]
+        [:span {:class (stl/css :title-icon-container)}
+         [:span {:class (stl/css :title-icon-text)} (tr "labels.hide")] 
          [:span {:class (stl/css :title-icon)}
-         arrow-icon])]]))
+          arrow-icon]])]]))
 
 (mf/defc card-item
   {::mf/wrap-props false}
   [{:keys [item index is-visible collapsed on-import]}]
   (let [id  (dm/str "card-container-" index)
         thb (assoc cf/public-uri :path (dm/str "/images/thumbnails/template-" (:id item) ".jpg"))
+        hover? (mf/use-state false)
 
         on-click
         (mf/use-fn
@@ -112,6 +117,8 @@
          :data-index index
          :on-click on-click
          :on-mouse-down dom/prevent-default
+         :on-mouse-enter #(reset! hover? true)
+         :on-mouse-leave #(reset! hover? false)
          :on-key-down on-key-down}
      [:div {:class (stl/css :template-card)}
       [:div {:class (stl/css :img-container)}
@@ -120,7 +127,10 @@
               :loading "lazy"
               :decoding "async"}]]
       [:div {:class (stl/css :card-name)}
-       [:span {:class (stl/css :card-text)} (:name item)]
+       [:span {:class (stl/css :card-text)} 
+        (if @hover? 
+          (tr "dashboard.template.add-to-project")
+          (:name item))]
        download-icon]]]))
 
 (mf/defc card-item-link
@@ -243,7 +253,7 @@
                  :is-collapsed collapsed}]
                  
      [:p {:class (stl/css :content-description)} 
-      "Here you have some Libraries and templates you can add to your project"]
+      (tr "dashboard.libraries-and-templates.description")]
 
      [:div {:class (stl/css :content)
             :on-scroll on-scroll

frontend/src/app/main/ui/dashboard/templates.scss

@@ -71,24 +71,33 @@
   font-weight: $fw400;
 }
 
+.title-icon-container {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: auto;
+  margin-right: $s-8;
+  color: var(--color-foreground-primary);
+}
+
 .title-icon {
   display: inline-block;
   vertical-align: middle;
-  margin-left: $s-16;
+  margin-left: auto;
   margin-right: $s-8;
-  color: var(--color-foreground-primary);
-  margin-left: $s-16;
-  margin-right: $s-16;
   transform: rotate(90deg);
 }
 
+.title-icon-text {
+  margin-right: $s-8;
+}
+
 .title-icon-collapsed {
   transform: rotate(-90deg);
 }
 
 .arrow-icon {
   @extend .button-icon;
-  stroke: var(--color-foreground-primary);
+  stroke: var(--color-foreground-secondary);
 }
 
 .move-button {
@@ -129,7 +138,8 @@
 .content-description {
   font-size: $fs-14;
   color: var(--color-foreground-primary);
-  margin-bottom: -12px;
+  margin-bottom: -8px;
+  margin-top: -4px;
   margin-left: $s-16;
   visibility: visible;
 }

frontend/translations/en.po

@@ -1713,6 +1713,22 @@ msgstr "Access tokens"
 msgid "labels.active"
 msgstr "Active"
 
+#: src/app/main/ui/dashboard/templates.cljs
+msgid "labels.show"
+msgstr "Show"
+
+#: src/app/main/ui/dashboard/templates.cljs
+msgid "labels.hide"
+msgstr "Hide"
+
+#: src/app/main/ui/dashboard/templates.cljs
+msgid "dashboard.libraries-and-templates.description"
+msgstr "Here you have some Libraries and templates you can add to your project"
+
+#: src/app/main/ui/dashboard/templates.cljs
+msgid "dashboard.template.add-to-project"
+msgstr "Add to your project"
+
 #: src/app/main/ui/workspace/libraries.cljs:173
 msgid "labels.add"
 msgstr "Add"

frontend/translations/es.po

@@ -3197,6 +3197,51 @@ msgstr "Estoy echando un vistazo"
 
 #: src/app/main/ui/onboarding/questions.cljs:91
 msgid "onboarding.questions.reasons.fit"
+msgstr "Estoy buscando una herramienta que se ajuste a mis necesidades"
+
+#: src/app/main/ui/onboarding/questions.cljs:113
+msgid "onboarding.questions.lets-get-started"
+msgstr "¡Empecemos!"
+
+#: src/app/main/ui/dashboard/templates.cljs
+msgid "labels.show"
+msgstr "Mostrar"
+
+#: src/app/main/ui/dashboard/templates.cljs
+msgid "labels.hide"
+msgstr "Ocultar"
+
+#: src/app/main/ui/dashboard/templates.cljs
+msgid "dashboard.libraries-and-templates.description"
+msgstr "Aquí tienes algunas Bibliotecas y plantillas que puedes añadir a tu proyecto"
+
+#: src/app/main/ui/dashboard/templates.cljs
+msgid "dashboard.template.add-to-project"
+msgstr "Añadir a tu proyecto"
+
+#: src/app/main/ui/dashboard/templates.cljs
+msgid "labels.add"
+msgstr "Añadir"
+
+#: src/app/main/ui/dashboard/templates.cljs
+msgid "labels.add-to-your-project"
+msgstr "Añadir a tu proyecto"
+
+#: src/app/main/ui/dashboard/templates.cljs
+msgid "labels.show-hide"
+msgstr "Mostrar/Ocultar"
+
+#: src/app/main/ui/dashboard/templates.cljs
+msgid "labels.show"
+msgstr "Mostrar"
+
+#: src/app/main/ui/dashboard/templates.cljs
+msgid "labels.hide"
+msgstr "Ocultar"
+
+#: src/app/main/ui/dashboard/templates.cljs
+msgid "dashboard.libraries-and-templates.description"
+msgstr "Aquí tienes algunas Bibliotecas y plantillas que puedes añadir a tu proyecto"
 msgstr "Averiguar si Penpot es una buena opción para mi equipo"
 
 #: src/app/main/ui/onboarding/questions.cljs:97