CN-1594 feat: npm tab

4 files changed, 31 insertions, 29 deletions

diff --git a/src/assets/css/components/views/charts2/npmRelatedSessions.scss b/src/assets/css/components/views/charts2/npmRelatedSessions.scss
index f4230603..47215895 100644
--- a/src/assets/css/components/views/charts2/npmRelatedSessions.scss
+++ b/src/assets/css/components/views/charts2/npmRelatedSessions.scss
@@ -1,37 +1,38 @@
 .npm-sessions {
   height: 100%;
   width: 100%;
+
   .npm-sessions-title {
     display: flex;
     font-size: 14px;
-    color: #353636;
-    font-weight: 500;
+    color: var(--el-text-color-primary);
   }
   .npm-sessions-div {
     display: flex;
     margin: 10px 0 10px 0;
     width: 100%;
     height: 12px;
+
     .npm-sessions-div-red {
       height: 100%;
-      background: #E26154;
-      border: 1px solid #E26154;
+      background: var(--el-color-error);
+      border: 1px solid var(--el-color-error);
       border-top-right-radius: 4px;
       border-bottom-right-radius: 4px;
       border-left: none;
     }
     .npm-sessions-div-green {
       height: 100%;
-      background: #7E9F54;
-      border: 1px solid #7E9F54;
+      background: var(--el-color-success);
+      border: 1px solid var(--el-color-success);
       border-top-left-radius: 4px;
       border-bottom-left-radius: 4px;
       border-right: none;
     }
     .npm-sessions-div-gray {
       height: 100%;
-      background: rgba(113,113,113,0.30);
-      border: 1px solid rgba(113,113,113,0.30);
+      background: var(--el-color-info-light-7);
+      border: 1px solid var(--el-color-info-light-7);
       border-top-left-radius: 4px;
       border-bottom-left-radius: 4px;
       border-right: none;
@@ -41,8 +42,10 @@
   .npm-sessions-body {
     display: flex;
     justify-content: space-between;
+
     .npm-sessions-body-left {
       display: flex;
+
       .npm-sessions-as-clients.right {
         margin-right: 45px;
       }
@@ -50,13 +53,14 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+
         .npm-sessions-as-client {
           display: flex;
           align-items: center;
+
           .npm-sessions-as-client-i18n {
             font-size: 12px;
-            color: #717171;
-            font-weight: 400;
+            color: var(--el-text-color-regular);
           }
           .npm-sessions-as-client-green,.npm-sessions-as-client-red {
             width: 8px;
@@ -64,32 +68,31 @@
             border-radius: 50%;
           }
           .npm-sessions-as-client-green {
-            background: green;
+            background: var(--el-color-success);
           }
           .npm-sessions-as-client-red {
-            background: red;
+            background: var(--el-color-error);
           }
         }
         .npm-sessions-as-client-percent {
           font-size: 18px;
-          color: #353636;
-          font-weight: 700;
+          color: var(--el-text-color-primary);
+          font-weight: bold;
         }
       }
     }
     .npm-sessions-body-right {
       text-align: right;
+
       .npm-sessions-Progress-number {
         font-size: 14px;
-        color: #353636;
-        font-weight: 700;
+        color: var(--el-text-color-primary);
+        font-weight: bold;
       }
       .npm-sessions-Progress-unit {
         font-size: 12px;
-        color: #717171;
-        font-weight: 400;
+        color: var(--el-text-color-regular);
       }
     }
-
   }
 }
diff --git a/src/assets/css/components/views/charts2/npmTabs.scss b/src/assets/css/components/views/charts2/npmTabs.scss
index af7618d9..350da67e 100644
--- a/src/assets/css/components/views/charts2/npmTabs.scss
+++ b/src/assets/css/components/views/charts2/npmTabs.scss
@@ -5,7 +5,7 @@
     position: absolute;
     height: 3px;
     top: 0;
-    background-color: #046EC9;
+    background-color: var(--el-color-primary);
     border-radius: 5px 5px 0 0;
     transition: all linear .2s;
   }
@@ -17,15 +17,14 @@
     box-shadow: none;
 
     &>.el-tabs__header {
-      background-color: white;
-      //background-color: #f00;
-      border-color: #E2E5EC;
+      background-color: var(--el-fill-color-blank);
+      border-color: var(--el-border-color-light);
 
       .el-tabs__nav-wrap {
         padding-left: 27px;
       }
       .el-tabs__item:first-child {
-       margin-left: 0;
+        margin-left: 0;
       }
     }
     .el-tabs__content {
@@ -38,7 +37,7 @@
     line-height: 35px;
 
     .npm-tab__label {
-      color: #353636;
+      color: var(--el-text-color-primary);
       font-size: 14px;
       font-weight: bold;
       box-sizing: border-box;
@@ -51,10 +50,10 @@
     }
     &.is-active {
       .npm-tab__label {
-        color: #353636;
+        color: var(--el-text-color-primary);
 
         i {
-          color: #046EC9;
+          color: var(--el-color-primary);
         }
       }
     }
diff --git a/src/views/charts2/charts/npm/NpmIpMap.vue b/src/views/charts2/charts/npm/NpmIpMap.vue
index 0f5e0d9b..5e3100ce 100644
--- a/src/views/charts2/charts/npm/NpmIpMap.vue
+++ b/src/views/charts2/charts/npm/NpmIpMap.vue
@@ -218,7 +218,7 @@ export default {
     generatePolygonTooltipHTML () {
       const html = `
         <div class="map-tooltip" style="padding-bottom: 10px;">
-          <div class="map-tooltip__title"><img src="/images/flag/{id}.png" style="width: 18px;display: {tooltip.display};height: 12px;margin-right: 6px;border: 1px solid #E8E8E8;"/>{name}</div>
+          <div class="map-tooltip__title"><img src="/images/flag/{id}.png" style="width: 18px;display: {tooltip.display};height: 12px;margin-right: 6px;border: 1px solid var(--el-color-info-light-8);"/>{name}</div>
           <div class="map-tooltip__content">
             <div class="content-title">{tooltip.text.traffic}</div>
             <div class="content-row">
diff --git a/src/views/charts2/charts/npm/NpmMap.vue b/src/views/charts2/charts/npm/NpmMap.vue
index b875772d..2c41d235 100644
--- a/src/views/charts2/charts/npm/NpmMap.vue
+++ b/src/views/charts2/charts/npm/NpmMap.vue
@@ -250,7 +250,7 @@ export default {
     generatePolygonTooltipHTML () {
       const html = `
         <div class="map-tooltip" style="padding-bottom: 10px;">
-          <div class="map-tooltip__title"><img src="/images/flag/{id}.png" style="width: 18px;display: {tooltip.display};height: 12px;margin-right: 6px;border: 1px solid #E8E8E8;"/>{name}</div>
+          <div class="map-tooltip__title"><img src="/images/flag/{id}.png" style="width: 18px;display: {tooltip.display};height: 12px;margin-right: 6px;border: 1px solid var(--el-color-info-light-8);"/>{name}</div>
           <div class="map-tooltip__content">
             <div class="content-title">{tooltip.text.traffic}</div>
             <div class="content-row">