style: add hover states

remvze · Dec 29, 2023 · 2c74dd0 · 2c74dd0
1 parent 8efb1ce
commit 2c74dd0
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 1 deletion.
diff --git a/src/components/buttons/play/play.module.css b/src/components/buttons/play/play.module.css
@@ -13,6 +13,11 @@
   border: 1px solid var(--color-neutral-50);
   border-radius: 100px;
   outline: none;
+  transition: 0.2s;
+
+  &:hover {
+    background-color: var(--color-neutral-800);
+  }
 
   &:disabled,
   &.disabled {

diff --git a/src/components/buttons/unselect/unselect.module.css b/src/components/buttons/unselect/unselect.module.css
@@ -10,7 +10,7 @@
   color: var(--color-foreground);
   cursor: pointer;
   background-color: var(--color-neutral-100);
-  border: 1px solid var(--color-neutral-200);
+  border: 1px solid var(--color-neutral-300);
   border-radius: 100px;
   outline: none;
   transition: 0.2s;
@@ -19,6 +19,10 @@
   &.disabled {
     cursor: not-allowed;
   }
+
+  &:hover {
+    background-color: var(--color-neutral-200);
+  }
 }
 
 .tooltip {

diff --git a/src/components/scroll-to-top/scroll-to-top.module.css b/src/components/scroll-to-top/scroll-to-top.module.css
@@ -14,4 +14,9 @@
   background-color: var(--color-neutral-100);
   border: 1px solid var(--color-neutral-300);
   border-radius: 50%;
+  transition: 0.2s;
+
+  &:hover {
+    background-color: var(--color-neutral-200);
+  }
 }
diff --git a/src/components/sections/ready.astro b/src/components/sections/ready.astro
@@ -111,6 +111,11 @@ import { Container } from '@/components/container';
       border: none;
       border-radius: 100px;
       outline: none;
+      transition: 0.2s;
+
+      &:hover {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 </style>
diff --git a/src/components/shuffle/shuffle.module.css b/src/components/shuffle/shuffle.module.css
@@ -14,4 +14,9 @@
   background-color: var(--color-neutral-100);
   border: 1px solid var(--color-neutral-300);
   border-radius: 50%;
+  transition: 0.2s;
+
+  &:hover {
+    background-color: var(--color-neutral-200);
+  }
 }
diff --git a/src/components/sound/favorite/favorite.module.css b/src/components/sound/favorite/favorite.module.css
@@ -15,6 +15,11 @@
   border: 1px solid var(--color-neutral-200);
   border-radius: 50%;
   outline: none;
+  transition: 0.2s;
+
+  &:hover {
+    color: var(--color-foreground);
+  }
 
   &.isFavorite {
     color: var(--color-foreground);

diff --git a/src/components/sound/sound.module.css b/src/components/sound/sound.module.css
@@ -78,6 +78,10 @@
     }
   }
 
+  &:hover .icon {
+    color: var(--color-foreground-subtle);
+  }
+
   &.selected {
     border-color: transparent;
     box-shadow: 0 0 0 2px var(--color-neutral-800);