From 1f52c3625af99265ead86bd166ec401b121ad540 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Mon, 9 Jun 2025 12:35:40 +0900 Subject: [PATCH 1/3] [Refactor] Adjust color variables. Add some comments. --- src-ui/app/_index_css/variables.css | 10 +++++++--- .../SupportUsContainer.module.scss | 6 +++--- .../supporters_wrapper/SupportersWrapper.module.scss | 4 ++-- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src-ui/app/_index_css/variables.css b/src-ui/app/_index_css/variables.css index 3ae80370..97a43d1c 100644 --- a/src-ui/app/_index_css/variables.css +++ b/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: --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 */ \ No newline at end of file +/* https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors */ +/* https://meyerweb.com/eric/tools/color-blend/#::1:hex */ \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.module.scss b/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.module.scss index ef7ef6fc..1ef360b4 100644 --- a/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.module.scss +++ b/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; - box-shadow: 0 0 0.4rem 0 #5788a2; + background: var(--supporters_color_fuwa); + box-shadow: 0 0 0.4rem 0 var(--supporters_color_fuwa); } .spiral_bottom::before { background: var(--received_300_color); diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss index 3d392642..73c28ea5 100644 --- a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss +++ b/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); From 8289c9f1b346e70760db60cd723d753c935d39c9 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Mon, 9 Jun 2025 14:44:42 +0900 Subject: [PATCH 2/3] [bugfix] Config Page: Entry components: Prevent showing the currently stored value; instead, display the value the user intends to store. --- .../setting_box/advanced_settings/AdvancedSettings.jsx | 4 ++++ .../setting_section/setting_box/translation/Translation.jsx | 1 + 2 files changed, 5 insertions(+) diff --git a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx index 2f4c15cd..4e7d798f 100644 --- a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx +++ b/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]); diff --git a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx index 5c4dfa51..db11d169 100644 --- a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx +++ b/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]); From 35369f739474879653603064cb0bb51b771b29e2 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Mon, 9 Jun 2025 15:30:55 +0900 Subject: [PATCH 3/3] [Update/bugfix] Notification UI: Expand max width for readability. Line breaks now follow newline characters correctly. Fixed the bug that was success progress bar was not set properly. --- src-ui/app/_index_css/variables.css | 2 +- src-ui/app/snackbar_controller/ReactToastifyOverrideClass.scss | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src-ui/app/_index_css/variables.css b/src-ui/app/_index_css/variables.css index 97a43d1c..a5579afc 100644 --- a/src-ui/app/_index_css/variables.css +++ b/src-ui/app/_index_css/variables.css @@ -24,7 +24,7 @@ --error_bc_color: #bb4448; --error_bc_active_color: #9c3938; - --success_bc_color: --primary_600_color; + --success_bc_color: var(--primary_600_color); --warning_color: #cb944f; --warning_bc_color: #cf7b1b; diff --git a/src-ui/app/snackbar_controller/ReactToastifyOverrideClass.scss b/src-ui/app/snackbar_controller/ReactToastifyOverrideClass.scss index 75ad8e19..640a2116 100644 --- a/src-ui/app/snackbar_controller/ReactToastifyOverrideClass.scss +++ b/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 {