From a18ac3372eae4796a85661573b454e41a20729a6 Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Sun, 26 Nov 2023 20:02:41 +0800
Subject: [PATCH] fix: change colors to match dark theme for Network Profiling
 (#346)

---
 src/assets/icons/add_fill.svg                          |  2 +-
 src/views/dashboard/controls/Tab.vue                   |  6 ++----
 .../continuous-profiling/components/PolicyList.vue     |  1 +
 .../network-profiling/components/ProcessTopology.vue   | 10 ++++++++--
 .../related/network-profiling/components/Settings.vue  |  2 +-
 .../related/network-profiling/components/Tasks.vue     |  7 ++++++-
 6 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/assets/icons/add_fill.svg b/src/assets/icons/add_fill.svg
index 5285acaa..55b2f214 100644
--- a/src/assets/icons/add_fill.svg
+++ b/src/assets/icons/add_fill.svg
@@ -12,4 +12,4 @@ distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
-<svg t="1655799536378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9286" width="48" height="48"><path d="M563.2 614.4v51.2c0 30.72-20.48 51.2-51.2 51.2s-51.2-20.48-51.2-51.2v-51.2H409.6c-30.72 0-51.2-20.48-51.2-51.2s20.48-51.2 51.2-51.2h51.2V460.8c0-30.72 20.48-51.2 51.2-51.2s51.2 20.48 51.2 51.2v51.2h51.2c30.72 0 51.2 20.48 51.2 51.2s-20.48 51.2-51.2 51.2h-51.2z m51.2-563.2c158.72 15.36 281.6 143.36 281.6 307.2v512c0 56.32-46.08 102.4-102.4 102.4h-563.2c-56.32 0-102.4-46.08-102.4-102.4V153.6c0-56.32 46.08-102.4 102.4-102.4H614.4z m163.84 230.4c-25.6-61.44-76.8-107.52-138.24-122.88v71.68c0 30.72 20.48 51.2 51.2 51.2h87.04zM537.6 153.6h-256c-30.72 0-51.2 20.48-51.2 51.2v614.4c0 30.72 20.48 51.2 51.2 51.2h460.8c30.72 0 51.2-20.48 51.2-51.2V384h-153.6c-56.32 0-102.4-46.08-102.4-102.4V153.6z" fill="#707070" p-id="9287"></path></svg>
\ No newline at end of file
+<svg t="1655799536378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9286" width="48" height="48"><path d="M563.2 614.4v51.2c0 30.72-20.48 51.2-51.2 51.2s-51.2-20.48-51.2-51.2v-51.2H409.6c-30.72 0-51.2-20.48-51.2-51.2s20.48-51.2 51.2-51.2h51.2V460.8c0-30.72 20.48-51.2 51.2-51.2s51.2 20.48 51.2 51.2v51.2h51.2c30.72 0 51.2 20.48 51.2 51.2s-20.48 51.2-51.2 51.2h-51.2z m51.2-563.2c158.72 15.36 281.6 143.36 281.6 307.2v512c0 56.32-46.08 102.4-102.4 102.4h-563.2c-56.32 0-102.4-46.08-102.4-102.4V153.6c0-56.32 46.08-102.4 102.4-102.4H614.4z m163.84 230.4c-25.6-61.44-76.8-107.52-138.24-122.88v71.68c0 30.72 20.48 51.2 51.2 51.2h87.04zM537.6 153.6h-256c-30.72 0-51.2 20.48-51.2 51.2v614.4c0 30.72 20.48 51.2 51.2 51.2h460.8c30.72 0 51.2-20.48 51.2-51.2V384h-153.6c-56.32 0-102.4-46.08-102.4-102.4V153.6z" p-id="9287"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 55df3fe0..18977897 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -282,7 +282,7 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .tabs {
     height: 40px;
-    color: $disabled-color;
+    color: var(--sw-icon-btn-color);
     width: 100%;
     overflow-x: auto;
     white-space: nowrap;
@@ -311,8 +311,6 @@ limitations under the License. -->
     }
 
     .tab-icons {
-      color: $font-color;
-
       i {
         margin-right: 3px;
       }
@@ -371,7 +369,7 @@ limitations under the License. -->
   }
 
   .tab-icon {
-    color: #666;
+    color: var(--sw-icon-btn-color);
   }
 
   .vue-grid-item.active {
diff --git a/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue b/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
index 428fbd1e..40c9ed58 100644
--- a/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
@@ -198,6 +198,7 @@ limitations under the License. -->
 
   .new-task {
     float: right;
+    color: $font-color;
   }
 
   .reload {
diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
index dea866d6..a1417a43 100644
--- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
+++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
@@ -18,7 +18,7 @@ limitations under the License. -->
       <g class="svg-graph" :transform="`translate(${diff[0]}, ${diff[1]})`">
         <g class="hex-polygon">
           <path :d="getHexPolygonVertices()" stroke="#D5DDF6" stroke-width="2" fill="none" />
-          <text :x="0" :y="radius - 15" fill="#000" text-anchor="middle">
+          <text :x="0" :y="radius - 15" :fill="appStore.theme === Themes.Dark ? '#eee' : '#000'" text-anchor="middle">
             {{ selectorStore.currentPod && selectorStore.currentPod.label }}
           </text>
         </g>
@@ -40,7 +40,12 @@ limitations under the License. -->
               :x="(node.x || 0) - 15"
               :y="(node.y || 0) - 15"
             />
-            <text :x="node.x" :y="(node.y || 0) + 28" fill="#000" text-anchor="middle">
+            <text
+              :x="node.x"
+              :y="(node.y || 0) + 28"
+              :fill="appStore.theme === Themes.Dark ? '#eee' : '#000'"
+              text-anchor="middle"
+            >
               {{ node.name.length > 10 ? `${node.name.substring(0, 10)}...` : node.name }}
             </text>
           </g>
@@ -122,6 +127,7 @@ limitations under the License. -->
   import TimeLine from "./TimeLine.vue";
   import { useAppStoreWithOut } from "@/store/modules/app";
   import icons from "@/assets/img/icons";
+  import { Themes } from "@/constants/data";
 
   /*global Nullable, defineProps */
   const props = defineProps({
diff --git a/src/views/dashboard/related/network-profiling/components/Settings.vue b/src/views/dashboard/related/network-profiling/components/Settings.vue
index a16a3f81..680ea733 100644
--- a/src/views/dashboard/related/network-profiling/components/Settings.vue
+++ b/src/views/dashboard/related/network-profiling/components/Settings.vue
@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div class="label">{{ t("linkDashboard") }}</div>
   <Selector
-    :value="dashboardStore.selectedGrid.linkDashboard || ''"
+    :value="(dashboardStore.selectedGrid && dashboardStore.selectedGrid.linkDashboard) || ''"
     :options="linkDashboards"
     size="small"
     placeholder="Please input a dashboard name for calls"
diff --git a/src/views/dashboard/related/network-profiling/components/Tasks.vue b/src/views/dashboard/related/network-profiling/components/Tasks.vue
index 4886557b..7cc63ea5 100644
--- a/src/views/dashboard/related/network-profiling/components/Tasks.vue
+++ b/src/views/dashboard/related/network-profiling/components/Tasks.vue
@@ -18,7 +18,11 @@ limitations under the License. -->
       <div class="profile-t-tool">
         <span>{{ t("taskList") }}</span>
         <span class="new-task cp" @click="createTask">
-          <Icon :style="{ color: inProcess ? '#ccc' : '#000' }" iconName="library_add" size="middle" />
+          <Icon
+            :style="{ color: inProcess ? '#ccc' : appStore.theme === Themes.Dark ? '#fff' : '#000' }"
+            iconName="library_add"
+            size="middle"
+          />
         </span>
       </div>
       <div class="profile-t-wrapper">
@@ -78,6 +82,7 @@ limitations under the License. -->
   import { useAppStoreWithOut } from "@/store/modules/app";
   import NewTask from "./NewTask.vue";
   import { EBPFProfilingTriggerType } from "@/store/data";
+  import { Themes } from "@/constants/data";
 
   /*global Nullable */
   const { t } = useI18n();