Move icon & pod styles from spade to plain css

For #409
day8 · Feb 1, 2024 · c279786 · c279786
1 parent 98d4358
commit c279786
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 29 deletions.
diff --git a/resources/day8/re_frame_10x.css b/resources/day8/re_frame_10x.css
@@ -1,7 +1,22 @@
 /* day8/re-frame-10x */
+/* https://www.nordtheme.com/docs/colors-and-palettes */
 
-:root {--nord4: #d8dee9;
+:root {--nord0: #2E3440;
+ --nord1: #3B4252;
+ --nord2: #434C5E;
  --nord3: #4C566A;
+ --nord4: #D8DEE9;
+ --nord5: #E5E9F0;
+ --nord6: #ECEFF4;
+ --nord7: #8FBCBB;
+ --nord8: #88C0D0;
+ --nord9: #81A1C1;
+ --nord10: #5E81AC;
+ --nord11: #BF616A;
+ --nord12: #D08770;
+ --nord13: #EBCB8B;
+ --nord14: #A3BE8C;
+ --nord15: #B48EAD;
  --nord-ghost-white #f8f9fb;
  --border-1: 1px solid var(--nord4);
  --color-1 var(--nord3);
@@ -34,3 +49,24 @@
  background-color: var(--background-color-1);}
 
 .search input:focus-visible {outline: none;}
+
+.icon {cursor: default;
+ border-radius: 3px;
+ background-color: var(--nord2);
+ border: 1px solid var(--nord1);
+ padding: 2px;
+ font-weight: 400;}
+
+.icon.disabled {cursor: pointer;
+ background-color: var(--nord5);
+ border: 1px solid var(--nord4);}
+
+.icon svg path {fill: var(--nord0);}
+
+.icon.enabled:hover {background-color: var(--nord6);}
+
+.icon.enabled:hover svg path {fill: var(--nord1);}
+
+.pod-header-section {border-right: 1px solid var(--nord4);}
+
+.pod-section {overflow-y: auto;}
diff --git a/src/day8/re_frame_10x/components/buttons.cljs b/src/day8/re_frame_10x/components/buttons.cljs
@@ -6,27 +6,11 @@
  [day8.re-frame-10x.material :as material]
  [day8.re-frame-10x.styles :as styles]))
 
-(defclass icon-style
- [disabled?]
- {:cursor (if disabled? :default :pointer)
- :border-radius (px 3)
- :background-color (if disabled? styles/nord2 styles/nord5)
- :border [[(px 1) :solid (if disabled? styles/nord1 styles/nord4)]]
- :padding styles/gs-2s
- :font-weight 400}
- [:svg :path
- {:fill styles/nord0}]
- (when-not disabled?
- [:&:hover
- {:background-color styles/nord6}
- [:svg :path
- {:fill styles/nord1}]]))
-
 (defn icon
  [{:keys [icon label title on-click disabled? class]}]
  (let [disabled? (rc/deref-or-value disabled?)]
  [rc/button
- :class (str (icon-style disabled?) " " class)
+ :class (str "icon " " " (if disabled? "disabled" "enabled") " " class)
  :attr {:title title}
  :label [rc/h-box
  :align :center

diff --git a/src/day8/re_frame_10x/panels/app_db/views.cljs b/src/day8/re_frame_10x/panels/app_db/views.cljs
@@ -65,17 +65,12 @@
 
 (def pod-border-edge (str "1px solid " styles/nord4))
 
-(defclass pod-header-section-style
- [_ last?]
- {:border-right (when-not last? [[(px 1) :solid styles/nord4]])
- #_#_:padding-left (px 3)})
-
 (defn pod-header-section
  [& {:keys [size justify align gap width min-width children attr last?]
  :or {size "none" justify :start align :center}}]
  (let [ambiance @(rf/subscribe [::settings.subs/ambiance])]
  [rc/h-box
- :class (pod-header-section-style ambiance last?)
+ :class "pod-header-section"
  :size size
  :justify justify
  :align align

diff --git a/src/day8/re_frame_10x/panels/subs/views.cljs b/src/day8/re_frame_10x/panels/subs/views.cljs
@@ -434,10 +434,6 @@
  [rc/label :class (column-title-label-style) :label ""]]
  [rc/gap-f :size "6px"]]]) ;; Add extra space to look better when there is/aren't scrollbars
 
-(defclass pod-section-style
- [_]
- {:overflow-y :auto})
-
 (defn pod-section []
  (let [ambiance @(rf/subscribe [::settings.subs/ambiance])
  visible-subs @(rf/subscribe [::subs.subs/visible-subs])
@@ -452,7 +448,7 @@
  visible-subs)]
  [rc/v-box
  :size "1"
- :class (pod-section-style ambiance)
+ :class "pod-section"
  :children
  [(if (empty? all-subs)
  [no-pods]