diff --git a/frontend/resources/images/icons/absolute-refactor.svg b/frontend/resources/images/icons/absolute-refactor.svg
new file mode 100644
index 000000000..3873e322a
--- /dev/null
+++ b/frontend/resources/images/icons/absolute-refactor.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/library-refactor.svg b/frontend/resources/images/icons/library-refactor.svg
new file mode 100644
index 000000000..a961bb3e3
--- /dev/null
+++ b/frontend/resources/images/icons/library-refactor.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/open-link-refactor.svg b/frontend/resources/images/icons/open-link-refactor.svg
new file mode 100644
index 000000000..be28efba2
--- /dev/null
+++ b/frontend/resources/images/icons/open-link-refactor.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/svg-refactor.svg b/frontend/resources/images/icons/svg-refactor.svg
new file mode 100644
index 000000000..711521877
--- /dev/null
+++ b/frontend/resources/images/icons/svg-refactor.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/text-Paragraph-refactor.svg b/frontend/resources/images/icons/text-paragraph-refactor.svg
similarity index 100%
rename from frontend/resources/images/icons/text-Paragraph-refactor.svg
rename to frontend/resources/images/icons/text-paragraph-refactor.svg
diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index 27a9b2777..1f2143931 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -26,6 +26,7 @@
--tab-foreground-color-hover: var(--color-foreground-primary);
--tab-foreground-color-selected: var(--color-accent-primary);
+ --title-background-color: var(--color-background-secondary);
--title-foreground-color: var(--color-foreground-secondary);
--title-foreground-color-hover: var(--color-foreground-primary);
diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs
index 41bff1994..7e338c7f5 100644
--- a/frontend/src/app/main/ui/icons.cljs
+++ b/frontend/src/app/main/ui/icons.cljs
@@ -261,21 +261,45 @@
(def add-refactor (icon-xref :add-refactor))
(def arrow-refactor (icon-xref :arrow-refactor))
+(def absolute-refactor (icon-xref :absolute-refactor))
+(def align-bottom-refactor (icon-xref :align-bottom-refactor))
+(def align-content-center-refactor (icon-xref :align-content-center-refactor))
+(def align-content-end-refactor (icon-xref :align-content-end-refactor))
+(def align-content-space-around-refactor (icon-xref :align-content-space-around-refactor))
+(def align-content-space-between-refactor (icon-xref :align-content-space-between-refactor))
+(def align-content-space-evenly-refactor (icon-xref :align-content-space-evenly-refactor))
+(def align-content-start-refactor (icon-xref :align-content-start-refactor))
+(def align-horizontal-center-refactor (icon-xref :align-horizontal-center-refactor))
+(def align-vertical-center-refactor (icon-xref :align-vertical-center-refactor))
+(def align-items-center-refactor (icon-xref :align-items-center-refactor))
+(def align-items-end-refactor (icon-xref :align-items-end-refactor))
+(def align-items-start-refactor (icon-xref :align-items-start-refactor))
+(def align-left-refactor (icon-xref :align-left-refactor))
+(def align-right-refactor (icon-xref :align-right-refactor))
+(def align-top-refactor (icon-xref :align-top-refactor))
(def board-refactor (icon-xref :board-refactor))
(def boards-thumbnail-refactor (icon-xref :boards-thumbnail-refactor))
(def boolean-difference-refactor (icon-xref :boolean-difference-refactor))
(def boolean-exclude-refactor (icon-xref :boolean-exclude-refactor))
(def boolean-flatten-refactor (icon-xref :boolean-flatten-refactor))
(def boolean-intersection-refactor (icon-xref :boolean-intersection-refactor))
+(def boolean-union-refactor (icon-xref :boolean-union-refactor))
(def close-refactor (icon-xref :close-refactor))
(def close-small-refactor (icon-xref :close-small-refactor))
(def component-refactor (icon-xref :component-refactor))
(def copy-refactor (icon-xref :copy-refactor))
+(def column-refactor (icon-xref :column-refactor))
+(def column-reverse-refactor (icon-xref :column-reverse-refactor))
+(def constraint-horizontal-refactor (icon-xref :constraint-horizontal-refactor))
+(def constraint-vertical-refactor (icon-xref :constraint-vertical-refactor))
+(def corner-radius-refactor (icon-xref :corner-radius-refactor))
(def curve-refactor (icon-xref :curve-refactor))
+(def distribute-vertical-sapcing-refactor (icon-xref :distribute-vertical-spacing-refactor))
(def delete-refactor (icon-xref :delete-refactor))
(def delete-text-refactor (icon-xref :delete-text-refactor))
(def document-refactor (icon-xref :document-refactor))
(def drop-refactor (icon-xref :drop-refactor))
+(def effects-refactor (icon-xref :effects-refactor))
(def elipse-refactor (icon-xref :elipse-refactor))
(def filter-refactor (icon-xref :filter-refactor))
(def flex-refactor (icon-xref :flex-refactor))
@@ -283,21 +307,74 @@
(def flex-grid-refactor (icon-xref :flex-grid-refactor))
(def flex-vertical-refactor (icon-xref :flex-vertical-refactor))
(def flip-horizontal-refactor (icon-xref :flip-horizontal-refactor))
+(def grid-column-refactor (icon-xref :grid-column-refactor))
+(def grid-columns-refactor (icon-xref :grid-columns-refactor))
+(def grid-gutter-refactor (icon-xref :grid-gutter-refactor))
+(def grid-margin-refactor (icon-xref :grid-margin-refactor))
+(def grid-row-refactor (icon-xref :grid-row-refactor))
+(def grid-rows-refactor (icon-xref :grid-rows-refactor))
+(def grid-square-refactor (icon-xref :grid-square-refactor))
+(def grid-refactor (icon-xref :grid-refactor))
(def group-refactor (icon-xref :group-refactor))
+(def gutter-horizontal-refactor (icon-xref :gutter-horizontal-refactor))
+(def gutter-vertical-refactor (icon-xref :gutter-vertical-refactor))
(def hide-refactor (icon-xref :hide-refactor))
(def img-refactor (icon-xref :img-refactor))
+(def icon-refactor (icon-xref :icon-refactor))
+(def justify-content-center-refactor (icon-xref :justify-content-center-refactor))
+(def justify-content-end-refactor (icon-xref :justify-content-end-refactor))
+(def justify-content-start-refactor (icon-xref :justify-content-start-refactor))
+(def justify-content-space-between-refactor (icon-xref :justify-content-space-between-refactor))
+(def justify-content-space-around-refactor (icon-xref :justify-content-space-around-refactor))
+(def justify-content-space-evenly-refactor (icon-xref :justify-content-space-evenly-refactor))
(def lock-refactor (icon-xref :lock-refactor))
+(def library-refactor (icon-xref :library-refactor))
+(def margin-bottom-refactor (icon-xref :margin-bottom-refactor))
+(def margin-left-refactor (icon-xref :margin-left-refactor))
+(def margin-left-right-refactor (icon-xref :margin-left-right-refactor))
+(def margin-right-refactor (icon-xref :margin-right-refactor))
+(def margin-top-refactor (icon-xref :margin-top-refactor))
+(def margin-top-bottom-refactor (icon-xref :margin-top-bottom-refactor))
(def mask-refactor (icon-xref :mask-refactor))
+(def masked-refactor (icon-xref :masked-refactor))
(def menu-refactor (icon-xref :menu-refactor))
+(def move-refactor (icon-xref :move-refactor))
+(def open-link-refactor (icon-xref :open-link-refactor))
+(def padding-bottom-refactor (icon-xref :padding-bottom-refactor))
+(def padding-top-refactor (icon-xref :padding-top-refactor))
+(def padding-top-bottom-refactor (icon-xref :padding-top-bottom-refactor))
+(def padding-left-refactor (icon-xref :padding-left-refactor))
+(def padding-left-right-refactor (icon-xref :padding-left-right-refactor))
+(def padding-right-refactor (icon-xref :padding-right-refactor))
+(def padding-extended-refactor (icon-xref :padding-extended-refactor))
(def path-refactor (icon-xref :path-refactor))
+(def pentool-refactor (icon-xref :pentool-refactor))
(def rectangle-refactor (icon-xref :rectangle-refactor))
+(def remove-refactor (icon-xref :remove-refactor))
+(def rotation-refactor (icon-xref :rotation-refactor))
+(def row-reverse-refactor (icon-xref :row-reverse-refactor))
(def search-refactor (icon-xref :search-refactor))
+(def size-horizontal-refactor (icon-xref :size-horizontal-refactor))
+(def size-vertical-refactor (icon-xref :size-vertical-refactor))
(def shown-refactor (icon-xref :shown-refactor))
+(def stroke-size-refactor (icon-xref :stroke-size-refactor))
+(def svg-refactor (icon-xref :svg-refactor))
+(def swatches-refactor (icon-xref :swatches-refactor))
+(def text-align-center-refactor (icon-xref :text-align-center-refactor))
+(def text-align-left-refactor (icon-xref :text-align-left-refactor))
+(def text-align-right-refactor (icon-xref :text-align-right-refactor))
+(def text-auto-height-refactor (icon-xref :text-auto-height-refactor))
+(def text-auto-width-refactor (icon-xref :text-auto-width-refactor))
+(def text-paragraph-refactor (icon-xref :text-paragraph-refactor))
(def text-refactor (icon-xref :text-refactor))
(def text-palette-refactor (icon-xref :text-palette-refactor))
(def tick-refactor (icon-xref :tick-refactor))
(def unlock-refactor (icon-xref :unlock-refactor))
-(def boolean-union-refactor (icon-xref :boolean-union-refactor))
+(def vertical-align-items-center-refactor (icon-xref :vertical-align-items-center-refactor))
+(def vertical-align-items-end-refactor (icon-xref :vertical-align-items-end-refactor))
+(def vertical-align-items-start-refactor (icon-xref :vertical-align-items-start-refactor))
+(def view-as-icons-refactor (icon-xref :view-as-icons-refactor))
+(def wrap-refactor (icon-xref :wrap-refactor))
(def loader-pencil
(mf/html
[:svg
diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
index 7e17c0f7d..64843fa1f 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
@@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.sidebar.shortcuts
+ (:require-macros [app.main.style :refer [css]])
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
@@ -17,6 +18,7 @@
[app.main.data.workspace.path.shortcuts]
[app.main.data.workspace.shortcuts]
[app.main.store :as st]
+ [app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
@@ -29,7 +31,8 @@
(mf/defc converted-chars
[{:keys [char command] :as props}]
- (let [modified-keys {:up ds/up-arrow
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)
+ modified-keys {:up ds/up-arrow
:down ds/down-arrow
:left ds/left-arrow
:right ds/right-arrow
@@ -47,8 +50,10 @@
char (if (contains? modified-keys (keyword char)) ((keyword char) modified-keys) char)
char (if (and is-macos? (contains? macos-keys (keyword char))) ((keyword char) macos-keys) char)
unique-key (str (d/name command) "-" char)]
- [:*
- [:span.char-box {:key unique-key} char]]))
+ (if new-css-system
+ [:span {:class (css :key)
+ :key unique-key} char]
+ [:span.char-box {:key unique-key} char])))
(defn translation-keyname
[type keyname]
@@ -212,7 +217,8 @@
(mf/defc shortcuts-keys
[{:keys [content command] :as props}]
- (let [managed-list (if (coll? content)
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)
+ managed-list (if (coll? content)
content
(conj () content))
chars-list (map ds/split-sc managed-list)
@@ -221,50 +227,90 @@
chars-list
(drop-last chars-list))
penultimate (last short-char-list)]
- [:span.keys
- (for [chars short-char-list]
- [:*
- (for [char chars]
- [:& converted-chars {:key (dm/str char "-" (name command))
- :char char
- :command command}])
- (when (not= chars penultimate) [:span.space ","])])
- (when (not= last-element penultimate)
- [:*
- [:span.space (tr "shortcuts.or")]
- (for [char last-element]
- [:& converted-chars {:key (dm/str char "-" (name command))
- :char char
- :command command}])])]))
+ (if new-css-system
+ [:span {:class (css :keys)}
+ (for [chars short-char-list]
+ [:*
+ (for [char chars]
+ [:& converted-chars {:key (dm/str char "-" (name command))
+ :char char
+ :command command}])
+ (when (not= chars penultimate) [:span {:class (css :space)} ","])])
+ (when (not= last-element penultimate)
+ [:*
+ [:span {:class (css :space)} (tr "shortcuts.or")]
+ (for [char last-element]
+ [:& converted-chars {:key (dm/str char "-" (name command))
+ :char char
+ :command command}])])]
+
+ [:span.keys
+ (for [chars short-char-list]
+ [:*
+ (for [char chars]
+ [:& converted-chars {:key (dm/str char "-" (name command))
+ :char char
+ :command command}])
+ (when (not= chars penultimate) [:span.space ","])])
+ (when (not= last-element penultimate)
+ [:*
+ [:span.space (tr "shortcuts.or")]
+ (for [char last-element]
+ [:& converted-chars {:key (dm/str char "-" (name command))
+ :char char
+ :command command}])])])))
(mf/defc shortcut-row
[{:keys [elements filter-term match-section? match-subsection?] :as props}]
- (let [shortcut-name (keys elements)
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)
+ shortcut-name (keys elements)
shortcut-translations (map #(translation-keyname :sc %) shortcut-name)
match-shortcut? (some #(matches-search % @filter-term) shortcut-translations)
filtered (if (and (or match-section? match-subsection?) (not match-shortcut?))
shortcut-translations
(filter #(matches-search % @filter-term) shortcut-translations))
sorted-filtered (sort filtered)]
- [:ul.sub-menu
- (for [command-translate sorted-filtered]
- (let [sc-by-translate (first (filter #(= (:translation (second %)) command-translate) elements))
- [command comand-info] sc-by-translate
- content (:command comand-info)]
- [:li.shortcut-name {:key command-translate}
- [:span.command-name command-translate]
- [:& shortcuts-keys {:content content
- :command command}]]))]))
+
+ (if new-css-system
+ [:ul {:class (css :sub-menu)}
+ (for [command-translate sorted-filtered]
+ (let [sc-by-translate (first (filter #(= (:translation (second %)) command-translate) elements))
+ [command comand-info] sc-by-translate
+ content (:command comand-info)]
+ [:li {:class (css :shortcuts-name)
+ :key command-translate}
+ [:span {:class (css :command-name)}
+ command-translate]
+ [:& shortcuts-keys {:content content
+ :command command}]]))]
+
+ [:ul.sub-menu
+ (for [command-translate sorted-filtered]
+ (let [sc-by-translate (first (filter #(= (:translation (second %)) command-translate) elements))
+ [command comand-info] sc-by-translate
+ content (:command comand-info)]
+ [:li.shortcut-name {:key command-translate}
+ [:span.command-name command-translate]
+ [:& shortcuts-keys {:content content
+ :command command}]]))])))
(mf/defc section-title
[{:keys [is-visible? name is-sub?] :as props}]
- [:div {:class (if is-sub? "subsection-title" "section-title")}
- [:span.collapesed-shortcuts {:class (when is-visible? "open")} i/arrow-slide]
- [:span {:class (if is-sub? "subsection-name" "section-name")} name]])
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)]
+ (if new-css-system
+ [:div {:class (if is-sub? (css :subsection-title) (css :section-title))}
+ [:span {:class (dom/classnames (css :open) is-visible?
+ (css :collapsed-shortcuts) true)} i/arrow-refactor]
+ [:span {:class (if is-sub? (css :subsection-name) (css :section-name))} name]]
+
+ [:div {:class (if is-sub? "subsection-title" "section-title")}
+ [:span.collapesed-shortcuts {:class (when is-visible? "open")} i/arrow-slide]
+ [:span {:class (if is-sub? "subsection-name" "section-name")} name]])))
(mf/defc shortcut-subsection
[{:keys [subsections manage-sections filter-term match-section? open-sections] :as props}]
- (let [subsections-names (keys subsections)
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)
+ subsections-names (keys subsections)
subsection-translations (if (= :none (first subsections-names))
(map #(translation-keyname :sc %) subsections-names)
(map #(translation-keyname :sub-sec %) subsections-names))
@@ -276,8 +322,9 @@
:filter-term filter-term
:match-section? match-section?
:match-subsection? true}])
-
- [:ul.subsection-menu
+
+ [:ul {:class (dom/classnames (css :subsection-menu) new-css-system
+ :subsection-menu (not new-css-system))}
(for [sub-translated sorted-translations]
(let [sub-by-translate (first (filter #(= (:translation (second %)) sub-translated) subsections))
[sub-name sub-info] sub-by-translate
@@ -314,8 +361,10 @@
translations (map #(translation-keyname :sc %) (keys subs-bodys))
match-shortcut? (some #(matches-search % @filter-term) translations)
visible? (some #(= % section-id) @open-sections)]
+
(when (or match-section? match-subsection? match-shortcut?)
- [:div {:on-click (manage-sections section-id)}
+ [:div {:class (css :section)
+ :on-click (manage-sections section-id)}
[:& section-title {:is-visible? visible?
:is-sub? false
:name section-translation}]
@@ -329,7 +378,8 @@
(mf/defc shortcuts-container
[]
- (let [workspace-shortcuts app.main.data.workspace.shortcuts/shortcuts
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)
+ workspace-shortcuts app.main.data.workspace.shortcuts/shortcuts
path-shortcuts app.main.data.workspace.path.shortcuts/shortcuts
all-workspace-shortcuts (->> (d/deep-merge path-shortcuts workspace-shortcuts)
(add-translation :sc)
@@ -468,39 +518,78 @@
(on-search-clear-click)
(dom/focus! (dom/get-element "shortcut-search")))))]
- (mf/with-effect []
- (dom/focus! (dom/get-element "shortcut-search")))
+ (mf/with-effect []
+ (dom/focus! (dom/get-element "shortcut-search")))
- [:div.shortcuts
- [:div.shortcuts-header
- [:div.shortcuts-close-button
- {:on-click close-fn} i/close]
- [:div.shortcuts-title (tr "shortcuts.title")]]
- [:div.search-field
- [:div.search-box
- [:input.input-text
- {:id "shortcut-search"
- :placeholder (tr "shortcuts.search-placeholder")
- :type "text"
- :value @filter-term
- :on-change on-search-term-change
- :auto-complete "off"
- :on-key-down manage-key-down}]
- (if (str/empty? @filter-term)
- [:span.icon-wrapper
- i/search]
- [:button.icon-wrapper
- {:on-click on-search-clear-click
- :on-key-down on-key-down}
- [:span.icon.close
- i/close]])]]
- (if match-any?
- [:div.shortcut-list
- (for [section all-shortcuts]
- [:& shortcut-section
- {:section section
- :manage-sections manage-sections
- :open-sections open-sections
- :filter-term filter-term}])]
+ (if new-css-system
+ [:div {:class (css :shortcuts)}
+ [:div {:class (css :shortcuts-header)}
+ [:div {:class (css :shortcuts-title)} "Keyboard Shortcuts"]
+ [:div {:class (css :shortcuts-close-button)
+ :on-click close-fn}
+ i/close-refactor]]
+ ;; TODO Change this for search bar component
+ [:div {:class (css :search-field)}
+ [:div {:class (css :search-box)}
+ [:span {:class (css :icon-wrapper)}
+ i/search-refactor]
+ [:input {:class (dom/classnames (css :input-text) true)
+ :id "shortcut-search"
+ :placeholder (tr "shortcuts.title")
+ :type "text"
+ :value @filter-term
+ :on-change on-search-term-change
+ :auto-complete "off"
+ :on-key-down manage-key-down}]
+ (when (not (str/empty? @filter-term))
- [:div.not-found (tr "shortcuts.not-found")])]))
+ [:button
+ {:class (css :clear-btn)
+ :on-click on-search-clear-click
+ :on-key-down on-key-down}
+ [:span {:class (css :clear-icon)}
+ i/delete-text-refactor]])]]
+
+ (if match-any?
+ [:div {:class (dom/classnames (css :shortcuts-list) true)}
+ (for [section all-shortcuts]
+ [:& shortcut-section
+ {:section section
+ :manage-sections manage-sections
+ :open-sections open-sections
+ :filter-term filter-term}])]
+ [:div {:class (css :not-found)} (tr "shortcuts.not-found")])]
+
+ [:div.shortcuts
+ [:div.shortcuts-header
+ [:div.shortcuts-close-button
+ {:on-click close-fn} i/close]
+ [:div.shortcuts-title (tr "shortcuts.title")]]
+ [:div.search-field
+ [:div.search-box
+ [:input.input-text
+ {:id "shortcut-search"
+ :placeholder (tr "shortcuts.search-placeholder")
+ :type "text"
+ :value @filter-term
+ :on-change on-search-term-change
+ :auto-complete "off"
+ :on-key-down manage-key-down}]
+ (if (str/empty? @filter-term)
+ [:span.icon-wrapper
+ i/search]
+ [:button.icon-wrapper
+ {:on-click on-search-clear-click
+ :on-key-down on-key-down}
+ [:span.icon.close
+ i/close]])]]
+ (if match-any?
+ [:div.shortcut-list
+ (for [section all-shortcuts]
+ [:& shortcut-section
+ {:section section
+ :manage-sections manage-sections
+ :open-sections open-sections
+ :filter-term filter-term}])]
+
+ [:div.not-found (tr "shortcuts.not-found")])])))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.css.json b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.css.json
new file mode 100644
index 000000000..c2e9635b9
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.css.json
@@ -0,0 +1 @@
+{"button-primary":"sidebar_shortcuts_button-primary_aIZ1F","shortcuts":"sidebar_shortcuts_shortcuts_cOJNo","shortcuts-header":"sidebar_shortcuts_shortcuts-header_0SZ19","shortcuts-close-button":"sidebar_shortcuts_shortcuts-close-button_gT7kn","button-secondary":"sidebar_shortcuts_button-secondary_dtWEN","button-icon":"sidebar_shortcuts_button-icon_rCHmV","button-icon-small":"sidebar_shortcuts_button-icon-small_9BnNh","shortcuts-list":"sidebar_shortcuts_shortcuts-list_z7osI","section-title":"sidebar_shortcuts_section-title_Dv7S-","collapsed-shortcuts":"sidebar_shortcuts_collapsed-shortcuts_XrOj5","subsection-title":"sidebar_shortcuts_subsection-title_--5j4","search-field":"sidebar_shortcuts_search-field_cDecA","search-box":"sidebar_shortcuts_search-box_vmYAl","clear-btn":"sidebar_shortcuts_clear-btn_vRbGu","clear-icon":"sidebar_shortcuts_clear-icon_ZL4ae","icon-wrapper":"sidebar_shortcuts_icon-wrapper_XaR8m","shortcuts-title":"sidebar_shortcuts_shortcuts-title_P38o9","input-text":"sidebar_shortcuts_input-text_e9n1x","section":"sidebar_shortcuts_section_Jxkqa","open":"sidebar_shortcuts_open_SxghD","subsection-name":"sidebar_shortcuts_subsection-name_rWvFY","section-name":"sidebar_shortcuts_section-name_SyF9-","subsection-menu":"sidebar_shortcuts_subsection-menu_FdH9L","sub-menu":"sidebar_shortcuts_sub-menu_95jTY","shortcuts-name":"sidebar_shortcuts_shortcuts-name_hPkq6","command-name":"sidebar_shortcuts_command-name_Cujed","keys":"sidebar_shortcuts_keys_-pUnF","key":"sidebar_shortcuts_key_QyU8q","space":"sidebar_shortcuts_space_aODdu","not-found":"sidebar_shortcuts_not-found_bKEb0"}
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
new file mode 100644
index 000000000..42c3b385d
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
@@ -0,0 +1,189 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "refactor/common-refactor.scss";
+
+.shortcuts {
+ .shortcuts-header {
+ @include flexCenter;
+ @include tabTitleTipography;
+ position: relative;
+ height: $s-32;
+ padding: $s-2 $s-2 $s-2 0;
+ margin: $s-4 $s-4 0 $s-4;
+ border-radius: $br-6;
+ background-color: var(--title-background-color);
+
+ .shortcuts-title {
+ @include flexCenter;
+ flex-grow: 1;
+ color: var(--title-foreground-color-hover);
+ }
+
+ .shortcuts-close-button {
+ @extend .button-primary;
+ position: absolute;
+ right: $s-2;
+ top: $s-2;
+ height: $s-28;
+ width: $s-28;
+ border-radius: $br-5;
+ svg {
+ @extend .button-icon;
+ }
+ }
+ }
+
+ .search-field {
+ display: flex;
+ align-items: center;
+ height: $s-32;
+ margin: $s-16 $s-12 $s-4 $s-12;
+ border-radius: $br-8;
+ font-family: "worksans", sans-serif;
+ background-color: var(--color-background-tertiary);
+
+ .search-box {
+ align-items: center;
+ display: flex;
+ width: 100%;
+
+ .icon-wrapper {
+ display: flex;
+ svg {
+ @extend .button-icon-small;
+ }
+ }
+
+ .input-text {
+ height: $s-32;
+ width: 100%;
+ margin: 0;
+ padding: $s-4;
+ border: 0;
+ font-size: $fs-12;
+ color: var(--color-foreground-primary);
+ background-color: transparent;
+ &::placeholder {
+ color: var(--color-foreground-secondary);
+ }
+ &:focus-visible {
+ border-color: var(--color-accent-primary-muted);
+ }
+ }
+ .clear-btn {
+ @include buttonStyle;
+ @include flexCenter;
+ height: $s-16;
+ width: $s-16;
+ .clear-icon {
+ @include flexCenter;
+ svg {
+ @extend .button-icon-small;
+ }
+ }
+ }
+ }
+ }
+
+ .section {
+ margin: 0;
+ }
+ .shortcuts-list {
+ display: flex;
+ flex-direction: column;
+ height: 90%;
+ padding: $s-12;
+ margin-bottom: $s-12;
+ scrollbar-gutter: stable;
+ overflow-y: overlay;
+ font-size: $fs-12;
+ color: var(--title-foreground-color);
+
+ .section-title,
+ .subsection-title {
+ @include tabTitleTipography;
+ display: flex;
+ align-items: center;
+ margin: 0;
+ padding: $s-8 0;
+ cursor: pointer;
+
+ .collapsed-shortcuts {
+ @include flexCenter;
+ svg {
+ @extend .button-icon-small;
+ }
+ &.open {
+ transform: rotate(90deg);
+ }
+ }
+ .subsection-name,
+ .section-name {
+ padding-left: $s-4;
+ }
+ &:hover {
+ color: var(--title-foreground-color-hover);
+ .collapsed-shortcuts {
+ svg {
+ stroke: var(--title-foreground-color-hover);
+ }
+ }
+ }
+ }
+
+ .subsection-title {
+ text-transform: none;
+ padding-left: $s-12;
+ }
+ .subsection-menu {
+ margin-bottom: $s-4;
+ }
+ .sub-menu {
+ margin-bottom: $s-4;
+
+ .shortcuts-name {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ min-height: $s-32;
+ padding: $s-6;
+ margin-bottom: $s-4;
+ border-radius: $br-8;
+ background-color: var(--pill-background-color);
+
+ .command-name {
+ @include titleTipography;
+ margin-left: $s-2;
+ color: var(--pill-foreground-color);
+ }
+ .keys {
+ @include flexCenter;
+ gap: $s-2;
+ color: var(--pill-foreground-color);
+
+ .key {
+ @include titleTipography;
+ @include flexCenter;
+ text-transform: capitalize;
+ height: $s-20;
+ padding: $s-2 $s-6;
+ border-radius: $s-6;
+ background-color: var(--menu-shortcut-background-color);
+ }
+ .space {
+ margin: 0 $s-2;
+ }
+ }
+ }
+ }
+ }
+ .not-found {
+ @include titleTipography;
+ margin: $s-12;
+ }
+}