✨ Add code highlight dark and light modes

frontend/src/app/main/ui/auth/common.scss

@@ -40,13 +40,19 @@
   --input-min-width: 100%;
 }
 
-.buttons-stack button,
-.buttons-stack :global(.btn-primary) {
-  @extend .button-primary;
-  font-size: $fs-11;
-  height: $s-40;
-  text-transform: uppercase;
-  width: 100%;
+.buttons-stack {
+  display: flex;
+  flex-direction: column;
+  gap: $s-8;
+
+  button,
+  :global(.btn-primary) {
+    @extend .button-primary;
+    font-size: $fs-11;
+    height: $s-40;
+    text-transform: uppercase;
+    width: 100%;
+  }
 }
 
 .link-entry {

frontend/src/app/main/ui/components/code_block.cljs

@@ -10,16 +10,20 @@
    ["highlight.js" :as hljs]
    [app.common.data.macros :as dm]
    [app.main.ui.context :as ctx]
+   [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
 (mf/defc code-block
   {::mf/wrap-props false}
   [{:keys [code type]}]
   (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        block-ref (mf/use-ref)]
+        block-ref (mf/use-ref)
+        code (str/trim code)]
     (mf/with-effect [code type]
       (when-let [node (mf/ref-val block-ref)]
         (hljs/highlightElement node)))
 
-    [:pre {:class (dm/str type " " (stl/css new-css-system :code-display)) :ref block-ref} code]))
+    (if new-css-system
+      [:pre {:class (dm/str type " " (stl/css :code-display)) :ref block-ref} code]
+      [:pre {:class (dm/str type " " "code-display") :ref block-ref} code])))
 

frontend/src/app/main/ui/components/code_block.scss

@@ -7,8 +7,10 @@
 @import "refactor/common-refactor.scss";
 
 .code-display {
+  user-select: text;
   border-radius: $br-8;
   margin-top: $s-8;
   padding: $s-12;
   background-color: var(--menu-background-color);
+  overflow: auto;
 }

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

@@ -196,8 +196,8 @@
             (obj/set! "on-expand" handle-expand))]
 
     [:aside {:class (stl/css-case new-css-system
-                                  :global/settings-bar true
-                                  :global/settings-bar-right true
+                                  :global/settings-bar (not new-css-system)
+                                  :global/settings-bar-right (not new-css-system)
                                   :right-settings-bar true
                                   :not-expand (not can-be-expanded?)
                                   :expanded (> size 276))