Merge pull request #999 from emarc99/fix-977

Fix: Standardize hover animations for all cards
lfglabs-dev · Dec 22, 2024 · 63e5599 · 63e5599
2 parents d158e4d + 0d92ba8
commit 63e5599
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 33 deletions.
diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -68,11 +68,13 @@
   box-shadow: 0px 2px 30px 0px rgba(16, 16, 18, 0.06);
   border: solid 1px transparent;
   cursor: url(../public/icons/pointer-cursor.png), pointer;
+  transition: all 0.3s ease-in-out;
 }
 
 .questCategory:hover {
-  border-color: var(--secondary500);
-  transition: all 0.2s ease;
+  transform: translateY(-4px);
+  background-color: var(--hover-background-color);
+  box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.1);
 }
 
 .questCategory img {
@@ -102,7 +104,6 @@
   .title {
     font-size: 2rem;
   }
-
 }
 
 @media (max-width: 768px) {
@@ -191,9 +192,11 @@
   }
 
   .featured_quest_banner_container {
-    background: linear-gradient(180deg,
-        var(--background) 0.04%,
-        var(--background600) 347.42%);
+    background: linear-gradient(
+      180deg,
+      var(--background) 0.04%,
+      var(--background600) 347.42%
+    );
     margin-bottom: 0;
   }
 
@@ -237,12 +240,14 @@
     right: -1px;
     left: 0;
     bottom: 0;
-    background: linear-gradient(90deg,
-        #437aba 0%,
-        #59c2e8 45%,
-        #00ff77 60%,
-        #59c2e8 70%,
-        #437aba50 100%);
+    background: linear-gradient(
+      90deg,
+      #437aba 0%,
+      #59c2e8 45%,
+      #00ff77 60%,
+      #59c2e8 70%,
+      #437aba50 100%
+    );
     border-radius: 8px;
     mask: linear-gradient(8deg, transparent 85%, black);
   }
@@ -280,13 +285,14 @@
   }
 
   .section {
-    background: linear-gradient(180deg,
-        var(--background) 0.04%,
-        var(--background600) 347.42%);
+    background: linear-gradient(
+      180deg,
+      var(--background) 0.04%,
+      var(--background600) 347.42%
+    );
     padding-top: 3rem;
   }
 
-
   .questContainer {
     margin-top: 1.5rem;
     gap: 1.5rem;
@@ -326,13 +332,15 @@
   right: -2px;
   left: -1px;
   bottom: -1px;
-  background: linear-gradient(90deg,
-      #437aba 0%,
-      #59c2e8 45%,
-      #00ff77 60%,
-      #59c2e8 70%,
-      #437aba50 100%);
+  background: linear-gradient(
+    90deg,
+    #437aba 0%,
+    #59c2e8 45%,
+    #00ff77 60%,
+    #59c2e8 70%,
+    #437aba50 100%
+  );
   border-radius: 8px;
   z-index: -1;
   mask: linear-gradient(4deg, transparent 92%, black);
-}
+}
diff --git a/styles/components/card.module.css b/styles/components/card.module.css
@@ -8,10 +8,13 @@
   cursor: url(../../public/icons/pointer-cursor.png), pointer;
   align-self: stretch;
   border: solid 1px transparent;
+  transition: all 0.3s ease-in-out;
 }
- 
+
 .card:hover {
-  border: solid 1px var(--secondary500);
+  transform: translateY(-4px);
+  background-color: var(--hover-background-color);
+  box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.1);
 }
 
 .cardImage {

diff --git a/styles/components/pages/home/card.module.css b/styles/components/pages/home/card.module.css
@@ -7,10 +7,13 @@
   cursor: url(../../../../public/icons/pointer-cursor.png), pointer;
   align-self: stretch;
   border: solid 1px transparent;
+  transition: all 0.3s ease-in-out;
 }
- 
+
 .card:hover {
-  border: solid 1px var(--secondary500);
+  transform: translateY(-4px);
+  background-color: var(--hover-background-color);
+  box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.1);
 }
 
 .cardImage {
@@ -35,7 +38,6 @@
   font-family: "Sora-Bold";
   line-height: 48px;
   padding: 8px 0;
-
 }
 
 .card[aria-disabled="true"] {

diff --git a/styles/components/quests/card.module.css b/styles/components/quests/card.module.css
@@ -8,10 +8,13 @@
   cursor: url(../../../public/icons/pointer-cursor.png), pointer;
   align-self: stretch;
   border: solid 1px transparent;
+  transition: all 0.3s ease-in-out;
 }
 
 .card:hover {
-  border: solid 1px var(--secondary500);
+  transform: translateY(-4px);
+  background-color: var(--hover-background-color);
+  box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.1);
 }
 
 .cardImage {
@@ -45,9 +48,8 @@
 
 .card[aria-disabled="true"] {
   cursor: not-allowed;
-
 }
-.card[aria-disabled="true"]:hover{
+.card[aria-disabled="true"]:hover {
   border: 1px solid transparent;
 }
 

diff --git a/styles/globals.css b/styles/globals.css
@@ -35,6 +35,7 @@
   --textGray: #a6a5a7;
   --transparent: transparent;
   --dashboard-max-width: clamp(320px, 90%, 1500px);
+  --hover-background-color: #4a4c53;
 }
 
 html,
@@ -122,6 +123,6 @@ button {
   cursor: url(../public/icons/pointer-cursor.png), auto;
 }
 
-.modified-cursor-normal{
+.modified-cursor-normal {
   cursor: url(../public/icons/cursor.png), auto;
-}
+}