[Update] Add crown emoji to supporter label.

Add tooltip that shows their supporting period.
Add icon rotate animation when hovered supporter's image.

src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.module.scss

@@ -1,4 +1,5 @@
 $progress_ease: cubic-bezier(0, 1, 0.75, 1);
+// Duplicated
 
 @keyframes revealTopImg {
     0% {

src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useEffect } from "react";
 import clsx from "clsx";
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 import styles from "./SupportersWrapper.module.scss";
 import { shuffleArray, randomIntMinMax, randomMinMax } from "@utils";
@@ -261,18 +262,39 @@ const SupporterLabelComponent = ({ item, target_plan, chato_src }) => {
 
 const SupporterPeriodContainer = ({ settings, calc_support_period }) => {
     const period_data = extractKeys(settings, calc_support_period);
+    const offset = {
+        popper: {
+            sx: {
+                [`&.${tooltipClasses.popper}[data-popper-placement*="top"] .${tooltipClasses.tooltip}`]: { marginBottom: "0.2em" },
+            }
+        }
+    };
+
     return (
         <div className={styles.supporter_period_container}>
             {Object.entries(period_data).map(([key, item], index) => {
                 if (item === "") return null;
-                const class_name = clsx(styles.period_box, {
+                const period_box_class_name = clsx(styles.period_box, {
                     [styles.mogu_bar]: item === "mogu_2000",
                     [styles.mochi_bar]: item === "mochi_1000",
                     [styles.fuwa_bar]: item === "fuwa_500",
                     [styles.basic_bar]: item === "basic_300",
                 });
 
-                return <div key={index} className={class_name}></div>;
+                return (
+                    <Tooltip
+                        key={index}
+                        title={
+                            <p className={styles.tooltip_period_label}>{key}</p>
+                        }
+                        placement="top"
+                        slotProps={offset}
+                    >
+                        <div className={styles.period_box_wrapper}>
+                            <div className={period_box_class_name}></div>
+                        </div>
+                    </Tooltip>
+                );
             })}
         </div>
     );

src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss

@@ -13,7 +13,7 @@
     align-content: start;
     flex-wrap: wrap;
     column-gap: 1.8rem;
-    row-gap: 1rem;
+    row-gap: 0.4rem;
 }
 
 .supporter_image_container {
@@ -21,12 +21,14 @@
     width: 18rem;
     display: flex;
     flex-direction: column;
-    gap: 0.3rem;
 }
 
 .supporter_image_wrapper {
     position: relative;
     overflow: hidden;
+    &:hover .supporter_icon_wrapper{
+        transform: rotate(360deg);
+    }
 }
 
 .supporter_image {
@@ -54,7 +56,8 @@
         height: 1.4rem;
     }
 }
-
+$progress_ease: cubic-bezier(0, 1, 0.75, 1);
+// Duplicated
 .supporter_icon_wrapper {
     height: 4rem;
     aspect-ratio: 1 /1;
@@ -62,6 +65,7 @@
     background-color: #ffffff;
     overflow: hidden;
     position: relative;
+    transition: transform 0.6s $progress_ease;
 }
 
 .supporter_icon {
@@ -227,6 +231,12 @@
         background-color: var(--dark_800_color);
     }
 }
+.period_box_wrapper {
+    padding: 0.3rem 0 0.4rem 0;
+}
+.tooltip_period_label {
+    font-size: 1.4rem;
+}
 
 
 .progress_bar {