From bd517f88c01202eb7e7e5acf70bf4af2e6f91d75 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Fri, 29 Dec 2023 17:15:34 +0330
Subject: [PATCH] style: change theme

---
 src/components/buttons/play/play.module.css         |  7 +++----
 src/components/buttons/unselect/unselect.module.css | 13 ++-----------
 src/components/buttons/unselect/unselect.tsx        |  1 -
 src/components/sections/ready.astro                 |  1 -
 src/components/sections/why.astro                   |  2 +-
 src/components/sound/favorite/favorite.module.css   |  2 +-
 src/components/sound/sound.module.css               |  7 +++----
 src/styles/variables/color.css                      |  2 +-
 8 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/src/components/buttons/play/play.module.css b/src/components/buttons/play/play.module.css
index 69edff8..76ac57d 100644
--- a/src/components/buttons/play/play.module.css
+++ b/src/components/buttons/play/play.module.css
@@ -8,11 +8,10 @@
   font-size: var(--font-base);
   line-height: 0;
   color: #022c22;
+  color: var(--color-neutral-200);
   cursor: pointer;
-  background-color: #10b981;
-  border: none;
-  border-top: 2px solid #34d399;
-  border-bottom: 3px solid #059669;
+  background-color: var(--color-neutral-950);
+  border: 1px solid var(--color-neutral-50);
   border-radius: 100px;
   outline: none;
 
diff --git a/src/components/buttons/unselect/unselect.module.css b/src/components/buttons/unselect/unselect.module.css
index 5316ed9..11304f1 100644
--- a/src/components/buttons/unselect/unselect.module.css
+++ b/src/components/buttons/unselect/unselect.module.css
@@ -9,10 +9,8 @@
   line-height: 0;
   color: var(--color-foreground);
   cursor: pointer;
-  background-color: #f43f5e;
-  border: none;
-  border-top: 2px solid #fb7185;
-  border-bottom: 3px solid #be123c;
+  background-color: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 100px;
   outline: none;
   transition: 0.2s;
@@ -21,13 +19,6 @@
   &.disabled {
     cursor: not-allowed;
   }
-
-  &.restore {
-    color: var(--color-neutral-200);
-    background-color: var(--color-neutral-700);
-    border-top-color: var(--color-neutral-950);
-    border-bottom-color: var(--color-neutral-600);
-  }
 }
 
 .tooltip {
diff --git a/src/components/buttons/unselect/unselect.tsx b/src/components/buttons/unselect/unselect.tsx
index 05e1d70..a7fb31c 100644
--- a/src/components/buttons/unselect/unselect.tsx
+++ b/src/components/buttons/unselect/unselect.tsx
@@ -48,7 +48,6 @@ export function UnselectButton() {
                 }
                 className={cn(
                   styles.unselectButton,
-                  hasHistory && styles.restore,
                   noSelected && !hasHistory && styles.disabled,
                 )}
                 onClick={() => {
diff --git a/src/components/sections/ready.astro b/src/components/sections/ready.astro
index 0e5d59a..cfd06b4 100644
--- a/src/components/sections/ready.astro
+++ b/src/components/sections/ready.astro
@@ -75,7 +75,6 @@ import { Container } from '@/components/container';
         width: 45px;
         height: 45px;
         font-size: var(--font-md);
-        color: #fbbf24;
         background-color: var(--color-neutral-100);
         border: 1px solid var(--color-neutral-300);
         border-radius: 50%;
diff --git a/src/components/sections/why.astro b/src/components/sections/why.astro
index b0f3dc0..8e64416 100644
--- a/src/components/sections/why.astro
+++ b/src/components/sections/why.astro
@@ -127,7 +127,7 @@ const reasons = [
         height: 40px;
         margin-bottom: 12px;
         font-size: var(--font-md);
-        color: #34d399;
+        color: var(--color-foreground-subtle);
         background: linear-gradient(var(--color-neutral-100), transparent);
         border: 1px solid var(--color-neutral-200);
         border-radius: 12px;
diff --git a/src/components/sound/favorite/favorite.module.css b/src/components/sound/favorite/favorite.module.css
index 64ddddb..531b48b 100644
--- a/src/components/sound/favorite/favorite.module.css
+++ b/src/components/sound/favorite/favorite.module.css
@@ -17,6 +17,6 @@
   outline: none;
 
   &.isFavorite {
-    color: #f43f5e;
+    color: var(--color-foreground);
   }
 }
diff --git a/src/components/sound/sound.module.css b/src/components/sound/sound.module.css
index 17dcb75..da0e7b9 100644
--- a/src/components/sound/sound.module.css
+++ b/src/components/sound/sound.module.css
@@ -39,6 +39,7 @@
     width: 40px;
     height: 40px;
     font-size: var(--font-base);
+    color: var(--color-foreground-subtler);
     transition: 0.2s;
 
     &::after {
@@ -79,12 +80,10 @@
 
   &.selected {
     border-color: transparent;
-    box-shadow:
-      0 0 0 2px #34d399,
-      0 10px 20px #34d39933;
+    box-shadow: 0 0 0 2px var(--color-neutral-800);
 
     & .icon {
-      color: #34d399;
+      color: var(--color-foreground);
     }
   }
 
diff --git a/src/styles/variables/color.css b/src/styles/variables/color.css
index e8a6f27..12d6ab8 100644
--- a/src/styles/variables/color.css
+++ b/src/styles/variables/color.css
@@ -12,7 +12,7 @@
   --color-neutral-950: #fafafa;
 
   /* Foreground */
-  --color-foreground: var(--color-neutral-900);
+  --color-foreground: var(--color-neutral-950);
   --color-foreground-subtle: var(--color-neutral-600);
   --color-foreground-subtler: var(--color-neutral-500);
 }