Trying to add react-dev-tools

* tab hover

* border radius fix, and lighter scrollbar background

* tone down colors a bit

* fix shelltag

* hack collapsable sidebar (needs cleanup)

.github/workflows/build-helper.yml

@@ -1,11 +1,12 @@
 name: "Build Helper"
 on: workflow_dispatch
 env:
-    WAVETERM_VERSION: 0.6.1
     GO_VERSION: "1.21.5"
     NODE_VERSION: "21.5.0"
 jobs:
     runbuild:
+        outputs:
+            WAVETERM_VERSION: ${{ steps.set-version.outputs.WAVETERM_VERSION }}
         strategy:
             matrix:
                 include:
@@ -44,6 +45,10 @@ jobs:
               with:
                   node-version: ${{env.NODE_VERSION}}
                   cache: "yarn"
+            - id: set-version
+              run: |
+                  VERSION=$(node -e 'console.log(require("./version.js"))')
+                  echo "WAVETERM_VERSION=${VERSION}" >> "$GITHUB_OUTPUT"
             - run: yarn --frozen-lockfile
             - run: ./scripthaus/scripthaus run ${{ matrix.scripthaus }}
             - uses: actions/upload-artifact@v4
@@ -60,6 +65,8 @@ jobs:
               with:
                   merge-multiple: true
                   path: buildtemp
+            - run: |
+                  echo "${{ needs.runbuild.outputs.WAVETERM_VERSION }}" > buildtemp/version.txt
             - run: (cd buildtemp; zip ../waveterm-builds.zip *)
             - run: aws s3 cp waveterm-builds.zip s3://waveterm-github-artifacts/
               env:

.github/workflows/codeql.yml

@@ -45,7 +45,7 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
 
             # Initializes the CodeQL tools for scanning.
             - name: Initialize CodeQL

acknowledgements/disclaimers/backend.md

@@ -179,11 +179,11 @@ THE SOFTWARE.
 
 -----
 
-## github.com/google/go-github/v57/github
+## github.com/google/go-github/v59/github
 
-* Name: github.com/google/go-github/v57/github
-* Version: v57.0.0
-* License: [BSD-3-Clause](https://github.com/google/go-github/blob/v57.0.0/LICENSE)
+* Name: github.com/google/go-github/v59/github
+* Version: v59.0.0
+* License: [BSD-3-Clause](https://github.com/google/go-github/blob/v59.0.0/LICENSE)
 
 ```txt
 Copyright (c) 2013 The go-github AUTHORS. All rights reserved.

buildres/.gitignore

@@ -1,3 +1,3 @@
-temp/
+*/
 *.zip
-*.dmg
+*.dmg

buildres/build-universal.js

@@ -1,9 +1,9 @@
 const eu = require("@electron/universal");
 const path = require("path");
 
-let x64Path = path.resolve(__dirname, "temp", "x64", "Wave.app")
-let arm64Path = path.resolve(__dirname, "temp", "arm64", "Wave.app")
-let outPath = path.resolve(__dirname, "temp", "Wave.app")
+const x64Path = path.resolve(__dirname, "temp", "x64", "Wave.app");
+const arm64Path = path.resolve(__dirname, "temp", "arm64", "Wave.app");
+const outPath = path.resolve(__dirname, "temp", "Wave.app");
 
 console.log("building universal package");
 console.log("x64 path", x64Path);

buildres/build-universal.sh

@@ -1,11 +1,19 @@
 #!/bin/bash
+# This script is used to build the universal app for macOS
 
-# assumes we have Wave-darwin-x64-[version].zip and Wave-darwin-arm64-[version].zip in current directory
-VERSION=0.6.1
-rm -rf temp
-rm -rf builds
-mkdir temp
-mkdir temp/x64
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+
+rm -f *.zip *.dmg
+ZIP_DIR=$SCRIPT_DIR/zip
+rm -rf $ZIP_DIR
+mkdir $ZIP_DIR
+TEMP_DIR=$SCRIPT_DIR/temp
+rm -rf $TEMP_DIR
+mkdir $TEMP_DIR
+BUILDS_DIR=$SCRIPT_DIR/builds
+rm -rf $BUILDS_DIR
+
+# Download the builds zip
 aws s3 cp s3://waveterm-github-artifacts/waveterm-builds.zip .
 BUILDS_ZIP=waveterm-builds.zip
 if ! [ -f $BUILDS_ZIP ]; then
@@ -13,40 +21,66 @@ if ! [ -f $BUILDS_ZIP ]; then
     exit 1;
 fi
 echo "unzipping $BUILDS_ZIP"
-unzip -q $BUILDS_ZIP -d builds
-X64_ZIP="builds/Wave-darwin-x64-$VERSION.zip"
-ARM64_ZIP="builds/Wave-darwin-arm64-$VERSION.zip"
-if ! [ -f $X64_ZIP ]; then
-    echo "no $X64_ZIP found";
-    exit 1;
-fi
-if ! [ -f $ARM64_ZIP ]; then
-    echo "no $ARM64_ZIP found"
-    exit 1;
-fi
+unzip -q $BUILDS_ZIP -d $BUILDS_DIR
+rm $BUILDS_ZIP
+
+# Ensure we have exactly one of each build
+find_build() 
+{
+    local BUILD_DIR=$1
+    local BUILD_PATTERN=$2
+    local BUILD_PATH=$(find $BUILD_DIR -type f -iname "$BUILD_PATTERN")
+    local NUM_MATCHES=$(echo $BUILD_PATH | wc -l)
+    if [ "0" -eq "$NUM_MATCHES" ]; then
+        echo "no $BUILD_NAME found in $BUILD_DIR"
+        exit 1
+    elif [ "1" -lt "$NUM_MATCHES" ]; then
+        echo "multiple $BUILD_NAME found in $BUILD_DIR"
+        exit 1
+    fi
+    echo $BUILD_PATH
+}
+
+X64_ZIP=$(find_build $BUILDS_DIR "Wave-darwin-x64-*.zip")
+ARM64_ZIP=$(find_build $BUILDS_DIR "Wave-darwin-arm64-*.zip")
 set -e
-echo "unzipping version v$VERSION zip files"
-ls -l "$X64_ZIP" "$ARM64_ZIP"
-unzip -q $X64_ZIP -d temp/x64
-mkdir temp/arm64
-unzip -q $ARM64_ZIP -d temp/arm64
-lipo -create -output temp/wavesrv temp/x64/Wave.app/Contents/Resources/app/bin/wavesrv temp/arm64/Wave.app/Contents/Resources/app/bin/wavesrv
-rm -rf temp/arm64/Wave.app/Contents/Resources/app
-mv temp/x64/Wave.app/Contents/Resources/app temp/
-cp temp/wavesrv temp/app/bin/wavesrv
-mkdir temp/x64/Wave.app/Contents/Resources/app
-mkdir temp/arm64/Wave.app/Contents/Resources/app
-node build-universal.js
-rm -rf temp/Wave.app/Contents/Resources/app
-mv temp/app temp/Wave.app/Contents/Resources/app
-node osx-sign.js
-DEBUG=electron-notarize node osx-notarize.js
+
+echo "unzipping zip files"
+unzip -q $X64_ZIP -d $TEMP_DIR/x64
+unzip -q $ARM64_ZIP -d $TEMP_DIR/arm64
+rm $ARM64_ZIP $X64_ZIP
+
+# Create universal app and sign and notarize it
+TEMP_WAVE_DIR_ARM=$TEMP_DIR/x64/Wave.app
+TEMP_WAVE_DIR_X64=$TEMP_DIR/arm64/Wave.app
+TEMP_WAVE_DIR_UNIVERSAL=$TEMP_DIR/Wave.app
+lipo -create -output $TEMP_DIR/wavesrv $TEMP_WAVE_DIR_X64/Contents/Resources/app/bin/wavesrv $TEMP_WAVE_DIR_ARM/Contents/Resources/app/bin/wavesrv
+rm -rf $TEMP_WAVE_DIR_ARM/Contents/Resources/app
+mv $TEMP_WAVE_DIR_X64/Contents/Resources/app $TEMP_DIR
+cp $TEMP_DIR/wavesrv $TEMP_DIR/app/bin/wavesrv
+mkdir $TEMP_WAVE_DIR_ARM/Contents/Resources/app
+mkdir $TEMP_WAVE_DIR_X64/Contents/Resources/app
+node $SCRIPT_DIR/build-universal.js
+rm -rf $TEMP_WAVE_DIR_UNIVERSAL/Contents/Resources/app
+mv $TEMP_DIR/app $TEMP_WAVE_DIR_UNIVERSAL/Contents/Resources/app
+node $SCRIPT_DIR/osx-sign.js
+DEBUG=electron-notarize node $SCRIPT_DIR/osx-notarize.js
 echo "universal app creation success (build/sign/notarize)"
+
+UVERSION=$(cat $BUILDS_DIR/version.txt)
+DMG_NAME="waveterm-macos-universal-${UVERSION}.dmg"
+ZIP_NAME="Wave-macos-universal-${UVERSION}.zip"
+
+echo "creating universal zip"
+ditto $TEMP_WAVE_DIR_UNIVERSAL $ZIP_DIR/Wave.app
+cd $ZIP_DIR
+zip -9yqr $ZIP_NAME Wave.app
+mv $ZIP_NAME $BUILDS_DIR/
+cd $SCRIPT_DIR
+
+# Expects create-dmg repo to be cloned in the same parent directory as the waveterm repo.
 echo "creating universal dmg"
-rm -f *.dmg
-DMG_VERSION=$(node -e 'console.log(require("../version.js"))')
-DMG_NAME="waveterm-macos-universal-${DMG_VERSION}.dmg"
-../../create-dmg/create-dmg \
+$SCRIPT_DIR/../../create-dmg/create-dmg \
   --volname "WaveTerm" \
   --window-pos 200 120 \
   --window-size 600 300 \
@@ -55,8 +89,9 @@ DMG_NAME="waveterm-macos-universal-${DMG_VERSION}.dmg"
   --hide-extension "Wave.app" \
   --app-drop-link 400 125 \
   $DMG_NAME \
-  "temp/Wave.app"
+  "$TEMP_WAVE_DIR_UNIVERSAL"
 echo "success, created $DMG_NAME"
-mv $DMG_NAME builds/
-rm builds/Wave-darwin-*.zip
-spctl -a -vvv -t install temp/Wave.app/
+mv $DMG_NAME $BUILDS_DIR/
+spctl -a -vvv -t install $TEMP_WAVE_DIR_UNIVERSAL/
+
+rm -rf $TEMP_DIR $ZIP_DIR

buildres/osx-notarize.js

@@ -1,14 +1,18 @@
-const { notarize } = require('@electron/notarize');
-// DEBUG=electron-notarize
+const { notarize } = require("@electron/notarize");
+const path = require("path");
 
 console.log("running osx-notarize");
+const waveAppPath = path.resolve(__dirname, "temp", "Wave.app");
+
 notarize({
-    appPath: "temp/Wave.app",
+    appPath: waveAppPath,
     tool: "notarytool",
     keychainProfile: "notarytool-creds",
-}).then(() => {
-    console.log("notarize success");
-}).catch((e) => {
-    console.log("notarize error", e);
-    process.exit(1);
-});
+})
+    .then(() => {
+        console.log("notarize success");
+    })
+    .catch((e) => {
+        console.log("notarize error", e);
+        process.exit(1);
+    });

buildres/osx-sign.js

@@ -1,10 +1,10 @@
 const { signAsync } = require("@electron/osx-sign");
-// DEBUG="electron-osx-sign*"
+const path = require("path");
 
 console.log("running osx-sign");
-let waveAppPath = "temp/Wave.app";
+const waveAppPath = path.resolve(__dirname, "temp", "Wave.app");
 signAsync({
-    app: "temp/Wave.app",
+    app: waveAppPath,
     binaries: [
         waveAppPath + "/Contents/Resources/app/bin/wavesrv",
         waveAppPath + "/Contents/Resources/app/bin/mshell/mshell-v0.4-linux.amd64",
@@ -12,9 +12,11 @@ signAsync({
         waveAppPath + "/Contents/Resources/app/bin/mshell/mshell-v0.4-darwin.amd64",
         waveAppPath + "/Contents/Resources/app/bin/mshell/mshell-v0.4-darwin.arm64",
     ],
-}).then(() => {
-    console.log("signing success");
-}).catch((e) => {
-    console.log("signing error", e);
-    process.exit(1);
-});
+})
+    .then(() => {
+        console.log("signing success");
+    })
+    .catch((e) => {
+        console.log("signing error", e);
+        process.exit(1);
+    });

package.json

@@ -2,7 +2,7 @@
     "name": "waveterm",
     "author": "Command Line Inc",
     "productName": "Wave",
-    "version": "0.6.1",
+    "version": "v0.6.1",
     "main": "dist/emain.js",
     "license": "Apache-2.0",
     "dependencies": {
@@ -72,6 +72,7 @@
         "copy-webpack-plugin": "^11.0.0",
         "css-loader": "^6.7.1",
         "electron": "28.1.3",
+        "electron-devtools-installer": "^3.2.0",
         "file-loader": "^6.2.0",
         "http-server": "^14.1.1",
         "less": "^4.1.2",

public/index-dev.html

@@ -13,7 +13,6 @@
     </head>
     <body>
         <div id="measure"></div>
-        <div id="title-bar"></div>
         <div id="app"></div>
     </body>
 </html>

public/index.html

@@ -13,7 +13,6 @@
     </head>
     <body>
         <div id="measure"></div>
-        <div id="title-bar"></div>
         <div id="app"></div>
     </body>
 </html>

scripthaus.md

@@ -27,7 +27,7 @@ node_modules/.bin/electron-rebuild
 ```bash
 # @scripthaus command electron
 # @scripthaus cd :playbook
-WAVETERM_DEV=1 PCLOUD_ENDPOINT="https://ot2e112zx5.execute-api.us-west-2.amazonaws.com/dev" PCLOUD_WS_ENDPOINT="wss://5lfzlg5crl.execute-api.us-west-2.amazonaws.com/dev/" node_modules/.bin/electron dist-dev/emain.js
+WAVETERM_DEV=1 UPGRADE_EXTENSIONS=1 PCLOUD_ENDPOINT="https://ot2e112zx5.execute-api.us-west-2.amazonaws.com/dev" PCLOUD_WS_ENDPOINT="wss://5lfzlg5crl.execute-api.us-west-2.amazonaws.com/dev/" node_modules/.bin/electron dist-dev/emain.js
 ```
 
 ```bash
@@ -43,12 +43,13 @@ rm -rf dist/
 rm -rf bin/
 rm -rf build/
 node_modules/.bin/webpack --env prod
+WAVESRV_VERSION=$(node -e 'console.log(require("./version.js"))')
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
 (cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-darwin.amd64 main-waveshell.go)
 (cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-darwin.arm64 main-waveshell.go)
 (cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-linux.amd64 main-waveshell.go)
 (cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-linux.arm64 main-waveshell.go)
-(cd wavesrv; CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflags "-X main.BuildTime=$(date +'%Y%m%d%H%M')" -o ../bin/wavesrv ./cmd)
+(cd wavesrv; CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflags "-X main.BuildTime=$(date +'%Y%m%d%H%M') -X main.WaveVersion=$WAVESRV_VERSION" -o ../bin/wavesrv ./cmd)
 node_modules/.bin/electron-forge make
 ```
 
@@ -59,13 +60,14 @@ rm -rf dist/
 rm -rf bin/
 rm -rf build/
 node_modules/.bin/webpack --env prod
+WAVESRV_VERSION=$(node -e 'console.log(require("./version.js"))')
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
 (cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-darwin.amd64 main-waveshell.go)
 (cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-darwin.arm64 main-waveshell.go)
 (cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-linux.amd64 main-waveshell.go)
 (cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-linux.arm64 main-waveshell.go)
 # adds -extldflags=-static, *only* on linux (macos does not support fully static binaries) to avoid a glibc dependency
-(cd wavesrv; CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflags "-linkmode 'external' -extldflags=-static $GO_LDFLAGS" -o ../bin/wavesrv ./cmd)
+(cd wavesrv; CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflags "-linkmode 'external' -extldflags=-static $GO_LDFLAGS -X main.WaveVersion=$WAVESRV_VERSION" -o ../bin/wavesrv ./cmd)
 node_modules/.bin/electron-forge make
 ```
 
@@ -77,8 +79,9 @@ open out/Wave-darwin-x64/Wave.app
 
 ```bash
 # @scripthaus command build-wavesrv
+WAVESRV_VERSION=$(node -e 'console.log(require("./version.js"))')
 cd wavesrv
-CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflags "-X main.BuildTime=$(date +'%Y%m%d%H%M')" -o ../bin/wavesrv ./cmd
+CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflags "-X main.BuildTime=$(date +'%Y%m%d%H%M') -X main.WaveVersion=$WAVESRV_VERSION" -o ../bin/wavesrv ./cmd
 ```
 
 ```bash

src/app/appconst.ts

@@ -26,6 +26,7 @@ export const ProdServerWsEndpoint = "ws://127.0.0.1:1623";
 export const DevServerEndpoint = "http://127.0.0.1:8090";
 export const DevServerWsEndpoint = "ws://127.0.0.1:8091";
 export const DefaultTermFontSize = 12;
+export const DefaultTermFontFamily = "JetBrains Mono";
 export const MinFontSize = 8;
 export const MaxFontSize = 24;
 export const InputChunkSize = 500;

src/app/bookmarks/bookmarks.less

@@ -1,45 +1,16 @@
-@import "@/common/themes/themes.less";
-
 .bookmarks-view {
-    background-color: @background-session;
-
-    .close-button {
-        position: absolute;
-        right: 1em;
-        top: 0.8em;
-        cursor: pointer;
-        width: 1.5em;
-        height: 1.5em;
-        border-radius: 50%;
-        svg {
-            width: 1.5em;
-            height: 1.5em;
-            fill: @base-color;
-        }
-    }
-
-    .header {
-        margin: 1.5em 1.5em 0.5em;
-
-        .bookmarks-title {
-            margin-bottom: 0.5em;
-            font-weight: bold;
-            font-size: 1.5em;
-        }
-    }
-
     .icon {
         width: 1em;
         height: 1em;
-        fill: @base-color;
+        fill: var(--app-text-color);
     }
 
     .bookmarks-list {
-        color: @term-white;
+        color: var(--bookmarks-text-color);
         margin: 4px 10px 5px 5px;
 
         .no-bookmarks {
-            color: @term-white;
+            color: var(--bookmarks-text-color);
             padding: 30px 10px 35px 10px;
             border-bottom: 1px solid white;
         }
@@ -75,21 +46,21 @@
         }
 
         label {
-            color: @term-white;
+            color: var(--bookmarks-text-color);
             margin-bottom: 4px;
         }
 
         textarea {
             width: 80%;
             min-width: 50%;
-            color: @term-white;
-            background-color: @term-black;
+            color: var(--bookmarks-text-color);
+            background-color: var(--bookmarks-textarea-bg-color);
         }
 
         .bookmark-id-div {
             display: none;
             position: absolute;
-            color: @disabled-color;
+            color: var(--bookmarks-disabled-text-color);
             right: 5px;
             bottom: 2px;
             font-size: 0.8em;
@@ -104,7 +75,7 @@
             flex-direction: row;
 
             visibility: hidden;
-            color: @term-white;
+            color: var(--bookmarks-text-color);
 
             .bookmark-control:first-child {
                 margin-left: 0;
@@ -116,7 +87,7 @@
                 padding: 2px;
 
                 &:hover {
-                    color: @term-bright-white;
+                    color: var(--bookmarks-control-hover-color);
                 }
             }
         }

src/app/bookmarks/bookmarks.tsx

@@ -10,7 +10,6 @@ import cn from "classnames";
 import { GlobalModel } from "@/models";
 import { CmdStrCode, Markdown } from "@/common/elements";
 
-import { ReactComponent as XmarkIcon } from "@/assets/icons/line/xmark.svg";
 import { ReactComponent as CopyIcon } from "@/assets/icons/favourites/copy.svg";
 import { ReactComponent as PenIcon } from "@/assets/icons/favourites/pen.svg";
 import { ReactComponent as TrashIcon } from "@/assets/icons/favourites/trash.svg";
@@ -204,11 +203,11 @@ class BookmarksView extends React.Component<{}, {}> {
         let idx: number = 0;
         let bookmark: BookmarkType = null;
         return (
-            <div className={cn("bookmarks-view", { "is-hidden": isHidden })}>
-                <div className="header">
-                    <div className="bookmarks-title">Favorites</div>
-                    <div className="close-button hoverEffect" title="Close (Escape)" onClick={this.closeView}>
-                        <XmarkIcon className={"icon"} />
+            <div className={cn("mainview", "bookmarks-view", { "is-hidden": isHidden })}>
+                <div className="header bottom-border">
+                    <div className="bookmarks-title text-primary">Favorites</div>
+                    <div className="close-div hoverEffect" title="Close (Escape)" onClick={this.closeView}>
+                        <i className="fa-sharp fa-solid fa-xmark"></i>
                     </div>
                 </div>
                 <div className="bookmarks-list">

src/app/clientsettings/clientsettings.less

@@ -1,27 +1,4 @@
-@import "@/common/themes/themes.less";
-
 .clientsettings-view {
-    background-color: @background-session;
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    overflow: auto;
-    margin-bottom: 10px;
-    margin-right: 10px;
-    border-radius: 8px;
-    border: 1px solid rgba(241, 246, 243, 0.08);
-    background: rgba(13, 13, 13, 0.85);
-
-    .header {
-        margin: 24px 18px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding-bottom: 20px;
-        border-bottom: 1px solid white;
-    }
-
     .content {
         padding: 0 18px 0 30px;
     }
@@ -58,12 +35,12 @@
         }
 
         &.settings-error {
-            color: @term-red;
+            color: var(--view-error-color);
             margin-top: 20px;
             padding: 10px;
             border-radius: 5px;
             background-color: #200707;
-            border: 1px solid @term-red;
+            border: 1px solid var(--view-error-color);
             font-weight: bold;
 
             .error-dismiss {
@@ -119,37 +96,37 @@
             }
 
             .tab-color-icon.color-default path {
-                fill: @tab-green;
+                fill: var(--tab-green);
             }
             .tab-color-icon.color-green path {
-                fill: @tab-green;
+                fill: var(--tab-green);
             }
             .tab-color-icon.color-orange path {
-                fill: @tab-orange;
+                fill: var(--tab-orange);
             }
             .tab-color-icon.color-red path {
-                fill: @tab-red;
+                fill: var(--tab-red);
             }
             .tab-color-icon.color-yellow path {
-                fill: @tab-yellow;
+                fill: var(--tab-yellow);
             }
             .tab-color-icon.color-blue path {
-                fill: @tab-blue;
+                fill: var(--tab-blue);
             }
             .tab-color-icon.color-mint path {
-                fill: @tab-mint;
+                fill: var(--tab-mint);
             }
             .tab-color-icon.color-cyan path {
-                fill: @tab-cyan;
+                fill: var(--tab-cyan);
             }
             .tab-color-icon.color-white path {
-                fill: @tab-white;
+                fill: var(--tab-white);
             }
             .tab-color-icon.color-violet path {
-                fill: @tab-violet;
+                fill: var(--tab-violet);
             }
             .tab-color-icon.color-pink path {
-                fill: @tab-pink;
+                fill: var(--tab-pink);
             }
 
             .tab-colors,
@@ -189,7 +166,7 @@
             .action-text {
                 margin-left: 20px;
 
-                color: @term-red;
+                color: var(--view-error-color);
             }
 
             .settings-share-link {

src/app/clientsettings/clientsettings.tsx

@@ -148,8 +148,8 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         const curFontFamily = GlobalModel.getTermFontFamily();
 
         return (
-            <div className={cn("view clientsettings-view")}>
-                <header className="header">
+            <div className={cn("mainview", "clientsettings-view")}>
+                <header className="header bottom-border">
                     <div className="clientsettings-title text-primary">Client Settings</div>
                     <div className="close-div hoverEffect" title="Close (Escape)" onClick={this.handleClose}>
                         <i className="fa-sharp fa-solid fa-xmark"></i>

src/app/common/elements/button.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .wave-button {
     background: none;
     color: inherit;
@@ -15,35 +13,26 @@
     border-radius: 6px;
     height: auto;
 
-    &:hover {
-        color: @term-white;
-    }
-
-    i {
-        fill: rgba(255, 255, 255, 0.12);
-    }
-
     &.primary {
-        color: @term-green;
         background: none;
 
         i {
-            fill: @term-green;
+            fill: var(--button-primary-bg-color);
         }
 
         &.solid {
-            color: @term-bright-white;
-            background: @term-green;
+            color: var(--button-text-color);
+            background: var(--button-primary-bg-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.8) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.6) inset;
 
             i {
-                fill: @term-white;
+                fill: var(--app-text-color);
             }
         }
 
         &.outlined {
-            border: 1px solid @term-green;
+            border: 1px solid var(--button-primary-bg-color);
         }
 
         &.ghost {
@@ -51,68 +40,32 @@
         }
 
         &:hover {
-            color: @term-bright-white;
+            color: var(--button-text-color);
         }
     }
 
     &.secondary {
-        color: @term-white;
+        color: var(--app-text-color);
         background: none;
 
         &.solid {
-            background: rgba(255, 255, 255, 0.09);
+            background: var(--button-secondary-bg-color);
             box-shadow: none;
         }
 
         &.outlined {
-            border: 1px solid rgba(255, 255, 255, 0.09);
+            border: 1px solid var(--button-secondary-bg-color);
         }
 
         &.ghost {
             padding: 6px 10px;
 
             i {
-                fill: @term-green;
+                fill: var(--button-primary-bg-color);
             }
         }
     }
 
-    &.color-yellow {
-        &.solid {
-            border-color: @warning-yellow;
-            background-color: mix(@warning-yellow, @term-white, 50%);
-            box-shadow: none;
-        }
-
-        &.outlined {
-            color: @warning-yellow;
-            border-color: @warning-yellow;
-            &:hover {
-                color: @term-white;
-                border-color: @term-white;
-            }
-        }
-
-        &.ghost {
-        }
-    }
-
-    &.color-red {
-        &.solid {
-            border-color: @term-red;
-            background-color: mix(@term-red, @term-white, 50%);
-            box-shadow: none;
-        }
-
-        &.outlined {
-            color: @term-red;
-            border-color: @term-red;
-        }
-
-        &.ghost {
-        }
-    }
-
     &.disabled {
         opacity: 0.5;
     }

src/app/common/elements/checkbox.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .checkbox {
     display: flex;
 
@@ -12,7 +10,7 @@
         position: relative;
         display: flex;
         align-items: center;
-        color: @term-bright-white;
+        color: var(--checkbox-bg-color);
         transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);
     }
     input[type="checkbox"] + label > span {
@@ -38,7 +36,7 @@
     }
 
     input[type="checkbox"]:checked + label > span {
-        border: 10px solid @term-green;
+        border: 10px solid var(--button-primary-bg-color);
     }
     input[type="checkbox"]:checked + label > span:before {
         content: "";
@@ -47,8 +45,8 @@
         left: 3px;
         width: 7px;
         height: 12px;
-        border-right: 2px solid #fff;
-        border-bottom: 2px solid #fff;
+        border-right: 2px solid var(--checkbox-check-color);
+        border-bottom: 2px solid var(--checkbox-check-color);
         transform: rotate(45deg);
         transform-origin: 0% 100%;
         animation: checkbox-check 500ms cubic-bezier(0.4, 0, 0.23, 1);