From 1eb89e198269b62067b0a66b29367c6e00a4be96 Mon Sep 17 00:00:00 2001
From: Red J Adaya <red.adaya@gmail.com>
Date: Sun, 25 Feb 2024 04:40:51 +0800
Subject: [PATCH] css variables for sidebar (#326)

* css variables for sidebar

* type
---
 src/app/common/themes/themes.less |  12 +++
 src/app/sidebar/sidebar.less      | 132 ++----------------------------
 src/app/sidebar/sidebar.tsx       |   2 +-
 3 files changed, 19 insertions(+), 127 deletions(-)

diff --git a/src/app/common/themes/themes.less b/src/app/common/themes/themes.less
index f946351a..a15f81f2 100644
--- a/src/app/common/themes/themes.less
+++ b/src/app/common/themes/themes.less
@@ -80,3 +80,15 @@
 
 @thin-border-color: #333;
 @main-content-bottom-background: #333;
+
+:root {
+    --primary-text-color: #eceeec;
+
+    --primary-border-color: #333;
+
+    --sidebar-dev-bg-color: #151730;
+    --sidebar-separator-color: rgba(241, 246, 243, 0.08);
+    --sidebar-workspace-active-color: rgba(241, 246, 243, 0.08);
+    --sidebar-separator-color: rgba(241, 246, 243, 0.08);
+    --sidebar-settings-color: #ffffff;
+}
diff --git a/src/app/sidebar/sidebar.less b/src/app/sidebar/sidebar.less
index 7f20918f..f3d184f4 100644
--- a/src/app/sidebar/sidebar.less
+++ b/src/app/sidebar/sidebar.less
@@ -11,8 +11,8 @@
     backdrop-filter: blur(4px);
     z-index: 20;
     border-radius: 10px;
-    border-left: 1px solid @thin-border-color;
-    border-bottom: 1px solid @thin-border-color;
+    border-left: 1px solid var(--primary-border-color);
+    border-bottom: 1px solid var(--primary-border-color);
 
     .title-bar-drag {
         -webkit-app-region: drag;
@@ -114,7 +114,7 @@
     .separator {
         height: 1px;
         margin: 16px 0;
-        background-color: @base-border;
+        background-color: var(--sidebar-separator-color);
     }
 
     .item.workspaces-item {
@@ -123,10 +123,10 @@
 
     .middle {
         padding: 4px 6px 8px 6px;
-        border-bottom: 1px solid @base-border;
+        border-bottom: 1px solid var(--sidebar-separator-color);
         .item {
             &.active {
-                background: @base-border;
+                background: var(--sidebar-separator-color);
                 box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
                     0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
             }
@@ -223,127 +223,7 @@
         }
     }
 
-    .menu-label {
-        color: @base-color;
-    }
-
-    .menu-list {
-        li.menu-history,
-        li.menu-bookmarks,
-        li.menu-settings,
-        li.menu-websharing {
-            margin-left: -10px;
-        }
-
-        li.menu-bookmarks {
-            margin-left: -10px;
-        }
-
-        li {
-            .hotkey {
-                visibility: hidden;
-            }
-
-            &:hover .hotkey {
-                visibility: visible;
-            }
-        }
-    }
-
-    .menu-list.session-menu-list {
-        li a {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-
-            .session-num {
-                width: 24px;
-                margin-left: -12px;
-            }
-
-            .session-gear {
-                visibility: hidden;
-            }
-
-            &:hover .session-gear {
-                color: @term-white;
-                visibility: visible;
-
-                &:hover {
-                    color: @term-white;
-                }
-            }
-        }
-    }
-
-    .menu-list.emotes-menu-list {
-        max-height: 35%;
-        overflow-y: auto;
-    }
-
-    .menu-list li.emote-menu-item {
-        a {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-    }
-
-    .menu-list li a {
-        white-space: nowrap;
-        padding: 3px 5px 3px 12px;
-        vertical-align: middle;
-        position: relative;
-
-        .user-status {
-            position: absolute !important;
-            top: 24px !important;
-            left: 32px !important;
-        }
-
-        .avatar {
-            width: 24px;
-            height: 24px;
-            margin-right: 5px;
-            vertical-align: middle;
-        }
-
-        &.is-active .small-text {
-            color: @term-white;
-        }
-
-        &.is-active {
-            font-weight: bold;
-            background-color: @active-menu-color;
-
-            .session-num {
-                font-weight: normal;
-            }
-        }
-
-        .sub-label {
-            font-style: italic;
-        }
-
-        &.activity {
-            font-weight: bold;
-
-            .tag {
-                margin-left: 4px;
-                padding: 0 5px 0 5px;
-                position: relative;
-                top: -1px;
-            }
-        }
-
-        .status {
-            margin-right: 5px;
-            position: relative;
-            top: -3px;
-        }
-    }
-
-    .updateBanner {
+    .update-banner {
         font-weight: bold;
 
         .icon {
diff --git a/src/app/sidebar/sidebar.tsx b/src/app/sidebar/sidebar.tsx
index a518f330..d09f1250 100644
--- a/src/app/sidebar/sidebar.tsx
+++ b/src/app/sidebar/sidebar.tsx
@@ -307,7 +307,7 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
                                 <If condition={needsUpdate}>
                                     <SideBarItem
                                         key="update-available"
-                                        className="updateBanner"
+                                        className="update-banner"
                                         frontIcon={<i className="fa-sharp fa-regular fa-circle-up icon" />}
                                         contents="Update Available"
                                         onClick={() => openLink("https://www.waveterm.dev/download?ref=upgrade")}