From d06ddc9560a3d9ced78d2d74b0e7e35b3a5c53c2 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 6 Jan 2023 23:33:18 -0800
Subject: [PATCH] Update themes

---
 src/renderer/themes/default.scss | 72 ++++++++++++--------------------
 src/renderer/themes/light.scss   | 36 +++++++++-------
 2 files changed, 47 insertions(+), 61 deletions(-)

diff --git a/src/renderer/themes/default.scss b/src/renderer/themes/default.scss
index 869bf4fb..6ee96b7c 100644
--- a/src/renderer/themes/default.scss
+++ b/src/renderer/themes/default.scss
@@ -100,64 +100,44 @@
 
   --background-noise: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4=');
 
+  --table-header-bg: rgb(24, 24, 24);
+  --table-header-fg: rgb(179, 179, 179);
+  --table-border: none;
+  --table-border-color: hsla(0, 0%, 100%, 0.1);
+  --table-bg: var(--main-bg);
+  --table-alt-bg: var(--main-bg);
+  --table-fg: rgb(179, 179, 179);
+  --table-row-hover-bg: rgba(100, 100, 100, 0.2);
+  --table-row-selected-bg: rgba(100, 100, 100, 0.4);
+
   .ag-theme-alpine-dark {
     --ag-font-family: var(--content-font-family);
 
-    --ag-borders: none;
-    --ag-border-color: rgb(50, 50, 50);
+    --ag-borders: var(--table-border);
+    --ag-border-color: var(--table-border-color);
 
-    --ag-header-background-color: rgb(16, 16, 16);
-    --ag-header-foreground-color: rgb(179, 179, 179);
+    --ag-header-background-color: var(--table-header-bg);
+    --ag-header-foreground-color: var(--table-header-fg);
 
-    --ag-foreground-color: rgb(179, 179, 179);
+    --ag-background-color: var(--table-bg);
+    --ag-odd-row-background-color: var(--table-alt-bg);
+    --ag-foreground-color: var(--table-fg);
 
-    --ag-background-color: var(--main-bg);
-    --ag-row-hover-color: rgba(100, 100, 100, 0.2);
-    --ag-selected-row-background-color: rgba(100, 100, 100, 0.4);
+    --ag-row-hover-color: var(--table-row-hover-bg);
+    --ag-selected-row-background-color: var(--table-row-selected-bg);
   }
 
   .ag-header {
-    border-bottom: 1px solid rgb(50, 50, 50, 0.5);
+    border-bottom: 1px solid var(--table-border-color);
     margin-bottom: 1rem;
   }
 
-  .ag-header-cell-comp-wrapper {
-    margin: 0.5rem 0.5rem;
-  }
-
-  .ag-cell-rating,
-  .ag-cell-favorite {
-    display: none;
-  }
-
-  .ag-cell-rating.visible {
-    display: block;
-  }
-
-  .ag-cell-favorite.visible {
-    display: block;
-  }
-
-  .ag-row-hover {
-    .ag-cell-rating,
-    .ag-cell-favorite {
-      display: block;
-    }
-  }
-
-  .ag-header-cell,
-  .ag-header-group-cell {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
-  .ag-header-cell-resize {
-    background-color: transparent;
-  }
-
   .ag-header:hover .ag-header-cell-resize {
-    border-left: 2px rgb(70, 70, 70, 1) solid;
-    width: 7px;
+    position: absolute;
+    top: 25%;
+    border-left: 1px var(--table-border-color) solid;
+    height: 50%;
+    width: 0.5em;
   }
 
   .ag-header-cell-label {
@@ -167,7 +147,7 @@
   }
 
   .ag-cell-focus {
-    border: 1px rgba(155, 155, 155, 0.3) solid !important;
+    border: 1px var(--table-border-color) solid !important;
   }
 
   .current-song {
diff --git a/src/renderer/themes/light.scss b/src/renderer/themes/light.scss
index dbebb15d..595f6988 100644
--- a/src/renderer/themes/light.scss
+++ b/src/renderer/themes/light.scss
@@ -89,22 +89,33 @@ body[data-theme='defaultLight'] {
   --card-poster-bg-hover: transparent;
   --card-poster-radius: 5px;
 
-  .ag-theme-alpine-dark {
-    --ag-font-family: poppins;
-    --ag-font-size: 12px;
+  --table-header-bg: rgb(245, 245, 245);
+  --table-header-fg: rgb(40, 40, 40);
+  --table-border: none;
+  --table-border-color: rgba(50, 50, 50, 0.3);
+  --table-bg: var(--main-bg);
+  --table-alt-bg: var(--main-bg);
+  --table-fg: rgb(179, 179, 179);
+  --table-row-hover-bg: rgba(100, 100, 100, 0.2);
+  --table-row-selected-bg: rgba(100, 100, 100, 0.4);
 
-    --ag-borders: none;
+  .ag-theme-alpine-dark {
+    --ag-font-family: var(--content-font-family);
+
+    --ag-borders: var(--table-border);
     --ag-border-color: rgb(50, 50, 50);
 
-    --ag-header-background-color: var(--main-bg);
-    --ag-header-foreground-color: var(--main-fg);
+    --ag-header-background-color: var(--table-header-bg);
+    --ag-header-foreground-color: var(--table-header-fg);
 
     --ag-foreground-color: rgb(0, 0, 0);
 
-    --ag-background-color: var(--main-bg);
-    --ag-odd-row-background-color: rgb(230, 230, 230);
-    --ag-row-hover-color: rgba(100, 100, 100, 0.2);
-    --ag-selected-row-background-color: rgba(100, 100, 100, 0.4);
+    --ag-background-color: var(--table-bg);
+    --ag-odd-row-background-color: var(--table-alt-bg);
+    --ag-foreground-color: var(--table-fg);
+
+    --ag-row-hover-color: var(--table-row-hover-bg);
+    --ag-selected-row-background-color: var(--table-row-selected-bg);
   }
 
   .ag-root ::-webkit-scrollbar-corner {
@@ -115,10 +126,5 @@ body[data-theme='defaultLight'] {
   }
   .ag-root ::-webkit-scrollbar-thumb {
     background: var(--scrollbar-thumb-bg);
-    // background: black;
-  }
-
-  .ag-cell-focus {
-    border: 1px rgba(60, 60, 60, 0.3) solid !important;
   }
 }