css variables for sidebar (#326)

* css variables for sidebar

* type

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;
+}

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-left: 1px solid var(--primary-border-color);
-    border-bottom: 1px solid @thin-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 {
+    .update-banner {
-        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 {
         font-weight: bold;
 
         .icon {

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")}