From 83fa4fc85f7a7f5ab909e2b21c0c209d43534c28 Mon Sep 17 00:00:00 2001
From: Brandon Fergerson <bfergerson@apache.org>
Date: Mon, 2 May 2022 22:13:27 +0400
Subject: [PATCH] theming

---
 src/layout/components/AppMain.vue      |  2 +-
 src/layout/components/SideBar.vue      |  5 +-
 src/styles/jetbrains-dark.scss         | 63 +++++++++++++++++++++-----
 src/styles/lib.scss                    | 20 ++++----
 src/views/dashboard/data.ts            |  6 ++-
 src/views/dashboard/graphs/Line.vue    | 13 +++---
 src/views/dashboard/graphs/TopList.vue |  2 +-
 7 files changed, 76 insertions(+), 35 deletions(-)

diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 6b4c2b47..ceeffa8e 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -50,7 +50,7 @@ if (!appStore.utc) {
 </script>
 <style lang="scss" scoped>
 .app-main {
-  height: calc(100% - 40px);
+  height: calc(100% - 39px);
   background: #f7f9fa;
 }
 </style>
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index cee6f71c..65551234 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -149,10 +149,9 @@ const filterMenus = (menus: any[]) => {
 <style lang="scss" scoped>
 .side-bar {
   background: #252a2f;
-  height: 100%;
-  min-height: 700px;
+  height: 100vh;
   position: relative;
-  margin-bottom: 100px;
+  overflow-y: visible;
 }
 
 .el-menu-vertical:not(.el-menu--collapse) {
diff --git a/src/styles/jetbrains-dark.scss b/src/styles/jetbrains-dark.scss
index a9ff9d40..5f06b052 100644
--- a/src/styles/jetbrains-dark.scss
+++ b/src/styles/jetbrains-dark.scss
@@ -30,7 +30,8 @@
 }
 
 .el-pagination.is-background .el-pager li:not(.disabled).active {
-  background: var(--spp-other-green);
+  background: var(--spp-light-grey);
+  color: ghostwhite !important;
 }
 
 .el-input__inner {
@@ -108,7 +109,7 @@
 }
 
 .settings input {
-  background: var(--spp-dark-green) !important;
+  background: var(--nice-black) !important;
   border: 1px solid var(--spp-blue) !important;
   color: var(--spp-white);
 }
@@ -120,6 +121,20 @@
 .el-switch__core {
   --el-switch-off-color: var(--spp-dark-green);
   --el-switch-on-color: var(--spp-red);
+  background-color: var(--spp-darkest-green) !important;
+  border-color: var(--border-color) !important;
+}
+
+.el-switch__core .el-switch__inner .is-icon, .el-switch__core .el-switch__inner .is-text {
+  color: var(--spp-light-grey);
+}
+
+.el-switch__action {
+  background-color: ghostwhite !important;
+}
+
+.is-checked > .el-switch__core  {
+  background-color: var(--spp-white) !important;
 }
 
 .alarm-tool {
@@ -140,7 +155,7 @@
 }
 
 .timeline-table-i {
-  border-left: 4px solid var(--spp-other-green) !important;
+  border-left: 4px solid var(--border-color) !important;
 }
 
 .timeline-table-i::before {
@@ -184,20 +199,28 @@
   background-color: var(--nice-black) !important;
 }
 
+.el-pagination__jump {
+  color: var(--spp-light-grey) !important;
+}
+
 .el-pager li.active {
-  background-color: var(--spp-other-green);
+  background-color: var(--border-color);
+  color: var(--spp-light-grey) !important;
 }
 
 .el-pager li {
   background-color: var(--spp-green);
+  color: var(--spp-white) !important;
 }
 
-.el-pager li.active {
-  color: var(--spp-white);
+.btn-prev[type="button"] {
+  background-color: var(--border-color);
+  color: var(--spp-light-grey) !important;
 }
 
 .el-pager + button.btn-next[type="button"] {
-  background-color: var(--spp-grey);
+  background-color: var(--border-color);
+  color: var(--spp-light-grey) !important;
 }
 
 .toggle-selection {
@@ -259,10 +282,6 @@
   color: var(--spp-light-grey) !important;
 }
 
-.unit {
-  color: var(--spp-white) !important;
-}
-
 .profile-item.level0 {
   &:hover {
     color: var(--spp-red) !important;
@@ -414,7 +433,7 @@ a {
 
 .timeline-table-i {
   &::before {
-    background-color: #448dfe !important;
+    background-color: var(--spp-white) !important;
   }
 }
 
@@ -481,3 +500,23 @@ a {
 .scroll-handler__wrapper .scroll-to.active {
   background-color: var(--border-color) !important;
 }
+
+.el-input-group__append, .el-input-group__prepend {
+  background-color: var(--spp-darkest-green) !important;
+  border-color: var(--spp-darkest-green);
+}
+
+.tabs span.active input.tab-name.view {
+  //background-color: var(--border-color) !important;
+  color: var(--spp-light-grey) !important;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+.tab-header {
+  background-color: var(--nice-black) !important;
+}
+
+.timeline-item {
+  color: var(--spp-light-grey) !important;
+}
diff --git a/src/styles/lib.scss b/src/styles/lib.scss
index 34083a5b..8f96d562 100644
--- a/src/styles/lib.scss
+++ b/src/styles/lib.scss
@@ -48,23 +48,23 @@
 }
 
 .green {
-  color: #4caf50;
+  color: #629755;
 }
 
 .red {
-  color: #e54c17;
+  color: #e1483b;
 }
 
 .blue {
-  color: #448dfe;
+  color: #6897BB;
 }
 
 .purple {
-  color: #6e40aa;
+  color: #9876AA;
 }
 
 .yellow {
-  color: #fbb03b;
+  color: #FFC66D;
 }
 
 .grey {
@@ -76,23 +76,23 @@
 }
 
 .bg-green {
-  background-color: #4caf50;
+  background-color: #629755;
 }
 
 .bg-red {
-  background-color: #e54c17;
+  background-color: #e1483b;
 }
 
 .bg-blue {
-  background-color: #448dfe;
+  background-color: #6897BB;
 }
 
 .bg-purple {
-  background-color: #6e40aa;
+  background-color: #9876AA;
 }
 
 .bg-yellow {
-  background-color: #fbb03b;
+  background-color: #FFC66D;
 }
 
 .bg-grey {
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index 14942f47..353e1007 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -254,13 +254,15 @@ export const QueryOrders = [
 ];
 export const TextColors: { [key: string]: string } = {
   green: "#629755",
-  blue: "#409EFF",
+  blue: "#6897BB",
   red: "#e1483b",
   grey: "#909399",
   white: "#fff",
   black: "#000",
-  orange: "#E6A23C",
+  orange: "#CC7832",
   purple: "#9876AA",
+  yellow: "#FFC66D",
+  brown: "#8A653B",
 };
 
 export const CalculationOpts = [
diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue
index 20ab685e..7d51db90 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/src/views/dashboard/graphs/Line.vue
@@ -117,19 +117,20 @@ function getOption() {
   let color: string[] = [];
   switch (keys.length) {
     case 2:
-      color = ["#629755", "#9876AA"];
+      color = ["#6897BB", "#9876AA"];
       break;
     case 1:
-      color = ["#629755"];
+      color = ["#6897BB"];
       break;
     default:
       color = [
-        "#629755",
+        "#6897BB",
         "#9876AA",
-        "#CC7832",
-        "#8A653B",
-        "#e1483b",
+        "#629755",
         "#FFC66D",
+        "#CC7832",
+        "#e1483b",
+        "#8A653B",
       ];
       break;
   }
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index fbf6c43e..8fe0f72f 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -35,7 +35,7 @@ limitations under the License. -->
       <el-progress
         :stroke-width="6"
         :percentage="(i.value / maxValue) * 100"
-        :color="TextColors[config.color || 'red']"
+        :color="TextColors[config.color || 'purple']"
         :show-text="false"
       />
     </div>