From f89f9393b36c8b62b263c8d24b86eea4e7223004 Mon Sep 17 00:00:00 2001
From: "ala'n (Alexey Stsefanovich)" <astsefanovich@exadel.com>
Date: Tue, 17 Oct 2023 10:21:54 +0200
Subject: [PATCH] refactor(uip-settings): draft attempt to rework settings
 section styles (layouts, themes, compact mode)

---
 src/plugins/registration.less                 |  2 ++
 src/plugins/settings/settings.horizontal.less |  4 +++
 src/plugins/settings/settings.less            | 17 +++++++++--
 src/plugins/settings/settings.themes.less     |  7 +++++
 src/plugins/settings/settings.vertical.less   |  7 +++--
 .../slider-setting/slider-setting.less        | 30 ++++++++++++++++++-
 .../settings/text-setting/text-setting.less   |  5 +++-
 7 files changed, 65 insertions(+), 7 deletions(-)
 create mode 100644 src/plugins/settings/settings.themes.less

diff --git a/src/plugins/registration.less b/src/plugins/registration.less
index 874aca28..04a17a72 100644
--- a/src/plugins/registration.less
+++ b/src/plugins/registration.less
@@ -1,5 +1,7 @@
 @import './header/header.less';
 @import './header/snippets/snippets.less';
 @import './header/options/options.less';
+
+@import "./copy/uip-copy.less";
 @import './editor/editor.less';
 @import './settings/settings.less';
diff --git a/src/plugins/settings/settings.horizontal.less b/src/plugins/settings/settings.horizontal.less
index cd2220be..34bcbe3d 100644
--- a/src/plugins/settings/settings.horizontal.less
+++ b/src/plugins/settings/settings.horizontal.less
@@ -34,6 +34,10 @@
     width: 100%;
     border-top: 1px solid var(--uip-settings-divider, transparent);
     border-bottom: 1px solid var(--uip-settings-divider, transparent);
+
+    &-icon {
+      margin-inline-end: 5px;
+    }
   }
 
   .uip-settings-inner {
diff --git a/src/plugins/settings/settings.less b/src/plugins/settings/settings.less
index 374c6596..65d34b68 100644
--- a/src/plugins/settings/settings.less
+++ b/src/plugins/settings/settings.less
@@ -2,6 +2,8 @@
 @import (reference) '../../common/variables.less';
 
 html {
+  --uip-settings-fg: #000;
+  --uip-settings-bg: #f5f2f0;
   --uip-settings-divider: #ccc;
   --uip-settings-divider-v: @section-border;
   --uip-settings-header-bg: #ccc;
@@ -15,8 +17,7 @@ uip-settings {
   grid-area: sidebar;
 
   display: flex;
-  overflow: auto;
-  accent-color: @dark-text;
+  accent-color: var(--uip-settings-fg, #000);
 
   &-inner {
     flex: 1 1 auto;
@@ -24,6 +25,9 @@ uip-settings {
     position: relative;
     overflow: hidden;
     padding: 0;
+
+    color: var(--uip-editor-fg);
+    background: var(--uip-editor-bg);
   }
 
   &-container {
@@ -61,6 +65,7 @@ uip-settings {
     &-title:not(:empty) {
       flex: 1 1 auto;
       padding: 5px;
+      line-height: 1em;
     }
 
     &-trigger {
@@ -79,13 +84,19 @@ uip-settings {
 
     &-icon {
       display: inline-flex;
-      width: 1.25rem;
+      width: 1.5rem;
       height: 1.25rem;
       margin-block: -5px;
       transform-origin: center center;
+
+      > svg {
+        fill: currentColor;
+        stroke: currentColor;
+      }
     }
   }
 }
 
 @import "./settings.vertical.less";
 @import "./settings.horizontal.less";
+@import "./settings.themes.less";
diff --git a/src/plugins/settings/settings.themes.less b/src/plugins/settings/settings.themes.less
new file mode 100644
index 00000000..282a9d1a
--- /dev/null
+++ b/src/plugins/settings/settings.themes.less
@@ -0,0 +1,7 @@
+[dark-theme] {
+  --uip-settings-fg: #ccc;
+  --uip-settings-bg: #2f2f2f;
+  --uip-settings-divider: #ebebeb;
+  --uip-settings-header-bg: #2f2f2f;
+  --uip-settings-header-fg: #ccc;
+}
diff --git a/src/plugins/settings/settings.vertical.less b/src/plugins/settings/settings.vertical.less
index 771af374..e5238df2 100644
--- a/src/plugins/settings/settings.vertical.less
+++ b/src/plugins/settings/settings.vertical.less
@@ -31,8 +31,11 @@
   }
 
   .uip-settings-header {
-    border-left: 1px solid var(--uip-settings-divider-v, transparent);
-    border-right: 1px solid var(--uip-settings-divider-v, transparent);
+    border-inline-end: 1px solid var(--uip-settings-divider-v, transparent);
+  }
+
+  .uip-editor-compact & .uip-settings-header {
+    margin-bottom: -30px;
   }
 
   .uip-settings-header-title {
diff --git a/src/plugins/settings/slider-setting/slider-setting.less b/src/plugins/settings/slider-setting/slider-setting.less
index 8b6a7ef5..4fb1f47f 100644
--- a/src/plugins/settings/slider-setting/slider-setting.less
+++ b/src/plugins/settings/slider-setting/slider-setting.less
@@ -4,8 +4,36 @@
     width: 100%;
   }
 
+  input[type="range"] {
+    -webkit-appearance: none;
+    margin: 10px 0 5px;
+    height: 10px;
+    background: var(--uip-settings-bg, #000);
+    border: 1px solid var(--uip-settings-fg, #ccc);
+    border-radius: 5px;
+  }
+
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background:var(--uip-settings-fg, #000);
+    cursor: ew-resize;
+    transition: background .1s linear;
+  }
+
+  input[type=range]::-webkit-slider-runnable-track  {
+    -webkit-appearance: none;
+    box-shadow: none;
+    border: none;
+    background: transparent;
+  }
+
+
   .slider-value {
-    color: gray;
+    opacity: 0.8;
+    color: var(--uip-settings-fg, #000);
 
     &.disabled {
       font-size: 14px;
diff --git a/src/plugins/settings/text-setting/text-setting.less b/src/plugins/settings/text-setting/text-setting.less
index ab667a9f..36dd3805 100644
--- a/src/plugins/settings/text-setting/text-setting.less
+++ b/src/plugins/settings/text-setting/text-setting.less
@@ -4,5 +4,8 @@
   width: 100%;
   padding: 3px 1px 1px;
   font-size: 16px;
-  color: @dark-text;
+  color: var(--uip-settings-fg, #000);
+  background: transparent;
+  border: 1px solid var(--uip-settings-fg, #000);
+  box-shadow: none;
 }