From a306ca2ef0b427aa781ab30291cedd4fb1b05a7b Mon Sep 17 00:00:00 2001
From: Red Adaya <red.adaya@gmail.com>
Date: Fri, 8 Mar 2024 13:26:09 +0800
Subject: [PATCH] use css variables

---
 public/themes/default.css             |  5 +-
 public/themes/light.css               |  2 +
 src/app/common/elements/dropdown.less |  1 +
 src/app/connections/connections.less  |  2 +-
 src/app/history/history.less          | 53 +++++---------------
 src/app/history/history.tsx           | 70 ---------------------------
 6 files changed, 18 insertions(+), 115 deletions(-)

diff --git a/public/themes/default.css b/public/themes/default.css
index 353893b29..8f34109e6 100644
--- a/public/themes/default.css
+++ b/public/themes/default.css
@@ -91,12 +91,13 @@
 
     --form-element-border-color: rgba(241, 246, 243, 0.15);
     --form-element-bg-color: var(--app-bg-color);
-    --form-element-text-color: #ffffff;
+    --form-element-text-color: var(--app-text-color);
     --form-element-label-color: rgb(195, 200, 194);
     --form-element-primary-color: rgb(78, 154, 6);
     --form-element-secondary-color: rgba(255, 255, 255, 0.09);
     --form-element-error-color: rgb(204, 0, 0);
     --form-element-icon-color: #fff;
+    --form-element-disabled-text-color: #777;
 
     /* button colors */
     /* todo: use --form-element-* directly in elements */
@@ -211,7 +212,7 @@
     /* table colors */
     --table-border-color: rgba(241, 246, 243, 0.15);
     --table-thead-border-top-color: rgba(250, 250, 250, 0.1);
-    --table-thead-border-bottom-color: var(--table-border-color);
+    --table-thead-bright-border-color: #ccc;
     --table-thead-bg-color: rgba(250, 250, 250, 0.02);
     --table-tr-border-bottom-color: rgba(241, 246, 243, 0.15);
     --table-tr-hover-bg-color: rgba(255, 255, 255, 0.06);
diff --git a/public/themes/light.css b/public/themes/light.css
index 19fefa4af..8187ad981 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -44,6 +44,8 @@
     --form-element-label-color: rgba(0, 0, 0, 0.6);
     --form-element-secondary-color: rgba(255, 255, 255, 0.09);
     --form-element-icon-color: rgb(0, 0, 0, 0.6);
+    --form-element-disabled-text-color: #b7b7b7;
+    --form-element-placeholder-color: #b7b7b7;
 
     /* modal colors */
     --modal-header-bottom-border-color: rgba(0, 0, 0, 0.3);
diff --git a/src/app/common/elements/dropdown.less b/src/app/common/elements/dropdown.less
index 681a11a93..e927a7ba4 100644
--- a/src/app/common/elements/dropdown.less
+++ b/src/app/common/elements/dropdown.less
@@ -6,6 +6,7 @@
     border: 1px solid var(--dropdown-border-color);
     border-radius: 6px;
     background: var(--dropdown-bg-color);
+    line-height: 22px;
 
     &.no-label {
         height: 34px;
diff --git a/src/app/connections/connections.less b/src/app/connections/connections.less
index afa5f5a7c..66549fdd9 100644
--- a/src/app/connections/connections.less
+++ b/src/app/connections/connections.less
@@ -28,7 +28,7 @@
 
         thead {
             border-radius: var(--sizing-2-xs, 4px);
-            border-bottom: 2px solid var(--table-thead-border-bottom-color);
+            border-bottom: 2px solid var(--table-thead-bright-border-color);
 
             th {
                 height: 32px;
diff --git a/src/app/history/history.less b/src/app/history/history.less
index 9dc666a95..14fb3e24d 100644
--- a/src/app/history/history.less
+++ b/src/app/history/history.less
@@ -66,7 +66,7 @@
             }
 
             input::placeholder {
-                color: #777;
+                color: var(--form-element-placeholder-color);
             }
         }
 
@@ -77,37 +77,7 @@
 
             .workspace-dropdown,
             .remote-dropdown {
-                width: 200px;
-            }
-
-            .dropdown {
-                font-size: 0.8em;
-                padding: 0.5em 1em;
-                .label {
-                    display: inline;
-                    vertical-align: middle;
-                    color: var(--app-text-color);
-                }
-                .icon {
-                    vertical-align: middle;
-                    margin-left: 1em;
-                }
-            }
-
-            .session-dropdown,
-            .remote-dropdown {
-                .dropdown-item {
-                    color: var(--app-text-color);
-                    cursor: pointer;
-                    &:hover {
-                        background-color: #666;
-                    }
-                }
-
-                .dropdown-content {
-                    border-radius: 0 0 4px 4px;
-                    width: 16em;
-                }
+                width: 170px;
             }
 
             .remote-dropdown {
@@ -124,10 +94,6 @@
                 align-items: center;
                 height: 34px;
 
-                &.is-active {
-                    background-color: #666;
-                }
-
                 .checkbox-container {
                     position: relative;
                     top: 2px;
@@ -171,14 +137,14 @@
         }
 
         &.is-top {
-            border-bottom: 2px solid #ccc;
-            border-top: 1px solid #333;
+            border-bottom: 2px solid var(--table-thead-bright-border-color);
+            border-top: 1px solid var(--table-thead-border-top-color);
             padding-top: 4px;
             padding-bottom: 4px;
         }
 
         &.is-bottom {
-            border-top: 2px solid #ccc;
+            border-top: 2px solid var(--table-thead-bright-border-color);
         }
 
         .trash-icon {
@@ -193,7 +159,7 @@
 
         .control-button {
             cursor: pointer;
-            color: #aaa;
+            color: var(--form-element-label-color);
             margin-left: 12px;
 
             .icon {
@@ -233,8 +199,11 @@
 
             &.is-disabled {
                 cursor: default;
-                color: #777;
                 font-weight: normal;
+
+                .icon {
+                    fill: var(--form-element-disabled-text-color);
+                }
             }
         }
 
@@ -248,7 +217,7 @@
         flex-direction: row;
         justify-content: center;
         padding: 30px 0 30px 0;
-        border: 1px solid white;
+        border: 1px solid var(--app-border-color);
         border-radius: 3px;
         margin: 20px 50px 20px 20px;
     }
diff --git a/src/app/history/history.tsx b/src/app/history/history.tsx
index 8736c50a2..0f12f7e71 100644
--- a/src/app/history/history.tsx
+++ b/src/app/history/history.tsx
@@ -544,76 +544,6 @@ class HistoryView extends React.Component<{}, {}> {
                     </div>
                 </If>
                 <div key="hsr" className="history-scroll-region">
-                    {/* <table className="history-table" cellSpacing="0" cellPadding="0" border={0} ref={this.tableRef}>
-                        <tbody>
-                            <For index="idx" each="item" of={items}>
-                                <tr
-                                    key={item.historyid}
-                                    className={cn("history-item", {
-                                        "is-selected": hvm.selectedItems.get(item.historyid),
-                                    })}
-                                >
-                                    <td className="selectbox" onClick={() => this.handleSelect(item.historyid)}>
-                                        <HistoryCheckbox checked={hvm.selectedItems.get(item.historyid)} />
-                                    </td>
-                                    <td className="cmdstr">
-                                        <HistoryCmdStr
-                                            cmdstr={item.cmdstr}
-                                            onUse={() => this.handleUse(item)}
-                                            onCopy={() => this.handleCopy(item)}
-                                            isCopied={this.copiedItemId.get() == item.historyid}
-                                            fontSize="normal"
-                                            limitHeight={true}
-                                        />
-                                    </td>
-                                    <td className="workspace text-standard">{formatSSName(snames, scrnames, item)}</td>
-                                    <td className="remote text-standard">{formatRemoteName(rnames, item.remote)}</td>
-                                    <td className="ts text-standard">{getHistoryViewTs(nowDate, item.ts)}</td>
-                                    <td className="downarrow" onClick={() => this.activateItem(item.historyid)}>
-                                        <If condition={activeItemId != item.historyid}>
-                                            <svg
-                                                xmlns="http://www.w3.org/2000/svg"
-                                                width="16"
-                                                height="16"
-                                                viewBox="0 0 16 16"
-                                                fill="none"
-                                            >
-                                                <path
-                                                    d="M12.1297 6.62492C12.3999 6.93881 12.3645 7.41237 12.0506 7.68263L8.48447 10.7531C8.20296 10.9955 7.78645 10.9952 7.50519 10.7526L3.94636 7.68213C3.63274 7.41155 3.59785 6.93796 3.86843 6.62434C4.13901 6.31072 4.6126 6.27583 4.92622 6.54641L7.99562 9.19459L11.0719 6.54591C11.3858 6.27565 11.8594 6.31102 12.1297 6.62492Z"
-                                                    fill="#C3C8C2"
-                                                />
-                                            </svg>
-                                        </If>
-                                        <If condition={activeItemId == item.historyid}>
-                                            <svg
-                                                xmlns="http://www.w3.org/2000/svg"
-                                                width="16"
-                                                height="16"
-                                                viewBox="0 0 16 16"
-                                                fill="none"
-                                            >
-                                                <path
-                                                    d="M3.87035 9.37508C3.60009 9.06119 3.63546 8.58763 3.94936 8.31737L7.51553 5.24692C7.79704 5.00455 8.21355 5.00476 8.49481 5.24742L12.0536 8.31787C12.3673 8.58845 12.4022 9.06204 12.1316 9.37566C11.861 9.68928 11.3874 9.72417 11.0738 9.45359L8.00438 6.80541L4.92806 9.45409C4.61416 9.72435 4.14061 9.68898 3.87035 9.37508Z"
-                                                    fill="#C3C8C2"
-                                                />
-                                            </svg>
-                                        </If>
-                                    </td>
-                                </tr>
-                                <If condition={activeItemId == item.historyid}>
-                                    <tr className="active-history-item">
-                                        <td colSpan={6}>
-                                            <LineContainer
-                                                key={activeItemId}
-                                                historyId={activeItemId}
-                                                width={this.tableWidth.get()}
-                                            />
-                                        </td>
-                                    </tr>
-                                </If>
-                            </For>
-                        </tbody>
-                    </table> */}
                     <div className="history-table" ref={this.tableRef}>
                         <For index="idx" each="item" of={items}>
                             <div