Merge pull request #4053 from penpot/ladybenko-6674-icons

✨ Use new icons for feedback, pin and download + refactor the pin button

frontend/resources/images/icons/download-refactor.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="M14 10v2.667A1.334 1.334 0 0112.667 14H3.333A1.334 1.334 0 012 12.667V10m2.667-3.333L8 10m0 0l3.333-3.333M8 10V2"/>
+</svg>

frontend/resources/images/icons/feedback-refactor.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="M5.333 6.667h.007m2.66 0h.007m2.66 0h.006M14 10a1.333 1.333 0 01-1.333 1.333h-8L2 14V3.333A1.333 1.333 0 013.333 2h9.334A1.333 1.333 0 0114 3.333V10z"/>
+</svg>

frontend/resources/images/icons/pin-refactor.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="M5.847 10.153L2.962 7.27a4.928 4.928 0 013.482-1.442h.845L10.654 1.5 14.5 5.346 10.173 8.71v.846a4.924 4.924 0 01-1.442 3.482l-2.884-2.886zm0 0L2 14"/>
+</svg>

frontend/resources/styles/common/refactor/common-dashboard.scss

@@ -33,13 +33,6 @@
     }
   }
 
-  svg {
-    fill: $db-secondary;
-    height: $s-12;
-    margin-right: $s-4;
-    width: $s-12;
-  }
-
   nav {
     display: flex;
     align-items: flex-end;
@@ -98,7 +91,6 @@
     display: flex;
     align-items: center;
     cursor: pointer;
-    margin-left: $s-8;
 
     svg {
       fill: $df-secondary;
@@ -119,22 +111,9 @@
 
   .dashboard-header-actions {
     display: flex;
+    column-gap: $s-16;
   }
 
-  .pin-icon {
-    margin: 0 $s-8 0 $s-24;
-    background-color: transparent;
-    border: none;
-    svg {
-      fill: $df-secondary;
-    }
-
-    &.active {
-      svg {
-        fill: $db-cuaternary;
-      }
-    }
-  }
   .dashboard-header-options {
     li {
       a {

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

@@ -13,6 +13,7 @@
    [app.main.store :as st]
    [app.main.ui.dashboard.grid :refer [grid]]
    [app.main.ui.dashboard.inline-edition :refer [inline-edition]]
+   [app.main.ui.dashboard.pin-button :refer [pin-button*]]
    [app.main.ui.dashboard.project-menu :refer [project-menu]]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
@@ -92,7 +93,7 @@
 
      [:div {:class (stl/css :dashboard-header-actions)}
       [:a
-       {:class (stl/css :btn-secondary :btn-small)
+       {:class (stl/css :btn-secondary :btn-small :new-file)
         :tab-index "0"
         :on-click on-create-click
         :data-test "new-file"
@@ -102,21 +103,11 @@
        (tr "dashboard.new-file")]
 
       (when-not (:is-default project)
-        [:button
+        [:> pin-button*
-         {:class (stl/css-case :icon true
+         {:tab-index 0
-                               :pin-icon true
+          :is-pinned (:is-pinned project)
-                               :tooltip true
-                               :tooltip-bottom true
-                               :active (:is-pinned project))
-          :tab-index "0"
           :on-click toggle-pin
-          :alt (tr "dashboard.pin-unpin")
+          :on-key-down (fn [event] (when (kbd/enter? event) (toggle-pin event)))}])
-          :on-key-down (fn [event]
-                         (when (kbd/enter? event)
-                           (toggle-pin event)))}
-         (if (:is-pinned project)
-           i/pin-fill
-           i/pin)])
 
       [:div
        {:class (stl/css :icon :tooltip :tooltip-bottom-left)

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

@@ -26,3 +26,7 @@
     margin-top: $s-12;
   }
 }
+
+.new-file {
+  margin-inline-end: $s-8;
+}

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

@@ -0,0 +1,26 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.dashboard.pin-button
+  (:require-macros
+   [app.common.data.macros :as dm]
+   [app.main.style :as stl]
+   [app.main.ui.icons :refer [icon-xref]])
+  (:require
+   [app.main.ui.icons :as i]
+   [app.util.i18n :as i18n :refer [tr]]
+   [rumext.v2 :as mf]))
+
+(def pin-icon (icon-xref :pin-refactor (stl/css :icon)))
+
+(mf/defc pin-button*
+  {::mf/props :obj}
+  [{:keys [aria-label is-pinned class] :as props}]
+  (let [aria-label (or aria-label (tr "dashboard.pin-unpin"))
+        class (dm/str (or class "") " " (stl/css-case :button true :button-active is-pinned))
+        props (mf/spread-props props {:class class
+                                      :aria-label aria-label})]
+    [:> "button" props pin-icon]))

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

@@ -0,0 +1,33 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "common/refactor/common-refactor.scss" as *;
+
+.button {
+  --pin-button-icon-color: #{$df-secondary};
+  --pin-button-bg-color: none;
+
+  width: $s-32;
+  height: $s-32;
+  background: var(--pin-button-bg-color);
+  border: none;
+  border-radius: $br-8;
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+}
+
+.button-active {
+  --pin-button-icon-color: #{$da-primary};
+  --pin-button-bg-color: #{$db-cuaternary};
+}
+
+.icon {
+  width: $s-16;
+  height: $s-16;
+  fill: none;
+  stroke: var(--pin-button-icon-color);
+}

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

@@ -20,6 +20,7 @@
    [app.main.store :as st]
    [app.main.ui.dashboard.grid :refer [line-grid]]
    [app.main.ui.dashboard.inline-edition :refer [inline-edition]]
+   [app.main.ui.dashboard.pin-button :refer [pin-button*]]
    [app.main.ui.dashboard.project-menu :refer [project-menu]]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
@@ -304,18 +305,7 @@
 
        [:div {:class (stl/css :project-actions)}
         (when-not (:is-default project)
-          [:button
+          [:> pin-button* {:is-pinned (:is-pinned project) :on-click toggle-pin :tab-index 0}])
-           {:class (stl/css-case :pin-icon true
-                                 :tooltip true
-                                 :tooltip-bottom true
-                                 :active (:is-pinned project))
-            :on-click toggle-pin
-            :alt (tr "dashboard.pin-unpin")
-            :aria-label (tr "dashboard.pin-unpin")
-            :tab-index "0"}
-           (if (:is-pinned project)
-             i/pin-fill
-             i/pin)])
 
         [:button
          {:class (stl/css :btn-secondary :btn-small :tooltip :tooltip-bottom)

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

@@ -125,26 +125,6 @@
         }
       }
     }
-
-    .pin-icon {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      margin-right: $s-16;
-      background-color: transparent;
-      border: none;
-      svg {
-        width: $s-16;
-        height: $s-16;
-        fill: $df-secondary;
-      }
-
-      &.active {
-        svg {
-          fill: $da-primary;
-        }
-      }
-    }
   }
 
   .grid-container {

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

@@ -698,7 +698,7 @@
              :team-id (:id team)
              :selected? (= (:id item) (:id project))}])]
         [:div {:class (stl/css :sidebar-empty-placeholder)}
-         [:span {:class (stl/css :icon)} i/pin]
+         [:span {:class (stl/css :icon)} i/pin-refactor]
          [:span {:class (stl/css :text)} (tr "dashboard.no-projects-placeholder")]])]]))
 
 (mf/defc profile-section

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

@@ -258,12 +258,13 @@
   padding: $s-12;
   color: $df-secondary;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
 
   .icon {
     padding: 0 $s-12;
     svg {
-      fill: $df-secondary;
+      fill: none;
+      stroke: currentColor;
       width: $s-12;
       height: $s-12;
     }

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

@@ -113,7 +113,7 @@
               :alt (:name item)}]]
       [:div {:class (stl/css :card-name)}
        [:span (:name item)]
-       [:span {:class (stl/css :icon)} i/download]]]]))
+       [:span {:class (stl/css :icon)} i/download-refactor]]]]))
 
 (mf/defc card-item-link
   {::mf/wrap-props false}

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

@@ -157,7 +157,8 @@
         svg {
           width: $s-16;
           height: $s-16;
-          fill: $df-secondary;
+          fill: none;
+          stroke: currentColor;
         }
         span {
           font-weight: $fw500;

frontend/src/app/main/ui/debug/components_preview.cljs

@@ -248,7 +248,6 @@
          {:title "Button tertiary with icon"}
          [:button  {:class (stl/css :button-tertiary)}
           i/add-refactor]]]
-
        [:div {:class (stl/css :components-group)}
         [:h3 "Inputs"]
         [:& component-wrapper

frontend/src/app/main/ui/icons.clj

@@ -11,9 +11,9 @@
    [rumext.v2]))
 
 (defmacro icon-xref
-  [id]
+  [id & [class]]
   (let [href (str "#icon-" (name id))
-        class (str "icon-" (name id))]
+        class (or class (str "icon-" (name id)))]
     `(rumext.v2/html
       [:svg {:width 500 :height 500 :class ~class}
        [:use {:href ~href}]])))

frontend/src/app/main/ui/icons.cljs

@@ -329,6 +329,7 @@
 (def ^:icon desc-sort-refactor (icon-xref :desc-sort-refactor))
 (def ^:icon detach-refactor (icon-xref :detach-refactor))
 (def ^:icon document-refactor (icon-xref :document-refactor))
+(def ^:icon download-refactor (icon-xref :download-refactor))
 (def ^:icon drop-refactor (icon-xref :drop-refactor))
 (def ^:icon easing-linear-refactor (icon-xref :easing-linear-refactor))
 (def ^:icon easing-ease-refactor (icon-xref :easing-ease-refactor))
@@ -338,6 +339,7 @@
 (def ^:icon effects-refactor (icon-xref :effects-refactor))
 (def ^:icon elipse-refactor (icon-xref :elipse-refactor))
 (def ^:icon expand-refactor (icon-xref :expand-refactor))
+(def ^:icon feedback-refactor (icon-xref :feedback-refactor))
 (def ^:icon fill-content-refactor (icon-xref :fill-content-refactor))
 (def ^:icon filter-refactor (icon-xref :filter-refactor))
 (def ^:icon fixed-width-refactor (icon-xref :fixed-width-refactor))
@@ -410,6 +412,7 @@
 (def ^:icon path-refactor (icon-xref :path-refactor))
 (def ^:icon pentool-refactor (icon-xref :pentool-refactor))
 (def ^:icon picker-refactor (icon-xref :picker-refactor))
+(def ^:icon pin-refactor (icon-xref :pin-refactor))
 (def ^:icon play-refactor (icon-xref :play-refactor))
 (def ^:icon rectangle-refactor (icon-xref :rectangle-refactor))
 (def ^:icon reload-refactor (icon-xref :reload-refactor))

frontend/src/app/main/ui/settings/sidebar.cljs

@@ -104,7 +104,7 @@
        (when (contains? cf/flags :user-feedback)
          [:li {:class (when feedback? (stl/css :current))
                :on-click go-settings-feedback}
-          i/msg-info
+          i/feedback-refactor
           [:span {:class (stl/css :element-title)} (tr "labels.give-feedback")]])]]]))
 
 (mf/defc sidebar

frontend/src/app/main/ui/settings/sidebar.scss

@@ -60,7 +60,8 @@
     }
 
     svg {
-      fill: currentColor;
+      stroke: currentColor;
+      fill: none;
       margin-right: $s-8;
       height: $s-12;
       width: $s-12;