every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Update] Adjust button padding and entry width in OpenWebpageButton; add responsive text size in SidebarSection

Browse Source
This commit is contained in:
Sakamoto Shiina
2026-01-01 14:38:47 +09:00
parent 3168a8ad26
commit 43f0bf6027
4 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_open_webpage_button/_OpenWebpageButton.module.scss
View File

@@ -2,10 +2,11 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: fit-content;
} }
.open_webpage_button { .open_webpage_button {
padding: 0.6rem 2.8rem; padding: 0.6rem 1.2rem;
display: flex; display: flex;
gap: 1rem; gap: 1rem;
justify-content: center; justify-content: center;

2
src-ui/views/app/config_page/setting_section/setting_box/_components/auth_key/AuthKey.jsx
View File

@@ -38,7 +38,7 @@ export const AuthKey = (props) => {
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.entry_section_wrapper}> <div className={styles.entry_section_wrapper}>
<_Entry ref={entryRef} width="30rem" onChange={onchangeEntryAuthKey} ui_variable={props.variable} is_disabled={is_disabled}/> <_Entry ref={entryRef} width="24rem" onChange={onchangeEntryAuthKey} ui_variable={props.variable} is_disabled={is_disabled}/>
<button className={save_button_class_names} onClick={saveAuthKey}> <button className={save_button_class_names} onClick={saveAuthKey}>
{is_disabled {is_disabled
? <CircularProgress size="1.4rem" sx={{ color: "var(--dark_basic_text_color)" }}/> ? <CircularProgress size="1.4rem" sx={{ color: "var(--dark_basic_text_color)" }}/>

10
src-ui/views/app/config_page/sidebar_section/SidebarSection.jsx
View File

@@ -27,11 +27,15 @@ export const SidebarSection = () => {
import clsx from "clsx"; import clsx from "clsx";
import { useI18n } from "@useI18n"; import { useI18n } from "@useI18n";
import { useStore_SelectedConfigTabId } from "@store"; import {
useStore_SelectedConfigTabId,
useStore_IsBreakPoint,
} from "@store";
const Tab = (props) => { const Tab = (props) => {
const { t } = useI18n(); const { t } = useI18n();
const { updateSelectedConfigTabId, currentSelectedConfigTabId } = useStore_SelectedConfigTabId(); const { updateSelectedConfigTabId, currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
const { currentIsBreakPoint } = useStore_IsBreakPoint();
const onclickFunction = () => { const onclickFunction = () => {
updateSelectedConfigTabId(props.tab_id); updateSelectedConfigTabId(props.tab_id);
}; };
@@ -54,7 +58,9 @@ const Tab = (props) => {
return ( return (
<div className={tab_container_class_names} onClick={onclickFunction}> <div className={tab_container_class_names} onClick={onclickFunction}>
<p className={styles.tab_text}>{getLabel()}</p> <p className={clsx(styles.tab_text, {
[styles.tab_text_small]: currentIsBreakPoint.data
})}>{getLabel()}</p>
<div className={switch_indicator_class_names}></div> <div className={switch_indicator_class_names}></div>
</div> </div>
); );

3
src-ui/views/app/config_page/sidebar_section/SidebarSection.module.scss
View File

@@ -64,6 +64,9 @@
font-size: 1.6rem; font-size: 1.6rem;
// text-overflow: ellipsis; // text-overflow: ellipsis;
position: relative; position: relative;
&.tab_text_small {
font-size: 1.4rem;
}
} }
.crown_emoji { .crown_emoji {
font-size: 1.6rem; font-size: 1.6rem;