[Update] Starting up: Adjust announcement button's design and animation.

src-ui/app/splash_component/SplashComponent.jsx

@@ -5,6 +5,7 @@ import { DownloadModelsContainer } from "./download_models_container/DownloadMod
 import MegaphoneSvg from "@images/megaphone.svg?react";
 import XMarkSvg from "@images/cancel.svg?react";
 import { appWindow } from "@tauri-apps/api/window";
+import clsx from "clsx";
 
 export const SplashComponent = () => {
     return (
@@ -17,33 +18,57 @@ export const SplashComponent = () => {
     );
 };
 
-const AnnouncementsContainer = () => {
+const SHOW_MEGAPHONE_TIME = 1000;
-    const labels = ["VRCT Real-Time Announcements", "VRCTからのお知らせ"];
-    const [currentLabelIndex, setCurrentLabelIndex] = useState(0);
 
+const AnnouncementsContainer = () => {
+    const labels = ["Check the Latest Status", "最新の状況を確認"];
+    const [is_shown, setIsShown] = useState(0);
+    const [currentLabelIndex, setCurrentLabelIndex] = useState(0);
+    const [is_labels_active, setIsLabelsActive] = useState(false);
 
     useEffect(() => {
-        const labelInterval = setInterval(() => {
+        const showTimeout = setTimeout(() => {
-            setCurrentLabelIndex((prevIndex) => (prevIndex + 1) % labels.length);
+            setIsShown(true);
-        }, 6000);
+        }, SHOW_MEGAPHONE_TIME);
-        return () => clearInterval(labelInterval);
+
-    }, [labels.length]);
+        const labelsTimeout = setTimeout(() => {
+            setIsLabelsActive(true);
+        }, SHOW_MEGAPHONE_TIME + 500);
+
+        let labelInterval;
+        if (is_labels_active) {
+            labelInterval = setInterval(() => {
+                setCurrentLabelIndex((prevIndex) => (prevIndex + 1) % labels.length);
+            }, 4000);
+        }
+
+        return () => {
+            clearTimeout(showTimeout);
+            clearTimeout(labelsTimeout);
+            if (labelInterval) clearInterval(labelInterval);
+        };
+    }, [is_labels_active, labels.length]);
+
 
     return (
         <a
+            className={clsx(styles.announcements_button_wrapper, { [styles.is_shown]: is_shown })}
             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={styles.announcements_label}>{labels[currentLabelIndex]}</p>
+                <p className={clsx(styles.announcements_label, { [styles.is_labels_active]: is_labels_active })}>
+                    {labels[currentLabelIndex]}
+                </p>
             </button>
         </a>
     );
 };
 
 
+
 const CloseButtonContainer = () => {
     const close = () => {
         appWindow.close();

src-ui/app/splash_component/SplashComponent.module.scss

@@ -5,19 +5,32 @@
     position: relative;
 }
 
-.announcements_button {
+.announcements_button_wrapper {
     position: absolute;
     top: 16px;
     left: 20px;
-    border: 1px solid var(--dark_600_color);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    &.is_shown {
+        opacity: 1;
+    }
+}
+.announcements_button {
+    border: 1px solid var(--dark_700_color);
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 6px;
-    padding: 6px 8px;
+    padding: 4px 8px;
     border-radius: 4px;
     &:hover {
-        background-color: var(--dark_750_color);
+        background-color: var(--dark_825_color);
+        & .announcements_label {
+            color: var(--dark_basic_text_color);
+        }
+        & .announcements_link_svg {
+            color: var(--primary_300_color);
+        }
     }
     &:active {
         background-color: var(--dark_850_color);
@@ -27,6 +40,12 @@
 
 .announcements_label {
     font-size: 12px;
+    color: var(--dark_400_color);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    &.is_labels_active {
+        opacity: 1;
+    }
 }
 .announcements_link_svg {
     width: 20px;