✨ Use CSS modules for styling the debug icons preview page

frontend/resources/styles/main-default.scss

@@ -34,6 +34,5 @@
 // Partials
 //#################################################
 
-@import "main/partials/debug-icons-preview";
 @import "main/partials/loader";
 @import "main/partials/workspace";

frontend/resources/styles/main/partials/debug-icons-preview.scss

@@ -1,70 +0,0 @@
-.debug-preview {
-  display: flex;
-  flex-direction: column;
-  overflow: scroll;
-  height: 100%;
-  h1 {
-    color: white;
-    font-size: 24px;
-    display: block;
-    width: 100vw;
-    margin: 12px;
-  }
-}
-
-.debug-icons-preview {
-  display: flex;
-  flex-wrap: wrap;
-  h2 {
-    color: white;
-    font-size: 16px;
-    display: block;
-    width: 100vw;
-    margin: 12px;
-  }
-
-  .subtitle-old {
-    color: #ff3277;
-  }
-
-  .icon-item,
-  .cursor-item,
-  .icon-item-old {
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    width: 120px;
-    height: 120px;
-    margin: 10px;
-    align-items: center;
-
-    svg {
-      width: 100%;
-      height: 100%;
-      min-width: 16px;
-      min-height: 16px;
-      fill: none;
-      color: transparent;
-      stroke: #91fadb;
-    }
-
-    span {
-      color: white;
-      max-width: 100px;
-      overflow: hidden;
-      font-size: 12px;
-      margin-top: 4px;
-      word-break: break-word;
-      min-height: 40px;
-    }
-  }
-
-  .cursor-item div,
-  .icon-item-old svg {
-    stroke: #aab5ba;
-  }
-
-  .cursor-item {
-    height: auto;
-  }
-}

frontend/src/app/main/ui.cljs

@@ -10,8 +10,8 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.context :as ctx]
-   [app.main.ui.cursors :as c]
    [app.main.ui.debug.components-preview :as cm]
+   [app.main.ui.debug.icons-preview :refer [icons-preview]]
    [app.main.ui.frame-preview :as frame-preview]
    [app.main.ui.icons :as i]
    [app.main.ui.messages :as msgs]
@@ -76,11 +76,7 @@
 
        :debug-icons-preview
        (when *assert*
-         [:div.debug-preview
+         [:& icons-preview])
-          [:h1 "Cursors"]
-          [:& c/debug-preview]
-          [:h1 "Icons"]
-          [:& i/debug-icons-preview]])
 
        (:dashboard-search
         :dashboard-projects

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

@@ -5,11 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.cursors
-  (:require-macros [app.main.ui.cursors :refer [cursor-ref cursor-fn collect-cursors]])
+  (:require-macros [app.main.ui.cursors :refer [cursor-ref cursor-fn collect-cursors]]))
-  (:require
-   [app.util.timers :as ts]
-   [cuerdas.core :as str]
-   [rumext.v2 :as mf]))
 
 ;; Static cursors
 (def ^:cursor comments (cursor-ref :comments 0 2 20))
@@ -53,28 +49,3 @@
 (def default
   "A collection of all icons"
   (collect-cursors))
-
-(mf/defc debug-preview
-  {::mf/wrap-props false}
-  []
-  (let [rotation (mf/use-state 0)
-        entries  (->> (seq (js/Object.entries default))
-                      (sort-by first))]
-
-    (mf/with-effect []
-      (ts/interval 100 #(reset! rotation inc)))
-
-    [:section.debug-icons-preview
-     (for [[key value] entries]
-       (let [value (if (fn? value) (value @rotation) value)]
-         [:div.cursor-item {:key key}
-          [:div {:style {:width "100px"
-                         :height "100px"
-                         :background-image (-> value (str/replace #"(url\(.*\)).*" "$1"))
-                         :background-size "contain"
-                         :background-repeat "no-repeat"
-                         :background-position "center"
-                         :cursor value}}]
-
-          [:span {:style {:white-space "nowrap"
-                          :margin-right "1rem"}} (pr-str key)]]))]))

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

@@ -0,0 +1,54 @@
+(ns app.main.ui.debug.icons-preview
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.ui.cursors :as c]
+   [app.main.ui.icons :as i]
+   [app.util.timers :as ts]
+   [cuerdas.core :as str]
+   [rumext.v2 :as mf]))
+
+(mf/defc icons-gallery
+  {::mf/wrap-props false
+   ::mf/private true}
+  []
+  (let [entries   (->> (seq (js/Object.entries i/default))
+                       (sort-by first))]
+    [:section {:class (stl/css :gallery)}
+     (for [[key val] entries]
+       [:div {:class (stl/css :gallery-item)
+              :key key
+              :title key}
+        val
+        [:span key]])]))
+
+(mf/defc cursors-gallery
+  {::mf/wrap-props false
+   ::mf/private true}
+  []
+  (let [rotation (mf/use-state 0)
+        entries  (->> (seq (js/Object.entries c/default))
+                      (sort-by first))]
+
+    (mf/with-effect []
+      (ts/interval 100 #(reset! rotation inc)))
+
+    [:section {:class (stl/css :gallery)}
+     (for [[key value] entries]
+       (let [value (if (fn? value) (value @rotation) value)]
+         [:div {:key key :class (stl/css :gallery-item)}
+          [:div {:class (stl/css :cursor)
+                 :style {:background-image (-> value (str/replace #"(url\(.*\)).*" "$1"))
+                         :cursor value}}]
+
+          [:span (pr-str key)]]))]))
+
+
+(mf/defc icons-preview
+  {::mf/wrap-props false}
+  []
+  [:article {:class (stl/css :container)}
+   [:h2 {:class (stl/css :title)} "Cursors"]
+   [:& cursors-gallery]
+   [:h2 {:class (stl/css :title)} "Icons"]
+   [:& icons-gallery]])
+

frontend/src/app/main/ui/debug/icons_preview.scss

@@ -0,0 +1,51 @@
+@use "common/refactor/common-refactor.scss" as *;
+
+.container {
+  display: grid;
+  row-gap: 1rem;
+  height: 100vh;
+  overflow-y: auto;
+  padding: 1rem;
+}
+
+.title {
+  @include bigTitleTipography;
+  color: var(--color-foreground-primary);
+}
+
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 120px);
+  grid-template-rows: repeat(auto-fill, 120px);
+  gap: 1rem;
+
+  --cell-size: 64px;
+}
+
+.gallery-item {
+  display: grid;
+  place-items: center;
+  row-gap: 0.5rem;
+  grid-template-rows: var(--cell-size) 1fr;
+  padding: 0.5rem;
+
+  color: var(--color-foreground-primary);
+  word-break: break-word;
+  @include bodySmallTypography;
+
+  svg {
+    width: var(--cell-size);
+    height: var(--cell-size);
+    fill: none;
+    color: transparent;
+    stroke: var(--color-accent-primary);
+  }
+}
+
+.cursor {
+  width: var(--cell-size);
+  height: var(--cell-size);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}