[Update] Change the design support us section (Add ko-fi and patreon button.).

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

@@ -1,6 +1,6 @@
 .container {
     display: flex;
-    gap: 1.2rem;
+    gap: 3.2rem;
     flex-direction: column;
     justify-content: center;
     align-items: center;

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

@@ -1,22 +1,46 @@
-import fanbox_img from "@images/supporters/c_fanbox_1620x580.png";
+import top_img from "@images/supporters/patreon_1600x400px.png";
-import fanbox_button from "@images/supporters/fanbox_button.png";
+import fanbox_logo from "@images/supporters/fanbox_logo.png";
-import kofi_preparing from "@images/supporters/kofi_preparing.png";
+import kofi_logo from "@images/supporters/kofi_logo.png";
+import patreon_logo from "@images/supporters/patreon_logo.png";
 import styles from "./SupportUsContainer.module.scss";
+import { clsx } from "clsx";
 
 export const SupportUsContainer = () => {
     return (
         <div id="support_us_container" className={styles.support_us_container}>
-            <img className={styles.fanbox_img} src={fanbox_img} />
+            <img className={styles.top_img} src={top_img} />
-            <div className={styles.support_us_button_wrapper}>
+            <div className={styles.support_buttons_wrapper}>
-                <div className={styles.fanbox_wrapper}>
+                <div className={styles.support_us_button_wrapper}>
-                    <a className={styles.fanbox_button} href="https://vrct-dev.fanbox.cc/" target="_blank" rel="noreferrer">
+                    <a className={styles.support_button} href="https://vrct-dev.fanbox.cc" target="_blank" rel="noreferrer">
-                        <img style={{ height: "100%", width: "100%", objectFit: "contain" }} src={fanbox_button} />
+                        <img
+                            src={fanbox_logo}
+                            className={clsx(styles.support_img, styles.fanbox_logo)}
+                        />
+                        <div className={styles.spiral_top}></div>
+                        <div className={styles.spiral_bottom}></div>
+                    </a>
+                    <a className={styles.support_button} href="https://ko-fi.com/vrct_dev" target="_blank" rel="noreferrer">
+                        <img
+                            src={kofi_logo}
+                            className={clsx(styles.support_img, styles.kofi_logo)}
+                        />
+                        <div className={styles.spiral_top}></div>
+                        <div className={styles.spiral_bottom}></div>
+                    </a>
+                    <a className={styles.support_button} href="https://www.patreon.com/vrct_dev" target="_blank" rel="noreferrer">
+                        <img
+                            src={patreon_logo}
+                            className={clsx(styles.support_img, styles.patreon_logo)}
+                        />
+                        <div className={styles.spiral_top}></div>
+                        <div className={styles.spiral_bottom}></div>
                     </a>
-                    <p className={styles.mainly_japanese}>日本語 / Mainly Japanese</p>
                 </div>
-                <div className={styles.kofi_wrapper}>
+                <div className={styles.lines_container}>
-                    <img className={styles.kofi_preparing} src={kofi_preparing} />
+                    <div className={styles.line_basic}></div>
-                    <p className={styles.mainly_english}>Mainly English</p>
+                    <div className={styles.line_fuwa}></div>
+                    <div className={styles.line_mochi}></div>
+                    <div className={styles.line_mogu}></div>
                 </div>
             </div>
         </div>

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

@@ -3,42 +3,134 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 2rem;
+    gap: 1.4rem;
     width: 100%;
-
 }
-.fanbox_img {
+.support_buttons_wrapper {
-    width: 60vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+}
+
+.top_img {
+    width: 100%;
+}
+
+.lines_container {
+    display: flex;
+    gap: 3.6rem;
+}
+
+.line_basic, .line_fuwa, .line_mochi, .line_mogu {
+    width: 8.6rem;
+    height: 0.2rem;
+}
+
+.line_basic {
+    background-color: var(--dark_800_color);
+}
+.line_fuwa {
+    background-color: #5788a2;
+}
+.line_mochi {
+    background-color: var(--received_300_color);
+}
+.line_mogu {
+    background-color: var(--dark_basic_text_color);
 }
 
 .support_us_button_wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100%;
+    column-gap: 3.6rem;
-    gap: 4.8rem;
+    flex-wrap: wrap;
-}
-.fanbox_wrapper, .kofi_wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 1rem;
-}
-.fanbox_button {
-    width: 14rem;
-    transition: all 0.3s ease;
-    &:hover {
-        width: 16rem;
-    }
-}
-.kofi_preparing {
-    width: 6rem;
 }
 
-.mainly_japanese, .mainly_english {
+.support_button {
-    font-size: 1.2rem;
+    position: relative;
-    color: var(--dark_400_color);
+    padding: 1.2rem 1.6rem;
+}
+
+.support_img {
+    &.fanbox_logo {
+        height: 1.8rem;
+    }
+    &.kofi_logo, &.patreon_logo {
+        height: 2.2rem;
+    }
+}
+
+
+
+
+.spiral_top::before,
+.spiral_top::after,
+.spiral_bottom::before,
+.spiral_bottom::after {
+    content: "";
+    position: absolute;
+    transition-duration: 0.3s;
+}
+.spiral_top::before {
+    background: var(--dark_800_color);
+    box-shadow: 0 0 0.4rem 0 var(--dark_800_color);
+}
+.spiral_top::after {
+    background: #5788a2;
+    box-shadow: 0 0 0.4rem 0 #5788a2;
+}
+.spiral_bottom::before {
+    background: var(--received_300_color);
+    box-shadow: 0 0 0.4rem 0 var(--received_300_color);
+}
+.spiral_bottom::after {
+    background: var(--dark_basic_text_color);
+    box-shadow: 0 0 0.4rem 0 var(--dark_basic_text_color);
+}
+
+.spiral_top::before {
+    top: 0;
+    left: 0;
+    width: 0.1rem;
+    height: 0;
+}
+.spiral_top::after {
+    top: 0;
+    right: 0;
+    width: 0;
+    height: 0.1rem;
+}
+.spiral_bottom::before {
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 0.1rem;
+}
+.spiral_bottom::after {
+    bottom: 0;
+    right: 0;
+    width: 0.1rem;
+    height: 0;
+}
+
+.support_button:hover
+.spiral_top::before {
+    height: 100%;
+}
+.support_button:hover
+.spiral_top::after {
+    width: 100%;
+}
+.support_button:hover
+.spiral_bottom::before {
+    width: 100%;
+}
+.support_button:hover
+.spiral_bottom::after {
+    height: 100%;
 }
 
 

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

@@ -9,7 +9,6 @@ export const SupportersContainer = () => {
     return (
         <div className={styles.supporters_container}>
             <img className={styles.vrct_supporters_title} src={vrct_supporters_title} />
-            <p className={styles.vrct_supporters_desc}>{`VRCT3.0のアップデートに向けて、めちゃ大変な開発を支えてくれた "Early Supporters" です。\nThey are the 'Early Supporters' who supported us through the incredibly challenging development toward the VRCT3.0 update.`}</p>
             <ProgressBar />
             <SupportersWrapper />
             <ProgressBar />

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

@@ -8,10 +8,6 @@
 .vrct_supporters_title {
     height: 6rem;
 }
-.vrct_supporters_desc {
-    font-size: 1.4rem;
-    text-align: start;
-}
 
 .vrct_supporters_desc_end {
     font-size: 1.4rem;

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

@@ -178,10 +178,9 @@ export const SupportersWrapper = () => {
             });
 
             return is_and_you ? (
-                <a href="#support_us_container">
+                <a href="#support_us_container" key={item.supporter_id}>
-                    <div key={item.supporter_id} className={styles.supporter_image_container}>
+                    <div className={styles.supporter_image_container}>
                         <div
-                            key={item.supporter_id}
                             className={supporter_image_wrapper_classname}
                             style={{ "--delay": random_delay }}
                         >
@@ -195,7 +194,6 @@ export const SupportersWrapper = () => {
             ): img_src ? (
                 <div key={item.supporter_id} className={styles.supporter_image_container}>
                     <div
-                        key={item.supporter_id}
                         className={supporter_image_wrapper_classname}
                         style={{ "--delay": random_delay }}
                     >
@@ -219,9 +217,7 @@ export const SupportersWrapper = () => {
     }, []);
 
     return (
-        <div>
+        <div className={styles.supporters_wrapper}>{renderImages()}</div>
-            <div className={styles.supporters_wrapper}>{renderImages()}</div>
-        </div>
     );
 };
 
@@ -247,7 +243,7 @@ const SupporterPeriodContainer = ({settings}) => {
 
     return (
         <div className={styles.supporter_period_container}>
-            {Object.entries(period_data).map(([key, item]) => {
+            {Object.entries(period_data).map(([key, item], index) => {
                 if (item === "") return null;
                 const class_name = clsx(styles.period_box, {
                     [styles.mogu_bar]: item === "もぐもぐ_2000",
@@ -256,7 +252,7 @@ const SupporterPeriodContainer = ({settings}) => {
                     [styles.basic_bar]: item === "Basic_300",
                 });
 
-                return <div className={class_name}></div>
+                return <div key={index} className={class_name}></div>
             })}
         </div>
     );

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

@@ -4,8 +4,8 @@
     align-items: center;
     align-content: start;
     flex-wrap: wrap;
-    column-gap: 1.4rem;
+    column-gap: 1.8rem;
-    row-gap: 1.2rem;
+    row-gap: 1rem;
 }
 
 .supporter_image_container {