diff --git a/frontend/src/app/main/ui/alert.cljs b/frontend/src/app/main/ui/alert.cljs index 8dd9542493..bfcdc958cf 100644 --- a/frontend/src/app/main/ui/alert.cljs +++ b/frontend/src/app/main/ui/alert.cljs @@ -11,7 +11,7 @@ [app.main.store :as st] [app.main.ui.components.link :as lk] [app.main.ui.ds.notifications.context-notification :refer [context-notification*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as k] @@ -57,7 +57,7 @@ [:div {:class (stl/css :modal-header)} [:h2 {:class (stl/css :modal-title)} title] [:button {:class (stl/css :modal-close-btn) - :on-click accept-fn} i/close]] + :on-click accept-fn} deprecated-icon/close]] [:div {:class (stl/css :modal-content)} (when (and (string? message) (not= message "")) diff --git a/frontend/src/app/main/ui/auth.cljs b/frontend/src/app/main/ui/auth.cljs index a39b2b3102..c3542fe84a 100644 --- a/frontend/src/app/main/ui/auth.cljs +++ b/frontend/src/app/main/ui/auth.cljs @@ -14,7 +14,7 @@ [app.main.ui.auth.recovery :refer [recovery-page]] [app.main.ui.auth.recovery-request :refer [recovery-request-page]] [app.main.ui.auth.register :refer [register-page register-success-page register-validate-page terms-register]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -42,9 +42,9 @@ :auth-section true :register is-register)} [:h1 {:class (stl/css :logo-container)} - [:a {:href "#/" :title "Penpot" :class (stl/css :logo-btn)} i/logo]] + [:a {:href "#/" :title "Penpot" :class (stl/css :logo-btn)} deprecated-icon/logo]] [:div {:class (stl/css :login-illustration)} - i/login-illustration] + deprecated-icon/login-illustration] [:section {:class (stl/css :auth-content)} diff --git a/frontend/src/app/main/ui/auth/login.cljs b/frontend/src/app/main/ui/auth/login.cljs index 9f20747f17..5f8888da3b 100644 --- a/frontend/src/app/main/ui/auth/login.cljs +++ b/frontend/src/app/main/ui/auth/login.cljs @@ -19,7 +19,7 @@ [app.main.ui.components.forms :as fm] [app.main.ui.components.link :as lk] [app.main.ui.ds.notifications.context-notification :refer [context-notification*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.notifications.context-notification :refer [context-notification]] [app.util.dom :as dom] [app.util.i18n :refer [tr]] @@ -212,25 +212,25 @@ [:div {:class (stl/css :auth-buttons)} (when (contains? cf/flags :login-with-google) [:& bl/button-link {:on-click login-with-google - :icon i/brand-google + :icon deprecated-icon/brand-google :label (tr "auth.login-with-google-submit") :class (stl/css :login-btn :btn-google-auth)}]) (when (contains? cf/flags :login-with-github) [:& bl/button-link {:on-click login-with-github - :icon i/brand-github + :icon deprecated-icon/brand-github :label (tr "auth.login-with-github-submit") :class (stl/css :login-btn :btn-github-auth)}]) (when (contains? cf/flags :login-with-gitlab) [:& bl/button-link {:on-click login-with-gitlab - :icon i/brand-gitlab + :icon deprecated-icon/brand-gitlab :label (tr "auth.login-with-gitlab-submit") :class (stl/css :login-btn :btn-gitlab-auth)}]) (when (contains? cf/flags :login-with-oidc) [:& bl/button-link {:on-click login-with-oidc - :icon i/brand-openid + :icon deprecated-icon/brand-openid :label (tr "auth.login-with-oidc-submit") :class (stl/css :login-btn :btn-oidc-auth)}])])) diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index 8b3f34013a..920510610b 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/frontend/src/app/main/ui/comments.cljs @@ -25,9 +25,9 @@ [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.hooks :as h] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] @@ -583,7 +583,7 @@ :on-key-down handle-key-down :icon-class (stl/css-case :open-mentions-button true :is-toggled @display-mentions*) - :icon "at"}])) + :icon i/at}])) (def ^:private schema:comment-avatar [:map @@ -917,12 +917,12 @@ :title (tr "labels.comment.mark-as-solved") :on-click toggle-resolved} [:span {:class (stl/css-case :checkbox true - :global/checked (:is-resolved thread))} i/tick]]) + :global/checked (:is-resolved thread))} deprecated-icon/tick]]) (when (= (:id profile) (:id owner)) [:> icon-button* {:variant "ghost" :aria-label (tr "labels.options") :on-click on-toggle-options - :icon "menu"}])] + :icon i/menu}])] [:& dropdown {:show (= options uuid/zero) :on-close on-hide-options} [:ul {:class (stl/css :dropdown-menu)} @@ -987,7 +987,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "labels.options") :on-click on-toggle-options - :icon "menu"}])] + :icon i/menu}])] [:div {:class (stl/css :item)} (if @edition? @@ -1368,7 +1368,7 @@ :on-click on-click*} [:div {:class (stl/css :location)} [:div {:class (stl/css :location-icon)} - [:> icon* {:icon-id "comments"}]] + [:> icon* {:icon-id i/comments}]] [:div {:class (stl/css :location-text)} (str "#" (:seqn item)) (str " " (:file-name item)) diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.cljs b/frontend/src/app/main/ui/components/context_menu_a11y.cljs index 9160863ee6..37f532d25f 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.cljs +++ b/frontend/src/app/main/ui/components/context_menu_a11y.cljs @@ -12,7 +12,7 @@ [app.common.schema :as sm] [app.main.refs :as refs] [app.main.ui.components.dropdown :refer [dropdown-content*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] @@ -251,7 +251,7 @@ [:button {:class (stl/css :context-menu-action :submenu-back) :data-no-close true :on-click on-submenu-exit} - [:span {:class (stl/css :submenu-icon-back)} i/arrow] + [:span {:class (stl/css :submenu-icon-back)} deprecated-icon/arrow] parent]] [:li {:class (stl/css :separator)}]]) @@ -289,11 +289,11 @@ name) (when (and selected (= id selected)) - [:span {:class (stl/css :selected-icon)} i/tick])] + [:span {:class (stl/css :selected-icon)} deprecated-icon/tick])] [:a {:class (stl/css :context-menu-action :submenu) :data-no-close true :on-click (enter-submenu name sub-options) :data-testid id} name - [:span {:class (stl/css :submenu-icon)} i/arrow]])]))))]])]))) + [:span {:class (stl/css :submenu-icon)} deprecated-icon/arrow]])]))))]])]))) diff --git a/frontend/src/app/main/ui/components/copy_button.cljs b/frontend/src/app/main/ui/components/copy_button.cljs index a06e6f9cf5..f9fc01f92f 100644 --- a/frontend/src/app/main/ui/components/copy_button.cljs +++ b/frontend/src/app/main/ui/components/copy_button.cljs @@ -9,7 +9,7 @@ (:require [app.common.data.macros :as dm] [app.main.data.event :as-alias ev] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :refer [tr]] [app.util.timers :as tm] @@ -44,5 +44,5 @@ children [:span {:class (stl/css :icon-btn)} (if active? - i/tick - i/clipboard)]])) + deprecated-icon/tick + deprecated-icon/clipboard)]])) diff --git a/frontend/src/app/main/ui/components/editable_label.cljs b/frontend/src/app/main/ui/components/editable_label.cljs index 48c81f48bc..744804a1eb 100644 --- a/frontend/src/app/main/ui/components/editable_label.cljs +++ b/frontend/src/app/main/ui/components/editable_label.cljs @@ -9,7 +9,7 @@ (:require [app.common.data.macros :as dm] [app.main.constants :refer [max-input-length]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.keyboard :as kbd] [app.util.timers :as timers] @@ -99,7 +99,7 @@ [:span {:class (stl/css :editable-label-close) :on-click cancel-edition} - i/delete-text]] + deprecated-icon/delete-text]] [:span {:class final-class :title tooltip diff --git a/frontend/src/app/main/ui/components/editable_select.cljs b/frontend/src/app/main/ui/components/editable_select.cljs index 9c93cb6359..c77f44b88b 100644 --- a/frontend/src/app/main/ui/components/editable_select.cljs +++ b/frontend/src/app/main/ui/components/editable_select.cljs @@ -13,7 +13,7 @@ [app.common.uuid :as uuid] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.numeric-input :refer [numeric-input*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.keyboard :as kbd] [app.util.timers :as timers] @@ -182,7 +182,7 @@ [:span {:class (stl/css :dropdown-button) :on-click toggle-dropdown} - i/arrow] + deprecated-icon/arrow] [:& dropdown {:show (or is-open? false) :on-close close-dropdown} @@ -201,4 +201,4 @@ :on-click select-item} [:span {:class (stl/css :label)} label] [:span {:class (stl/css :check-icon)} - i/tick]])))]]])) + deprecated-icon/tick]])))]]])) diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs index f8f0ea3026..0c7420255f 100644 --- a/frontend/src/app/main/ui/components/forms.cljs +++ b/frontend/src/app/main/ui/components/forms.cljs @@ -11,7 +11,7 @@ [app.common.data.macros :as dm] [app.main.ui.components.select :as cs] [app.main.ui.hooks :as hooks] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.forms :as fm] [app.util.i18n :as i18n :refer [tr]] @@ -57,11 +57,11 @@ help-icon' (cond (and (= input-type "password") (= @type' "password")) - i/shown + deprecated-icon/shown (and (= input-type "password") (= @type' "text")) - i/hide + deprecated-icon/hide :else help-icon) @@ -130,7 +130,7 @@ :for (name input-name)} label (when is-checkbox? - [:span {:class (stl/css-case :global/checked checked?)} (when checked? i/status-tick)]) + [:span {:class (stl/css-case :global/checked checked?)} (when checked? deprecated-icon/status-tick)]) (if is-checkbox? [:> :input props] @@ -145,11 +145,11 @@ (when show-valid? [:span {:class (stl/css :valid-icon)} - i/tick]) + deprecated-icon/tick]) (when show-invalid? [:span {:class (stl/css :invalid-icon)} - i/close])])] + deprecated-icon/close])])] (some? children) [:label {:for (name input-name)} @@ -585,4 +585,4 @@ :caution (:caution item))} [:span {:class (stl/css :text)} (:text item)] [:button {:class (stl/css :icon) - :on-click #(remove-item! item)} i/close]]])])])) + :on-click #(remove-item! item)} deprecated-icon/close]]])])])) diff --git a/frontend/src/app/main/ui/components/reorder_handler.cljs b/frontend/src/app/main/ui/components/reorder_handler.cljs index a5c773b5dd..1be9272427 100644 --- a/frontend/src/app/main/ui/components/reorder_handler.cljs +++ b/frontend/src/app/main/ui/components/reorder_handler.cljs @@ -7,15 +7,15 @@ (ns app.main.ui.components.reorder-handler (:require-macros [app.main.style :as stl]) (:require - [app.main.ui.ds.foundations.assets.icon :as ic] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [rumext.v2 :as mf])) (mf/defc reorder-handler* [{:keys [ref]}] [:* [:div {:ref ref :class (stl/css :reorder)} - [:> ic/icon* - {:icon-id ic/reorder + [:> icon* + {:icon-id i/reorder :class (stl/css :reorder-icon) :aria-hidden true}]] [:hr {:class (stl/css :reorder-separator-top)}] diff --git a/frontend/src/app/main/ui/components/search_bar.cljs b/frontend/src/app/main/ui/components/search_bar.cljs index b8c56a7ea0..aa9fb0dcf7 100644 --- a/frontend/src/app/main/ui/components/search_bar.cljs +++ b/frontend/src/app/main/ui/components/search_bar.cljs @@ -7,7 +7,7 @@ (ns app.main.ui.components.search-bar (:require-macros [app.main.style :as stl]) (:require - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.util.dom :as dom] [app.util.keyboard :as kbd] [rumext.v2 :as mf])) @@ -55,5 +55,5 @@ (when (not= "" value) [:button {:class (stl/css :clear-icon) :on-click handle-clear} - [:> icon* {:icon-id "delete-text" + [:> icon* {:icon-id i/delete-text :size "s"}]])]])) diff --git a/frontend/src/app/main/ui/components/select.cljs b/frontend/src/app/main/ui/components/select.cljs index f6ae9e8424..25fd0e8bb3 100644 --- a/frontend/src/app/main/ui/components/select.cljs +++ b/frontend/src/app/main/ui/components/select.cljs @@ -11,7 +11,7 @@ [app.common.data.macros :as dm] [app.common.uuid :as uuid] [app.main.ui.components.dropdown :refer [dropdown]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [rumext.v2 :as mf])) @@ -100,7 +100,7 @@ (let [selected-option (first (filter #(= (:value %) default-value) options)) current-icon (:icon selected-option) - current-icon-ref (i/key->icon current-icon)] + current-icon-ref (deprecated-icon/key->icon current-icon)] [:div {:on-click open-dropdown :role "combobox" :class (dm/str (stl/css-case :custom-select true @@ -110,7 +110,7 @@ (when (and current-icon current-icon-ref) [:span {:class (stl/css :current-icon)} current-icon-ref]) [:span {:class (stl/css :current-label)} current-label] - [:span {:class (stl/css :dropdown-button)} i/arrow] + [:span {:class (stl/css :dropdown-button)} deprecated-icon/arrow] [:& dropdown {:show is-open? :on-close close-dropdown} [:ul {:ref dropdown-element* :data-direction (or data-direction @dropdown-direction*) :class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))} @@ -120,7 +120,7 @@ :role "option" :key (dm/str current-id "-" index)}] (let [[value label icon] (as-key-value item) - icon-ref (i/key->icon icon)] + icon-ref (deprecated-icon/key->icon icon)] [:li {:key (dm/str current-id "-" index) :role "option" @@ -134,4 +134,4 @@ :on-click select-item} (when (and icon icon-ref) [:span {:class (stl/css :icon)} icon-ref]) [:span {:class (stl/css :label)} label] - [:span {:class (stl/css :check-icon)} i/tick]])))]]]))) + [:span {:class (stl/css :check-icon)} deprecated-icon/tick]])))]]]))) diff --git a/frontend/src/app/main/ui/components/tab_container.cljs b/frontend/src/app/main/ui/components/tab_container.cljs index 0d39e93d81..5896f9d763 100644 --- a/frontend/src/app/main/ui/components/tab_container.cljs +++ b/frontend/src/app/main/ui/components/tab_container.cljs @@ -9,7 +9,7 @@ (:require [app.common.data :as d] [app.common.data.macros :as dm] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.array :as array] [app.util.dom :as dom] [app.util.i18n :refer [tr]] @@ -50,7 +50,7 @@ {:on-click handle-collapse :class (stl/css :collapse-sidebar) :aria-label (tr "workspace.sidebar.collapse")} - i/arrow]) + deprecated-icon/arrow]) [:div {:class (stl/css :tab-container-tab-wrapper)} (for [tab children] (let [props (.-props tab) diff --git a/frontend/src/app/main/ui/confirm.cljs b/frontend/src/app/main/ui/confirm.cljs index 9f97146c87..ca8a78aea0 100644 --- a/frontend/src/app/main/ui/confirm.cljs +++ b/frontend/src/app/main/ui/confirm.cljs @@ -10,7 +10,7 @@ [app.main.data.modal :as modal] [app.main.store :as st] [app.main.ui.ds.notifications.context-notification :refer [context-notification*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as k] @@ -69,7 +69,7 @@ [:div {:class (stl/css :modal-header)} [:h2 {:class (stl/css :modal-title)} title] [:button {:class (stl/css :modal-close-btn) - :on-click cancel-fn} i/close]] + :on-click cancel-fn} deprecated-icon/close]] [:div {:class (stl/css :modal-content)} (when (and (string? message) (not= message "")) @@ -88,7 +88,7 @@ (for [item items] [:li {:class (stl/css :modal-item-element)} [:span {:class (stl/css :modal-component-icon)} - i/component] + deprecated-icon/component] [:span {:class (stl/css :modal-component-name)} (:name item)]])]])] diff --git a/frontend/src/app/main/ui/dashboard/change_owner.cljs b/frontend/src/app/main/ui/dashboard/change_owner.cljs index e112b3ca6c..fc4ae33cc9 100644 --- a/frontend/src/app/main/ui/dashboard/change_owner.cljs +++ b/frontend/src/app/main/ui/dashboard/change_owner.cljs @@ -10,7 +10,7 @@ [app.common.schema :as sm] [app.main.data.modal :as modal] [app.main.ui.components.forms :as fm] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -43,7 +43,7 @@ [:div {:class (stl/css :modal-header)} [:h2 {:class (stl/css :modal-title)} (tr "modals.leave-and-reassign.title")] [:button {:class (stl/css :modal-close-btn) - :on-click modal/hide!} i/close]] + :on-click modal/hide!} deprecated-icon/close]] [:div {:class (stl/css :modal-content)} [:p {:class (stl/css :modal-msg)} diff --git a/frontend/src/app/main/ui/dashboard/comments.cljs b/frontend/src/app/main/ui/dashboard/comments.cljs index 5d08caecb9..e432a642c8 100644 --- a/frontend/src/app/main/ui/dashboard/comments.cljs +++ b/frontend/src/app/main/ui/dashboard/comments.cljs @@ -15,13 +15,14 @@ [app.main.ui.comments :as cmt] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.icons :as i] + [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.i18n :as i18n :refer [tr]] [potok.v2.core :as ptk] [rumext.v2 :as mf])) (def ^:private comments-icon-svg - (i/icon-xref :comments (stl/css :comments-icon))) + (deprecated-icon/icon-xref :comments (stl/css :comments-icon))) (mf/defc comments-icon* {::mf/props :obj} @@ -43,7 +44,7 @@ :data-testid "open-comments" :aria-label (tr "dashboard.notifications.view") :on-click on-show-comments - :icon "comments"} + :icon i/comments} (when (seq tgroups) [:div {:class (stl/css :unread)}])]])) @@ -94,14 +95,14 @@ :tab-index (if show? "0" "-1") :aria-label (tr "label.mark-all-as-read") :on-click on-read-all - :icon "tick"}]) + :icon i/tick}]) [:> icon-button* {:class (stl/css :notifications-button) :variant "action" :tab-index (if show? "0" "-1") :aria-label (tr "labels.close") :on-click on-hide-comments - :icon "close"}]] + :icon i/close}]] (if (seq tgroups) [:div {:class (stl/css :thread-groups)} diff --git a/frontend/src/app/main/ui/dashboard/files.cljs b/frontend/src/app/main/ui/dashboard/files.cljs index 89dafd69c6..a92264af07 100644 --- a/frontend/src/app/main/ui/dashboard/files.cljs +++ b/frontend/src/app/main/ui/dashboard/files.cljs @@ -19,7 +19,7 @@ [app.main.ui.dashboard.project-menu :refer [project-menu*]] [app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]] [app.main.ui.hooks :as hooks] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] @@ -27,7 +27,7 @@ [rumext.v2 :as mf])) (def ^:private menu-icon - (i/icon-xref :menu (stl/css :menu-icon))) + (deprecated-icon/icon-xref :menu (stl/css :menu-icon))) (mf/defc header* {::mf/props :obj diff --git a/frontend/src/app/main/ui/dashboard/fonts.cljs b/frontend/src/app/main/ui/dashboard/fonts.cljs index 833de7d1db..3e1b421cd0 100644 --- a/frontend/src/app/main/ui/dashboard/fonts.cljs +++ b/frontend/src/app/main/ui/dashboard/fonts.cljs @@ -19,7 +19,7 @@ [app.main.ui.components.context-menu-a11y :refer [context-menu*]] [app.main.ui.components.file-uploader :refer [file-uploader]] [app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.notifications.context-notification :refer [context-notification]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -239,7 +239,7 @@ [:div {:class (stl/css :table-field :options)} (when (:height-warning? item) [:span {:class (stl/css :icon :failure)} - i/msg-neutral]) + deprecated-icon/msg-neutral]) [:button {:on-click on-upload :data-id (dm/str id) @@ -254,7 +254,7 @@ [:span {:class (stl/css :icon :close) :data-id (dm/str id) :on-click on-delete} - i/close]]]))]])) + deprecated-icon/close]]]))]])) (mf/defc installed-font-context-menu {::mf/props :obj @@ -381,7 +381,7 @@ {:class (stl/css :icon :close) :data-id (dm/str id) :on-click on-delete-variant} - i/add])])] + deprecated-icon/add])])] (if ^boolean edition? [:div {:class (stl/css :table-field :options)} @@ -393,13 +393,13 @@ (tr "labels.save")] [:button {:class (stl/css :icon :close) :on-click on-cancel} - i/close]] + deprecated-icon/close]] (when can-edit [:div {:class (stl/css :table-field :options)} [:span {:class (stl/css :icon) :on-click on-menu-open} - i/menu] + deprecated-icon/menu] [:& installed-font-context-menu {:on-close on-menu-close @@ -443,13 +443,13 @@ (nil? fonts) [:div {:class (stl/css :fonts-placeholder)} - [:div {:class (stl/css :icon)} i/loader] + [:div {:class (stl/css :icon)} deprecated-icon/loader] [:div {:class (stl/css :label)} (tr "dashboard.loading-fonts")]] :else (if ^boolean can-edit [:div {:class (stl/css :fonts-placeholder)} - [:div {:class (stl/css :icon)} i/text] + [:div {:class (stl/css :icon)} deprecated-icon/text] [:div {:class (stl/css :label)} (tr "dashboard.fonts.empty-placeholder")]] [:> empty-placeholder* diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index 6f8dd68479..1393e48e35 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/frontend/src/app/main/ui/dashboard/grid.cljs @@ -32,7 +32,7 @@ [app.main.ui.dashboard.placeholder :refer [empty-grid-placeholder* loading-placeholder*]] [app.main.ui.ds.product.loader :refer [loader*]] [app.main.ui.hooks :as h] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.worker :as mw] [app.util.color :as uc] [app.util.dom :as dom] @@ -117,7 +117,7 @@ ;; --- Grid Item Library (def ^:private menu-icon - (i/icon-xref :menu (stl/css :menu-icon))) + (deprecated-icon/icon-xref :menu (stl/css :menu-icon))) (mf/defc grid-item-library* {::mf/props :obj} @@ -406,7 +406,7 @@ [:> grid-item-thumbnail* {:file file :can-edit can-edit}]) (when (and (:is-shared file) (not is-library-view?)) - [:div {:class (stl/css :item-badge)} i/library]) + [:div {:class (stl/css :item-badge)} deprecated-icon/library]) [:div {:class (stl/css :info-wrapper)} [:div {:class (stl/css :item-info)} diff --git a/frontend/src/app/main/ui/dashboard/import.cljs b/frontend/src/app/main/ui/dashboard/import.cljs index 30f94ffb9f..8950aaf93d 100644 --- a/frontend/src/app/main/ui/dashboard/import.cljs +++ b/frontend/src/app/main/ui/dashboard/import.cljs @@ -18,7 +18,7 @@ [app.main.store :as st] [app.main.ui.components.file-uploader :refer [file-uploader]] [app.main.ui.ds.product.loader :refer [loader*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.notifications.context-notification :refer [context-notification]] [app.main.worker :as mw] [app.util.dom :as dom] @@ -260,10 +260,10 @@ :file-icon true :icon-fill import-ready?)} (cond - import-ready? i/logo-icon - import-error? i/close - import-success? i/tick - analyze-error? i/close)]) + import-ready? deprecated-icon/logo-icon + import-error? deprecated-icon/close + import-success? deprecated-icon/tick + analyze-error? deprecated-icon/close)]) (if editing? [:div {:class (stl/css :file-name-edit)} @@ -277,13 +277,13 @@ (:name entry) (when ^boolean is-shared? [:span {:class (stl/css :icon)} - i/library])]) + deprecated-icon/library])]) [:div {:class (stl/css :edit-entry-buttons)} (when ^boolean editable? - [:button {:on-click on-edit'} i/curve]) + [:button {:on-click on-edit'} deprecated-icon/curve]) (when ^boolean can-be-deleted - [:button {:on-click on-delete'} i/delete])]] + [:button {:on-click on-delete'} deprecated-icon/delete])]] (cond analyze-error? @@ -312,7 +312,7 @@ [:span {:class (stl/css-case :linked-library-tag true :error error?)} - i/detach]])))]])) + deprecated-icon/detach]])))]])) (defn initialize-state [entries] @@ -464,7 +464,7 @@ [:h2 {:class (stl/css :modal-title)} (tr "dashboard.import")] [:button {:class (stl/css :modal-close-btn) - :on-click on-cancel} i/close]] + :on-click on-cancel} deprecated-icon/close]] [:div {:class (stl/css :modal-content)} (when (and (= :analyze status) errors?) diff --git a/frontend/src/app/main/ui/dashboard/inline_edition.cljs b/frontend/src/app/main/ui/dashboard/inline_edition.cljs index 7dc80343ae..8ee74fb74e 100644 --- a/frontend/src/app/main/ui/dashboard/inline_edition.cljs +++ b/frontend/src/app/main/ui/dashboard/inline_edition.cljs @@ -7,7 +7,7 @@ (ns app.main.ui.dashboard.inline-edition (:require-macros [app.main.style :as stl]) (:require - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.keyboard :as kbd] [rumext.v2 :as mf])) @@ -70,5 +70,5 @@ :on-blur on-blur :max-length max-length}] [:span {:class (stl/css :close) - :on-click on-cancel} i/close]])) + :on-click on-cancel} deprecated-icon/close]])) diff --git a/frontend/src/app/main/ui/dashboard/pin_button.cljs b/frontend/src/app/main/ui/dashboard/pin_button.cljs index 14ee57332e..ffa76fb6c3 100644 --- a/frontend/src/app/main/ui/dashboard/pin_button.cljs +++ b/frontend/src/app/main/ui/dashboard/pin_button.cljs @@ -7,16 +7,15 @@ (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]]) + [app.main.style :as stl]) (:require - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.i18n :as i18n :refer [tr]] [app.util.object :as obj] [rumext.v2 :as mf])) (def ^:private pin-icon - (icon-xref :pin (stl/css :icon))) + (deprecated-icon/icon-xref :pin (stl/css :icon))) (mf/defc pin-button* {::mf/props :obj} diff --git a/frontend/src/app/main/ui/dashboard/placeholder.cljs b/frontend/src/app/main/ui/dashboard/placeholder.cljs index 8d6f369561..bb32d71b5c 100644 --- a/frontend/src/app/main/ui/dashboard/placeholder.cljs +++ b/frontend/src/app/main/ui/dashboard/placeholder.cljs @@ -12,7 +12,7 @@ [app.main.ui.dashboard.import :as udi] [app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]] [app.main.ui.ds.product.loader :refer [loader*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [okulary.core :as l] @@ -132,7 +132,7 @@ :on-mouse-leave on-mouse-leave} (if show-text? (tr "dashboard.empty-project.create") - i/add)]])))) + deprecated-icon/add)]])))) (mf/defc loading-placeholder* [] diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index 5ca9dd7a6c..e676da5eef 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -22,7 +22,7 @@ [app.main.ui.dashboard.project-menu :refer [project-menu*]] [app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]] [app.main.ui.hooks :as hooks] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] @@ -33,16 +33,16 @@ [rumext.v2 :as mf])) (def ^:private show-more-icon - (i/icon-xref :arrow (stl/css :show-more-icon))) + (deprecated-icon/icon-xref :arrow (stl/css :show-more-icon))) (def ^:private close-icon - (i/icon-xref :close (stl/css :close-icon))) + (deprecated-icon/icon-xref :close (stl/css :close-icon))) (def ^:private add-icon - (i/icon-xref :add (stl/css :add-icon))) + (deprecated-icon/icon-xref :add (stl/css :add-icon))) (def ^:private menu-icon - (i/icon-xref :menu (stl/css :menu-icon))) + (deprecated-icon/icon-xref :menu (stl/css :menu-icon))) (mf/defc header* {::mf/wrap [mf/memo] diff --git a/frontend/src/app/main/ui/dashboard/search.cljs b/frontend/src/app/main/ui/dashboard/search.cljs index 76ec19777e..126b038ca8 100644 --- a/frontend/src/app/main/ui/dashboard/search.cljs +++ b/frontend/src/app/main/ui/dashboard/search.cljs @@ -13,7 +13,7 @@ [app.main.store :as st] [app.main.ui.dashboard.grid :refer [grid*]] [app.main.ui.hooks :as hooks] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [okulary.core :as l] @@ -63,17 +63,17 @@ (cond (empty? search-term) [:div {:class (stl/css :grid-empty-placeholder :search)} - [:div {:class (stl/css :icon)} i/search] + [:div {:class (stl/css :icon)} deprecated-icon/search] [:div {:class (stl/css :text)} (tr "dashboard.type-something")]] (nil? result) [:div {:class (stl/css :grid-empty-placeholder :search)} - [:div {:class (stl/css :icon)} i/search] + [:div {:class (stl/css :icon)} deprecated-icon/search] [:div {:class (stl/css :text)} (tr "dashboard.searching-for" search-term)]] (empty? result) [:div {:class (stl/css :grid-empty-placeholder :search)} - [:div {:class (stl/css :icon)} i/search] + [:div {:class (stl/css :icon)} deprecated-icon/search] [:div {:class (stl/css :text)} (tr "dashboard.no-matches-for" search-term)]] :else diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs index 643cf1d580..d4a071709e 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.cljs +++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs @@ -33,7 +33,7 @@ show-subscription-dashboard-banner? get-subscription-type]] [app.main.ui.dashboard.team-form] - [app.main.ui.icons :as i :refer [icon-xref]] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.dom.dnd :as dnd] [app.util.i18n :as i18n :refer [tr]] @@ -46,31 +46,31 @@ [rumext.v2 :as mf])) (def ^:private clear-search-icon - (icon-xref :delete-text (stl/css :clear-search-icon))) + (deprecated-icon/icon-xref :delete-text (stl/css :clear-search-icon))) (def ^:private search-icon - (icon-xref :search (stl/css :search-icon))) + (deprecated-icon/icon-xref :search (stl/css :search-icon))) (def ^:private tick-icon - (icon-xref :tick (stl/css :tick-icon))) + (deprecated-icon/icon-xref :tick (stl/css :tick-icon))) (def ^:private logo-icon - (icon-xref :logo (stl/css :logo-icon))) + (deprecated-icon/icon-xref :logo (stl/css :logo-icon))) (def ^:private add-icon - (icon-xref :add (stl/css :add-icon))) + (deprecated-icon/icon-xref :add (stl/css :add-icon))) (def ^:private arrow-icon - (icon-xref :arrow (stl/css :arrow-icon))) + (deprecated-icon/icon-xref :arrow (stl/css :arrow-icon))) (def ^:private menu-icon - (icon-xref :menu (stl/css :menu-icon))) + (deprecated-icon/icon-xref :menu (stl/css :menu-icon))) (def ^:private pin-icon - (icon-xref :pin (stl/css :pin-icon))) + (deprecated-icon/icon-xref :pin (stl/css :pin-icon))) (def ^:private exit-icon - (icon-xref :exit (stl/css :exit-icon))) + (deprecated-icon/icon-xref :exit (stl/css :exit-icon))) (mf/defc sidebar-project* {::mf/private true} @@ -296,7 +296,7 @@ [:> dropdown-menu-item* {:on-click on-team-click :data-value (:default-team-id profile) :class (stl/css :team-dropdown-item)} - [:span {:class (stl/css :penpot-icon)} i/logo-icon] + [:span {:class (stl/css :penpot-icon)} deprecated-icon/logo-icon] [:span {:class (stl/css :team-text)} (tr "dashboard.your-penpot")] (when (= (:default-team-id profile) (:id team)) @@ -544,7 +544,7 @@ (cond (:is-default team) [:div {:class (stl/css :team-name)} - [:span {:class (stl/css :penpot-icon)} i/logo-icon] + [:span {:class (stl/css :penpot-icon)} deprecated-icon/logo-icon] [:span {:class (stl/css :team-text)} (tr "dashboard.default-team-name")]] (and (contains? cf/flags :subscriptions) diff --git a/frontend/src/app/main/ui/dashboard/subscription.cljs b/frontend/src/app/main/ui/dashboard/subscription.cljs index 68d2359cf9..3068f0ba01 100644 --- a/frontend/src/app/main/ui/dashboard/subscription.cljs +++ b/frontend/src/app/main/ui/dashboard/subscription.cljs @@ -10,7 +10,7 @@ [app.main.store :as st] [app.main.ui.components.dropdown-menu :refer [dropdown-menu-item*]] [app.main.ui.ds.product.cta :refer [cta*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] @@ -41,7 +41,7 @@ [:div {:class (stl/css :content)} [:span {:class (stl/css :cta-title)} top-title] [:span {:class (stl/css :cta-text) :data-testid "subscription-name"} top-description]] - (when has-dropdown [:span {:class (stl/css :icon-dropdown)} i/arrow])] + (when has-dropdown [:span {:class (stl/css :icon-dropdown)} deprecated-icon/arrow])] (when (and has-dropdown show-data) [:div {:class (stl/css :cta-bottom-section)} @@ -131,8 +131,8 @@ (tr "subscription.dashboard.power-up.enterprise-plan")) :data-testid "subscription-icon"} (case subscription-type - "unlimited" i/character-u - "enterprise" i/character-e)]) + "unlimited" deprecated-icon/character-u + "enterprise" deprecated-icon/character-e)]) (mf/defc main-menu-power-up* [{:keys [close-sub-menu]}] diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs index 1a65054b34..b883736094 100644 --- a/frontend/src/app/main/ui/dashboard/team.cljs +++ b/frontend/src/app/main/ui/dashboard/team.cljs @@ -26,8 +26,8 @@ members-cta* show-subscription-members-banner?]] [app.main.ui.dashboard.team-form] - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] - [app.main.ui.icons :as i] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.notifications.badge :refer [badge-notification]] [app.main.ui.notifications.context-notification :refer [context-notification]] [app.util.dom :as dom] @@ -37,28 +37,28 @@ [rumext.v2 :as mf])) (def ^:private arrow-icon - (i/icon-xref :arrow (stl/css :arrow-icon))) + (deprecated-icon/icon-xref :arrow (stl/css :arrow-icon))) (def ^:private menu-icon - (i/icon-xref :menu (stl/css :menu-icon))) + (deprecated-icon/icon-xref :menu (stl/css :menu-icon))) (def ^:private warning-icon - (i/icon-xref :msg-warning (stl/css :warning-icon))) + (deprecated-icon/icon-xref :msg-warning (stl/css :warning-icon))) (def ^:private success-icon - (i/icon-xref :msg-success (stl/css :success-icon))) + (deprecated-icon/icon-xref :msg-success (stl/css :success-icon))) (def ^:private image-icon - (i/icon-xref :img (stl/css :image-icon))) + (deprecated-icon/icon-xref :img (stl/css :image-icon))) (def ^:private user-icon - (i/icon-xref :user (stl/css :user-icon))) + (deprecated-icon/icon-xref :user (stl/css :user-icon))) (def ^:private document-icon - (i/icon-xref :document (stl/css :document-icon))) + (deprecated-icon/icon-xref :document (stl/css :document-icon))) (def ^:private group-icon - (i/icon-xref :group (stl/css :group-icon))) + (deprecated-icon/icon-xref :group (stl/css :group-icon))) (mf/defc header {::mf/wrap [mf/memo] @@ -914,7 +914,7 @@ (tr "modals.create-webhook.title"))] [:button {:class (stl/css :modal-close-btn) - :on-click modal/hide!} i/close]] + :on-click modal/hide!} deprecated-icon/close]] [:div {:class (stl/css :modal-content)} [:div {:class (stl/css :fields-row)} @@ -981,7 +981,7 @@ [:span {:title (tr "dashboard.webhooks.cant-edit") :class (stl/css :menu-disabled)} - [:> icon* {:icon-id "menu"}]]))) + [:> icon* {:icon-id i/menu}]]))) (mf/defc webhook-item* {::mf/wrap [mf/memo] diff --git a/frontend/src/app/main/ui/dashboard/team_form.cljs b/frontend/src/app/main/ui/dashboard/team_form.cljs index f0ec25a358..5f6fdaae90 100644 --- a/frontend/src/app/main/ui/dashboard/team_form.cljs +++ b/frontend/src/app/main/ui/dashboard/team_form.cljs @@ -15,7 +15,7 @@ [app.main.data.team :as dtm] [app.main.store :as st] [app.main.ui.components.forms :as fm] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] @@ -100,7 +100,7 @@ (tr "labels.create-team")]) [:button {:class (stl/css :modal-close-btn) - :on-click modal/hide!} i/close]] + :on-click modal/hide!} deprecated-icon/close]] [:div {:class (stl/css :modal-content)} [:& fm/input {:type "text" diff --git a/frontend/src/app/main/ui/dashboard/templates.cljs b/frontend/src/app/main/ui/dashboard/templates.cljs index 10d44e9e33..ece2e146cf 100644 --- a/frontend/src/app/main/ui/dashboard/templates.cljs +++ b/frontend/src/app/main/ui/dashboard/templates.cljs @@ -15,7 +15,7 @@ [app.main.data.modal :as modal] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.dom.normalize-wheel :as nw] [app.util.i18n :refer [tr]] @@ -26,10 +26,10 @@ [rumext.v2 :as mf])) (def ^:private arrow-icon - (i/icon-xref :arrow (stl/css :arrow-icon))) + (deprecated-icon/icon-xref :arrow (stl/css :arrow-icon))) (def ^:private download-icon - (i/icon-xref :add (stl/css :download-icon))) + (deprecated-icon/icon-xref :add (stl/css :download-icon))) (def builtin-templates (l/derived :builtin-templates st/state)) diff --git a/frontend/src/app/main/ui/debug/icons_preview.cljs b/frontend/src/app/main/ui/debug/icons_preview.cljs index 9380dc8726..03c7bd0d99 100644 --- a/frontend/src/app/main/ui/debug/icons_preview.cljs +++ b/frontend/src/app/main/ui/debug/icons_preview.cljs @@ -2,7 +2,7 @@ (:require-macros [app.main.style :as stl]) (:require [app.main.ui.cursors :as c] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.timers :as ts] [cuerdas.core :as str] [rumext.v2 :as mf])) @@ -11,7 +11,7 @@ {::mf/wrap-props false ::mf/private true} [] - (let [entries (->> (seq (js/Object.entries i/default)) + (let [entries (->> (seq (js/Object.entries deprecated-icon/default)) (sort-by first))] [:section {:class (stl/css :gallery)} (for [[key val] entries] diff --git a/frontend/src/app/main/ui/delete_shared.cljs b/frontend/src/app/main/ui/delete_shared.cljs index 92fc47fad9..43a2a2425b 100644 --- a/frontend/src/app/main/ui/delete_shared.cljs +++ b/frontend/src/app/main/ui/delete_shared.cljs @@ -12,7 +12,7 @@ [app.main.repo :as rp] [app.main.store :as st] [app.main.ui.ds.notifications.context-notification :refer [context-notification*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as k] @@ -98,7 +98,7 @@ [:div {:class (stl/css :modal-header)} [:h2 {:class (stl/css :modal-title)} title] [:button {:class (stl/css :modal-close-btn) - :on-click cancel-fn} i/close]] + :on-click cancel-fn} deprecated-icon/close]] [:div {:class (stl/css :modal-content)} (when (and (string? subtitle) (not= subtitle "")) diff --git a/frontend/src/app/main/ui/ds/controls/combobox.cljs b/frontend/src/app/main/ui/ds/controls/combobox.cljs index 0b6bf6ee25..80c77dbeec 100644 --- a/frontend/src/app/main/ui/ds/controls/combobox.cljs +++ b/frontend/src/app/main/ui/ds/controls/combobox.cljs @@ -12,7 +12,7 @@ [app.main.constants :refer [max-input-length]] [app.main.ui.ds.controls.select :refer [get-option handle-focus-change]] [app.main.ui.ds.controls.shared.options-dropdown :refer [options-dropdown* schema:option]] - [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.util.dom :as dom] [app.util.keyboard :as kbd] [app.util.object :as obj] @@ -234,9 +234,9 @@ [:span {:class (stl/css-case :header true :header-icon (some? icon))} (when icon - [:> i/icon* {:icon-id icon - :size "s" - :aria-hidden true}]) + [:> icon* {:icon-id icon + :size "s" + :aria-hidden true}]) [:input {:id id :ref input-ref :type "text" @@ -264,11 +264,11 @@ :aria-controls listbox-id :class (stl/css :button-toggle-list) :on-click on-click} - [:> i/icon* {:icon-id i/arrow-down - :class (stl/css :arrow) - :size "s" - :aria-hidden true - :data-testid "combobox-open-button"}]])] + [:> icon* {:icon-id i/arrow-down + :class (stl/css :arrow) + :size "s" + :aria-hidden true + :data-testid "combobox-open-button"}]])] (when (and ^boolean is-open ^boolean dropdown-options) diff --git a/frontend/src/app/main/ui/ds/controls/numeric_input.cljs b/frontend/src/app/main/ui/ds/controls/numeric_input.cljs index c78248e145..4c26835576 100644 --- a/frontend/src/app/main/ui/ds/controls/numeric_input.cljs +++ b/frontend/src/app/main/ui/ds/controls/numeric_input.cljs @@ -17,7 +17,7 @@ [app.main.ui.ds.controls.shared.options-dropdown :refer [options-dropdown*]] [app.main.ui.ds.controls.utilities.input-field :refer [input-field*]] [app.main.ui.ds.controls.utilities.token-field :refer [token-field*]] - [app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list]] + [app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list] :as i] [app.main.ui.ds.tooltip :refer [tooltip*]] [app.main.ui.formats :as fmt] [app.util.dom :as dom] @@ -606,7 +606,7 @@ :slot-end (when-not disabled (when (some? tokens) (mf/html [:> icon-button* {:variant "action" - :icon "tokens" + :icon i/tokens :class (stl/css :invisible-button) :aria-label (tr "ds.inputs.numeric-input.open-token-list-dropdown") :ref open-dropdown-ref diff --git a/frontend/src/app/main/ui/ds/controls/select.cljs b/frontend/src/app/main/ui/ds/controls/select.cljs index bdc71cdc80..cb1e9ec135 100644 --- a/frontend/src/app/main/ui/ds/controls/select.cljs +++ b/frontend/src/app/main/ui/ds/controls/select.cljs @@ -10,7 +10,7 @@ (:require [app.common.data :as d] [app.main.ui.ds.controls.shared.options-dropdown :refer [options-dropdown* schema:option]] - [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.util.dom :as dom] [app.util.keyboard :as kbd] [app.util.object :as obj] @@ -197,17 +197,17 @@ [:span {:class (stl/css-case :select-header true :header-icon has-icon?)} (when ^boolean has-icon? - [:> i/icon* {:icon-id icon - :size "s" - :aria-hidden true}]) + [:> icon* {:icon-id icon + :size "s" + :aria-hidden true}]) [:span {:class (stl/css-case :header-label true :header-label-dimmed empty-selected-id?)} (if ^boolean empty-selected-id? "--" label)]] - [:> i/icon* {:icon-id i/arrow-down - :class (stl/css :arrow) - :size "s" - :aria-hidden true}]] + [:> icon* {:icon-id i/arrow-down + :class (stl/css :arrow) + :size "s" + :aria-hidden true}]] (when ^boolean is-open [:> options-dropdown* {:on-click on-option-click diff --git a/frontend/src/app/main/ui/ds/controls/shared/option.cljs b/frontend/src/app/main/ui/ds/controls/shared/option.cljs index d4cc48f76d..0542268bc1 100644 --- a/frontend/src/app/main/ui/ds/controls/shared/option.cljs +++ b/frontend/src/app/main/ui/ds/controls/shared/option.cljs @@ -9,7 +9,7 @@ (:require-macros [app.main.style :as stl]) (:require - [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [rumext.v2 :as mf])) (def ^:private schema:option @@ -50,7 +50,7 @@ :data-testid "dropdown-option"} (when (some? icon) - [:> i/icon* + [:> icon* {:icon-id icon :size "s" :class (stl/css :option-icon) @@ -62,7 +62,7 @@ label] (when ^boolean selected - [:> i/icon* + [:> icon* {:icon-id i/tick :size "s" :class (stl/css :option-check) diff --git a/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs b/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs index 4d6de219e2..3a7bef9cac 100644 --- a/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs +++ b/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs @@ -12,7 +12,7 @@ [app.common.weak :refer [weak-key]] [app.main.ui.ds.controls.shared.option :refer [option*]] [app.main.ui.ds.controls.shared.token-option :refer [token-option*]] - [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [cuerdas.core :as str] [rumext.v2 :as mf])) @@ -61,7 +61,7 @@ :group [:li {:class (stl/css :group-option) :key (weak-key option)} - [:> i/icon* + [:> icon* {:icon-id i/arrow-down :size "m" :class (stl/css :option-check) diff --git a/frontend/src/app/main/ui/ds/controls/utilities/token_field.cljs b/frontend/src/app/main/ui/ds/controls/utilities/token_field.cljs index 5b02996bc2..128bcb8397 100644 --- a/frontend/src/app/main/ui/ds/controls/utilities/token_field.cljs +++ b/frontend/src/app/main/ui/ds/controls/utilities/token_field.cljs @@ -10,6 +10,7 @@ [app.common.data :as d] [app.common.data.macros :as dm] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.ds.tooltip :refer [tooltip*]] [app.util.dom :as dom] [app.util.i18n :refer [tr]] @@ -79,7 +80,7 @@ (when-not ^boolean disabled [:> icon-button* {:variant "action" :class (stl/css :invisible-button) - :icon "broken-link" + :icon i/broken-link :ref token-detach-btn-ref :aria-label (tr "ds.inputs.token-field.detach-token") :on-click detach-token}])])) diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx b/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx index 091accbfa1..d13baee6e3 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx +++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx @@ -47,13 +47,13 @@ Assuming the namespace is required as `i`: ```clj (ns app.main.ui.foo (:require - [app.main.ui.ds.foundations.assets.icon :as i])) + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i])) ``` You can now use the icon IDs defined in the namespace: ```clj -[:> i/icon* {:icon-id i/pin}] +[:> icon* {:icon-id i/pin}] ``` ### Customizing colors @@ -65,7 +65,7 @@ If you need to override this behavior, you can use a `class` in the `` component and set `color` to whatever value you prefer: ```clj -[:> i/icon* {:icon-id i/add :class (stl/css :toolbar-icon)}] +[:> icon* {:icon-id i/add :class (stl/css :toolbar-icon)}] ``` ```scss @@ -80,7 +80,7 @@ By default, icons do not have any accessible text attached to them. You should add an `aria-label` attribute to set a proper text: ```clj -[:> i/icon* {:icon-id i/add :aria-label (tr "foo.bar")}] +[:> icon* {:icon-id i/add :aria-label (tr "foo.bar")}] ``` ## Usage guidelines for design diff --git a/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs b/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs index 919cc854d3..efa97a9247 100644 --- a/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs +++ b/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs @@ -10,7 +10,7 @@ (:require [app.common.data.macros :as dm] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -50,7 +50,7 @@ icon-id (icons-by-level level)] [:div {:class (dm/str class " " (stl/css :notification-pill))} [:div {:class (stl/css :error-message)} - [:> i/icon* {:icon-id icon-id :class (stl/css :icon)}] + [:> icon* {:icon-id icon-id :class (stl/css :icon)}] ;; The content can arrive in markdown format, in these cases ;; we will use the prop is-html to true to indicate it and ;; that the html injection is performed and the necessary css classes are applied. diff --git a/frontend/src/app/main/ui/ds/notifications/toast.cljs b/frontend/src/app/main/ui/ds/notifications/toast.cljs index 3c2e76eee9..f83dbd5fd6 100644 --- a/frontend/src/app/main/ui/ds/notifications/toast.cljs +++ b/frontend/src/app/main/ui/ds/notifications/toast.cljs @@ -10,7 +10,7 @@ [app.main.style :as stl]) (:require [app.common.data :as d] - [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.notifications.shared.notification-pill :refer [notification-pill*]] [rumext.v2 :as mf])) @@ -62,4 +62,4 @@ :level-error (= level :error) :level-success (= level :success) :level-info (= level :info))} - [:> i/icon* {:icon-id i/close}]]])) + [:> icon* {:icon-id i/close}]]])) diff --git a/frontend/src/app/main/ui/ds/product/milestone.cljs b/frontend/src/app/main/ui/ds/product/milestone.cljs index 177acf17c2..4dc1930f0b 100644 --- a/frontend/src/app/main/ui/ds/product/milestone.cljs +++ b/frontend/src/app/main/ui/ds/product/milestone.cljs @@ -13,7 +13,7 @@ [app.common.types.profile :refer [schema:profile]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.ds.controls.input :refer [input*]] - [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.foundations.typography :as t] [app.main.ui.ds.foundations.typography.text :refer [text*]] [app.main.ui.ds.product.avatar :refer [avatar*]] @@ -70,7 +70,7 @@ [:div {:class (stl/css :name-wrapper)} [:> text* {:as "span" :typography t/body-small :class (stl/css :name)} label] (when locked - [:> i/icon* {:icon-id i/lock :class (stl/css :lock-icon)}])]) + [:> icon* {:icon-id i/lock :class (stl/css :lock-icon)}])]) [:* [:time {:date-time (ct/format-inst created-at :iso) @@ -80,7 +80,7 @@ [:div {:class (stl/css :milestone-buttons)} [:> icon-button* {:class (stl/css :menu-button) :variant "ghost" - :icon "menu" + :icon i/menu :aria-label (tr "workspace.versions.version-menu") :on-click on-open-menu}]]]])) diff --git a/frontend/src/app/main/ui/ds/product/milestone_group.cljs b/frontend/src/app/main/ui/ds/product/milestone_group.cljs index 41a2694108..2b8944d0fd 100644 --- a/frontend/src/app/main/ui/ds/product/milestone_group.cljs +++ b/frontend/src/app/main/ui/ds/product/milestone_group.cljs @@ -13,7 +13,7 @@ [app.common.schema :as sm] [app.common.time :as cm] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.foundations.typography :as t] [app.main.ui.ds.foundations.typography.text :refer [text*]] [app.main.ui.ds.utilities.date :refer [date*]] @@ -66,14 +66,14 @@ [:button {:class (stl/css :toggle-snapshots) :aria-label (tr "workspace.versions.expand-snapshot") :on-click on-toggle-visibility} - [:> i/icon* {:icon-id i/clock :class (stl/css :icon-clock)}] + [:> icon* {:icon-id i/clock :class (stl/css :icon-clock)}] [:> text* {:as "span" :typography t/body-medium :class (stl/css :toggle-message)} (tr "workspace.versions.autosaved.entry" (count snapshots))] - [:> i/icon* {:icon-id i/arrow - :class (stl/css-case :icon-arrow true - :icon-arrow-toggled open?)}]] + [:> icon* {:icon-id i/arrow + :class (stl/css-case :icon-arrow true + :icon-arrow-toggled open?)}]] (when ^boolean open? (for [[idx d] (d/enumerate snapshots)] @@ -82,7 +82,7 @@ [:> date* {:date d :class (stl/css :date) :typography t/body-small}] [:> icon-button* {:class (stl/css :entry-button) :variant "ghost" - :icon "menu" + :icon i/menu :aria-label (tr "workspace.versions.version-menu") :data-index idx :on-click on-menu-click}]]))]])) diff --git a/frontend/src/app/main/ui/exports/assets.cljs b/frontend/src/app/main/ui/exports/assets.cljs index 88f80255f1..6dab22b7f1 100644 --- a/frontend/src/app/main/ui/exports/assets.cljs +++ b/frontend/src/app/main/ui/exports/assets.cljs @@ -16,7 +16,7 @@ [app.main.data.modal :as modal] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.shapes :refer [shape-wrapper]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr c]] @@ -26,13 +26,13 @@ [rumext.v2 :as mf])) (def ^:private neutral-icon - (i/icon-xref :msg-neutral (stl/css :icon))) + (deprecated-icon/icon-xref :msg-neutral (stl/css :icon))) (def ^:private error-icon - (i/icon-xref :delete-text (stl/css :icon))) + (deprecated-icon/icon-xref :delete-text (stl/css :icon))) (def ^:private close-icon - (i/icon-xref :close (stl/css :close-icon))) + (deprecated-icon/icon-xref :close (stl/css :close-icon))) (mf/defc export-multiple-dialog [{:keys [exports title cmd no-selection origin]}] @@ -84,7 +84,7 @@ [:h2 {:class (stl/css :modal-title)} title] [:button {:class (stl/css :modal-close-btn) :on-click cancel-fn} - i/close]] + deprecated-icon/close]] [:* [:div {:class (stl/css :modal-content)} @@ -97,12 +97,12 @@ (cond all-checked? [:span {:class (stl/css-case :checkobox-tick true :global/checked true)} - i/tick] + deprecated-icon/tick] all-unchecked? [:span {:class (stl/css-case :checkobox-tick true :global/uncheked true)}] :else [:span {:class (stl/css-case :checkobox-tick true :global/intermediate true)} - i/remove-icon])]] + deprecated-icon/remove-icon])]] [:div {:class (stl/css :selection-title)} (tr "dashboard.export-multiple.selected" (c (count enabled-exports)) @@ -121,7 +121,7 @@ (if (:enabled export) [:span {:class (stl/css-case :checkobox-tick true :global/checked true)} - i/tick] + deprecated-icon/tick] [:span {:class (stl/css-case :checkobox-tick true :global/uncheked true)}])] diff --git a/frontend/src/app/main/ui/exports/files.cljs b/frontend/src/app/main/ui/exports/files.cljs index 92545be009..0dd31cb174 100644 --- a/frontend/src/app/main/ui/exports/files.cljs +++ b/frontend/src/app/main/ui/exports/files.cljs @@ -15,7 +15,7 @@ [app.main.data.modal :as modal] [app.main.store :as st] [app.main.ui.ds.product.loader :refer [loader*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.worker :as mw] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -61,8 +61,8 @@ [:> loader* {:width 16 :title (tr "labels.loading")}] [:span {:class (stl/css :file-icon)} - (cond (:export-success? file) i/tick - (:export-error? file) i/close)]) + (cond (:export-success? file) deprecated-icon/tick + (:export-error? file) deprecated-icon/close)]) [:div {:class (stl/css :file-name-label)} (:name file)]]]) @@ -146,7 +146,7 @@ [:h2 {:class (stl/css :modal-title)} (tr "dashboard.export.title")] [:button {:class (stl/css :modal-close-btn) - :on-click on-cancel} i/close]] + :on-click on-cancel} deprecated-icon/close]] (cond (= status :prepare) @@ -169,7 +169,7 @@ ;; (tr "dashboard.export.options.merge.title") [:span {:class (stl/css-case :global/checked (= selected type))} (when (= selected type) - i/status-tick)] + deprecated-icon/status-tick)] [:div {:class (stl/css :option-content)} [:h3 {:class (stl/css :modal-subtitle)} (tr (dm/str "dashboard.export.options." (d/name type) ".title"))] diff --git a/frontend/src/app/main/ui/inspect/code.cljs b/frontend/src/app/main/ui/inspect/code.cljs index 7268a120e6..4bff56d439 100644 --- a/frontend/src/app/main/ui/inspect/code.cljs +++ b/frontend/src/app/main/ui/inspect/code.cljs @@ -21,7 +21,7 @@ [app.main.ui.components.copy-button :refer [copy-button*]] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.hooks.resize :refer [use-resize-hook]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.shapes.text.fontfaces :refer [shapes->fonts]] [app.util.code-beautify :as cb] [app.util.code-gen :as cg] @@ -277,7 +277,7 @@ [:span {:class (stl/css-case :collapsabled-icon true :rotated collapsed-css?)} - i/arrow]] + deprecated-icon/arrow]] [:div {:class (stl/css :code-lang-option)} "CSS"] @@ -290,7 +290,7 @@ [:div {:class (stl/css :action-btns)} [:button {:class (stl/css :expand-button) :on-click on-expand} - i/code] + deprecated-icon/code] [:> copy-button* {:data copy-css-fn :class (stl/css :css-copy-btn) @@ -316,7 +316,7 @@ [:span {:class (stl/css-case :collapsabled-icon true :rotated collapsed-markup?)} - i/arrow]] + deprecated-icon/arrow]] [:& radio-buttons {:selected markup-type :on-change set-markup @@ -331,7 +331,7 @@ [:div {:class (stl/css :action-btns)} [:button {:class (stl/css :expand-button) :on-click on-expand} - i/code] + deprecated-icon/code] [:> copy-button* {:data copy-html-fn :class (stl/css :html-copy-btn) diff --git a/frontend/src/app/main/ui/inspect/exports.cljs b/frontend/src/app/main/ui/inspect/exports.cljs index 60df045988..7240ad59ea 100644 --- a/frontend/src/app/main/ui/inspect/exports.cljs +++ b/frontend/src/app/main/ui/inspect/exports.cljs @@ -13,7 +13,7 @@ [app.main.store :as st] [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :refer [tr c]] [app.util.keyboard :as kbd] @@ -140,7 +140,7 @@ :title (tr "workspace.options.export") :class (stl/css :title-spacing-export-viewer)} [:button {:class (stl/css :add-export) - :on-click add-export} i/add]]] + :on-click add-export} deprecated-icon/add]]] (cond (= :multiple exports) @@ -149,7 +149,7 @@ [:div {:class (stl/css :actions)} [:button {:class (stl/css :action-btn) :on-click ()} - i/remove-icon]]] + deprecated-icon/remove-icon]]] (seq @exports) [:div {:class (stl/css :element-set-content)} @@ -183,7 +183,7 @@ [:button {:class (stl/css :action-btn) :on-click (partial delete-export index)} - i/remove-icon]])]) + deprecated-icon/remove-icon]])]) (when (or (= :multiple exports) (seq @exports)) [:button {:on-click (when-not in-progress? on-download) diff --git a/frontend/src/app/main/ui/inspect/right_sidebar.cljs b/frontend/src/app/main/ui/inspect/right_sidebar.cljs index b9cc8dd87c..9964ac6015 100644 --- a/frontend/src/app/main/ui/inspect/right_sidebar.cljs +++ b/frontend/src/app/main/ui/inspect/right_sidebar.cljs @@ -13,9 +13,9 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.ds.controls.select :refer [select*]] - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.inspect.attributes :refer [attributes]] [app.main.ui.inspect.code :refer [code]] [app.main.ui.inspect.selection-feedback :refer [resolve-shapes]] @@ -132,7 +132,7 @@ (if (> (count shapes) 1) [:* [:div {:class (stl/css :layers-icon)} - [:> icon* {:icon-id "layers" :size "s"}]] + [:> icon* {:icon-id i/layers :size "s"}]] [:span {:class (stl/css :layer-title)} (tr "inspect.tabs.code.selected.multiple" (count shapes))]] [:* [:div {:class (stl/css :shape-icon)} @@ -220,12 +220,12 @@ [:div {:class (stl/css :empty)} [:div {:class (stl/css :code-info)} [:span {:class (stl/css :placeholder-icon)} - i/code] + deprecated-icon/code] [:span {:class (stl/css :placeholder-label)} (tr "inspect.empty.select")]] [:div {:class (stl/css :help-info)} [:span {:class (stl/css :placeholder-icon)} - i/help] + deprecated-icon/help] [:span {:class (stl/css :placeholder-label)} (tr "inspect.empty.help")]] [:button {:class (stl/css :more-info-btn) diff --git a/frontend/src/app/main/ui/inspect/styles/style_box.cljs b/frontend/src/app/main/ui/inspect/styles/style_box.cljs index 6b58762c35..6e8d7c0448 100644 --- a/frontend/src/app/main/ui/inspect/styles/style_box.cljs +++ b/frontend/src/app/main/ui/inspect/styles/style_box.cljs @@ -2,7 +2,7 @@ (:require-macros [app.main.style :as stl]) (:require [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -54,7 +54,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "inspect.tabs.styles.panel.copy-style-shorthand") :on-click copy-shorthand - :icon "clipboard"}])] + :icon i/clipboard}])] (when expanded [:div {:class (stl/css :style-box-content) :inert true} [:div {:class (stl/css :style-box-description)} children]])])) diff --git a/frontend/src/app/main/ui/notifications/context_notification.cljs b/frontend/src/app/main/ui/notifications/context_notification.cljs index d1bb0dbfc4..50ec3e138a 100644 --- a/frontend/src/app/main/ui/notifications/context_notification.cljs +++ b/frontend/src/app/main/ui/notifications/context_notification.cljs @@ -10,20 +10,20 @@ [app.common.data :as d] [app.common.data.macros :as dm] [app.main.ui.components.link-button :as lb] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [rumext.v2 :as mf])) (def ^:private neutral-icon - (i/icon-xref :msg-neutral (stl/css :icon))) + (deprecated-icon/icon-xref :msg-neutral (stl/css :icon))) (def ^:private error-icon - (i/icon-xref :delete-text (stl/css :icon))) + (deprecated-icon/icon-xref :delete-text (stl/css :icon))) (def ^:private success-icon - (i/icon-xref :status-tick (stl/css :icon))) + (deprecated-icon/icon-xref :status-tick (stl/css :icon))) (def ^:private info-icon - (i/icon-xref :help (stl/css :icon))) + (deprecated-icon/icon-xref :help (stl/css :icon))) (defn get-icon-by-level [level] diff --git a/frontend/src/app/main/ui/onboarding/newsletter.cljs b/frontend/src/app/main/ui/onboarding/newsletter.cljs index 62a41d00c0..3f5ee18557 100644 --- a/frontend/src/app/main/ui/onboarding/newsletter.cljs +++ b/frontend/src/app/main/ui/onboarding/newsletter.cljs @@ -12,7 +12,7 @@ [app.main.data.profile :as du] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [potok.v2.core :as ptk] @@ -71,7 +71,7 @@ [:div {:class (stl/css :input-wrapper)} [:label {:for "newsletter-updates"} [:span {:class (stl/css-case :global/checked (:newsletter-updates state))} - i/status-tick] + deprecated-icon/status-tick] (tr "onboarding-v2.newsletter.updates") [:input {:type "checkbox" @@ -83,7 +83,7 @@ [:div {:class (stl/css :input-wrapper)} [:label {:for "newsletter-news"} [:span {:class (stl/css-case :global/checked (:newsletter-news state))} - i/status-tick] + deprecated-icon/status-tick] (tr "onboarding-v2.newsletter.news") [:input {:type "checkbox" diff --git a/frontend/src/app/main/ui/onboarding/questions.cljs b/frontend/src/app/main/ui/onboarding/questions.cljs index da576fe4cd..d529456cc1 100644 --- a/frontend/src/app/main/ui/onboarding/questions.cljs +++ b/frontend/src/app/main/ui/onboarding/questions.cljs @@ -15,7 +15,7 @@ [app.main.data.profile :as du] [app.main.store :as st] [app.main.ui.components.forms :as fm] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.i18n :as i18n :refer [tr]] [cuerdas.core :as str] [potok.v2.core :as ptk] @@ -163,7 +163,7 @@ :value "canva" :image "images/form/canva.png"} {:label (tr "labels.invision") :img-width "48px" :img-height "60px" :value "invision" :image "images/form/invision.png"}]) - (conj {:label (tr "labels.other-short") :value "other" :icon i/curve}))) + (conj {:label (tr "labels.other-short") :value "other" :icon deprecated-icon/curve}))) current-experience (dm/get-in @form [:data :experience-design-tool]) @@ -321,7 +321,7 @@ :value "ds" :image "images/form/components.png"} {:label (tr "onboarding.questions.start-with.code") :value "code" :image "images/form/design-and-dev.png"}]) - (conj {:label (tr "labels.other-short") :value "other" :icon i/curve}))) + (conj {:label (tr "labels.other-short") :value "other" :icon deprecated-icon/curve}))) current-start (dm/get-in @form [:data :start-with]) diff --git a/frontend/src/app/main/ui/onboarding/team_choice.cljs b/frontend/src/app/main/ui/onboarding/team_choice.cljs index 77bf3efe24..bb896e49b5 100644 --- a/frontend/src/app/main/ui/onboarding/team_choice.cljs +++ b/frontend/src/app/main/ui/onboarding/team_choice.cljs @@ -14,7 +14,7 @@ [app.main.data.team :as dtm] [app.main.store :as st] [app.main.ui.components.forms :as fm] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.notifications.context-notification :refer [context-notification]] [app.util.i18n :as i18n :refer [tr]] [potok.v2.core :as ptk] @@ -31,23 +31,23 @@ (tr "onboarding.team-modal.create-team-desc")] [:ul {:class (stl/css :team-features)} [:li {:class (stl/css :feature)} - [:span {:class (stl/css :icon)} i/document] + [:span {:class (stl/css :icon)} deprecated-icon/document] [:p {:class (stl/css :modal-desc)} (tr "onboarding.team-modal.create-team-feature-1")]] [:li {:class (stl/css :feature)} - [:span {:class (stl/css :icon)} i/move] + [:span {:class (stl/css :icon)} deprecated-icon/move] [:p {:class (stl/css :modal-desc)} (tr "onboarding.team-modal.create-team-feature-2")]] [:li {:class (stl/css :feature)} - [:span {:class (stl/css :icon)} i/tree] + [:span {:class (stl/css :icon)} deprecated-icon/tree] [:p {:class (stl/css :modal-desc)} (tr "onboarding.team-modal.create-team-feature-3")]] [:li {:class (stl/css :feature)} - [:span {:class (stl/css :icon)} i/user] + [:span {:class (stl/css :icon)} deprecated-icon/user] [:p {:class (stl/css :modal-desc)} (tr "onboarding.team-modal.create-team-feature-4")]] [:li {:class (stl/css :feature)} - [:span {:class (stl/css :icon)} i/tick] + [:span {:class (stl/css :icon)} deprecated-icon/tick] [:p {:class (stl/css :modal-desc)} (tr "onboarding.team-modal.create-team-feature-5")]]]]) diff --git a/frontend/src/app/main/ui/onboarding/templates.cljs b/frontend/src/app/main/ui/onboarding/templates.cljs index 07a8e04632..546bc74b0e 100644 --- a/frontend/src/app/main/ui/onboarding/templates.cljs +++ b/frontend/src/app/main/ui/onboarding/templates.cljs @@ -12,7 +12,7 @@ [app.main.data.modal :as modal] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.http :as http] [app.util.i18n :as i18n :refer [tr]] [app.util.webapi :as wapi] @@ -70,7 +70,7 @@ [:div.modal-header [:div.modal-close-button {:on-click modal/hide! - :data-testid "close-templates-btn"} i/close]] + :data-testid "close-templates-btn"} deprecated-icon/close]] [:div.modal-content [:h3 (tr "onboarding.templates.title")] diff --git a/frontend/src/app/main/ui/settings/access_tokens.cljs b/frontend/src/app/main/ui/settings/access_tokens.cljs index 07de421de2..b75f6ef4e1 100644 --- a/frontend/src/app/main/ui/settings/access_tokens.cljs +++ b/frontend/src/app/main/ui/settings/access_tokens.cljs @@ -15,7 +15,7 @@ [app.main.store :as st] [app.main.ui.components.context-menu-a11y :refer [context-menu*]] [app.main.ui.components.forms :as fm] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] @@ -24,13 +24,13 @@ [rumext.v2 :as mf])) (def ^:private clipboard-icon - (i/icon-xref :clipboard (stl/css :clipboard-icon))) + (deprecated-icon/icon-xref :clipboard (stl/css :clipboard-icon))) (def ^:private close-icon - (i/icon-xref :close (stl/css :close-icon))) + (deprecated-icon/icon-xref :close (stl/css :close-icon))) (def ^:private menu-icon - (i/icon-xref :menu (stl/css :menu-icon))) + (deprecated-icon/icon-xref :menu (stl/css :menu-icon))) (def tokens-ref (l/derived :access-tokens st/state)) diff --git a/frontend/src/app/main/ui/settings/change_email.cljs b/frontend/src/app/main/ui/settings/change_email.cljs index b86bdc17a6..1812ec8a65 100644 --- a/frontend/src/app/main/ui/settings/change_email.cljs +++ b/frontend/src/app/main/ui/settings/change_email.cljs @@ -14,7 +14,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.forms :as fm] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.notifications.context-notification :refer [context-notification]] [app.util.i18n :as i18n :refer [tr]] [beicon.v2.core :as rx] @@ -89,7 +89,7 @@ :data-testid "change-email-title"} (tr "modals.change-email.title")] [:button {:class (stl/css :modal-close-btn) - :on-click modal/hide!} i/close]] + :on-click modal/hide!} deprecated-icon/close]] [:div {:class (stl/css :modal-content)} [:& context-notification diff --git a/frontend/src/app/main/ui/settings/delete_account.cljs b/frontend/src/app/main/ui/settings/delete_account.cljs index 5945c3c178..6f939a6390 100644 --- a/frontend/src/app/main/ui/settings/delete_account.cljs +++ b/frontend/src/app/main/ui/settings/delete_account.cljs @@ -11,7 +11,7 @@ [app.main.data.notifications :as ntf] [app.main.data.profile :as du] [app.main.store :as st] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.notifications.context-notification :refer [context-notification]] [app.util.i18n :as i18n :refer [tr]] [beicon.v2.core :as rx] @@ -42,7 +42,7 @@ [:h2 {:class (stl/css :modal-title)} (tr "modals.delete-account.title")] [:button {:class (stl/css :modal-close-btn) - :on-click modal/hide!} i/close]] + :on-click modal/hide!} deprecated-icon/close]] [:div {:class (stl/css :modal-content)} [:& context-notification diff --git a/frontend/src/app/main/ui/settings/sidebar.cljs b/frontend/src/app/main/ui/settings/sidebar.cljs index ebd2979870..5ebec1e4bc 100644 --- a/frontend/src/app/main/ui/settings/sidebar.cljs +++ b/frontend/src/app/main/ui/settings/sidebar.cljs @@ -15,17 +15,17 @@ [app.main.router :as rt] [app.main.store :as st] [app.main.ui.dashboard.sidebar :refer [profile-section*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] [potok.v2.core :as ptk] [rumext.v2 :as mf])) (def ^:private arrow-icon - (i/icon-xref :arrow (stl/css :arrow-icon))) + (deprecated-icon/icon-xref :arrow (stl/css :arrow-icon))) (def ^:private feedback-icon - (i/icon-xref :feedback (stl/css :feedback-icon))) + (deprecated-icon/icon-xref :feedback (stl/css :feedback-icon))) ;; FIXME: move to common (def ^:private go-settings-profile diff --git a/frontend/src/app/main/ui/settings/subscription.cljs b/frontend/src/app/main/ui/settings/subscription.cljs index 3f0085525c..a9f9fd6f71 100644 --- a/frontend/src/app/main/ui/settings/subscription.cljs +++ b/frontend/src/app/main/ui/settings/subscription.cljs @@ -12,7 +12,7 @@ [app.main.store :as st] [app.main.ui.components.forms :as fm] [app.main.ui.dashboard.subscription :refer [get-subscription-type]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr c]] [potok.v2.core :as ptk] @@ -46,7 +46,7 @@ (for [benefit benefits] [:li {:key (dm/str benefit) :class (stl/css :benefit)} "- " benefit])] (when (and cta-link-with-icon cta-text-with-icon) [:button {:class (stl/css :cta-button :more-info) - :on-click cta-link-with-icon} cta-text-with-icon i/open-link]) + :on-click cta-link-with-icon} cta-text-with-icon deprecated-icon/open-link]) (when (and cta-link cta-text) [:button {:class (stl/css-case :cta-button true :bottom-link (not (and cta-link-trial cta-text-trial))) :on-click cta-link} cta-text]) @@ -121,7 +121,7 @@ [:div {:class (stl/css :modal-overlay)} [:div {:class (stl/css :modal-dialog)} - [:button {:class (stl/css :close-btn) :on-click handle-close-dialog} i/close] + [:button {:class (stl/css :close-btn) :on-click handle-close-dialog} deprecated-icon/close] [:div {:class (stl/css :modal-title :subscription-title)} (tr "subscription.settings.management.dialog.title" subscription-name)] @@ -131,7 +131,7 @@ (tr "subscription.settings.management.dialog.currently-editors-title" (c (count editors)))] [:button {:class (stl/css :cta-button :show-editors-button) :on-click handle-click} (tr "subscription.settings.management.dialog.editors") - [:span {:class (stl/css :icon-dropdown)} i/arrow]] + [:span {:class (stl/css :icon-dropdown)} deprecated-icon/arrow]] (when show-editors-list [:* [:p {:class (stl/css :editors-text :editors-list-warning)} @@ -225,12 +225,12 @@ [:div {:class (stl/css :modal-overlay)} [:div {:class (stl/css :modal-dialog :subscription-success)} - [:button {:class (stl/css :close-btn) :on-click handle-close-dialog} i/close] + [:button {:class (stl/css :close-btn) :on-click handle-close-dialog} deprecated-icon/close] [:div {:class (stl/css :modal-success-content)} [:div {:class (stl/css :modal-start)} (if (= "light" (:theme profile)) - i/logo-subscription-light - i/logo-subscription)] + deprecated-icon/logo-subscription-light + deprecated-icon/logo-subscription)] [:div {:class (stl/css :modal-end)} [:div {:class (stl/css :modal-title)} (tr "subscription.settings.sucess.dialog.title" subscription-name)] @@ -363,7 +363,7 @@ "unlimited" (if subscription-is-trial? [:> plan-card* {:card-title (tr "subscription.settings.unlimited-trial") - :card-title-icon i/character-u + :card-title-icon deprecated-icon/character-u :benefits-title (tr "subscription.settings.benefits.all-professional-benefits"), :benefits [(tr "subscription.settings.unlimited.storage-benefit") (tr "subscription.settings.unlimited.autosave-benefit"), @@ -375,7 +375,7 @@ :editors (-> profile :props :subscription :quantity)}] [:> plan-card* {:card-title (tr "subscription.settings.unlimited") - :card-title-icon i/character-u + :card-title-icon deprecated-icon/character-u :benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits") :benefits [(tr "subscription.settings.unlimited.storage-benefit"), (tr "subscription.settings.unlimited.autosave-benefit"), @@ -387,7 +387,7 @@ "enterprise" (if subscription-is-trial? [:> plan-card* {:card-title (tr "subscription.settings.enterprise-trial") - :card-title-icon i/character-e + :card-title-icon deprecated-icon/character-e :benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits"), :benefits [(tr "subscription.settings.enterprise.unlimited-storage-benefit"), (tr "subscription.settings.enterprise.autosave"), @@ -397,7 +397,7 @@ :cta-text-trial (tr "subscription.settings.add-payment-to-continue") :cta-link-trial go-to-payments}] [:> plan-card* {:card-title (tr "subscription.settings.enterprise") - :card-title-icon i/character-e + :card-title-icon deprecated-icon/character-e :benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits"), :benefits [(tr "subscription.settings.enterprise.unlimited-storage-benefit"), (tr "subscription.settings.enterprise.autosave"), @@ -408,12 +408,12 @@ [:div {:class (stl/css :membership-container)} (when (and subscribed-since (not= subscription-type "professional")) [:div {:class (stl/css :membership)} - [:span {:class (stl/css :subscription-member)} i/crown] + [:span {:class (stl/css :subscription-member)} deprecated-icon/crown] [:span {:class (stl/css :membership-date)} (tr "subscription.settings.support-us-since" subscribed-since)]]) [:div {:class (stl/css :membership)} - [:span {:class (stl/css :penpot-member)} i/user] + [:span {:class (stl/css :penpot-member)} deprecated-icon/user] [:span {:class (stl/css :membership-date)} (tr "subscription.settings.member-since" member-since)]]]] @@ -433,7 +433,7 @@ (when (not= subscription-type "unlimited") [:> plan-card* {:card-title (tr "subscription.settings.unlimited") - :card-title-icon i/character-u + :card-title-icon deprecated-icon/character-u :price-value "$7" :price-period (tr "subscription.settings.price-editor-month") :benefits-title (tr "subscription.settings.benefits.all-professional-benefits") @@ -447,7 +447,7 @@ (when (not= subscription-type "enterprise") [:> plan-card* {:card-title (tr "subscription.settings.enterprise") - :card-title-icon i/character-e + :card-title-icon deprecated-icon/character-e :price-value "$950" :price-period (tr "subscription.settings.price-organization-month") :benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits") diff --git a/frontend/src/app/main/ui/static.cljs b/frontend/src/app/main/ui/static.cljs index 03db808f87..2f6da79171 100644 --- a/frontend/src/app/main/ui/static.cljs +++ b/frontend/src/app/main/ui/static.cljs @@ -22,9 +22,9 @@ [app.main.ui.auth.recovery-request :refer [recovery-request-page recovery-sent-page]] [app.main.ui.auth.register :as register] [app.main.ui.dashboard.sidebar :refer [sidebar*]] - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.viewer.header :as viewer.header] [app.util.dom :as dom] [app.util.i18n :refer [tr]] @@ -49,8 +49,8 @@ [:> raw-svg* {:id "penpot-logo-icon" :class (stl/css :penpot-logo)}] (when profile-id [:div {:class (stl/css :go-back-wrapper)} - [:> icon* {:icon-id "arrow" :class (stl/css :back-arrow)}] [:span (tr "not-found.no-permission.go-dashboard")]])] - [:div {:class (stl/css :deco-before)} i/logo-error-screen] + [:> icon* {:icon-id i/arrow :class (stl/css :back-arrow)}] [:span (tr "not-found.no-permission.go-dashboard")]])] + [:div {:class (stl/css :deco-before)} deprecated-icon/logo-error-screen] (when-not profile-id [:button {:class (stl/css :login-header) :on-click on-nav-root} @@ -61,7 +61,7 @@ [:div {:class (stl/css :deco-after2)} [:span (tr "labels.copyright")] - i/logo-error-screen + deprecated-icon/logo-error-screen [:span (tr "not-found.made-with-love")]]])) (mf/defc invalid-token @@ -122,9 +122,9 @@ [:div {:class (stl/css :modal-close)} [:button {:class (stl/css :modal-close-button) :on-click on-nav-root} - i/close]] + deprecated-icon/close]] [:div {:class (stl/css :login)} - [:div {:class (stl/css :logo)} i/logo] + [:div {:class (stl/css :logo)} deprecated-icon/logo] (case @current-section :login @@ -189,7 +189,7 @@ [:div {:class (stl/css :dialog)} [:div {:class (stl/css :modal-close)} [:button {:class (stl/css :modal-close-button) :on-click on-close} - i/close]] + deprecated-icon/close]] [:div {:class (stl/css :dialog-title)} title] (for [[index content] (d/enumerate content)] [:div {:key index} content]) @@ -444,7 +444,7 @@ is-workspace [:div {:class (stl/css :workspace)} [:div {:class (stl/css :workspace-left)} - i/logo-icon + deprecated-icon/logo-icon [:div [:div {:class (stl/css :project-name)} (tr "not-found.no-permission.project-name")] [:div {:class (stl/css :file-name)} (tr "not-found.no-permission.penpot-file")]]] diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index a78ec4f19f..e50e36a042 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/frontend/src/app/main/ui/viewer.cljs @@ -24,7 +24,7 @@ [app.main.ui.context :as ctx] [app.main.ui.ds.product.loader :refer [loader*]] [app.main.ui.hooks :as hooks] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.modal :refer [modal-container*]] [app.main.ui.viewer.comments :refer [comments-layer comments-sidebar*]] [app.main.ui.viewer.header :as header] @@ -103,19 +103,19 @@ :left-bar left-bar) :on-click go-prev-frame :aria-label (tr "labels.previous")} - i/arrow]) + deprecated-icon/arrow]) (when (< (+ index 1) num-frames) [:button {:class (stl/css-case :viewer-go-next true :comment-sidebar comment-sidebar :right-bar right-bar) :on-click go-next-frame :aria-label (tr "labels.next")} - i/arrow]) + deprecated-icon/arrow]) [:div {:class (stl/css-case :viewer-bottom true :left-bar left-bar)} [:button {:on-click go-first-frame :class (stl/css :reset-button)} - i/reload] + deprecated-icon/reload] [:span {:class (stl/css :counter)} (str/join " / " [(+ index 1) num-frames])] [:span]]])) diff --git a/frontend/src/app/main/ui/viewer/comments.cljs b/frontend/src/app/main/ui/viewer/comments.cljs index eb112cb293..9646c81f8c 100644 --- a/frontend/src/app/main/ui/viewer/comments.cljs +++ b/frontend/src/app/main/ui/viewer/comments.cljs @@ -19,7 +19,7 @@ [app.main.store :as st] [app.main.ui.comments :as cmt] [app.main.ui.components.dropdown :refer [dropdown]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.comments :as wc] [app.main.ui.workspace.viewport.utils :as utils] [app.util.dom :as dom] @@ -69,7 +69,7 @@ :data-testid "viewer-comments-dropdown" :on-click toggle-dropdown} [:span {:class (stl/css :dropdown-title)} (tr "labels.comments")] - [:span {:class (stl/css :icon-dropdown)} i/arrow] + [:span {:class (stl/css :icon-dropdown)} deprecated-icon/arrow] [:& dropdown {:show @show-dropdown? :on-close hide-dropdown} @@ -82,7 +82,7 @@ :on-click update-mode} [:span {:class (stl/css :label)} (tr "labels.show-all-comments")] (when (or (= :all cmode) (nil? cmode)) - [:span {:class (stl/css :icon)} i/tick])] + [:span {:class (stl/css :icon)} deprecated-icon/tick])] [:li {:class (stl/css-case :dropdown-element true @@ -92,7 +92,7 @@ [:span {:class (stl/css :label)} (tr "labels.show-your-comments")] (when (= :yours cmode) [:span {:class (stl/css :icon)} - i/tick])] + deprecated-icon/tick])] [:li {:class (stl/css :separator)}] @@ -104,7 +104,7 @@ [:span {:class (stl/css :label)} (tr "labels.hide-resolved-comments")] (when (= :pending cshow) [:span {:class (stl/css :icon)} - i/tick])] + deprecated-icon/tick])] [:li {:class (stl/css :separator)}] @@ -115,7 +115,7 @@ :on-click update-options} [:span {:class (stl/css :label)} (tr "labels.show-comments-list")] (when show-sidebar? - [:span {:class (stl/css :icon)} i/tick])]]]])) + [:span {:class (stl/css :icon)} deprecated-icon/tick])]]]])) (defn- update-thread-position diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index c0b4dee23d..292db767c1 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/frontend/src/app/main/ui/viewer/header.cljs @@ -16,7 +16,7 @@ [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.exports.assets :refer [export-progress-widget]] [app.main.ui.formats :as fmt] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.viewer.comments :refer [comments-menu]] [app.main.ui.viewer.interactions :refer [flows-menu* interactions-menu*]] [app.util.dom :as dom] @@ -86,13 +86,13 @@ [:button {:class (stl/css :zoom-btn) :on-click on-decrease} [:span {:class (stl/css :zoom-icon)} - i/remove-icon]] + deprecated-icon/remove-icon]] [:p {:class (stl/css :zoom-text)} (fmt/format-percent zoom)] [:button {:class (stl/css :zoom-btn) :on-click on-increase} [:span {:class (stl/css :zoom-icon)} - i/add]]] + deprecated-icon/add]]] [:button {:class (stl/css :reset-btn) :on-click on-zoom-reset} (tr "workspace.header.reset-zoom")]] @@ -190,13 +190,13 @@ (when (:in-team permissions) [:span {:on-click go-to-workspace :class (stl/css :edit-btn)} - i/curve]) + deprecated-icon/curve]) [:span {:title (tr "viewer.header.fullscreen") :class (stl/css-case :fullscreen-btn true :selected fullscreen?) :on-click toggle-fullscreen} - i/expand] + deprecated-icon/expand] (when (:in-team permissions) [:button {:on-click open-share-dialog @@ -240,7 +240,7 @@ :on-click open-dropdown} [:span {:class (stl/css :breadcrumb-text)} (dm/str file-name " / " page-name)] - [:span {:class (stl/css :icon)} i/arrow] + [:span {:class (stl/css :icon)} deprecated-icon/arrow] [:span "/"] [:& dropdown {:show @show-dropdown? :on-close close-dropdown} @@ -254,15 +254,15 @@ [:span {:class (stl/css :label)} (get-in file [:data :pages-index id :name])] (when (= page-id id) - [:span {:class (stl/css :icon-check)} i/tick])])]]] + [:span {:class (stl/css :icon-check)} deprecated-icon/tick])])]]] [:div {:class (stl/css :current-frame) :id "current-frame" :on-click toggle-thumbnails} [:span {:class (stl/css :frame-name)} frame-name] - [:span {:class (stl/css :icon)} i/arrow]]]])) + [:span {:class (stl/css :icon)} deprecated-icon/arrow]]]])) (def ^:private penpot-logo-icon - (i/icon-xref :penpot-logo-icon (stl/css :logo-icon))) + (deprecated-icon/icon-xref :penpot-logo-icon (stl/css :logo-icon))) (mf/defc header @@ -330,7 +330,7 @@ :class (stl/css-case :mode-zone-btn true :selected (= section :interactions)) :title (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))} - i/play] + deprecated-icon/play] (when (or (:in-team permissions) (= (:who-comment permissions) "all")) @@ -339,7 +339,7 @@ :class (stl/css-case :mode-zone-btn true :selected (= section :comments)) :title (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))} - i/comments]) + deprecated-icon/comments]) (when (or (:in-team permissions) (and (= (:type permissions) :share-link) @@ -348,7 +348,7 @@ :class (stl/css-case :mode-zone-btn true :selected (= section :inspect)) :title (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))} - i/code])] + deprecated-icon/code])] [:& header-options {:section section :permissions permissions diff --git a/frontend/src/app/main/ui/viewer/interactions.cljs b/frontend/src/app/main/ui/viewer/interactions.cljs index c96535b0ee..ae4bec1f1e 100644 --- a/frontend/src/app/main/ui/viewer/interactions.cljs +++ b/frontend/src/app/main/ui/viewer/interactions.cljs @@ -20,7 +20,7 @@ [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.hooks :as h] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.viewer.shapes :as shapes] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -249,9 +249,9 @@ (when flows [:div {:on-click toggle-dropdown :class (stl/css :view-options)} - [:span {:class (stl/css :icon)} i/play] + [:span {:class (stl/css :icon)} deprecated-icon/play] [:span {:class (stl/css :dropdown-title)} (:name current-flow)] - [:span {:class (stl/css :icon-dropdown)} i/arrow] + [:span {:class (stl/css :icon-dropdown)} deprecated-icon/arrow] [:& dropdown {:show show-dropdown? :on-close hide-dropdown} [:ul {:class (stl/css :dropdown)} @@ -265,7 +265,7 @@ :on-click select-flow} [:span {:class (stl/css :label)} (:name flow)] (when (= flow-id (:id current-flow)) - [:span {:class (stl/css :icon)} i/tick])])]]]))) + [:span {:class (stl/css :icon)} deprecated-icon/tick])])]]]))) (mf/defc interactions-menu* {::mf/props :obj} @@ -286,7 +286,7 @@ [:div {:on-click toggle-dropdown :class (stl/css :view-options)} [:span {:class (stl/css :dropdown-title)} (tr "viewer.header.interactions")] - [:span {:class (stl/css :icon-dropdown)} i/arrow] + [:span {:class (stl/css :icon-dropdown)} deprecated-icon/arrow] [:& dropdown {:show @show-dropdown? :on-close hide-dropdown} [:ul {:class (stl/css :dropdown)} @@ -297,7 +297,7 @@ [:span {:class (stl/css :label)} (tr "viewer.header.dont-show-interactions")] (when (= interactions-mode :hide) - [:span {:class (stl/css :icon)} i/tick])] + [:span {:class (stl/css :icon)} deprecated-icon/tick])] [:li {:class (stl/css-case :dropdown-element true :selected (= interactions-mode :show)) @@ -305,7 +305,7 @@ :data-mode "show"} [:span {:class (stl/css :label)} (tr "viewer.header.show-interactions")] (when (= interactions-mode :show) - [:span {:class (stl/css :icon)} i/tick])] + [:span {:class (stl/css :icon)} deprecated-icon/tick])] @@ -316,7 +316,7 @@ [:span {:class (stl/css :label)} (tr "viewer.header.show-interactions-on-click")] (when (= interactions-mode :show-on-click) - [:span {:class (stl/css :icon)} i/tick])]]]])) + [:span {:class (stl/css :icon)} deprecated-icon/tick])]]]])) (defn animate-go-to-frame [animation current-viewport orig-viewport current-size orig-size wrapper-size] diff --git a/frontend/src/app/main/ui/viewer/login.cljs b/frontend/src/app/main/ui/viewer/login.cljs index e179048884..a23a8245d4 100644 --- a/frontend/src/app/main/ui/viewer/login.cljs +++ b/frontend/src/app/main/ui/viewer/login.cljs @@ -13,7 +13,7 @@ [app.main.ui.auth.login :refer [login-methods]] [app.main.ui.auth.recovery-request :refer [recovery-request-page]] [app.main.ui.auth.register :refer [register-methods register-success-page terms-register register-validate-form]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -69,7 +69,7 @@ [:h2 {:class (stl/css :modal-title)} (tr "labels.continue-with-penpot")] [:button {:class (stl/css :modal-close-btn) :title (tr "labels.close") - :on-click close} i/close]] + :on-click close} deprecated-icon/close]] [:div {:class (stl/css :modal-content)} (case current-section diff --git a/frontend/src/app/main/ui/viewer/share_link.cljs b/frontend/src/app/main/ui/viewer/share_link.cljs index 1db0b902b0..0a53d77e69 100644 --- a/frontend/src/app/main/ui/viewer/share_link.cljs +++ b/frontend/src/app/main/ui/viewer/share_link.cljs @@ -20,7 +20,7 @@ [app.main.router :as rt] [app.main.store :as st] [app.main.ui.components.select :refer [select]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.webapi :as wapi] @@ -174,7 +174,7 @@ [:button {:class (stl/css :modal-close-button) :on-click on-close :title (tr "labels.close")} - i/close]] + deprecated-icon/close]] [:div {:class (stl/css :modal-content)} [:div {:class (stl/css :share-link-section)} (when (and (not confirm?) (some? current-link)) @@ -188,7 +188,7 @@ [:button {:class (stl/css :copy-button) :title (tr "viewer.header.share.copy-link") :on-click copy-link} - i/clipboard]]) + deprecated-icon/clipboard]]) [:div {:class (stl/css :hint-wrapper)} (when (not ^boolean confirm?) @@ -229,7 +229,7 @@ :on-click toggle-perms-visibility} [:span {:class (stl/css-case :icon true :rotated perms-visible?)} - i/arrow] + deprecated-icon/arrow] (tr "common.share-link.manage-ops")] (when ^boolean perms-visible? @@ -249,7 +249,7 @@ :class (stl/css-case :global/checked true)} [:span {:class (stl/css :checked)} - i/status-tick] + deprecated-icon/status-tick] (:name current-page)] @@ -267,7 +267,7 @@ :class (stl/css :select-all-label)} [:span {:class (stl/css-case :global/checked all-selected?)} (when all-selected? - i/status-tick)] + deprecated-icon/status-tick)] (tr "common.share-link.view-all") [:input {:type "checkbox" :id "view-all" @@ -285,7 +285,7 @@ [:label {:for (dm/str "page-" id)} [:span {:class (stl/css-case :global/checked (contains? selected id))} (when (contains? selected id) - i/status-tick)] + deprecated-icon/status-tick)] name (when (= current-page-id id) [:div {:class (stl/css :current-tag)} (dm/str " " (tr "common.share-link.current-tag"))]) diff --git a/frontend/src/app/main/ui/viewer/thumbnails.cljs b/frontend/src/app/main/ui/viewer/thumbnails.cljs index 3978d83823..62abb6b607 100644 --- a/frontend/src/app/main/ui/viewer/thumbnails.cljs +++ b/frontend/src/app/main/ui/viewer/thumbnails.cljs @@ -14,7 +14,7 @@ [app.main.data.viewer :as dv] [app.main.render :as render] [app.main.store :as st] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.object :as obj] @@ -64,9 +64,9 @@ [:div {:class (stl/css :thumbnails-content)} [:button {:class (stl/css :left-scroll-handler) - :on-click on-left-arrow-click} i/arrow] + :on-click on-left-arrow-click} deprecated-icon/arrow] [:button {:class (stl/css :right-scroll-handler) - :on-click on-right-arrow-click} i/arrow] + :on-click on-right-arrow-click} deprecated-icon/arrow] [:div {:class (stl/css :thumbnails-list) :ref container @@ -82,9 +82,9 @@ (tr "labels.num-of-frames" (i18n/c total))] [:span {:class (stl/css :actions)} [:button {:class (stl/css :expand-btn) - :on-click on-toggle-expand} i/arrow] + :on-click on-toggle-expand} deprecated-icon/arrow] [:button {:class (stl/css :close-btn) - :on-click on-close} i/close]]]) + :on-click on-close} deprecated-icon/close]]]) (mf/defc thumbnail-item {::mf/wrap [mf/memo diff --git a/frontend/src/app/main/ui/workspace/color_palette.cljs b/frontend/src/app/main/ui/workspace/color_palette.cljs index f96ca2579a..7a8dae308c 100644 --- a/frontend/src/app/main/ui/workspace/color_palette.cljs +++ b/frontend/src/app/main/ui/workspace/color_palette.cljs @@ -17,7 +17,7 @@ [app.main.ui.components.color-bullet :as cb] [app.main.ui.context :as ctx] [app.main.ui.ds.utilities.swatch :refer [swatch*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.color :as uc] [app.util.dom :as dom] [app.util.i18n :refer [tr]] @@ -134,7 +134,7 @@ (when show-arrows? [:button {:class (stl/css :left-arrow) :disabled (= offset 0) - :on-click on-left-arrow-click} i/arrow]) + :on-click on-left-arrow-click} deprecated-icon/arrow]) [:div {:class (stl/css :color-palette-content) :ref container :on-wheel on-scroll} @@ -155,7 +155,7 @@ (when show-arrows? [:button {:class (stl/css :right-arrow) :disabled (= offset max-offset) - :on-click on-right-arrow-click} i/arrow])])) + :on-click on-right-arrow-click} deprecated-icon/arrow])])) (mf/defc recent-colors-palette* {::mf/private true} diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs index 4159c06635..a1550df877 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs @@ -12,7 +12,7 @@ [app.main.ui.components.color-bullet :as cb] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.context :as ctx] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -66,7 +66,7 @@ (dm/str "(" (count colors) ")")]] (when (= selected id) [:span {:class (stl/css :icon-wrapper)} - i/tick])] + deprecated-icon/tick])] [:div {:class (stl/css :color-sample) :style {:--bullet-size "20px"}} (for [color colors] @@ -91,7 +91,7 @@ (when (= selected :file) [:span {:class (stl/css :icon-wrapper)} - i/tick])] + deprecated-icon/tick])] [:div {:class (stl/css :color-sample) :style {:--bullet-size "20px"}} (for [color local-colors] @@ -114,7 +114,7 @@ (when (= selected :recent) [:span {:class (stl/css :icon-wrapper)} - i/tick])] + deprecated-icon/tick])] [:div {:class (stl/css :color-sample) :style {:--bullet-size "20px"}} diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index b663d12fd5..dec18b21de 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -27,10 +27,10 @@ [app.main.ui.components.file-uploader :refer [file-uploader]] [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.select :refer [select]] - [app.main.ui.ds.foundations.assets.icon :as ic] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]] [app.main.ui.hooks :as hooks] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]] [app.main.ui.workspace.colorpicker.gradients :refer [gradients*]] [app.main.ui.workspace.colorpicker.harmony :refer [harmony-selector]] @@ -344,13 +344,13 @@ tabs (mf/with-memo [] [{:aria-label (tr "workspace.libraries.colors.rgba") - :icon ic/rgba + :icon i/rgba :id "ramp"} {:aria-label "Harmony" - :icon ic/rgba-complementary + :icon i/rgba-complementary :id "harmony"} {:aria-label "HSVA" - :icon ic/hsva + :icon i/hsva :id "hsva"}])] ;; Initialize colorpicker state @@ -405,7 +405,7 @@ [:button {:class (stl/css-case :picker-btn true :selected picking-color?) :on-click handle-click-picker} - i/picker])] + deprecated-icon/picker])] (when (= selected-mode :gradient) [:> gradients* @@ -438,7 +438,7 @@ :class (stl/css-case :global/checked keep-aspect-ratio?)} [:span {:class (stl/css-case :global/checked keep-aspect-ratio?)} (when keep-aspect-ratio? - i/status-tick)] + deprecated-icon/status-tick)] (tr "media.keep-aspect-ratio") [:input {:type "checkbox" :id "keep-aspect-ratio" diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs index 1d37da025f..1db83d6c01 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs @@ -18,6 +18,7 @@ [app.main.ui.components.reorder-handler :refer [reorder-handler*]] [app.main.ui.components.select :refer [select]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.formats :as fmt] [app.main.ui.hooks :as h] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]] @@ -338,16 +339,16 @@ :aria-label "Rotate gradient" :on-click handle-rotate-gradient :icon-class (stl/css :rotate-icon) - :icon "reload"}] + :icon i/reload}] [:> icon-button* {:variant "ghost" :aria-label "Reverse gradient" :on-click handle-reverse-gradient - :icon "switch"}] + :icon i/switch}] [:> icon-button* {:variant "ghost" :aria-label "Add stop" :disabled add-stop-disabled? :on-click handle-add-stop - :icon "add"}]]] + :icon i/add}]]] [:div {:class (stl/css :gradient-stops-list)} [:& h/sortable-container {} diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs index 6e2329afb2..e565a05754 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs @@ -21,7 +21,7 @@ [app.main.ui.context :as ctx] [app.main.ui.hooks :as h] [app.main.ui.hooks.resize :as r] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [potok.v2.core :as ptk] @@ -132,11 +132,11 @@ (when (= selected :file) [:button {:class (stl/css :add-color-btn) :on-click on-add-library-color} - i/add]) + deprecated-icon/add]) [:button {:class (stl/css :palette-btn) :on-click toggle-palette} - i/swatches] + deprecated-icon/swatches] (for [color current-colors] [:& cb/color-bullet diff --git a/frontend/src/app/main/ui/workspace/comments.cljs b/frontend/src/app/main/ui/workspace/comments.cljs index b828746a13..f08e5fcbb2 100644 --- a/frontend/src/app/main/ui/workspace/comments.cljs +++ b/frontend/src/app/main/ui/workspace/comments.cljs @@ -17,7 +17,8 @@ [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.context :as ctx] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.icons :as i] + [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -53,25 +54,25 @@ :on-click update-mode} [:span {:class (stl/css :label)} (tr "labels.show-all-comments")] - [:span {:class (stl/css :icon)} i/tick]] + [:span {:class (stl/css :icon)} deprecated-icon/tick]] [:li {:class (stl/css-case :dropdown-item true :selected (= :yours cmode)) :data-value "yours" :on-click update-mode} [:span {:class (stl/css :label)} (tr "labels.show-your-comments")] - [:span {:class (stl/css :icon)} i/tick]] + [:span {:class (stl/css :icon)} deprecated-icon/tick]] [:li {:class (stl/css-case :dropdown-item true :selected (= :mentions cmode)) :data-value "mentions" :on-click update-mode} [:span {:class (stl/css :label)} (tr "labels.show-mentions")] - [:span {:class (stl/css :icon)} i/tick]] + [:span {:class (stl/css :icon)} deprecated-icon/tick]] [:li {:class (stl/css :separator)}] [:li {:class (stl/css-case :dropdown-item true :selected (= :pending cshow)) :on-click update-show} [:span {:class (stl/css :label)} (tr "labels.hide-resolved-comments")] - [:span {:class (stl/css :icon)} i/tick]]])) + [:span {:class (stl/css :icon)} deprecated-icon/tick]]])) (mf/defc comments-sidebar* [{:keys [profiles threads page-id from-viewer]}] @@ -127,7 +128,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "labels.close") :on-click close-section - :icon "close"}]] + :icon i/close}]] [:button {:class (stl/css :mode-dropdown-wrapper) :on-click toggle-mode-selector} @@ -137,7 +138,7 @@ (nil :all) (tr "labels.show-all-comments") :yours (tr "labels.show-your-comments") :mentions (tr "labels.show-mentions"))] - [:div {:class (stl/css :arrow-icon)} i/arrow]] + [:div {:class (stl/css :arrow-icon)} deprecated-icon/arrow]] [:& dropdown {:show options? :on-close #(reset! state* false)} @@ -159,6 +160,6 @@ :key (:page-id tgroup)}])] [:div {:class (stl/css :thread-group-placeholder)} - [:span {:class (stl/css :placeholder-icon)} i/comments] + [:span {:class (stl/css :placeholder-icon)} deprecated-icon/comments] [:span {:class (stl/css :placeholder-label)} (tr "labels.no-comments-available")]])]])) diff --git a/frontend/src/app/main/ui/workspace/context_menu.cljs b/frontend/src/app/main/ui/workspace/context_menu.cljs index 28a683a36b..6695d46f3b 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/context_menu.cljs @@ -32,7 +32,7 @@ [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.context :as ctx] - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.workspace.sidebar.assets.common :as cmm] [app.util.dom :as dom] [app.util.i18n :refer [tr] :as i18n] @@ -110,7 +110,7 @@ [:span {:class (stl/css :icon-wrapper)} (if is-selected [:span {:class (stl/css :selected-icon)} - [:> icon* {:icon-id "tick" :size "s"}]] + [:> icon* {:icon-id i/tick :size "s"}]] [:span {:class (stl/css :selected-icon)}]) [:span {:class (stl/css :shape-icon)} [:> icon* {:icon-id icon :size "s"}]]] @@ -131,7 +131,7 @@ (when (> (count children) 1) [:span {:class (stl/css :submenu-icon)} - [:> icon* {:icon-id "arrow" :size "s"}]]) + [:> icon* {:icon-id i/arrow :size "s"}]]) (when (> (count children) 1) [:ul {:class (stl/css :workspace-context-submenu) diff --git a/frontend/src/app/main/ui/workspace/left_header.cljs b/frontend/src/app/main/ui/workspace/left_header.cljs index 44cad87617..914d4ef1a8 100644 --- a/frontend/src/app/main/ui/workspace/left_header.cljs +++ b/frontend/src/app/main/ui/workspace/left_header.cljs @@ -16,7 +16,7 @@ [app.main.router :as rt] [app.main.store :as st] [app.main.ui.context :as ctx] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.main-menu :as main-menu] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -92,7 +92,7 @@ [:header {:class (dm/str class " " (stl/css :workspace-header-left))} [:a {:on-click go-back - :class (stl/css :main-icon)} i/logo-icon] + :class (stl/css :main-icon)} deprecated-icon/logo-icon] [:div {:alt (tr "workspace.sitemap") :class (stl/css :project-tree)} [:div @@ -126,14 +126,14 @@ :error (tr "workspace.header.save-error") nil)} (case persistence-status - :pending i/status-alert - :saving i/status-alert - :saved i/status-tick - :error i/status-wrong + :pending deprecated-icon/status-alert + :saving deprecated-icon/status-alert + :saved deprecated-icon/status-tick + :error deprecated-icon/status-wrong nil)] [:div {:class (stl/css :file-name-label)} file-name]])] (when ^boolean shared? - [:span {:class (stl/css :shared-badge)} i/library]) + [:span {:class (stl/css :shared-badge)} deprecated-icon/library]) [:div {:class (stl/css :menu-section)} [:& main-menu/menu {:layout layout diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index 5076695d73..379b98242e 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -29,9 +29,10 @@ [app.main.ui.components.search-bar :refer [search-bar*]] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.context :as ctx] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]] [app.main.ui.hooks :as h] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.color :as uc] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -41,16 +42,16 @@ [rumext.v2 :as mf])) (def ^:private close-icon - (i/icon-xref :close (stl/css :close-icon))) + (deprecated-icon/icon-xref :close (stl/css :close-icon))) (def ^:private add-icon - (i/icon-xref :add (stl/css :add-icon))) + (deprecated-icon/icon-xref :add (stl/css :add-icon))) (def ^:private detach-icon - (i/icon-xref :detach (stl/css :detach-icon))) + (deprecated-icon/icon-xref :detach (stl/css :detach-icon))) (def ^:private library-icon - (i/icon-xref :library (stl/css :library-icon))) + (deprecated-icon/icon-xref :library (stl/css :library-icon))) (defn- get-library-summary "Given a library data return a summary representation of this library" @@ -332,7 +333,7 @@ [:> search-bar* {:on-change change-search-term :value search-term :placeholder (tr "workspace.libraries.search-shared-libraries") - :icon-id "search"}] + :icon-id i/search}] (if (seq shared-libraries) [:div {:class (stl/css :section-list-shared)} @@ -658,7 +659,7 @@ [:div {:class (stl/css :modal-content)} [:div {:class (stl/css :info-content)} [:div {:class (stl/css :info-block)} - [:div {:class (stl/css :info-icon)} i/v2-icon-1] + [:div {:class (stl/css :info-icon)} deprecated-icon/v2-icon-1] [:div {:class (stl/css :info-block-title)} "One physical source of truth"] [:div {:class (stl/css :info-block-content)} @@ -667,7 +668,7 @@ "allows better control and synchronization."]] [:div {:class (stl/css :info-block)} - [:div {:class (stl/css :info-icon)} i/v2-icon-2] + [:div {:class (stl/css :info-icon)} deprecated-icon/v2-icon-2] [:div {:class (stl/css :info-block-title)} "Swap components"] [:div {:class (stl/css :info-block-content)} @@ -676,7 +677,7 @@ "variations, or updating elements without extensive manual adjustments."]] [:div {:class (stl/css :info-block)} - [:div {:class (stl/css :info-icon)} i/v2-icon-3] + [:div {:class (stl/css :info-icon)} deprecated-icon/v2-icon-3] [:div {:class (stl/css :info-block-title)} "Graphic assets no longer exist"] [:div {:class (stl/css :info-block-content)} @@ -685,7 +686,7 @@ "what should go in each typology."]] [:div {:class (stl/css :info-block)} - [:div {:class (stl/css :info-icon)} i/v2-icon-4] + [:div {:class (stl/css :info-icon)} deprecated-icon/v2-icon-4] [:div {:class (stl/css :info-block-title)} "Main components page"] [:div {:class (stl/css :info-block-content)} diff --git a/frontend/src/app/main/ui/workspace/main_menu.cljs b/frontend/src/app/main/ui/workspace/main_menu.cljs index f517bf34a8..e8adccd671 100644 --- a/frontend/src/app/main/ui/workspace/main_menu.cljs +++ b/frontend/src/app/main/ui/workspace/main_menu.cljs @@ -28,12 +28,15 @@ [app.main.features :as features] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.components.dropdown-menu :refer [dropdown-menu* dropdown-menu-item*]] + [app.main.ui.components.dropdown-menu :refer [dropdown-menu* + dropdown-menu-item*]] [app.main.ui.context :as ctx] - [app.main.ui.dashboard.subscription :refer [main-menu-power-up* get-subscription-type]] + [app.main.ui.dashboard.subscription :refer [get-subscription-type + main-menu-power-up*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.hooks.resize :as r] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.plugins.register :as preg] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -752,7 +755,7 @@ [:span {:class (stl/css :item-name)} name] (when-not can-open? [:span {:class (stl/css :item-icon) - :title (tr "workspace.plugins.error.need-editor")} i/help])]))]))) + :title (tr "workspace.plugins.error.need-editor")} deprecated-icon/help])]))]))) (mf/defc menu {::mf/props :obj} @@ -844,7 +847,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "shortcut-subsection.main-menu") :on-click open-menu - :icon "menu"}] + :icon i/menu}] [:> dropdown-menu* {:show show-menu? :id "workspace-menu" @@ -859,7 +862,7 @@ :data-testid "file" :id "file-menu-file"} [:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.file")] - [:span {:class (stl/css :open-arrow)} i/arrow]] + [:span {:class (stl/css :open-arrow)} deprecated-icon/arrow]] [:> dropdown-menu-item* {:class (stl/css :menu-item) :on-click on-menu-click @@ -870,7 +873,7 @@ :data-testid "edit" :id "file-menu-edit"} [:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.edit")] - [:span {:class (stl/css :open-arrow)} i/arrow]] + [:span {:class (stl/css :open-arrow)} deprecated-icon/arrow]] [:> dropdown-menu-item* {:class (stl/css :menu-item) :on-click on-menu-click @@ -881,7 +884,7 @@ :data-testid "view" :id "file-menu-view"} [:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.view")] - [:span {:class (stl/css :open-arrow)} i/arrow]] + [:span {:class (stl/css :open-arrow)} deprecated-icon/arrow]] [:> dropdown-menu-item* {:class (stl/css :menu-item) :on-click on-menu-click @@ -892,7 +895,7 @@ :data-testid "preferences" :id "file-menu-preferences"} [:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.preferences")] - [:span {:class (stl/css :open-arrow)} i/arrow]] + [:span {:class (stl/css :open-arrow)} deprecated-icon/arrow]] (when (features/active-feature? @st/state "plugins/runtime") [:> dropdown-menu-item* {:class (stl/css :menu-item) @@ -904,7 +907,7 @@ :data-testid "plugins" :id "file-menu-plugins"} [:span {:class (stl/css :item-name)} (tr "workspace.plugins.menu.title")] - [:span {:class (stl/css :open-arrow)} i/arrow]]) + [:span {:class (stl/css :open-arrow)} deprecated-icon/arrow]]) [:div {:class (stl/css :separator)}] [:> dropdown-menu-item* {:class (stl/css-case :menu-item true) @@ -916,7 +919,7 @@ :data-testid "help-info" :id "file-menu-help-info"} [:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.help-info")] - [:span {:class (stl/css :open-arrow)} i/arrow]] + [:span {:class (stl/css :open-arrow)} deprecated-icon/arrow]] (when (and (contains? cf/flags :subscriptions) (not= "enterprise" subscription-type)) [:> main-menu-power-up* {:close-sub-menu close-sub-menu}]) diff --git a/frontend/src/app/main/ui/workspace/nudge.cljs b/frontend/src/app/main/ui/workspace/nudge.cljs index 34dc804cba..d9589fbfad 100644 --- a/frontend/src/app/main/ui/workspace/nudge.cljs +++ b/frontend/src/app/main/ui/workspace/nudge.cljs @@ -12,7 +12,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.numeric-input :refer [numeric-input*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as k] @@ -45,7 +45,7 @@ [:div {:class (stl/css :modal-header)} [:h2 {:class (stl/css :modal-title)} (tr "modals.nudge-title")] [:button {:class (stl/css :modal-close-btn) - :on-click modal/hide!} i/close]] + :on-click modal/hide!} deprecated-icon/close]] [:div {:class (stl/css :modal-content)} [:div {:class (stl/css :input-wrapper)} [:label {:class (stl/css :modal-msg) diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs index 1dd3dcaae6..d5ad41b724 100644 --- a/frontend/src/app/main/ui/workspace/palette.cljs +++ b/frontend/src/app/main/ui/workspace/palette.cljs @@ -19,7 +19,7 @@ [app.main.ui.context :as ctx] [app.main.ui.hooks :as h] [app.main.ui.hooks.resize :as r] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.color-palette :refer [color-palette*]] [app.main.ui.workspace.color-palette-ctx-menu :refer [color-palette-ctx-menu*]] [app.main.ui.workspace.text-palette :refer [text-palette]] @@ -169,7 +169,7 @@ :class (stl/css-case :palette-btn true :selected color-palette?) :on-click on-select-color-palette} - i/drop-icon]] + deprecated-icon/drop-icon]] [:li {:class (stl/css :palette-item)} [:button {:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette)) @@ -177,14 +177,14 @@ :class (stl/css-case :palette-btn true :selected text-palette?) :on-click on-select-text-palette} - i/text-palette]]] + deprecated-icon/text-palette]]] (if any-palette? [:* [:button {:class (stl/css :palette-actions) :on-click #(swap! state* update :show-menu not)} - i/menu] + deprecated-icon/menu] [:div {:class (stl/css :palette) :ref container} (when text-palette? diff --git a/frontend/src/app/main/ui/workspace/plugins.cljs b/frontend/src/app/main/ui/workspace/plugins.cljs index ced25ea83f..ccdcd83a3a 100644 --- a/frontend/src/app/main/ui/workspace/plugins.cljs +++ b/frontend/src/app/main/ui/workspace/plugins.cljs @@ -19,7 +19,8 @@ [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.icons :as i] + [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.icons :as deprecated-icon] [app.plugins.register :as preg] [app.util.avatars :as avatars] [app.util.dom :as dom] @@ -30,7 +31,7 @@ [rumext.v2 :as mf])) (def ^:private close-icon - (i/icon-xref :close (stl/css :close-icon))) + (deprecated-icon/icon-xref :close (stl/css :close-icon))) (defn icon-url "Creates an sanitizes de icon URL to display" @@ -85,7 +86,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.plugins.remove-plugin") :on-click handle-delete-click - :icon "delete"}]])) + :icon i/delete}]])) (mf/defc plugin-management-dialog {::mf/register modal/components @@ -200,13 +201,13 @@ (if (empty? plugins-state) [:div {:class (stl/css :plugins-empty)} - [:div {:class (stl/css :plugins-empty-logo)} i/puzzle] + [:div {:class (stl/css :plugins-empty-logo)} deprecated-icon/puzzle] [:div {:class (stl/css :plugins-empty-text)} (tr "workspace.plugins.empty-plugins")] [:a {:class (stl/css :plugins-link) :href cfg/plugins-list-uri :target "_blank" :on-click #(st/emit! (ptk/event ::ev/event {::ev/name "open-plugins-list"}))} - (tr "workspace.plugins.plugin-list-link") i/external-link]] + (tr "workspace.plugins.plugin-list-link") deprecated-icon/external-link]] [:* [:> title-bar* {:collapsable false @@ -227,60 +228,60 @@ (cond (contains? permissions "content:write") [:div {:class (stl/css :permissions-list-entry)} - i/oauth-1 + deprecated-icon/oauth-1 [:p {:class (stl/css :permissions-list-text)} (tr "workspace.plugins.permissions.content-write")]] (contains? permissions "content:read") [:div {:class (stl/css :permissions-list-entry)} - i/oauth-1 + deprecated-icon/oauth-1 [:p {:class (stl/css :permissions-list-text)} (tr "workspace.plugins.permissions.content-read")]]) (cond (contains? permissions "user:read") [:div {:class (stl/css :permissions-list-entry)} - i/oauth-2 + deprecated-icon/oauth-2 [:p {:class (stl/css :permissions-list-text)} (tr "workspace.plugins.permissions.user-read")]]) (cond (contains? permissions "library:write") [:div {:class (stl/css :permissions-list-entry)} - i/oauth-3 + deprecated-icon/oauth-3 [:p {:class (stl/css :permissions-list-text)} (tr "workspace.plugins.permissions.library-write")]] (contains? permissions "library:read") [:div {:class (stl/css :permissions-list-entry)} - i/oauth-3 + deprecated-icon/oauth-3 [:p {:class (stl/css :permissions-list-text)} (tr "workspace.plugins.permissions.library-read")]]) (cond (contains? permissions "comment:write") [:div {:class (stl/css :permissions-list-entry)} - i/oauth-1 + deprecated-icon/oauth-1 [:p {:class (stl/css :permissions-list-text)} (tr "workspace.plugins.permissions.comment-write")]] (contains? permissions "comment:read") [:div {:class (stl/css :permissions-list-entry)} - i/oauth-1 + deprecated-icon/oauth-1 [:p {:class (stl/css :permissions-list-text)} (tr "workspace.plugins.permissions.comment-read")]]) (cond (contains? permissions "allow:downloads") [:div {:class (stl/css :permissions-list-entry)} - i/oauth-1 + deprecated-icon/oauth-1 [:p {:class (stl/css :permissions-list-text)} (tr "workspace.plugins.permissions.allow-download")]]) (cond (contains? permissions "allow:localstorage") [:div {:class (stl/css :permissions-list-entry)} - i/oauth-1 + deprecated-icon/oauth-1 [:p {:class (stl/css :permissions-list-text)} (tr "workspace.plugins.permissions.allow-localstorage")]])]) diff --git a/frontend/src/app/main/ui/workspace/right_header.cljs b/frontend/src/app/main/ui/workspace/right_header.cljs index 994876adbb..67391535fa 100644 --- a/frontend/src/app/main/ui/workspace/right_header.cljs +++ b/frontend/src/app/main/ui/workspace/right_header.cljs @@ -21,9 +21,10 @@ [app.main.ui.context :as ctx] [app.main.ui.dashboard.team] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.exports.assets :refer [export-progress-widget]] [app.main.ui.formats :as fmt] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.presence :refer [active-sessions]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -83,12 +84,12 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "shortcuts.decrease-zoom") :on-click on-decrease - :icon "remove"}] + :icon i/remove}] [:p {:class (stl/css :zoom-text)} zoom] [:> icon-button* {:variant "ghost" :aria-label (tr "shortcuts.increase-zoom") :on-click on-increase - :icon "add"}]] + :icon i/add}]] [:button {:class (stl/css :reset-btn) :on-click on-zoom-reset} (tr "workspace.header.reset-zoom")]] @@ -220,7 +221,7 @@ :on-click toggle-comments :data-tool "comments" :style {:position "relative"}} - i/comments + deprecated-icon/comments (when ^boolean has-unread-comments? [:div {:class (stl/css :unread)}])]] @@ -232,16 +233,16 @@ :class (stl/css-case :selected (contains? layout :document-history) :history-button true) :on-click toggle-history} - i/history]]) + deprecated-icon/history]]) (when display-share-button? [:a {:class (stl/css :viewer-btn) :title (tr "workspace.header.share") :on-click open-share-dialog} - i/share]) + deprecated-icon/share]) [:a {:class (stl/css :viewer-btn) :title (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer)) :on-click nav-to-viewer} - i/play]])) + deprecated-icon/play]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index 2aa71d9f1c..a6b8e08078 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -19,7 +19,7 @@ [app.main.store :as st] [app.main.ui.context :as muc] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]] [app.main.ui.hooks :as hooks] [app.main.ui.hooks.resize :refer [use-resize-hook]] @@ -53,7 +53,7 @@ ;; NOTE: This custom button may be replace by an action button when this variant is designed [:button {:class (stl/css :collapse-sidebar-button) :on-click on-collapse-left-sidebar} - [:> icon* {:icon-id "arrow" + [:> icon* {:icon-id i/arrow :size "s" :aria-label (tr "workspace.sidebar.collapse")}]]) @@ -243,7 +243,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "labels.close") :on-click on-close-document-history - :icon "close"}]))] + :icon i/close}]))] [:> tab-switcher* {:tabs tabs :selected selected diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index b04f5f4bf1..50c93cc8d5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -18,7 +18,7 @@ [app.main.ui.components.search-bar :refer [search-bar*]] [app.main.ui.context :as ctx] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.assets.file-library :refer [file-library*]] [app.util.dom :as dom] @@ -177,7 +177,7 @@ :title (tr "workspace.assets.filter") :class (stl/css-case :section-button true :opened menu-open?)} - i/filter-icon]] + deprecated-icon/filter-icon]] (when menu-open? [:> context-menu* {:on-close on-menu-close diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs index bdba85ef27..25cfffa002 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs @@ -22,6 +22,7 @@ [app.main.ui.components.color-bullet :as cb] [app.main.ui.context :as ctx] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.assets.groups :as grp] [app.util.color :as uc] @@ -492,7 +493,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.assets.colors.add-color") :on-click add-color-clicked - :icon "add"}])]) + :icon i/add}])]) [:& cmm/asset-section-block {:role :content} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs index d368e46e33..30d149d886 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs @@ -26,9 +26,9 @@ [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.context :as ctx] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.hooks :as h] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.assets.groups :as grp] [app.util.dom :as dom] @@ -174,7 +174,7 @@ :variant-mark true :component-icon true) :title (tr "workspace.assets.components.num-variants" num-variants)} - [:> icon* {:icon-id "variant" :size "s"}]])])])) + [:> icon* {:icon-id i/variant :size "s"}]])])])) (defn- count-leaves @@ -567,11 +567,11 @@ [:& radio-buttons {:selected (if listing-thumbs? "grid" "list") :on-change toggle-list-style :name "listing-style"} - [:& radio-button {:icon i/view-as-list + [:& radio-button {:icon deprecated-icon/view-as-list :value "list" :title (tr "workspace.assets.list-view") :id "opt-list"}] - [:& radio-button {:icon i/flex-grid + [:& radio-button {:icon deprecated-icon/flex-grid :value "grid" :title (tr "workspace.assets.grid-view") :id "opt-grid"}]]]) @@ -580,7 +580,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.assets.components.add-component") :on-click add-component - :icon "add"} + :icon i/add} [:& file-uploader {:accept dwm/accept-image-types :multi true :ref input-ref diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs index 4752785edc..410d14200a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs @@ -22,7 +22,7 @@ [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.context :as ctx] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.sidebar.assets.colors :refer [colors-section]] [app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.assets.components :refer [components-section]] @@ -115,7 +115,7 @@ :href (str "#" url) :target "_blank" :on-click on-click} - i/open-link]])]])) + deprecated-icon/open-link]])]])) (defn- extend-selected [selected type asset-groups asset-id file-id] @@ -302,7 +302,7 @@ (not ^boolean show-typography?)) [:div {:class (stl/css :asset-title)} [:span {:class (stl/css :no-found-icon)} - i/search] + deprecated-icon/search] [:span {:class (stl/css :no-found-text)} (tr "workspace.assets.not-found")]])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs index ba62c19c3c..5e7a7451d6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs @@ -15,7 +15,8 @@ [app.main.ui.components.forms :as fm] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.icons :as i] + [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.sidebar.assets.common :as cmm] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -79,7 +80,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.assets.component-group-options") :on-click on-context-menu - :icon "menu"}]]]))) + :icon i/menu}]]]))) (defn group-assets "Convert a list of assets in a nested structure like this: @@ -140,7 +141,7 @@ (tr "workspace.assets.create-group") (tr "workspace.assets.rename-group"))] [:button {:class (stl/css :modal-close-btn) - :on-click modal/hide!} i/close]] + :on-click modal/hide!} deprecated-icon/close]] [:div {:class (stl/css :modal-content)} [:& fm/form {:form form :on-submit on-accept} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs index 0ed537853a..75c456edc3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs @@ -20,6 +20,7 @@ [app.main.store :as st] [app.main.ui.context :as ctx] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.assets.groups :as grp] [app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry]] @@ -403,7 +404,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.assets.typography.add-typography") :on-click add-typography - :icon "add"}])]) + :icon i/add}])]) [:& cmm/asset-section-block {:role :content} [:& typographies-group {:file-id file-id diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs index 074e8e14b0..8d6160c147 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs @@ -9,7 +9,7 @@ (:require [app.main.data.workspace :as dw] [app.main.store :as st] - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -24,6 +24,6 @@ [:button {:class (stl/css :collapsed-button) :title (tr "workspace.sidebar.expand") :on-click on-click} - [:> icon* {:icon-id "arrow" + [:> icon* {:icon-id i/arrow :size "s" :aria-label (tr "workspace.sidebar.expand")}]]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug.cljs b/frontend/src/app/main/ui/workspace/sidebar/debug.cljs index 27c3fcb7df..ffce84660f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/debug.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/debug.cljs @@ -12,7 +12,8 @@ [app.main.data.workspace :as dw] [app.main.store :as st] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.icons :as i] + [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.debug :as dbg] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -39,14 +40,14 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "labels.close") :on-click handle-close - :icon "close"}]] + :icon i/close}]] [:div {:class (stl/css :debug-panel-inner)} (for [option (sort-by d/name dbg/options)] [:div {:key (d/name option) :class (stl/css :checkbox-wrapper)} [:span {:class (stl/css-case :checkbox-icon true :global/checked (dbg/enabled? option)) :on-click #(on-toggle-enabled % option)} - (when (dbg/enabled? option) i/status-tick)] + (when (dbg/enabled? option) deprecated-icon/status-tick)] [:input {:type "checkbox" :id (d/name option) diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs index b82adabff3..4a35c66975 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs @@ -13,7 +13,7 @@ [app.main.data.workspace :as dw] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [debug :as dbg] [rumext.v2 :as mf])) @@ -129,7 +129,7 @@ [:span "Debug"] [:div {:class (stl/css :close-button) :on-click #(dbg/disable! :shape-panel)} - i/close]] + deprecated-icon/close]] (if (empty? selected) [:div {:class (stl/css :attrs-container)} "No shapes selected"] diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.cljs b/frontend/src/app/main/ui/workspace/sidebar/history.cljs index 5af8ccaaa8..8e1e473487 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/history.cljs @@ -12,7 +12,7 @@ [app.main.data.workspace.undo :as dwu] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :refer [tr] :as i18n] [cuerdas.core :as str] @@ -148,20 +148,20 @@ (defn entry->icon [{:keys [type]}] (case type - :page i/document - :shape i/svg - :rect i/rectangle - :circle i/elipse - :text i/text - :path i/path - :frame i/board - :group i/group - :color i/drop-icon - :typography i/text-palette - :component i/component - :media i/img - :image i/img - i/svg)) + :page deprecated-icon/document + :shape deprecated-icon/svg + :rect deprecated-icon/rectangle + :circle deprecated-icon/elipse + :text deprecated-icon/text + :path deprecated-icon/path + :frame deprecated-icon/board + :group deprecated-icon/group + :color deprecated-icon/drop-icon + :typography deprecated-icon/text-palette + :component deprecated-icon/component + :media deprecated-icon/img + :image deprecated-icon/img + deprecated-icon/svg)) (defn is-shape? [type] (contains? #{:shape :rect :circle :text :path :frame :group} type)) @@ -314,7 +314,7 @@ :button-opened @show-detail?) :on-click toggle-show-detail :data-has-entry (dm/str (not (nil? (:detail entry))))} - i/arrow])] + deprecated-icon/arrow])] (when @show-detail? [:& history-entry-details {:entry entry}])])) @@ -327,7 +327,7 @@ [:div {:class (stl/css :history-toolbox)} (if (empty? entries) [:div {:class (stl/css :history-entry-empty)} - [:div {:class (stl/css :history-entry-empty-icon)} i/history] + [:div {:class (stl/css :history-entry-empty-icon)} deprecated-icon/history] [:div {:class (stl/css :history-entry-empty-msg)} (tr "workspace.undo.empty")]] [:ul {:class (stl/css :history-entries)} (for [[idx-entry entry] (->> entries (map-indexed vector) reverse)] #_[i (range 0 10)] diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs index fdf91530ea..ecb85db113 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs @@ -22,7 +22,7 @@ [app.main.ui.context :as ctx] [app.main.ui.ds.foundations.assets.icon :refer [icon*]] [app.main.ui.hooks :as hooks] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.sidebar.layer-name :refer [layer-name*]] [app.util.dom :as dom] [app.util.i18n :refer [tr]] @@ -104,7 +104,7 @@ :toggle-content true :inverse expanded?) :on-click on-toggle-collapse} - i/arrow]) + deprecated-icon/arrow]) [:div {:class (stl/css :icon-shape) :on-double-click on-zoom-to-selected} @@ -154,7 +154,7 @@ (tr "workspace.shape.menu.show") (tr "workspace.shape.menu.hide")) :on-click on-toggle-visibility} - (if ^boolean hidden? i/hide i/shown)] + (if ^boolean hidden? deprecated-icon/hide deprecated-icon/shown)] [:button {:class (stl/css-case :block-element true :selected blocked?) @@ -162,7 +162,7 @@ (tr "workspace.shape.menu.unlock") (tr "workspace.shape.menu.lock")) :on-click on-toggle-blocking} - (if ^boolean blocked? i/lock i/unlock)]])]] + (if ^boolean blocked? deprecated-icon/lock deprecated-icon/unlock)]])]] children])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 7d41cbd2d3..dcc12bdb65 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -18,7 +18,7 @@ [app.main.ui.components.search-bar :refer [search-bar*]] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.hooks :as hooks] [app.main.ui.notifications.badge :refer [badge-notification]] [app.main.ui.workspace.sidebar.layer-item :refer [layer-item]] @@ -296,12 +296,12 @@ :filter-button true :opened show-menu? :active active?)} - [:> icon* {:icon-id "filter"}]]] + [:> icon* {:icon-id i/filter}]]] [:> icon-button* {:variant "ghost" :aria-label (tr "labels.close") :on-click toggle-search - :icon "close"}]] + :icon i/close}]] [:div {:class (stl/css :active-filters)} (for [fkey current-filters] @@ -325,7 +325,7 @@ [:> icon* {:icon-id filter-icon :size "s" :class (stl/css :layer-filter-icon)}] [:span {:class (stl/css :layer-filter-name)} name] - [:> icon* {:icon-id "close-small" :class (stl/css :layer-filter-close)}]]))] + [:> icon* {:icon-id i/close-small :class (stl/css :layer-filter-close)}]]))] (when ^boolean show-menu? [:ul {:class (stl/css :filters-container)} @@ -334,84 +334,84 @@ :data-filter "frame" :on-click add-filter} [:div {:class (stl/css :filter-menu-item-name-wrapper)} - [:> icon* {:icon-id "board" :size "s" :class (stl/css :filter-menu-item-icon)}] + [:> icon* {:icon-id i/board :size "s" :class (stl/css :filter-menu-item-icon)}] [:span {:class (stl/css :filter-menu-item-name)} (tr "workspace.sidebar.layers.frames")]] (when (contains? current-filters :frame) - [:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])] + [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])] [:li {:class (stl/css-case :filter-menu-item true :selected (contains? current-filters :group)) :data-filter "group" :on-click add-filter} [:div {:class (stl/css :filter-menu-item-name-wrapper)} - [:> icon* {:icon-id "group" :size "s" :class (stl/css :filter-menu-item-icon)}] + [:> icon* {:icon-id i/group :size "s" :class (stl/css :filter-menu-item-icon)}] [:span {:class (stl/css :filter-menu-item-name)} (tr "workspace.sidebar.layers.groups")]] (when (contains? current-filters :group) - [:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])] + [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])] [:li {:class (stl/css-case :filter-menu-item true :selected (contains? current-filters :mask)) :data-filter "mask" :on-click add-filter} [:div {:class (stl/css :filter-menu-item-name-wrapper)} - [:> icon* {:icon-id "mask" :size "s" :class (stl/css :filter-menu-item-icon)}] + [:> icon* {:icon-id i/mask :size "s" :class (stl/css :filter-menu-item-icon)}] [:span {:class (stl/css :filter-menu-item-name)} (tr "workspace.sidebar.layers.masks")]] (when (contains? current-filters :mask) - [:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])] + [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])] [:li {:class (stl/css-case :filter-menu-item true :selected (contains? current-filters :component)) :data-filter "component" :on-click add-filter} [:div {:class (stl/css :filter-menu-item-name-wrapper)} - [:> icon* {:icon-id "component" :size "s" :class (stl/css :filter-menu-item-icon)}] + [:> icon* {:icon-id i/component :size "s" :class (stl/css :filter-menu-item-icon)}] [:span {:class (stl/css :filter-menu-item-name)} (tr "workspace.sidebar.layers.components")]] (when (contains? current-filters :component) - [:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])] + [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])] [:li {:class (stl/css-case :filter-menu-item true :selected (contains? current-filters :text)) :data-filter "text" :on-click add-filter} [:div {:class (stl/css :filter-menu-item-name-wrapper)} - [:> icon* {:icon-id "text" :size "s" :class (stl/css :filter-menu-item-icon)}] + [:> icon* {:icon-id i/text :size "s" :class (stl/css :filter-menu-item-icon)}] [:span {:class (stl/css :filter-menu-item-name)} (tr "workspace.sidebar.layers.texts")]] (when (contains? current-filters :text) - [:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])] + [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])] [:li {:class (stl/css-case :filter-menu-item true :selected (contains? current-filters :image)) :data-filter "image" :on-click add-filter} [:div {:class (stl/css :filter-menu-item-name-wrapper)} - [:> icon* {:icon-id "img" :size "s" :class (stl/css :filter-menu-item-icon)}] + [:> icon* {:icon-id i/img :size "s" :class (stl/css :filter-menu-item-icon)}] [:span {:class (stl/css :filter-menu-item-name)} (tr "workspace.sidebar.layers.images")]] (when (contains? current-filters :image) - [:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])] + [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])] [:li {:class (stl/css-case :filter-menu-item true :selected (contains? current-filters :shape)) :data-filter "shape" :on-click add-filter} [:div {:class (stl/css :filter-menu-item-name-wrapper)} - [:> icon* {:icon-id "path" :size "s" :class (stl/css :filter-menu-item-icon)}] + [:> icon* {:icon-id i/path :size "s" :class (stl/css :filter-menu-item-icon)}] [:span {:class (stl/css :filter-menu-item-name)} (tr "workspace.sidebar.layers.shapes")]] (when (contains? current-filters :shape) - [:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])]])] + [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]])] [:div {:class (stl/css :tool-window-bar)} [:> title-bar* {:collapsable false @@ -504,7 +504,7 @@ [:button {:class (stl/css :focus-title) :on-click toogle-focus-mode} [:span {:class (stl/css :back-button)} - [:> icon* {:icon-id "arrow"}]] + [:> icon* {:icon-id i/arrow}]] [:div {:class (stl/css :focus-name)} (or title (tr "workspace.sidebar.layers"))] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.cljs index a42ddbdc16..afff809444 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.cljs @@ -13,7 +13,7 @@ [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -68,7 +68,7 @@ [:span {:class (stl/css :select-name)} (or selected-preset-name (tr "workspace.options.size-presets"))] - [:span {:class (stl/css :collapsed-icon)} i/arrow] + [:span {:class (stl/css :collapsed-icon)} deprecated-icon/arrow] [:& dropdown {:show show? :on-close on-close} [:ul {:class (stl/css :custom-select-dropdown)} @@ -92,17 +92,17 @@ [:span {:class (stl/css :preset-name)} (:name preset)] [:span {:class (stl/css :preset-size)} (:width preset) " x " (:height preset)]] (when preset-match - [:span {:class (stl/css :check-icon)} i/tick])])))]]] + [:span {:class (stl/css :check-icon)} deprecated-icon/tick])])))]]] [:& radio-buttons {:selected (or (d/name orientation) "") :on-change on-orientation-change :name "frame-orientation" :wide true :class (stl/css :radio-buttons)} - [:& radio-button {:icon i/size-vertical + [:& radio-button {:icon deprecated-icon/size-vertical :value "vertical" :id "size-vertical"}] - [:& radio-button {:icon i/size-horizontal + [:& radio-button {:icon deprecated-icon/size-horizontal :value "horizontal" :id "size-horizontal"}]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs index f0c0778a64..4cf1c6efc4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs @@ -10,7 +10,7 @@ [app.main.data.workspace :as dw] [app.main.data.workspace.shortcuts :as sc] [app.main.store :as st] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -48,7 +48,7 @@ :title (tr "workspace.align.hleft" (sc/get-tooltip :align-left)) :data-value "hleft" :on-click align-objects} - i/align-left] + deprecated-icon/align-left] [:button {:class (stl/css-case :align-button true :disabled disabled-align) @@ -56,7 +56,7 @@ :title (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter)) :data-value "hcenter" :on-click align-objects} - i/align-horizontal-center] + deprecated-icon/align-horizontal-center] [:button {:class (stl/css-case :align-button true :disabled disabled-align) @@ -64,7 +64,7 @@ :title (tr "workspace.align.hright" (sc/get-tooltip :align-right)) :data-value "hright" :on-click align-objects} - i/align-right] + deprecated-icon/align-right] [:button {:class (stl/css-case :align-button true :disabled disabled-distribute) @@ -72,7 +72,7 @@ :title (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute)) :data-value "horizontal" :on-click distribute-objects} - i/distribute-horizontally]] + deprecated-icon/distribute-horizontally]] [:div {:class (stl/css :align-group-vertical)} [:button {:class (stl/css-case :align-button true @@ -81,7 +81,7 @@ :title (tr "workspace.align.vtop" (sc/get-tooltip :align-top)) :data-value "vtop" :on-click align-objects} - i/align-top] + deprecated-icon/align-top] [:button {:class (stl/css-case :align-button true :disabled disabled-align) @@ -89,7 +89,7 @@ :title (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter)) :data-value "vcenter" :on-click align-objects} - i/align-vertical-center] + deprecated-icon/align-vertical-center] [:button {:class (stl/css-case :align-button true :disabled disabled-align) @@ -97,7 +97,7 @@ :title (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom)) :data-value "vbottom" :on-click align-objects} - i/align-bottom] + deprecated-icon/align-bottom] [:button {:title (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute)) :class (stl/css-case :align-button true @@ -105,5 +105,5 @@ :disabled disabled-distribute :data-value "vertical" :on-click distribute-objects} - i/distribute-vertical-spacing]]]))) + deprecated-icon/distribute-vertical-spacing]]]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs index c8661fbf13..52a5570614 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs @@ -14,7 +14,8 @@ [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.icons :as i] + [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -95,7 +96,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.blur-options.add-blur") :on-click handle-add - :icon "add" + :icon i/add :data-testid "add-blur"}])]] (when (and open? has-value?) [:div {:class (stl/css :element-set-content)} @@ -105,18 +106,18 @@ [:button {:class (stl/css-case :show-more true :selected more-options?) :on-click toggle-more-options} - i/menu] + deprecated-icon/menu] [:span {:class (stl/css :label)} (tr "workspace.options.blur-options.title")]] [:div {:class (stl/css :actions)} [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.blur-options.toggle-blur") :on-click handle-toggle-visibility - :icon (if hidden? "hide" "shown")}] + :icon (if hidden? i/hide i/shown)}] [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.blur-options.remove-blur") :on-click handle-delete - :icon "remove"}]]] + :icon i/remove}]]] (when more-options? [:div {:class (stl/css :second-row)} [:label {:class (stl/css :label) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs index 5e61e91514..4c1fb0d1b7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs @@ -16,12 +16,12 @@ [app.main.features :as features] [app.main.store :as st] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) (def ^:private flatten-icon - (i/icon-xref :boolean-flatten (stl/css :flatten-icon))) + (deprecated-icon/icon-xref :boolean-flatten (stl/css :flatten-icon))) (mf/defc bool-options* [{:keys [total-selected shapes shapes-with-children]}] @@ -90,22 +90,22 @@ :class (stl/css :boolean-radio-btn) :on-change on-change :name "bool-options"} - [:& radio-button {:icon i/boolean-union + [:& radio-button {:icon deprecated-icon/boolean-union :value "union" :disabled disabled-bool-btns :title (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")") :id "bool-opt-union"}] - [:& radio-button {:icon i/boolean-difference + [:& radio-button {:icon deprecated-icon/boolean-difference :value "difference" :disabled disabled-bool-btns :title (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")") :id "bool-opt-differente"}] - [:& radio-button {:icon i/boolean-intersection + [:& radio-button {:icon deprecated-icon/boolean-intersection :value "intersection" :disabled disabled-bool-btns :title (str (tr "workspace.shape.menu.intersection") " (" (sc/get-tooltip :bool-intersection) ")") :id "bool-opt-intersection"}] - [:& radio-button {:icon i/boolean-exclude + [:& radio-button {:icon deprecated-icon/boolean-exclude :value "exclude" :disabled disabled-bool-btns :title (str (tr "workspace.shape.menu.exclude") " (" (sc/get-tooltip :bool-exclude) ")") diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs index f41eba18f6..b30ee20cbf 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs @@ -7,7 +7,7 @@ [app.main.store :as st] [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.hooks :as hooks] [app.util.i18n :as i18n :refer [tr]] [beicon.v2.core :as rx] @@ -95,7 +95,7 @@ (if (not radius-expanded) [:div {:class (stl/css :radius-1) :title (tr "workspace.options.radius")} - [:> icon* {:icon-id "corner-radius" + [:> icon* {:icon-id i/corner-radius :size "s" :class (stl/css :icon)}] [:> numeric-input* @@ -150,4 +150,4 @@ :aria-label (if radius-expanded (tr "workspace.options.radius.hide-all-corners") (tr "workspace.options.radius.show-single-corners")) - :icon "corner-radius"}]])) + :icon i/corner-radius}]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs index 5ed03279f7..b589b2a8d9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs @@ -16,7 +16,7 @@ [app.main.store :as st] [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [cuerdas.core :as str] @@ -225,7 +225,7 @@ [:span {:class (stl/css-case :check-mark true :checked (:fixed-scroll values))} (when (:fixed-scroll values) - i/status-tick)] + deprecated-icon/status-tick)] (tr "workspace.options.constraints.fix-when-scrolling") [:input {:type "checkbox" :id "fixed-on-scroll" diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs index b29de7957e..7c32bcfd19 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs @@ -15,9 +15,10 @@ [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.exports.assets] [app.util.dom :as dom] - [app.util.i18n :refer [tr c]] + [app.util.i18n :refer [c tr]] [app.util.keyboard :as kbd] [rumext.v2 :as mf])) @@ -212,7 +213,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.export.add-export") :on-click add-export - :icon "add"}]]] + :icon i/add}]]] (when open? [:div {:class (stl/css :element-set-content)} @@ -224,7 +225,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.export.remove-export") :on-click on-remove-all - :icon "remove"}]]] + :icon i/remove}]]] (seq exports) [:* @@ -260,7 +261,7 @@ :aria-label (tr "workspace.options.export.remove-export") :on-click delete-export :data-value index - :icon "remove"}]])]) + :icon i/remove}]])]) (when (or (= :multiple exports) (seq exports)) [:button diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs index f4415b49a6..f49bbc6104 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs @@ -16,8 +16,9 @@ [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.hooks :as h] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -195,7 +196,7 @@ :on-click on-add :data-testid "add-fill" :disabled (not can-add-fills?) - :icon "add"}])]] + :icon i/add}])]] (when open? [:div {:class (stl/css :element-content)} @@ -207,7 +208,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.fill.remove-fill") :on-click on-remove-all - :icon "remove"}]] + :icon i/remove}]] (some? fills) [:& h/sortable-container {} @@ -237,7 +238,7 @@ [:span {:class (stl/css-case :check-mark true :checked (not hide-on-export))} (when (not hide-on-export) - i/status-tick)] + deprecated-icon/status-tick)] (tr "workspace.options.show-fill-on-export") [:input {:type "checkbox" :id "show-fill-on-export" diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs index 5558aea627..edda70d353 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs @@ -17,7 +17,8 @@ [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.icons :as i] + [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]] [app.util.i18n :as i18n :refer [tr]] @@ -150,7 +151,7 @@ [:button {:class (stl/css-case :show-options true :selected open?) :on-click toggle-advanced-options} - i/menu] + deprecated-icon/menu] [:div {:class (stl/css :type-select-wrapper)} [:& select {:class (stl/css :grid-type-select) @@ -186,7 +187,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.guides.remove-guide") :on-click on-remove - :icon "remove"}]]] + :icon i/remove}]]] (when (:display grid) [:& advanced-options {:class (stl/css :grid-advanced-options) @@ -205,7 +206,7 @@ [:button {:class (stl/css-case :show-more-options true :selected show-more-options?) :on-click toggle-more-options} - i/menu]] + deprecated-icon/menu]] (when show-more-options? [:div {:class (stl/css :second-row)} [:button {:class (stl/css-case :btn-options true @@ -263,7 +264,7 @@ :title (tr "workspace.options.grid.params.gutter")} [:span {:class (stl/css-case :icon true :rotated (= type :row))} - i/gap-horizontal] + deprecated-icon/gap-horizontal] [:> numeric-input* {:placeholder "0" :on-change (handle-change :params :gutter) :nillable true @@ -274,7 +275,7 @@ :title (tr "workspace.options.grid.params.margin")} [:span {:class (stl/css-case :icon true :rotated (= type :column))} - i/grid-margin] + deprecated-icon/grid-margin] [:> numeric-input* {:placeholder "0" :on-change (handle-change :params :margin) :nillable true @@ -285,7 +286,7 @@ :selected show-more-options?) :on-click toggle-more-options :disabled is-default} - i/menu] + deprecated-icon/menu] (when show-more-options? [:div {:class (stl/css :more-options)} [:button {:class (stl/css :option-btn) @@ -322,7 +323,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.guides.add-guide") :on-click handle-create-grid - :icon "add"}]] + :icon i/add}]] (when (and open? (seq frame-grids)) [:div {:class (stl/css :element-set-content)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs index db685ab65d..883bf4ca78 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs @@ -19,7 +19,7 @@ [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.hooks :as hooks] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -52,29 +52,29 @@ :name (dm/str "flex-align-items-" type)} [:& radio-button {:value "start" :icon (if is-col? - i/align-self-row-left - i/align-self-column-top) + deprecated-icon/align-self-row-left + deprecated-icon/align-self-column-top) :title "Align self start" :id (dm/str "align-self-start-" type)}] [:& radio-button {:value "center" :icon (if is-col? - i/align-self-row-center - i/align-self-column-center) + deprecated-icon/align-self-row-center + deprecated-icon/align-self-column-center) :title "Align self center" :id (dm/str "align-self-center-" type)}] [:& radio-button {:value "end" :icon (if is-col? - i/align-self-row-right - i/align-self-column-bottom) + deprecated-icon/align-self-row-right + deprecated-icon/align-self-column-bottom) :title "Align self end" :id (dm/str "align-self-end-" type)}] [:& radio-button {:value "stretch" :icon (if is-col? - i/align-self-row-stretch - i/align-self-column-stretch) + deprecated-icon/align-self-row-stretch + deprecated-icon/align-self-column-stretch) :title "Align self stretch" :id (dm/str "align-self-stretch-" type)}]]])) @@ -208,7 +208,7 @@ (when (and (not multiple?) (= :auto cell-mode)) [:div {:class (stl/css :row)} [:div {:class (stl/css :grid-coord-group)} - [:span {:class (stl/css :icon)} i/flex-vertical] + [:span {:class (stl/css :icon)} deprecated-icon/flex-vertical] [:div {:class (stl/css :coord-input)} [:> numeric-input* {:placeholder "--" @@ -218,7 +218,7 @@ :value column}]]] [:div {:class (stl/css :grid-coord-group)} - [:span {:class (stl/css :icon)} i/flex-horizontal] + [:span {:class (stl/css :icon)} deprecated-icon/flex-horizontal] [:div {:class (stl/css :coord-input)} [:> numeric-input* {:placeholder "--" @@ -230,7 +230,7 @@ (when (and (not multiple?) (or (= :manual cell-mode) (= :area cell-mode))) [:div {:class (stl/css :row)} [:div {:class (stl/css :grid-coord-group)} - [:span {:class (stl/css :icon)} i/flex-vertical] + [:span {:class (stl/css :icon)} deprecated-icon/flex-vertical] [:div {:class (stl/css :coord-input)} [:> numeric-input* {:placeholder "--" @@ -245,7 +245,7 @@ :value column-end}]]] [:div {:class (stl/css :grid-coord-group)} - [:span {:class (stl/css :icon)} i/flex-horizontal] + [:span {:class (stl/css :icon)} deprecated-icon/flex-horizontal] [:div {:class (stl/css :coord-input :double)} [:> numeric-input* {:placeholder "--" diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs index d6a0c72e36..2abb8c4973 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs @@ -19,11 +19,12 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.numeric-input :refer [numeric-input*]] - [app.main.ui.components.radio-buttons :refer [radio-buttons radio-button]] + [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.icons :as i] + [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] @@ -140,7 +141,7 @@ [:button {:class (stl/css :start-flow-btn) :on-click start-flow} [:span {:class (stl/css :button-icon)} - i/play]] + deprecated-icon/play]] [:span {:class (stl/css :flow-input-wrapper)} [:input {:class (stl/css :flow-input) @@ -153,7 +154,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.flows.remove-flow") :on-click remove-flow - :icon "remove"}]])) + :icon i/remove}]])) (mf/defc page-flows {::mf/props :obj} @@ -181,25 +182,25 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.flows.add-flow-start") :on-click add-flow - :icon "add"}])] + :icon i/add}])] (when (some? flow) [:& flow-item {:flow flow :key (dm/str (:id flow))}])]))) (def ^:private corner-center-icon - (i/icon-xref :corner-center (stl/css :corner-icon))) + (deprecated-icon/icon-xref :corner-center (stl/css :corner-icon))) (def ^:private corner-bottom-icon - (i/icon-xref :corner-bottom (stl/css :corner-icon))) + (deprecated-icon/icon-xref :corner-bottom (stl/css :corner-icon))) (def ^:private corner-bottomleft-icon - (i/icon-xref :corner-bottom-left (stl/css :corner-icon))) + (deprecated-icon/icon-xref :corner-bottom-left (stl/css :corner-icon))) (def ^:private corner-bottomright-icon - (i/icon-xref :corner-bottom-right (stl/css :corner-icon))) + (deprecated-icon/icon-xref :corner-bottom-right (stl/css :corner-icon))) (def ^:private corner-top-icon - (i/icon-xref :corner-top (stl/css :corner-icon))) + (deprecated-icon/icon-xref :corner-top (stl/css :corner-icon))) (def ^:private corner-topleft-icon - (i/icon-xref :corner-top-left (stl/css :corner-icon))) + (deprecated-icon/icon-xref :corner-top-left (stl/css :corner-icon))) (def ^:private corner-topright-icon - (i/icon-xref :corner-top-right (stl/css :corner-icon))) + (deprecated-icon/icon-xref :corner-top-right (stl/css :corner-icon))) (mf/defc interaction-entry [{:keys [index shape interaction update-interaction remove-interaction]}] @@ -432,7 +433,7 @@ [:button {:class (stl/css-case :extend-btn true :extended extended-open?) :on-click toggle-extended} - i/menu] + deprecated-icon/menu] [:div {:class (stl/css :interactions-info) :on-click toggle-extended} @@ -441,7 +442,7 @@ [:button {:class (stl/css :remove-btn) :data-value index :on-click #(remove-interaction index)} - i/remove-icon]] + deprecated-icon/remove-icon]] (when extended-open? [:div {:class (stl/css :extended-options)} @@ -496,7 +497,7 @@ :class (stl/css-case :global/checked preserve-scroll?)} [:span {:class (stl/css-case :global/checked preserve-scroll?)} (when preserve-scroll? - i/status-tick)] + deprecated-icon/status-tick)] (tr "workspace.options.interaction-preserve-scroll") [:input {:type "checkbox" :id (str "preserve-" index) @@ -592,7 +593,7 @@ :class (stl/css-case :global/checked close-click-outside?)} [:span {:class (stl/css-case :global/checked close-click-outside?)} (when close-click-outside? - i/status-tick)] + deprecated-icon/status-tick)] (tr "workspace.options.interaction-close-outside") [:input {:type "checkbox" :id (str "close-" index) @@ -606,7 +607,7 @@ :class (stl/css-case :global/checked background-overlay?)} [:span {:class (stl/css-case :global/checked background-overlay?)} (when background-overlay? - i/status-tick)] + deprecated-icon/status-tick)] (tr "workspace.options.interaction-background") [:input {:type "checkbox" :id (str "background-" index) @@ -644,19 +645,19 @@ [:& radio-buttons {:selected (d/name direction) :on-change change-direction :name "animation-direction"} - [:& radio-button {:icon i/column + [:& radio-button {:icon deprecated-icon/column :icon-class (stl/css :right) :value "right" :id "animation-right"}] - [:& radio-button {:icon i/column + [:& radio-button {:icon deprecated-icon/column :icon-class (stl/css :left) :id "animation-left" :value "left"}] - [:& radio-button {:icon i/column + [:& radio-button {:icon deprecated-icon/column :icon-class (stl/css :down) :id "animation-down" :value "down"}] - [:& radio-button {:icon i/column + [:& radio-button {:icon deprecated-icon/column :icon-class (stl/css :up) :id "animation-up" :value "up"}]]]]) @@ -693,7 +694,7 @@ :class (stl/css-case :global/checked (-> interaction :animation :offset-effect))} [:span {:class (stl/css-case :global/checked (-> interaction :animation :offset-effect))} (when (-> interaction :animation :offset-effect) - i/status-tick)] + deprecated-icon/status-tick)] (tr "workspace.options.interaction-offset-effect") [:input {:type "checkbox" :id (str "offset-effect-" index) @@ -734,21 +735,21 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.interactions.add-interaction") :on-click add-interaction - :icon "add"}]]]) + :icon i/add}]]]) (when (= (count interactions) 0) [:div {:class (stl/css :help-content)} (when (and shape (not (cfh/unframed-shape? shape))) [:div {:class (stl/css :help-group)} - [:div {:class (stl/css :interactions-help-icon)} i/add] + [:div {:class (stl/css :interactions-help-icon)} deprecated-icon/add] [:div {:class (stl/css :interactions-help)} (tr "workspace.options.add-interaction")]]) [:div {:class (stl/css :help-group)} - [:div {:class (stl/css :interactions-help-icon)} i/interaction] + [:div {:class (stl/css :interactions-help-icon)} deprecated-icon/interaction] [:div {:class (stl/css :interactions-help)} (tr "workspace.options.select-a-shape")]] [:div {:class (stl/css :help-group)} - [:div {:class (stl/css :interactions-help-icon)} i/play] + [:div {:class (stl/css :interactions-help-icon)} deprecated-icon/play] [:div {:class (stl/css :interactions-help)} (tr "workspace.options.use-play-button")]]]) [:div {:class (stl/css :groups)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs index f5c7eaf14f..73be28c89d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs @@ -16,6 +16,7 @@ [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.select :refer [select]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.render-wasm.api :as wasm.api] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -203,23 +204,23 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.layer-options.toggle-layer") :on-click handle-set-hidden - :icon "shown"}] + :icon i/shown}] :else [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.layer-options.toggle-layer") :on-click handle-set-visible - :icon "hide"}]) + :icon i/hide}]) (cond (or (= :multiple blocked?) (not blocked?)) [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.shape.menu.lock") :on-click handle-set-blocked - :icon "unlock"}] + :icon i/unlock}] :else [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.shape.menu.unlock") :on-click handle-set-unblocked - :icon "lock"}])]])) + :icon i/lock}])]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 7230d76b41..68a60566ba 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -24,9 +24,10 @@ [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.formats :as fmt] [app.main.ui.hooks :as h] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] @@ -36,10 +37,10 @@ (defn- dir-icons-refactor [val] (case val - :row i/grid-row - :row-reverse i/row-reverse - :column i/column - :column-reverse i/column-reverse)) + :row deprecated-icon/grid-row + :row-reverse deprecated-icon/row-reverse + :column deprecated-icon/column + :column-reverse deprecated-icon/column-reverse)) ;; FLEX COMPONENTS @@ -67,63 +68,63 @@ :align-items (if column? (case val - :start i/align-items-column-start - :end i/align-items-column-end - :center i/align-items-column-center) + :start deprecated-icon/align-items-column-start + :end deprecated-icon/align-items-column-end + :center deprecated-icon/align-items-column-center) (case val - :start i/align-items-row-start - :end i/align-items-row-end - :center i/align-items-row-center)) + :start deprecated-icon/align-items-row-start + :end deprecated-icon/align-items-row-end + :center deprecated-icon/align-items-row-center)) :justify-content (if column? (case val - :start i/justify-content-column-start - :end i/justify-content-column-end - :center i/justify-content-column-center - :space-around i/justify-content-column-around - :space-evenly i/justify-content-column-evenly - :space-between i/justify-content-column-between) + :start deprecated-icon/justify-content-column-start + :end deprecated-icon/justify-content-column-end + :center deprecated-icon/justify-content-column-center + :space-around deprecated-icon/justify-content-column-around + :space-evenly deprecated-icon/justify-content-column-evenly + :space-between deprecated-icon/justify-content-column-between) (case val - :start i/justify-content-row-start - :end i/justify-content-row-end - :center i/justify-content-row-center - :space-around i/justify-content-row-around - :space-evenly i/justify-content-row-evenly - :space-between i/justify-content-row-between)) + :start deprecated-icon/justify-content-row-start + :end deprecated-icon/justify-content-row-end + :center deprecated-icon/justify-content-row-center + :space-around deprecated-icon/justify-content-row-around + :space-evenly deprecated-icon/justify-content-row-evenly + :space-between deprecated-icon/justify-content-row-between)) :align-content (if column? (case val - :start i/align-content-column-start - :end i/align-content-column-end - :center i/align-content-column-center - :space-around i/align-content-column-around - :space-evenly i/align-content-column-evenly - :space-between i/align-content-column-between + :start deprecated-icon/align-content-column-start + :end deprecated-icon/align-content-column-end + :center deprecated-icon/align-content-column-center + :space-around deprecated-icon/align-content-column-around + :space-evenly deprecated-icon/align-content-column-evenly + :space-between deprecated-icon/align-content-column-between :stretch nil) (case val - :start i/align-content-row-start - :end i/align-content-row-end - :center i/align-content-row-center - :space-around i/align-content-row-around - :space-evenly i/align-content-row-evenly - :space-between i/align-content-row-between + :start deprecated-icon/align-content-row-start + :end deprecated-icon/align-content-row-end + :center deprecated-icon/align-content-row-center + :space-around deprecated-icon/align-content-row-around + :space-evenly deprecated-icon/align-content-row-evenly + :space-between deprecated-icon/align-content-row-between :stretch nil)) :align-self (if column? (case val - :auto i/remove-icon - :start i/align-self-row-left - :end i/align-self-row-right - :center i/align-self-row-center) + :auto deprecated-icon/remove-icon + :start deprecated-icon/align-self-row-left + :end deprecated-icon/align-self-row-right + :center deprecated-icon/align-self-row-center) (case val - :auto i/remove-icon - :start i/align-self-column-top - :end i/align-self-column-bottom - :center i/align-self-column-center)))) + :auto deprecated-icon/remove-icon + :start deprecated-icon/align-self-column-top + :end deprecated-icon/align-self-column-bottom + :center deprecated-icon/align-self-column-center)))) (defn get-layout-grid-icon [type val ^boolean column?] @@ -131,32 +132,32 @@ :align-items (if column? (case val - :auto i/remove-icon - :start i/align-self-row-left - :end i/align-self-row-right - :center i/align-self-row-center) + :auto deprecated-icon/remove-icon + :start deprecated-icon/align-self-row-left + :end deprecated-icon/align-self-row-right + :center deprecated-icon/align-self-row-center) (case val - :auto i/remove-icon - :start i/align-self-column-top - :end i/align-self-column-bottom - :center i/align-self-column-center)) + :auto deprecated-icon/remove-icon + :start deprecated-icon/align-self-column-top + :end deprecated-icon/align-self-column-bottom + :center deprecated-icon/align-self-column-center)) :justify-items (if (not column?) (case val - :start i/align-content-column-start - :center i/align-content-column-center - :end i/align-content-column-end - :space-around i/align-content-column-around - :space-between i/align-content-column-between - :stretch i/align-content-column-stretch) + :start deprecated-icon/align-content-column-start + :center deprecated-icon/align-content-column-center + :end deprecated-icon/align-content-column-end + :space-around deprecated-icon/align-content-column-around + :space-between deprecated-icon/align-content-column-between + :stretch deprecated-icon/align-content-column-stretch) (case val - :start i/align-content-row-start - :center i/align-content-row-center - :end i/align-content-row-end - :space-around i/align-content-row-around - :space-between i/align-content-row-between - :stretch i/align-content-row-stretch)))) + :start deprecated-icon/align-content-row-start + :center deprecated-icon/align-content-row-center + :end deprecated-icon/align-content-row-end + :space-around deprecated-icon/align-content-row-around + :space-between deprecated-icon/align-content-row-between + :stretch deprecated-icon/align-content-row-stretch)))) (mf/defc direction-row-flex {::mf/props :obj @@ -193,7 +194,7 @@ "No wrap" "Wrap") :on-click on-click} - i/wrap]) + deprecated-icon/wrap]) (mf/defc align-row {::mf/props :obj} @@ -339,7 +340,7 @@ [:div {:class (stl/css :padding-simple) :title (tr "workspace.layout_grid.editor.padding.vertical")} [:span {:class (stl/css :icon)} - i/padding-top-bottom] + deprecated-icon/padding-top-bottom] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder (tr "settings.multiple") @@ -354,7 +355,7 @@ :title (tr "workspace.layout_grid.editor.padding.horizontal")} [:span {:class (stl/css :icon)} - i/padding-left-right] + deprecated-icon/padding-left-right] [:> numeric-input* {:className (stl/css :numeric-input) :placeholder (tr "settings.multiple") @@ -398,7 +399,7 @@ [:div {:class (stl/css :padding-multiple) :title (tr "workspace.layout_grid.editor.padding.top")} [:span {:class (stl/css :icon)} - i/padding-top] + deprecated-icon/padding-top] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" @@ -413,7 +414,7 @@ [:div {:class (stl/css :padding-multiple) :title (tr "workspace.layout_grid.editor.padding.right")} [:span {:class (stl/css :icon)} - i/padding-right] + deprecated-icon/padding-right] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" @@ -428,7 +429,7 @@ [:div {:class (stl/css :padding-multiple) :title (tr "workspace.layout_grid.editor.padding.bottom")} [:span {:class (stl/css :icon)} - i/padding-bottom] + deprecated-icon/padding-bottom] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" @@ -443,7 +444,7 @@ [:div {:class (stl/css :padding-multiple) :title (tr "workspace.layout_grid.editor.padding.left")} [:span {:class (stl/css :icon)} - i/padding-left] + deprecated-icon/padding-left] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" @@ -490,7 +491,7 @@ :aria-label (tr "workspace.layout_grid.editor.padding.expand") :data-type (d/name type) :on-click on-type-change'} - i/padding-extended]])) + deprecated-icon/padding-extended]])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; GAP @@ -547,7 +548,7 @@ :row-gap true :disabled row-gap-disabled?) :title "Row gap"} - [:span {:class (stl/css :icon)} i/gap-vertical] + [:span {:class (stl/css :icon)} deprecated-icon/gap-vertical] [:> numeric-input* {:class (stl/css :numeric-input true) :no-validate true @@ -566,7 +567,7 @@ :column-gap true :disabled col-gap-disabled?) :title "Column gap"} - [:span {:class (stl/css :icon)} i/gap-horizontal] + [:span {:class (stl/css :icon)} deprecated-icon/gap-horizontal] [:> numeric-input* {:class (stl/css :numeric-input true) :no-validate true @@ -756,7 +757,7 @@ [:div {:class (stl/css :track-info-container)} [:div {:class (stl/css :track-info-dir-icon) :on-click handle-select-track} - (if is-column i/flex-vertical i/flex-horizontal)] + (if is-column deprecated-icon/flex-vertical deprecated-icon/flex-horizontal)] [:div {:class (stl/css :track-info-value)} [:> numeric-input* {:no-validate true @@ -780,7 +781,7 @@ :on-click remove-element :data-type type :data-index index - :icon "remove"}]])) + :icon i/remove}]])) (mf/defc grid-columns-row {::mf/props :obj} @@ -804,11 +805,11 @@ [:div {:class (stl/css :grid-tracks) :data-testid testid} [:div {:class (stl/css :grid-track-header)} - [:button {:class (stl/css :expand-icon) :on-click toggle} i/menu] + [:button {:class (stl/css :expand-icon) :on-click toggle} deprecated-icon/menu] [:div {:class (stl/css :track-title) :on-click toggle} [:div {:class (stl/css :track-name) :title track-name} track-name] [:div {:class (stl/css :track-detail) :title track-detail} track-detail]] - [:button {:class (stl/css :add-column) :on-click add-track} i/add]] + [:button {:class (stl/css :add-column) :on-click add-track} deprecated-icon/add]] (when expanded? [:& h/sortable-container {} @@ -1014,7 +1015,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.shape.menu.add-layout") :on-click on-toggle-dropdown-visibility - :icon "menu"}] + :icon i/menu}] [:& dropdown {:show show-dropdown? :on-close on-hide-dropdown} @@ -1032,13 +1033,13 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.shape.menu.remove-layout") :on-click on-remove-layout - :icon "remove"}])] + :icon i/remove}])] [:div {:class (stl/css :title-actions)} [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.shape.menu.add-layout") :on-click on-toggle-dropdown-visibility - :icon "add"}] + :icon i/add}] [:& dropdown {:show show-dropdown? :on-close on-hide-dropdown} @@ -1056,7 +1057,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.shape.menu.delete") :on-click on-remove-layout - :icon "remove"}])])]] + :icon i/remove}])])]] (when (and ^boolean open? ^boolean has-layout? @@ -1083,7 +1084,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "labels.help-center") :on-click open-flex-help - :icon "help"}]] + :icon i/help}]] (when (= :wrap wrap-type) [:div {:class (stl/css :third-row)} [:& align-content-row {:is-column is-column @@ -1108,7 +1109,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "labels.help-center") :on-click open-grid-help - :icon "help"}]]) + :icon i/help}]]) [:div {:class (stl/css :first-row)} [:div {:class (stl/css :direction-edit)} @@ -1294,7 +1295,7 @@ :class (stl/css :help-button) :aria-label (tr "labels.help-center") :on-click open-grid-help - :icon "help"}] + :icon i/help}] [:button {:class (stl/css :exit-btn) :on-click #(st/emit! (udw/clear-edition-mode))} (tr "workspace.layout_grid.editor.options.exit")]] @@ -1325,7 +1326,7 @@ :class (stl/css :locate-button) :aria-label (tr "workspace.layout_grid.editor.top-bar.locate.tooltip") :on-click handle-locate-grid - :icon "locate"}]] + :icon i/locate}]] [:div {:class (stl/css :gap-row)} [:& gap-section {:on-change on-gap-change diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index 4a83f2b0b5..b55fe5de01 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -16,7 +16,7 @@ [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.title-bar :refer [title-bar*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -81,7 +81,7 @@ [:div {:class (stl/css :vertical-margin) :title "Vertical margin"} [:span {:class (stl/css :icon)} - i/margin-top-bottom] + deprecated-icon/margin-top-bottom] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder m1-placeholder :data-name "m1" @@ -94,7 +94,7 @@ [:div {:class (stl/css :horizontal-margin) :title "Horizontal margin"} [:span {:class (stl/css :icon)} - i/margin-left-right] + deprecated-icon/margin-left-right] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder m2-placeholder :data-name "m2" @@ -133,7 +133,7 @@ [:div {:class (stl/css :top-margin) :title "Top margin"} [:span {:class (stl/css :icon)} - i/margin-top] + deprecated-icon/margin-top] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" :data-name "m1" @@ -145,7 +145,7 @@ [:div {:class (stl/css :right-margin) :title "Right margin"} [:span {:class (stl/css :icon)} - i/margin-right] + deprecated-icon/margin-right] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" :data-name "m2" @@ -158,7 +158,7 @@ [:div {:class (stl/css :bottom-margin) :title "Bottom margin"} [:span {:class (stl/css :icon)} - i/margin-bottom] + deprecated-icon/margin-bottom] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" :data-name "m3" @@ -171,7 +171,7 @@ [:div {:class (stl/css :left-margin) :title "Left margin"} [:span {:class (stl/css :icon)} - i/margin-left] + deprecated-icon/margin-left] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" :data-name "m4" @@ -215,7 +215,7 @@ :selected (= type :multiple)) :title "Margin - multiple" :on-click on-type-change'} - i/margin]])) + deprecated-icon/margin]])) (mf/defc element-behaviour-horizontal {::mf/props :obj @@ -234,20 +234,20 @@ [:& radio-button {:value "fix" - :icon i/fixed-width + :icon deprecated-icon/fixed-width :title "Fix width" :id "behaviour-h-fix"}] (when has-fill [:& radio-button {:value "fill" - :icon i/fill-content + :icon deprecated-icon/fill-content :title "Width 100%" :id "behaviour-h-fill"}]) (when is-auto [:& radio-button {:value "auto" - :icon i/hug-content + :icon deprecated-icon/hug-content :title "Fit content (Horizontal)" :id "behaviour-h-auto"}])]]) @@ -268,7 +268,7 @@ [:& radio-button {:value "fix" - :icon i/fixed-width + :icon deprecated-icon/fixed-width :icon-class (stl/css :rotated) :title "Fix height" :id "behaviour-v-fix"}] @@ -276,14 +276,14 @@ (when has-fill [:& radio-button {:value "fill" - :icon i/fill-content + :icon deprecated-icon/fill-content :icon-class (stl/css :rotated) :title "Height 100%" :id "behaviour-v-fill"}]) (when is-auto [:& radio-button {:value "auto" - :icon i/hug-content + :icon deprecated-icon/hug-content :icon-class (stl/css :rotated) :title "Fit content (Vertical)" :id "behaviour-v-auto"}])]]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index c93bf3320e..43b0726a3b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -26,8 +26,8 @@ [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.ds.foundations.assets.icon :as ds-i] - [app.main.ui.icons :as i] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.sidebar.options.menus.border-radius :refer [border-radius-menu*]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -347,7 +347,7 @@ :opened show-presets-dropdown?) :on-click open-presets} [:span {:class (stl/css :select-name)} (tr "workspace.options.size-presets")] - [:span {:class (stl/css :collapsed-icon)} i/arrow] + [:span {:class (stl/css :collapsed-icon)} deprecated-icon/arrow] [:& dropdown {:show show-presets-dropdown? :on-close close-presets} @@ -371,24 +371,24 @@ [:span {:class (stl/css :preset-name)} (:name size-preset)] [:span {:class (stl/css :preset-size)} (:width size-preset) " x " (:height size-preset)]] (when preset-match - [:span {:class (stl/css :check-icon)} i/tick])])))]]] + [:span {:class (stl/css :check-icon)} deprecated-icon/tick])])))]]] [:& radio-buttons {:selected (or (d/name orientation) "") :on-change on-orientation-change :name "frame-orientation" :wide true :class (stl/css :radio-buttons)} - [:& radio-button {:icon i/size-vertical + [:& radio-button {:icon deprecated-icon/size-vertical :value "vert" :id "size-vertical"}] - [:& radio-button {:icon i/size-horizontal + [:& radio-button {:icon deprecated-icon/size-horizontal :value "horiz" :id "size-horizontal"}]] [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.fit-content") :on-pointer-down handle-fit-content - :icon "fit-content"}]]) + :icon i/fit-content}]]) (when (options :size) [:div {:class (stl/css :size)} @@ -450,7 +450,7 @@ (when (options :rotation) [:div {:class (stl/css :rotation) :title (tr "workspace.options.rotation")} - [:span {:class (stl/css :icon)} i/rotation] + [:span {:class (stl/css :icon)} deprecated-icon/rotation] [:> numeric-input* {:no-validate true :min -359 @@ -481,7 +481,7 @@ :class (stl/css-case :clip-content-label true :selected (not (:show-content values)))} - [:> ds-i/icon* {:icon-id ds-i/clip-content}]]]) + [:> icon* {:icon-id i/clip-content}]]]) (when (options :show-in-viewer) [:div {:class (stl/css :show-in-viewer)} [:input {:type "checkbox" @@ -495,4 +495,4 @@ :title (tr "workspace.options.show-in-viewer") :class (stl/css-case :clip-content-label true :selected (not (:hide-in-viewer values)))} - [:> ds-i/icon* {:icon-id ds-i/play}]]])])])) + [:> icon* {:icon-id i/play}]]])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index aaf5f04770..afc6061ae1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -22,8 +22,9 @@ [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.hooks :as h] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]] [app.util.i18n :as i18n :refer [tr]] @@ -162,7 +163,7 @@ [:button {:class (stl/css-case :more-options true :selected is-open) :on-click on-toggle-open} - i/menu] + deprecated-icon/menu] [:div {:class (stl/css :type-select)} [:& select {:class (stl/css :shadow-type-select) @@ -177,7 +178,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.shadow-options.remove-shadow") :on-click on-remove - :icon "remove"}]]] + :icon i/remove}]]] (when is-open [:& advanced-options {:class (stl/css :shadow-advanced-options) :visible? is-open @@ -334,7 +335,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.shadow-options.add-shadow") :on-click on-add-shadow - :icon "add" + :icon i/add :data-testid "add-shadow"}])]] (when show-content? @@ -347,7 +348,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.shadow-options.remove-shadow") :on-click on-remove-all - :icon "remove"}]]]] + :icon i/remove}]]]] (some? shadows) [:& h/sortable-container {} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs index 4d3f4d6210..309416698e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs @@ -15,6 +15,7 @@ [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.hooks :as h] [app.main.ui.workspace.sidebar.options.rows.stroke-row :refer [stroke-row]] [app.util.dom :as dom] @@ -179,7 +180,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.stroke.add-stroke") :on-click on-add-stroke - :icon "add" + :icon i/add :data-testid "add-stroke"}])]] (when open? [:div {:class (stl/css-case :element-content true @@ -192,7 +193,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.stroke.remove-stroke") :on-click handle-remove-all - :icon "remove"}]] + :icon i/remove}]] (seq strokes) [:& h/sortable-container {} (for [[index value] (d/enumerate (:strokes values []))] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs index ea2ab0ce91..b50adf32bf 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs @@ -11,7 +11,7 @@ [app.main.data.workspace.shapes :as dwsh] [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.functions :as uf] [app.util.i18n :refer [tr]] @@ -50,7 +50,7 @@ [:div {:class (stl/css :attr-actions)} [:button {:class (stl/css :attr-action-btn) :on-click handle-delete} - i/remove-icon]]] + deprecated-icon/remove-icon]]] [:div {:class (stl/css :attr-nested-content)} [:div {:class (stl/css :attr-title)} (str (d/name (last attr)))] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs index 3f5c9ee4cd..93d0692260 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs @@ -22,8 +22,9 @@ [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.context :as ctx] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.hooks :as hooks] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.sidebar.options.menus.typography :refer [text-options typography-entry]] [app.util.dom :as dom] @@ -52,19 +53,19 @@ [:& radio-button {:value "left" :id "text-align-left" :title (tr "workspace.options.text-options.text-align-left" (sc/get-tooltip :text-align-left)) - :icon i/text-align-left}] + :icon deprecated-icon/text-align-left}] [:& radio-button {:value "center" :id "text-align-center" :title (tr "workspace.options.text-options.text-align-center" (sc/get-tooltip :text-align-center)) - :icon i/text-align-center}] + :icon deprecated-icon/text-align-center}] [:& radio-button {:value "right" :id "text-align-right" :title (tr "workspace.options.text-options.text-align-right" (sc/get-tooltip :text-align-right)) - :icon i/text-align-right}] + :icon deprecated-icon/text-align-right}] [:& radio-button {:value "justify" :id "text-align-justify" :title (tr "workspace.options.text-options.text-align-justify" (sc/get-tooltip :text-align-justify)) - :icon i/text-justify}]]])) + :icon deprecated-icon/text-justify}]]])) (mf/defc text-direction-options [{:keys [values on-change on-blur] :as props}] @@ -87,12 +88,12 @@ :type "checkbox" :id "ltr-text-direction" :title (tr "workspace.options.text-options.direction-ltr") - :icon i/text-ltr}] + :icon deprecated-icon/text-ltr}] [:& radio-button {:value "rtl" :type "checkbox" :id "rtl-text-direction" :title (tr "workspace.options.text-options.direction-rtl") - :icon i/text-rtl}]]])) + :icon deprecated-icon/text-rtl}]]])) (mf/defc vertical-align [{:keys [values on-change on-blur] :as props}] @@ -112,15 +113,15 @@ [:& radio-button {:value "top" :id "vertical-text-align-top" :title (tr "workspace.options.text-options.align-top") - :icon i/text-top}] + :icon deprecated-icon/text-top}] [:& radio-button {:value "center" :id "vertical-text-align-center" :title (tr "workspace.options.text-options.align-middle") - :icon i/text-middle}] + :icon deprecated-icon/text-middle}] [:& radio-button {:value "bottom" :id "vertical-text-align-bottom" :title (tr "workspace.options.text-options.align-bottom") - :icon i/text-bottom}]]])) + :icon deprecated-icon/text-bottom}]]])) (mf/defc grow-options [{:keys [ids values on-blur] :as props}] @@ -149,15 +150,15 @@ [:& radio-button {:value "fixed" :id "text-fixed-grow" :title (tr "workspace.options.text-options.grow-fixed") - :icon i/text-fixed}] + :icon deprecated-icon/text-fixed}] [:& radio-button {:value "auto-width" :id "text-auto-width-grow" :title (tr "workspace.options.text-options.grow-auto-width") - :icon i/text-auto-width}] + :icon deprecated-icon/text-auto-width}] [:& radio-button {:value "auto-height" :id "text-auto-height-grow" :title (tr "workspace.options.text-options.grow-auto-height") - :icon i/text-auto-height}]]])) + :icon deprecated-icon/text-auto-height}]]])) (mf/defc text-decoration-options [{:keys [values on-change on-blur] :as props}] @@ -179,12 +180,12 @@ :type "checkbox" :id "underline-text-decoration" :title (tr "workspace.options.text-options.underline" (sc/get-tooltip :underline)) - :icon i/text-underlined}] + :icon deprecated-icon/text-underlined}] [:& radio-button {:value "line-through" :type "checkbox" :id "line-through-text-decoration" :title (tr "workspace.options.text-options.strikethrough" (sc/get-tooltip :line-through)) - :icon i/text-stroked}]]])) + :icon deprecated-icon/text-stroked}]]])) (mf/defc text-menu {::mf/wrap [mf/memo]} @@ -308,7 +309,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "labels.options") :on-click on-convert-to-typography - :icon "add"}])]] + :icon i/add}])]] (when main-menu-open? [:div {:class (stl/css :element-content)} @@ -326,7 +327,7 @@ [:div {:class (stl/css :multiple-typography-button) :on-click handle-detach-typography :title (tr "workspace.libraries.text.multiple-typography-tooltip")} - i/detach]] + deprecated-icon/detach]] :else [:> text-options opts]) @@ -338,7 +339,7 @@ :aria-label (tr "labels.options") :data-testid "text-align-options-button" :on-click toggle-more-options - :icon "menu"}]] + :icon i/menu}]] (when more-options-open? [:div {:class (stl/css :text-decoration-options)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index 3d94e11cf0..35cc2b9949 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs @@ -26,7 +26,7 @@ [app.main.ui.components.search-bar :refer [search-bar*]] [app.main.ui.components.select :refer [select]] [app.main.ui.context :as ctx] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] @@ -79,7 +79,7 @@ [:div {:class (stl/css-case :font-item true :selected is-current)} [:span {:class (stl/css :label)} (:name font)] - [:span {:class (stl/css :icon)} (when is-current i/tick)]]])) + [:span {:class (stl/css :icon)} (when is-current deprecated-icon/tick)]]])) (declare row-renderer) @@ -311,7 +311,7 @@ [:span {:class (stl/css :name)} (:name font)] [:span {:class (stl/css :icon)} - i/arrow]] + deprecated-icon/arrow]] :else (tr "dashboard.fonts.deleted-placeholder"))] @@ -371,7 +371,7 @@ :title (tr "inspect.attributes.typography.line-height")} [:span {:class (stl/css :icon) :alt (tr "workspace.options.text-options.line-height")} - i/text-lineheight] + deprecated-icon/text-lineheight] [:> numeric-input* {:min -200 :max 200 @@ -389,7 +389,7 @@ [:span {:class (stl/css :icon) :alt (tr "workspace.options.text-options.letter-spacing")} - i/text-letterspacing] + deprecated-icon/text-letterspacing] [:> numeric-input* {:min -200 :max 200 @@ -418,17 +418,17 @@ [:& radio-buttons {:selected text-transform :on-change handle-change :name "text-transform"} - [:& radio-button {:icon i/text-uppercase + [:& radio-button {:icon deprecated-icon/text-uppercase :type "checkbox" :title (tr "inspect.attributes.typography.text-transform.uppercase") :value "uppercase" :id "text-transform-uppercase"}] - [:& radio-button {:icon i/text-mixed + [:& radio-button {:icon deprecated-icon/text-mixed :type "checkbox" :value "capitalize" :title (tr "inspect.attributes.typography.text-transform.capitalize") :id "text-transform-capitalize"}] - [:& radio-button {:icon i/text-lowercase + [:& radio-button {:icon deprecated-icon/text-lowercase :type "checkbox" :title (tr "inspect.attributes.typography.text-transform.lowercase") :value "lowercase" @@ -490,7 +490,7 @@ [:div {:class (stl/css :action-btn) :on-click on-close} - i/tick]] + deprecated-icon/tick]] [:& text-options {:values typography :on-change on-change @@ -512,7 +512,7 @@ (:name font-data)] [:div {:class (stl/css :action-btn) :on-click on-close} - i/menu]] + deprecated-icon/menu]] [:div {:class (stl/css :info-row)} [:span {:class (stl/css :info-label)} (tr "labels.variant")] @@ -643,10 +643,10 @@ (when ^boolean on-detach [:button {:class (stl/css :element-set-actions-button) :on-click on-detach} - i/detach]) + deprecated-icon/detach]) [:button {:class (stl/css :menu-btn) :on-click on-open} - i/menu]]] + deprecated-icon/menu]]] [:& typography-advanced-options {:visible? open? diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index 95ff3813d4..b2bd704263 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -20,16 +20,17 @@ [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.reorder-handler :refer [reorder-handler*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.formats :as fmt] [app.main.ui.hooks :as h] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.color :as uc] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) (def ^:private detach-icon - (i/icon-xref :detach (stl/css :detach-icon))) + (deprecated-icon/icon-xref :detach (stl/css :detach-icon))) (defn opacity->string [opacity] @@ -282,10 +283,10 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "settings.remove-color") :on-click on-remove' - :icon "remove"}]) + :icon i/remove}]) (when select-only [:> icon-button* {:variant "ghost" :aria-label (tr "settings.select-this-color") :on-click handle-select - :icon "move"}])])) + :icon i/move}])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs index 3ab9b6298a..9d084a2cb9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs @@ -13,7 +13,7 @@ [app.main.ui.components.reorder-handler :refer [reorder-handler*]] [app.main.ui.components.select :refer [select]] [app.main.ui.hooks :as h] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -165,7 +165,7 @@ [:div {:class (stl/css :stroke-width-input-element) :title (tr "workspace.options.stroke-width")} [:span {:class (stl/css :icon)} - i/stroke-size] + deprecated-icon/stroke-size] [:> numeric-input* {:min 0 :className (stl/css :stroke-width-input) @@ -203,7 +203,7 @@ [:button {:class (stl/css :swap-caps-btn) :on-click on-cap-switch} - i/switch] + deprecated-icon/switch] [:div {:class (stl/css :cap-select)} [:& select diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs index 9cca7a3590..27dee45b59 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs @@ -18,7 +18,8 @@ [app.main.data.workspace.shortcuts] [app.main.store :as st] [app.main.ui.components.search-bar :refer [search-bar*]] - [app.main.ui.icons :as i] + [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :refer [tr]] [app.util.strings :refer [matches-search]] @@ -292,7 +293,7 @@ (stl/css :subsection-title) (stl/css :section-title))} [:span {:class (stl/css-case :open is-visible? - :collapsed-shortcuts true)} i/arrow] + :collapsed-shortcuts true)} deprecated-icon/arrow] [:span {:class (if is-sub? (stl/css :subsection-name) (stl/css :section-name))} name]]) @@ -497,14 +498,14 @@ [:div {:class (stl/css :shortcuts-title)} (tr "shortcuts.title")] [:div {:class (stl/css :shortcuts-close-button) :on-click close-fn} - i/close]] + deprecated-icon/close]] [:div {:class (stl/css :search-field)} [:> search-bar* {:on-change on-search-term-change-2 :on-clear on-search-clear-click :value @filter-term :placeholder (tr "shortcuts.title") - :icon-id "search"}]] + :icon-id i/search}]] (if match-any? [:div {:class (stl/css :shortcuts-list)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs index 942320ec87..57d8fa007b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs @@ -18,8 +18,9 @@ [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.context :as ctx] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.hooks :as hooks] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.notifications.badge :refer [badge-notification]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -158,7 +159,7 @@ :on-double-click on-double-click :on-context-menu on-context-menu} [:div {:class (stl/css :page-icon)} - i/document] + deprecated-icon/document] (if editing? [:* @@ -175,7 +176,7 @@ [:div {:class (stl/css :page-actions)} (when (and deletable? (not read-only?)) [:button {:on-click on-delete} - i/delete])]])]])) + deprecated-icon/delete])]])]])) ;; --- Page Item Wrapper @@ -247,7 +248,7 @@ :class (stl/css :add-page) :aria-label (tr "workspace.sidebar.sitemap.add-page") :on-click on-create - :icon "add"}])] + :icon i/add}])] (when-not ^boolean collapsed [:div {:class (stl/css :tool-window-content)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/versions.cljs b/frontend/src/app/main/ui/workspace/sidebar/versions.cljs index 2f8088f742..1fda5b93e9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/versions.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/versions.cljs @@ -19,7 +19,7 @@ [app.main.ui.components.select :refer [select]] [app.main.ui.dashboard.subscription :refer [get-subscription-type]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.product.cta :refer [cta*]] [app.main.ui.ds.product.milestone :refer [milestone*]] [app.main.ui.ds.product.milestone-group :refer [milestone-group*]] @@ -395,11 +395,11 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.versions.button.save") :on-click on-create-version - :icon "pin"}]] + :icon i/pin}]] (if (empty? data) [:div {:class (stl/css :versions-entry-empty)} - [:div {:class (stl/css :versions-entry-empty-icon)} [:> i/icon* {:icon-id i/history}]] + [:div {:class (stl/css :versions-entry-empty-icon)} [:> icon* {:icon-id i/history}]] [:div {:class (stl/css :versions-entry-empty-msg)} (tr "workspace.versions.empty")]] [:ul {:class (stl/css :versions-entries)} diff --git a/frontend/src/app/main/ui/workspace/text_palette.cljs b/frontend/src/app/main/ui/workspace/text_palette.cljs index 4becd5a546..5325102a05 100644 --- a/frontend/src/app/main/ui/workspace/text_palette.cljs +++ b/frontend/src/app/main/ui/workspace/text_palette.cljs @@ -14,7 +14,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.context :as ctx] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :refer [tr]] [app.util.object :as obj] @@ -147,7 +147,7 @@ (when show-arrows? [:button {:class (stl/css :left-arrow) :disabled (= offset 0) - :on-click on-left-arrow-click} i/arrow]) + :on-click on-left-arrow-click} deprecated-icon/arrow]) [:div {:class (stl/css :text-palette-content) :ref container @@ -176,7 +176,7 @@ (when show-arrows? [:button {:class (stl/css :right-arrow) :disabled (= offset max-offset) - :on-click on-right-arrow-click} i/arrow])])) + :on-click on-right-arrow-click} deprecated-icon/arrow])])) (mf/defc text-palette {::mf/wrap [mf/memo]} diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs index 8034780e58..c2767a27eb 100644 --- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs @@ -10,7 +10,7 @@ [app.common.data.macros :as dm] [app.main.refs :as refs] [app.main.ui.components.dropdown :refer [dropdown]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -37,7 +37,7 @@ (when (= selected (:id cur-library)) [:span {:class (stl/css :icon-wrapper)} - i/tick])])) + deprecated-icon/tick])])) [:li {:class (stl/css-case :file-library true @@ -51,4 +51,4 @@ (dm/str "(" (count typographies) ")")]] (when (= selected :file) [:span {:class (stl/css :icon-wrapper)} - i/tick])]]])) + deprecated-icon/tick])]]])) diff --git a/frontend/src/app/main/ui/workspace/tokens/export.cljs b/frontend/src/app/main/ui/workspace/tokens/export.cljs index e3b2bbff13..41f05ed856 100644 --- a/frontend/src/app/main/ui/workspace/tokens/export.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/export.cljs @@ -9,6 +9,7 @@ (:require [app.main.data.modal :as modal] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.workspace.tokens.export.modal :refer [export-modal-body*]] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -23,5 +24,5 @@ :on-click modal/hide! :aria-label (tr "labels.close") :variant "ghost" - :icon "close"}] + :icon i/close}] [:> export-modal-body*]]]) diff --git a/frontend/src/app/main/ui/workspace/tokens/export/modal.cljs b/frontend/src/app/main/ui/workspace/tokens/export/modal.cljs index 432c91f568..0db9bc5fcb 100644 --- a/frontend/src/app/main/ui/workspace/tokens/export/modal.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/export/modal.cljs @@ -15,7 +15,7 @@ [app.main.store :as st] [app.main.ui.components.code-block :refer [code-block]] [app.main.ui.ds.buttons.button :refer [button*]] - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.ds.foundations.typography.text :refer [text*]] [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]] @@ -98,7 +98,7 @@ [:li {:key path :class (stl/css :file-item)} [:div {:class (stl/css :file-icon)} - [:> icon* {:icon-id "document"}]] + [:> icon* {:icon-id i/document}]] [:div {:class (stl/css :file-name) :title path} path]])]]])) diff --git a/frontend/src/app/main/ui/workspace/tokens/import.cljs b/frontend/src/app/main/ui/workspace/tokens/import.cljs index 26b324b24c..37b00efe26 100644 --- a/frontend/src/app/main/ui/workspace/tokens/import.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/import.cljs @@ -3,6 +3,7 @@ (:require [app.main.data.modal :as modal] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.workspace.tokens.import.modal :refer [import-modal-body*]] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -17,5 +18,5 @@ :on-click modal/hide! :aria-label (tr "labels.close") :variant "ghost" - :icon "close"}] + :icon i/close}] [:> import-modal-body*]]]) diff --git a/frontend/src/app/main/ui/workspace/tokens/import/modal.cljs b/frontend/src/app/main/ui/workspace/tokens/import/modal.cljs index bf87c47d8a..dbd356d1a5 100644 --- a/frontend/src/app/main/ui/workspace/tokens/import/modal.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/import/modal.cljs @@ -17,6 +17,7 @@ [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.controls.shared.options-dropdown :refer [options-dropdown*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.ds.foundations.typography.text :refer [text*]] [app.main.ui.ds.notifications.context-notification :refer [context-notification*]] @@ -103,7 +104,7 @@ [:> button* {:variant "primary" :type "button" :class (stl/css :dropdown-trigger-btn) - :icon "arrow-down" + :icon i/arrow-down :on-click toggle-dropdown :aria-label "Show options"}] diff --git a/frontend/src/app/main/ui/workspace/tokens/management.cljs b/frontend/src/app/main/ui/workspace/tokens/management.cljs index 4e141cc7bb..ba4fbea79e 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management.cljs @@ -11,7 +11,7 @@ [app.main.data.workspace.tokens.library-edit :as dwtl] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.foundations.typography.text :refer [text*]] [app.main.ui.workspace.tokens.management.context-menu :refer [token-context-menu]] [app.main.ui.workspace.tokens.management.group :refer [token-group*]] @@ -136,7 +136,7 @@ (when (and (some? selected-token-set-name) (not (token-set-active? selected-token-set-name))) [:* - [:> i/icon* {:class (stl/css :sets-header-status-icon) :icon-id i/eye-off}] + [:> icon* {:class (stl/css :sets-header-status-icon) :icon-id i/eye-off}] [:> text* {:as "span" :typography "body-small" :class (stl/css :sets-header-status-text)} (tr "workspace.tokens.inactive-set")]])]] diff --git a/frontend/src/app/main/ui/workspace/tokens/management/context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/management/context_menu.cljs index 0fa23958a0..c053f0a695 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/context_menu.cljs @@ -20,7 +20,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.util.dom :as dom] [app.util.i18n :refer [tr]] [app.util.timers :as timers] @@ -418,12 +418,12 @@ (when hint [:span {:class (stl/css :context-menu-item-hint)} hint]) (when (not no-selectable) - [:> icon* {:icon-id "tick" :size "s" :class (stl/css :icon-wrapper)}]) + [:> icon* {:icon-id i/tick :size "s" :class (stl/css :icon-wrapper)}]) [:span {:class (stl/css :item-text)} title] (when children [:* - [:> icon* {:icon-id "arrow" :size "s"}] + [:> icon* {:icon-id i/arrow :size "s"}] [:ul {:ref submenu-ref :class (stl/css-case :token-context-submenu true diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs b/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs index c31b2bde82..95a34797cc 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs @@ -825,7 +825,7 @@ custom-input-token-value-props: Custom props passed to the custom-input-token-va [:> icon-button* {:on-click on-click-dropdown-button :aria-label (tr "workspace.tokens.token-font-family-select") - :icon "arrow-down" + :icon i/arrow-down :variant "action" :type "button"}])] [:* @@ -836,7 +836,7 @@ custom-input-token-value-props: Custom props passed to the custom-input-token-va :ref input-ref :on-blur on-blur :on-change on-update-value' - :icon "text-font-family" + :icon i/text-font-family :slot-end font-selector-button :token-resolve-result token-resolve-result}] (when font-selector-open? diff --git a/frontend/src/app/main/ui/workspace/tokens/management/group.cljs b/frontend/src/app/main/ui/workspace/tokens/management/group.cljs index f014375a60..dfdd2f202d 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/group.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/group.cljs @@ -15,6 +15,7 @@ [app.main.store :as st] [app.main.ui.context :as ctx] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.tokens.management.token-pill :refer [token-pill*]] [app.util.dom :as dom] @@ -109,7 +110,7 @@ (when can-edit? [:> icon-button* {:on-click on-popover-open-click :variant "ghost" - :icon "add" + :icon i/add :aria-label (tr "workspace.tokens.add-token" title)}])] (when is-open [:& cmm/asset-section-block {:role :content} diff --git a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs index 372d19d548..b24793a1bf 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs @@ -17,7 +17,7 @@ [app.main.data.workspace.tokens.color :as dwtc] [app.main.refs :as refs] [app.main.ui.components.color-bullet :refer [color-bullet]] - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.foundations.utilities.token.token-status :refer [token-status-icon*]] [app.util.dom :as dom] [app.util.i18n :refer [tr]] @@ -319,7 +319,7 @@ (cond errors? [:> icon* - {:icon-id "broken-link" + {:icon-id i/broken-link :class (stl/css :token-pill-icon)}] color diff --git a/frontend/src/app/main/ui/workspace/tokens/sets/lists.cljs b/frontend/src/app/main/ui/workspace/tokens/sets/lists.cljs index cf0cff1d95..3b772f2009 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets/lists.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets/lists.cljs @@ -14,7 +14,7 @@ [app.main.store :as st] [app.main.ui.context :as ctx] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as ic] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.foundations.typography.text :refer [text*]] [app.main.ui.hooks :as h] [app.main.ui.workspace.tokens.sets.helpers :as sets-helpers] @@ -86,7 +86,7 @@ {:aria-label aria-label :class (stl/css :check-icon) :size "s" - :icon-id (if mixed? ic/remove ic/tick)}])])) + :icon-id (if mixed? i/remove i/tick)}])])) (mf/defc inline-add-button* [] @@ -105,7 +105,7 @@ (mf/defc add-button* [] [:> icon-button* {:variant "ghost" - :icon "add" + :icon i/add :on-click on-start-creation :aria-label (tr "workspace.tokens.add set")}]) @@ -298,7 +298,7 @@ :aria-checked is-active} [:> icon* - {:icon-id "document" + {:icon-id i/document :class (stl/css-case :icon true :root-icon (not tree-depth))}] (if is-editing diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 22e5dd9bfa..3e8efc67d6 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -17,6 +17,7 @@ [app.main.ui.context :as ctx] [app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.hooks :as h] [app.main.ui.hooks.resize :refer [use-resize-hook]] [app.main.ui.workspace.tokens.management :refer [tokens-section*]] @@ -120,7 +121,7 @@ [:div {:class (stl/css :import-export-button-wrapper)} [:> button* {:on-click open-menu - :icon "import-export" + :icon i/import-export :variant "secondary"} (tr "workspace.tokens.tools")] [:> dropdown-menu* {:show show-menu? @@ -139,7 +140,7 @@ (when (and can-edit? (contains? cf/flags :token-base-font-size)) [:> icon-button* {:variant "secondary" - :icon "settings" + :icon i/settings :aria-label "Settings" :on-click open-settings-modal}])])) diff --git a/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.cljs b/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.cljs index 8bae6baaf0..2c9ac18e42 100644 --- a/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.cljs @@ -22,10 +22,10 @@ [app.main.ui.ds.controls.combobox :refer [combobox*]] [app.main.ui.ds.controls.input :refer [input*]] [app.main.ui.ds.controls.utilities.label :refer [label*]] - [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as ic] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.ds.foundations.typography.text :refer [text*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.tokens.sets.lists :as wts] [app.util.dom :as dom] [app.util.i18n :refer [tr]] @@ -69,11 +69,11 @@ :name name} [:& radio-button {:id :on :value :on - :icon i/tick + :icon deprecated-icon/tick :label ""}] [:& radio-button {:id :off :value :off - :icon i/close + :icon deprecated-icon/close :label ""}]])) (mf/defc themes-overview @@ -102,7 +102,7 @@ :class (stl/css :theme-group-label) :typography "body-large"} [:div {:class (stl/css :group-title) :title (str (tr "workspace.tokens.group-name") ": " group)} - [:> icon* {:icon-id "group" :class (stl/css :group-title-icon)}] + [:> icon* {:icon-id i/group :class (stl/css :group-title-icon)}] [:> text* {:as "span" :typography "body-medium" :class (stl/css :group-title-name)} group]]]) [:ul {:class (stl/css :theme-group-rows-wrapper)} (for [[_ {:keys [group name] :as theme}] themes @@ -147,12 +147,12 @@ (if sets-count (tr "workspace.tokens.num-active-sets" sets-count) (tr "workspace.tokens.no-active-sets"))] - [:> icon* {:icon-id "arrow-right"}]]]) + [:> icon* {:icon-id i/arrow-right}]]]) [:> icon-button* {:on-click delete-theme :variant "ghost" :aria-label (tr "workspace.tokens.delete-theme-title") - :icon "delete"}]]])]])] + :icon i/delete}]]])]])] [:div {:class (stl/css :button-footer)} [:> button* {:variant "secondary" @@ -334,7 +334,7 @@ [:button {:on-click on-back :class (stl/css :back-btn) :type "button"} - [:> icon* {:icon-id ic/arrow-left :aria-hidden true}] + [:> icon* {:icon-id i/arrow-left :aria-hidden true}] (tr "workspace.tokens.back-to-themes")]) [:> theme-inputs* {:theme current-theme @@ -357,7 +357,7 @@ (when is-editing [:> button* {:variant "secondary" :type "button" - :icon "delete" + :icon i/delete :on-click on-delete-theme} (tr "labels.delete")]) [:div {:class (stl/css :button-footer)} @@ -441,5 +441,5 @@ :on-click modal/hide! :aria-label (tr "labels.close") :variant "action" - :icon "close"}] + :icon i/close}] [:> themes-modal-body*]]]) diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.cljs b/frontend/src/app/main/ui/workspace/top_toolbar.cljs index 5d8abacdad..54a6bca3e0 100644 --- a/frontend/src/app/main/ui/workspace/top_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/top_toolbar.cljs @@ -19,7 +19,7 @@ [app.main.store :as st] [app.main.ui.components.file-uploader :refer [file-uploader]] [app.main.ui.context :as ctx] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.timers :as ts] @@ -58,7 +58,7 @@ :aria-label (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image)) :on-click on-click :class (stl/css :main-toolbar-options-button)} - i/img + deprecated-icon/img [:& file-uploader {:input-id "image-upload" :accept dwm/accept-image-types @@ -143,7 +143,7 @@ :selected (and (nil? drawtool) (not edition))) :on-click interrupt} - i/move]] + deprecated-icon/move]] [:* [:li [:button @@ -153,7 +153,7 @@ :on-click select-drawtool :data-tool "frame" :data-testid "artboard-btn"} - i/board]] + deprecated-icon/board]] [:li [:button {:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect)) @@ -162,7 +162,7 @@ :on-click select-drawtool :data-tool "rect" :data-testid "rect-btn"} - i/rectangle]] + deprecated-icon/rectangle]] [:li [:button {:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse)) @@ -171,7 +171,7 @@ :on-click select-drawtool :data-tool "circle" :data-testid "ellipse-btn"} - i/elipse]] + deprecated-icon/elipse]] [:li [:button {:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text)) @@ -179,7 +179,7 @@ :class (stl/css-case :main-toolbar-options-button true :selected (= drawtool :text)) :on-click select-drawtool :data-tool "text"} - i/text]] + deprecated-icon/text]] [:& image-upload] @@ -191,7 +191,7 @@ :on-click select-drawtool :data-tool "curve" :data-testid "curve-btn"} - i/curve]] + deprecated-icon/curve]] [:li [:button {:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path)) @@ -200,7 +200,7 @@ :on-click select-drawtool :data-tool "path" :data-testid "path-btn"} - i/path]] + deprecated-icon/path]] (when (features/active-feature? @st/state "plugins/runtime") [:li @@ -214,7 +214,7 @@ (modal/show :plugin-management {})) :data-tool "plugins" :data-testid "plugins-btn"} - i/puzzle]]) + deprecated-icon/puzzle]]) (when *assert* [:li @@ -222,7 +222,7 @@ {:title "Debugging tool" :class (stl/css-case :main-toolbar-options-button true :selected (contains? layout :debug-panel)) :on-click toggle-debug-panel} - i/bug]])]] + deprecated-icon/bug]])]] [:button {:title (tr "workspace.toolbar.toggle-toolbar") :aria-label (tr "workspace.toolbar.toggle-toolbar") diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs index 4f94b0bde0..2b5085bf8f 100644 --- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs @@ -28,7 +28,7 @@ [app.main.store :as st] [app.main.ui.css-cursors :as cur] [app.main.ui.formats :as fmt] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.viewport.viewport-ref :as uwvv] [app.util.debug :as dbg] [app.util.dom :as dom] @@ -915,7 +915,7 @@ :on-blur handle-blur-track-input}] (when (and hovering? (not medium?) (not small?)) [:button {:class (stl/css :grid-editor-button) - :on-click handle-show-track-menu} i/menu])]])] + :on-click handle-show-track-menu} deprecated-icon/menu])]])] [:g {:transform (when (= type :row) (dm/fmt "rotate(-90 % %)" (:x marker-p) (:y marker-p)))} [:& track-marker diff --git a/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs b/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs index 5930c74c12..81bd964e5c 100644 --- a/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs @@ -11,39 +11,39 @@ [app.main.data.workspace.path :as drp] [app.main.data.workspace.path.shortcuts :as sc] [app.main.store :as st] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) (def ^:private pentool-icon - (i/icon-xref :pentool (stl/css :pentool-icon :pathbar-icon))) + (deprecated-icon/icon-xref :pentool (stl/css :pentool-icon :pathbar-icon))) (def ^:private move-icon - (i/icon-xref :move (stl/css :move-icon :pathbar-icon))) + (deprecated-icon/icon-xref :move (stl/css :move-icon :pathbar-icon))) (def ^:private add-icon - (i/icon-xref :add (stl/css :add-icon :pathbar-icon))) + (deprecated-icon/icon-xref :add (stl/css :add-icon :pathbar-icon))) (def ^:private remove-icon - (i/icon-xref :remove (stl/css :remove :pathbar-icon))) + (deprecated-icon/icon-xref :remove (stl/css :remove :pathbar-icon))) (def ^:private merge-nodes-icon - (i/icon-xref :merge-nodes (stl/css :merge-nodes-icon :pathbar-icon))) + (deprecated-icon/icon-xref :merge-nodes (stl/css :merge-nodes-icon :pathbar-icon))) (def ^:private join-nodes-icon - (i/icon-xref :join-nodes (stl/css :join-nodes-icon :pathbar-icon))) + (deprecated-icon/icon-xref :join-nodes (stl/css :join-nodes-icon :pathbar-icon))) (def ^:private separate-nodes-icon - (i/icon-xref :separate-nodes (stl/css :separate-nodes-icon :pathbar-icon))) + (deprecated-icon/icon-xref :separate-nodes (stl/css :separate-nodes-icon :pathbar-icon))) (def ^:private to-corner-icon - (i/icon-xref :to-corner (stl/css :to-corner-icon :pathbar-icon))) + (deprecated-icon/icon-xref :to-corner (stl/css :to-corner-icon :pathbar-icon))) (def ^:private to-curve-icon - (i/icon-xref :to-curve (stl/css :to-curve-icon :pathbar-icon))) + (deprecated-icon/icon-xref :to-curve (stl/css :to-curve-icon :pathbar-icon))) (def ^:private snap-nodes-icon - (i/icon-xref :snap-nodes (stl/css :snap-nodes-icon :pathbar-icon))) + (deprecated-icon/icon-xref :snap-nodes (stl/css :snap-nodes-icon :pathbar-icon))) (defn check-enabled [content selected-points] (when content diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index 816eee1fa8..b017e7bd78 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs @@ -23,7 +23,7 @@ [app.main.streams :as ms] [app.main.ui.context :as ctx] [app.main.ui.hooks :as hooks] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.viewport.utils :as vwu] [app.util.debug :as dbg] [app.util.dom :as dom] @@ -330,7 +330,7 @@ :on-double-click on-double-click :on-pointer-enter on-pointer-enter :on-pointer-leave on-pointer-leave} - i/play + deprecated-icon/play [:span flow-name]]]])) (mf/defc frame-flows*