From 7ce8c32639615e04bd256cb1a5c22bb113f6bc86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Linnea=20Gr=C3=A4f?= <nea@nea.moe>
Date: Fri, 14 Feb 2025 20:18:11 +0100
Subject: [PATCH] Smoother transition for add review link

---
 src/App.css            | 27 ++++++++++++---------------
 src/components/api.tsx |  9 +++++----
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/App.css b/src/App.css
index 938eb18..e85214d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -125,6 +125,14 @@
     height: 18em;
 }
 
+.reviewsection {
+	display: flex;
+	flex-direction: column;
+	padding: 0.1em;
+	/* overflow: hidden; */
+	max-height: 100%;
+}
+
 .cardchild:hover + .actualreviewdiv {
     transition: 1s;
     transform: rotateY(100);
@@ -142,12 +150,14 @@
     text-align: center;
 }
 
+
 .reviewheadertext {
     margin-bottom: -0.2em;
 }
 
 .cardchild p {
-    margin-bottom: -1.5em;
+    margin: 0;
+    padding: 0.1em;
 }
 
 .cardchild a {
@@ -156,9 +166,7 @@
     color: pink;
     text-decoration: underline;
     margin-bottom: 0%;
-    .fadein {
-        animation: spawntop 1s;
-    }
+    transition: opacity 1s ease;
 }
 
 .cardchild span {
@@ -386,17 +394,6 @@
     }
 }
 
-@keyframes spawntop {
-    0% {
-        opacity: 0%;
-        transform: translateY(1em);
-    }
-
-    100% {
-        opacity: 100%;
-        transform: translateY(0);
-    }
-}
 
 @keyframes shake {
     0% {
diff --git a/src/components/api.tsx b/src/components/api.tsx
index 1452eac..6ea087a 100644
--- a/src/components/api.tsx
+++ b/src/components/api.tsx
@@ -41,16 +41,17 @@ export default function Reviews() {
   });
 
   return (
-    <>
+    <div class="reviewsection">
+      <h1 class="reviewheadertext">Reviews</h1>
       <a
         style={{
-          display: ishover() ? "inline" : "none",
+          opacity: ishover() ? '100%': '0%',
+//          visibility: !ishover() ? 'hidden' : 'visible',
         }}
         href="https://discord.com/oauth2/authorize?client_id=1208380910525743134&response_type=token&redirect_uri=https%3A%2F%2Famy.rip%2Freview%2F&scope=identify"
       >
         <p class="fadein">add your reviews here</p>
       </a>
-      <h1 class="reviewheadertext">Reviews</h1>
       <div class="actualreviewdiv">
         {reviews().length > 0 ? (
           reviews()
@@ -64,7 +65,7 @@ export default function Reviews() {
           <div>Loading reviews...</div>
         )}
       </div>
-    </>
+    </div>
   );
 }