From 5673225ecc4dbda46cb0589a016b63e0faea08b3 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 31 Dec 2024 13:15:41 +0900
Subject: [PATCH] [Update] Starting up: Add animation more to announcements
 button.

---
 .../app/splash_component/SplashComponent.jsx  | 11 +++--
 .../SplashComponent.module.scss               | 49 ++++++++++++-------
 2 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/src-ui/app/splash_component/SplashComponent.jsx b/src-ui/app/splash_component/SplashComponent.jsx
index e5e945c5..9008cc6b 100644
--- a/src-ui/app/splash_component/SplashComponent.jsx
+++ b/src-ui/app/splash_component/SplashComponent.jsx
@@ -18,7 +18,7 @@ export const SplashComponent = () => {
     );
 };
 
-const SHOW_MEGAPHONE_TIME = 1000;
+const SHOW_MEGAPHONE_TIME = 500;
 
 const AnnouncementsContainer = () => {
     const labels = ["Check the Latest Status", "最新の状況を確認"];
@@ -33,7 +33,7 @@ const AnnouncementsContainer = () => {
 
         const labelsTimeout = setTimeout(() => {
             setIsLabelsActive(true);
-        }, SHOW_MEGAPHONE_TIME + 500);
+        }, SHOW_MEGAPHONE_TIME + 15000);
 
         let labelInterval;
         if (is_labels_active) {
@@ -52,14 +52,17 @@ const AnnouncementsContainer = () => {
 
     return (
         <a
-            className={clsx(styles.announcements_button_wrapper, { [styles.is_shown]: is_shown })}
+            className={clsx(styles.announcements_button_wrapper, {
+                [styles.is_shown]: is_shown,
+                [styles.is_labels_active]: is_labels_active,
+            })}
             href="https://docs.google.com/spreadsheets/d/1_L5i-1U6PB1dnaPPTE_5uKMfqOpkLziPyRkiMLi4mqU/edit?usp=sharing"
             target="_blank"
             rel="noreferrer"
         >
             <button className={styles.announcements_button}>
                 <MegaphoneSvg className={styles.announcements_link_svg} />
-                <p className={clsx(styles.announcements_label, { [styles.is_labels_active]: is_labels_active })}>
+                <p className={styles.announcements_label}>
                     {labels[currentLabelIndex]}
                 </p>
             </button>
diff --git a/src-ui/app/splash_component/SplashComponent.module.scss b/src-ui/app/splash_component/SplashComponent.module.scss
index b38573fa..489f338a 100644
--- a/src-ui/app/splash_component/SplashComponent.module.scss
+++ b/src-ui/app/splash_component/SplashComponent.module.scss
@@ -7,22 +7,24 @@
 
 .announcements_button_wrapper {
     position: absolute;
-    top: 16px;
-    left: 20px;
+    top: 10px;
+    left: 10px;
     opacity: 0;
-    transition: opacity 0.3s ease;
+    transition: opacity 0.3s ease, border 0.3s ease;
+    padding: 4px 8px;
+    border-radius: 4px;
     &.is_shown {
         opacity: 1;
     }
-}
-.announcements_button {
-    border: 1px solid var(--dark_700_color);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 6px;
-    padding: 4px 8px;
-    border-radius: 4px;
+    &.is_labels_active {
+        & .announcements_label {
+            display: block;
+            animation: appear .3s ease;
+        }
+        & .announcements_link_svg {
+            color: var(--dark_basic_text_color);
+        }
+    }
     &:hover {
         background-color: var(--dark_825_color);
         & .announcements_label {
@@ -35,20 +37,33 @@
     &:active {
         background-color: var(--dark_850_color);
     }
+}
+
+@keyframes appear {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+.announcements_button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
     transition: all 0.1s ease;
 }
 
 .announcements_label {
     font-size: 12px;
     color: var(--dark_400_color);
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    &.is_labels_active {
-        opacity: 1;
-    }
+    display: none;
+    transition: all 0.3s ease;
 }
 .announcements_link_svg {
     width: 20px;
+    color: var(--dark_600_color);
 }