fix: change colors to match dark theme for Network Profiling (#346)

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

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 {

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 {

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({

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"

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();