chore: cleanup light mode highlight color (grafana#1284)

yzhaoyu · Jul 19, 2022 · dd91c9e · dd91c9e
1 parent d395e3b
commit dd91c9e
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git a/packages/pyroscope-flamegraph/src/ProfilerTable.module.scss b/packages/pyroscope-flamegraph/src/ProfilerTable.module.scss
@@ -1,7 +1,7 @@
 .rowSelected {
   cursor: pointer;
-  background: var(--ps-green-primary) !important;
-  color: var(--ps-neutral-1);
+  background: var(--ps-table-highlight-row-bg) !important;
+  color: var(--ps-table-highlight-row-text);
 }
 
 // TODO this uses the same ui as FileList, maybe we should refactor into a table component?

diff --git a/webapp/javascript/components/FileList.module.scss b/webapp/javascript/components/FileList.module.scss
@@ -10,8 +10,8 @@ $tdHeight: 25px;
 
 .rowSelected {
   cursor: pointer;
-  background: var(--ps-green-primary);
-  color: var(--ps-neutral-1);
+  background: var(--ps-table-highlight-row-bg);
+  color: var(--ps-table-highlight-row-text);
 }
 
 .profilesTable {
@@ -64,7 +64,7 @@ $tdHeight: 25px;
 
     span {
       // mix-blend-mode: exclusion;
-      text-shadow: 0 0 1px var(--ps-neutral-1);
+      text-shadow: 0 0 1px var(--ps-table-row-text-shadow);
     }
 
     &:first-child {

diff --git a/webapp/sass/common.scss b/webapp/sass/common.scss
@@ -80,7 +80,7 @@ tt {
     }
 
     span {
-      text-shadow: 0 0 1px var(--ps-neutral-1);
+      text-shadow: 0 0 1px var(--ps-table-row-text-shadow);
     }
 
     &:first-child {

diff --git a/webapp/sass/variables.css b/webapp/sass/variables.css
@@ -37,6 +37,12 @@
   --ps-button-switch-bg-highlight: #61ea71; /* 3 button switch selected button background when hovered*/
   --ps-button-switch-text: #242428; /* 3 button switch selected button text */
 
+  --ps-table-highlight-row-bg: #2ecc40; /* table selected row background */
+  --ps-table-highlight-row-text: #000000; /* table selected row text */
+  --ps-table-row-text-shadow: #000000; /* table selected row text */
+
+  --ps-selected-app: #df8b53; /* active selected app color in dropdown */
+
   --ps-blue-primary: #3b78e7; /* Standard blue for button, instructions text (right) */
   --ps-blue-highlight: #578ae9; /* highlight (hover) blue */
   --ps-blue-disabled: #5374b0; /* disabled blue */
@@ -53,8 +59,6 @@
   --ps-grey-highlight: #47474e;
   --ps-grey-disabled: #404047;
 
-  --ps-selected-app: #df8b53; /* active selected app color in dropdown */
-
   --ps-immutable-green-button-text: #242428;
   --ps-immutable-google-button: #e84d3c; /* sign up with google button */
   --ps-immutable-google-button-hover: #e53825; /* sign up with google hover */
@@ -100,6 +104,9 @@
   --ps-button-switch-bg-highlight: #578ae9; /* 3 button switch selected button background when hovered*/
   --ps-button-switch-text: #ffffff; /* 3 button switch selected button text */
 
+  --ps-table-highlight-row-bg: #3b78e7; /* table selected row background */
+  --ps-table-highlight-row-text: #ffffff; /* table selected row text */
+  --ps-table-row-text-shadow: #ffffff; /* table selected row text */
   --ps-selected-app: #3b78e7; /* active selected app color in dropdown */
 
   --ps-green-primary: #0bdb79; /* standard green */
-Original file line number
+Diff line change
@@ Expand Up / @@ -80,7 +80,7 @@ tt { @@
         }
         span {
-          text-shadow: 0 0 1px var(--ps-neutral-1);
+          text-shadow: 0 0 1px var(--ps-table-row-text-shadow);
         }
         &:first-child {
@@ Expand Down @@