fix: 2

src/game_pages/detail/components/GameInfo/index.module.scss

@@ -24,13 +24,24 @@
         align-items: center;
         gap: 4px;
         border-radius: 12px;
-        // border: 0.5px solid rgba(255, 255, 255, 0.08);
+        border: 0.5px solid rgba(255, 255, 255, 0.08);
         background: rgba(255, 255, 255, 0.25);
         overflow: hidden;
         color: #fff;
-        background: #536272;
+        // background: #536272;
         flex-shrink: 0;
         font-family: "Quicksand";
+        // opacity: 0;
+        animation: intro 0.3s ease-in forwards;
+
+        @keyframes intro {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
 
         .month {
           width: 100%;
@@ -44,6 +55,8 @@
           // border-bottom: 1px solid rgba(255, 255, 255, 0.08);
           background: #7b828b;
           font-weight: 600;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+          background: rgba(255, 255, 255, 0.25);
         }
 
         .day {
@@ -144,13 +157,23 @@
         border-radius: 12px;
         padding: 14px;
         box-sizing: border-box;
-        background: #4d5865;
+        // background: #4d5865;
         display: flex;
         justify-content: center;
         align-items: center;
         overflow: hidden;
-        // border: 0.5px solid rgba(255, 255, 255, 0.08);
-        // background: rgba(255, 255, 255, 0.25);
+        border: 0.5px solid rgba(255, 255, 255, 0.08);
+        background: rgba(255, 255, 255, 0.25);
+        animation: intro 0.3s ease-in forwards;
+
+        @keyframes intro {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
 
         &-image {
           width: 20px;

src/game_pages/detail/index.tsx

@@ -189,6 +189,8 @@ function Index() {
     );
   }
 
+  const [scrollToTarget, setScrollToTarget] = useState("");
+
   return (
     <ScrollView
       className={styles["detail-page"]}
@@ -199,6 +201,8 @@ function Index() {
       }}
       enhanced
       showScrollbar={false}
+      scrollIntoView={scrollToTarget}
+      scroll-with-animation
     >
       {/* custom navbar */}
       <View
@@ -278,6 +282,7 @@ function Index() {
           game_id={Number(detail.id)}
           message_id={message_id ? Number(message_id) : undefined}
           publisher_id={Number(detail.publisher_id)}
+          onScrollTo={setScrollToTarget}
         />
         {/* sticky bottom action bar */}
         <StickyBottom