From e3ed198ba118c4147162dc0319607c5e83e73b3d Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Thu, 4 Jan 2024 15:15:12 +0100
Subject: [PATCH] :lipstick: Redesign debug panel

---
 .../app/main/ui/workspace/sidebar/debug.cljs  | 28 +++++----
 .../app/main/ui/workspace/sidebar/debug.scss  | 59 +++++++++++++++++++
 2 files changed, 74 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/app/main/ui/workspace/sidebar/debug.scss

diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug.cljs b/frontend/src/app/main/ui/workspace/sidebar/debug.cljs
index 5d7932a89..71adc0d99 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/debug.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/debug.cljs
@@ -5,6 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.sidebar.debug
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
    [app.main.data.workspace :as dw]
@@ -24,26 +25,27 @@
            (dbg/toggle! option)
            (js* "app.main.reinit()")))
 
-        on-close
+        handle-close
         (mf/use-fn
          (fn []
            (st/emit! (dw/remove-layout-flag :debug-panel))))]
-    [:div.debug-panel
-     [:div.debug-panel-header
-      [:div.debug-panel-close-button
-       {:on-click on-close} i/close]
-      [:div.debug-panel-title "Debugging tools"]]
 
-     [:div.debug-panel-inner
+    [:div {:class (stl/css :debug-panel)}
+     [:div {:class (stl/css :panel-title)}
+      [:span "Debugging tools"]
+      [:div {:class (stl/css :close-button) :on-click handle-close}
+       i/close-refactor]]
+
+     [:div {:class (stl/css :debug-panel-inner)}
       (for [option (sort-by d/name dbg/options)]
-        [:div.debug-option {:key (d/name option)
-                            :on-click #(on-toggle-enabled % option)}
+        [:div {: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-refactor)]
+
          [:input {:type "checkbox"
                   :id (d/name option)
+                  :key (d/name option)
                   :on-change #(on-toggle-enabled % option)
                   :checked (dbg/enabled? option)}]
-         [:div.field.check
-          (if (dbg/enabled? option)
-            [:span.checked i/checkbox-checked]
-            [:span.unchecked i/checkbox-unchecked])]
          [:label {:for (d/name option)} (d/name option)]])]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug.scss b/frontend/src/app/main/ui/workspace/sidebar/debug.scss
new file mode 100644
index 000000000..96364d88e
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/sidebar/debug.scss
@@ -0,0 +1,59 @@
+// 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
+
+@use "common/refactor/common-refactor.scss" as *;
+
+.debug-panel {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--panel-background-color);
+}
+
+.panel-title {
+  @include flexCenter;
+  @include tabTitleTipography;
+  position: relative;
+  height: $s-32;
+  min-height: $s-32;
+  margin: $s-8 $s-8 0 $s-8;
+  border-radius: $br-8;
+  background-color: var(--panel-title-background-color);
+
+  span {
+    @include flexCenter;
+    flex-grow: 1;
+    color: var(--title-foreground-color-hover);
+  }
+}
+
+.close-button {
+  @extend .button-tertiary;
+  position: absolute;
+  right: $s-2;
+  top: $s-2;
+  height: $s-28;
+  width: $s-28;
+  border-radius: $br-6;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
+}
+
+.checkbox-wrapper {
+  @extend .input-checkbox;
+  height: $s-32;
+  padding: 0;
+}
+
+.checkbox-icon {
+  @extend .checkbox-icon;
+  cursor: pointer;
+}
+
+.debug-panel-inner {
+  padding: $s-16 $s-8;
+}