From 13081abf81bd4576d8cd956dc296618014dfb7da Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Tue, 7 Nov 2023 17:42:55 +0800
Subject: [PATCH] feat: add color

---
 src/styles/theme.scss                                     | 4 ++--
 src/views/dashboard/controls/Tab.vue                      | 5 +++--
 src/views/dashboard/controls/Topology.vue                 | 1 -
 src/views/dashboard/graphs/Card.vue                       | 2 +-
 src/views/dashboard/graphs/TopList.vue                    | 8 ++++----
 src/views/dashboard/related/topology/components/Graph.vue | 2 +-
 .../dashboard/related/topology/components/PodTopology.vue | 2 +-
 .../related/trace/components/Table/TableItem.vue          | 6 +++---
 8 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 20b04e72..5cb02e88 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -31,14 +31,14 @@
 
 .dark {
   --el-color-primary: #409eff;
-  --theme-background: #36383d;
+  --theme-background: #212224;
   --font-color: #fafbfc;
   --disabled-color: #ccc;
   --el-text-color-regular: #fafbfc;
   --dashboard-tool-bg: #000;
   --text-color-placeholder: #ccc;
   --border-color: #262629;
-  --border-color-primary: #666;
+  --border-color-primary: #4b4b52;
   --layout-background: #000;
   --el-switch-off: #999;
 }
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 4fa428ed..39c52340 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -302,15 +302,16 @@ limitations under the License. -->
       height: 20px;
       line-height: 20px;
       outline: none;
-      color: #333;
+      color: $font-color;
       font-style: normal;
       overflow: hidden;
       text-overflow: ellipsis;
       margin-right: 20px;
+      background-color: $theme-background;
     }
 
     .tab-icons {
-      color: #333;
+      color: $font-color;
 
       i {
         margin-right: 3px;
diff --git a/src/views/dashboard/controls/Topology.vue b/src/views/dashboard/controls/Topology.vue
index ff2553f5..b7de1798 100644
--- a/src/views/dashboard/controls/Topology.vue
+++ b/src/views/dashboard/controls/Topology.vue
@@ -59,7 +59,6 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .topology {
-    // background-color: #333840;
     width: 100%;
     height: 100%;
     font-size: $font-size-smaller;
diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index 197dcb44..ff5b2c33 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -61,7 +61,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .chart-card {
-    color: #333;
+    color: $font-color;
     width: 100%;
     height: 100%;
     display: flex;
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index 336c0892..7680da12 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -141,7 +141,7 @@ limitations under the License. -->
 
   .progress-bar {
     font-size: $font-size-smaller;
-    color: #333;
+    color: $font-color;
   }
 
   .chart-slow-i {
@@ -171,7 +171,7 @@ limitations under the License. -->
     padding: 4px 10px 7px;
     border-radius: 4px;
     border: 1px solid #ddd;
-    color: #333;
+    color: $font-color;
     background-color: $theme-background;
     will-change: opacity, background-color;
     transition: opacity 0.3s, background-color 0.3s;
@@ -188,12 +188,12 @@ limitations under the License. -->
   }
 
   .operation-icon {
-    color: #333;
+    color: $font-color;
   }
 
   .operation {
     padding: 5px 0;
-    color: #333;
+    color: $font-color;
     cursor: pointer;
     position: relative;
     text-align: center;
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index 62949762..a85d70a4 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -734,7 +734,7 @@ limitations under the License. -->
 
     .operations-list {
       position: absolute;
-      color: #333;
+      color: $font-color;
       cursor: pointer;
       background-color: $theme-background;
       border-radius: 5px;
diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue
index aa3d072b..e569d642 100644
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/src/views/dashboard/related/topology/components/PodTopology.vue
@@ -322,7 +322,7 @@ limitations under the License. -->
   .operations-list {
     position: absolute;
     padding: 10px 0;
-    color: #333;
+    color: $font-color;
     cursor: pointer;
     background-color: $theme-background;
     border-radius: 3px;
diff --git a/src/views/dashboard/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue
index 0ce19ad1..c31b3738 100644
--- a/src/views/dashboard/related/trace/components/Table/TableItem.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue
@@ -285,7 +285,7 @@ limitations under the License. -->
     padding: 10px;
     border-radius: 5px;
     border: 1px solid $disabled-color;
-    background-color: #333;
+    background-color: $font-color;
     color: $text-color;
     text-align: center;
     box-shadow: #eee 1px 2px 10px;
@@ -297,8 +297,8 @@ limitations under the License. -->
     position: absolute;
     left: 250px;
     top: 20px;
-    border: 6px solid #333;
-    border-color: transparent transparent #333;
+    border: 6px solid $font-color;
+    border-color: transparent transparent $font-color;
     display: none;
   }