Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-10-27 04:54:25 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add personal theme prop

Browse Source
This commit is contained in:
hfcRed
2026-03-04 18:21:36 +01:00
parent 9d0499d9ff
commit 2b4c6a65ab
2 changed files with 52 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
app/components/CustomThemeSelector.tsx
View File

@@ -221,12 +221,14 @@ function ThemeSlider({
export function CustomThemeSelector({
initialTheme,
isSupporter,
isPersonalTheme,
onSave,
onReset,
hidePatreonInfo,
}: {
initialTheme: CustomTheme | null | undefined;
isSupporter: boolean;
isPersonalTheme: boolean;
onSave: (themeInput: ThemeInput) => void;
onReset: () => void;
hidePatreonInfo?: boolean;
@@ -307,15 +309,17 @@ export function CustomThemeSelector({
onChange={handleSliderChange}
/>
))}
<div className="mt-2">
<SendouSwitch
isSelected={chatHueEnabled}
onChange={handleChatHueToggle}
>
{t("common:settings.customTheme.chatHueToggle")}
</SendouSwitch>
</div>
{chatHueEnabled ? (
{isPersonalTheme ? (
<div className="mt-2">
<SendouSwitch
isSelected={chatHueEnabled}
onChange={handleChatHueToggle}
>
{t("common:settings.customTheme.chatHueToggle")}
</SendouSwitch>
</div>
) : null}
{chatHueEnabled && isPersonalTheme ? (
<div className={styles.chatColorPreview}>
<ThemeSlider
id="chat-hue"
@@ -347,38 +351,44 @@ export function CustomThemeSelector({
/>
))}
</div>
<Divider smallText>{t("common:settings.customTheme.sizes")}</Divider>
<div className={styles.themeSliders}>
{SIZE_SLIDERS.map((slider) => (
<ThemeSlider
key={slider.id}
id={slider.id}
inputKey={slider.inputKey}
min={slider.min}
max={slider.max}
step={slider.step}
label={t(`common:settings.customTheme.${slider.labelKey}`)}
value={themeInput[slider.inputKey]}
onChange={handleSliderChange}
/>
))}
</div>
<Divider smallText>{t("common:settings.customTheme.borders")}</Divider>
<div className={styles.themeSliders}>
{BORDER_SLIDERS.map((slider) => (
<ThemeSlider
key={slider.id}
id={slider.id}
inputKey={slider.inputKey}
min={slider.min}
max={slider.max}
step={slider.step}
label={t(`common:settings.customTheme.${slider.labelKey}`)}
value={themeInput[slider.inputKey]}
onChange={handleSliderChange}
/>
))}
</div>
{isPersonalTheme ? (
<>
<Divider smallText>{t("common:settings.customTheme.sizes")}</Divider>
<div className={styles.themeSliders}>
{SIZE_SLIDERS.map((slider) => (
<ThemeSlider
key={slider.id}
id={slider.id}
inputKey={slider.inputKey}
min={slider.min}
max={slider.max}
step={slider.step}
label={t(`common:settings.customTheme.${slider.labelKey}`)}
value={themeInput[slider.inputKey]}
onChange={handleSliderChange}
/>
))}
</div>
<Divider smallText>
{t("common:settings.customTheme.borders")}
</Divider>
<div className={styles.themeSliders}>
{BORDER_SLIDERS.map((slider) => (
<ThemeSlider
key={slider.id}
id={slider.id}
inputKey={slider.inputKey}
min={slider.min}
max={slider.max}
step={slider.step}
label={t(`common:settings.customTheme.${slider.labelKey}`)}
value={themeInput[slider.inputKey]}
onChange={handleSliderChange}
/>
))}
</div>
</>
) : null}
<div className={styles.customThemeSelectorActions}>
<SendouButton isDisabled={!isSupporter} onPress={handleSave}>
{t("common:actions.save")}

1
app/features/settings/routes/settings.tsx
View File

@@ -222,6 +222,7 @@ function CustomColorSelector() {
return (
<CustomThemeSelector
isPersonalTheme
initialTheme={data.customTheme}
isSupporter={isSupporter}
onSave={handleSave}