Merge branch 'ui' into develop

src-ui/app/_index_css/variables.css

@@ -18,12 +18,13 @@
 
     --primary_600_color_44: #36877744;
 
+    /* primary_300_color 61b4a7 as standard */
     --sent_400_color: #6197b4;
-    --sent_300_color: #6197b4;
     --received_300_color: #a861b4;
+
     --error_bc_color: #bb4448;
     --error_bc_active_color: #9c3938;
-    --success_bc_color: #368777;
+    --success_bc_color: var(--primary_600_color);
     --warning_color: #cb944f;
     --warning_bc_color: #cf7b1b;
 
@@ -60,6 +61,8 @@
     --dark_1000_color_aa: #151517aa;
     --dark_1000_color_dd: #151517dd;
 
+    /*sent_400_color + #000 10% = */
+    --supporters_color_fuwa: #5788a2;
 
     --title_bar_height: 2rem;
     --main_page_topbar_height: 4.8rem;
@@ -68,4 +71,5 @@
 
     --font_family: "Yu Gothic UI";
 }
-/* https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors */
+/* https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors */
+/* https://meyerweb.com/eric/tools/color-blend/#::1:hex */

src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx

@@ -50,6 +50,7 @@ const OscIpAddressContainer = () => {
     };
 
     useEffect(()=> {
+        if (currentOscIpAddress.state === "pending") return;
         setInputValue(currentOscIpAddress.data);
     }, [currentOscIpAddress]);
 
@@ -80,6 +81,7 @@ const OscPortContainer = () => {
     };
 
     useEffect(()=> {
+        if (currentOscPort.state === "pending") return;
         setInputValue(currentOscPort.data);
     }, [currentOscPort]);
 
@@ -169,6 +171,7 @@ const WebsocketHostContainer = () => {
     };
 
     useEffect(()=> {
+        if (currentWebsocketHost.state === "pending") return;
         setInputValue(currentWebsocketHost.data);
     }, [currentWebsocketHost]);
 
@@ -199,6 +202,7 @@ const WebsocketPortContainer = () => {
     };
 
     useEffect(()=> {
+        if (currentWebsocketPort.state === "pending") return;
         setInputValue(currentWebsocketPort.data);
     }, [currentWebsocketPort]);
 

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

@@ -86,7 +86,7 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1);
 }
 
 .line_fuwa {
-    background-color: #5788a2;
+    background-color: var(--supporters_color_fuwa);
     animation: expandWidth 1s $progress_ease 0.6s forwards;
 }
 
@@ -150,8 +150,8 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1);
     box-shadow: 0 0 0.4rem 0 var(--dark_800_color);
 }
 .spiral_top::after {
-    background: #5788a2;
+    background: var(--supporters_color_fuwa);
-    box-shadow: 0 0 0.4rem 0 #5788a2;
+    box-shadow: 0 0 0.4rem 0 var(--supporters_color_fuwa);
 }
 .spiral_bottom::before {
     background: var(--received_300_color);

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

@@ -62,7 +62,7 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1);
     height: 4rem;
     aspect-ratio: 1 /1;
     border-radius: 50%;
-    background-color: #ffffff;
+    background-color: var(--dark_basic_text_color);
     overflow: hidden;
     position: relative;
     transition: transform 0.6s $progress_ease;
@@ -236,7 +236,7 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1);
         background-color: var(--received_300_color);
     }
     &.fuwa_bar {
-        background-color: #5788a2;
+        background-color: var(--supporters_color_fuwa);
     }
     &.basic_bar {
         background-color: var(--dark_800_color);

src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx

@@ -134,6 +134,7 @@ const DeeplAuthKey_Box = () => {
     };
 
     useEffect(() => {
+        if (currentDeepLAuthKey.state === "pending") return;
         seInputValue(currentDeepLAuthKey.data);
     }, [currentDeepLAuthKey]);
 

src-ui/app/snackbar_controller/ReactToastifyOverrideClass.scss

@@ -81,10 +81,11 @@
     align-items: center;
     font-size: 1.4rem;
     width: fit-content;
-    max-width: 50vw;
+    max-width: 70vw;
     padding-right: 4rem;
     background-color: var(--dark_950_color);
     gap: 0.6rem;
+    white-space: pre-wrap;
 }
 
 .Toastify__progress-bar--wrp {