summaryrefslogtreecommitdiffstats
path: root/src/components/organisms/forms
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/organisms/forms')
-rw-r--r--src/components/organisms/forms/settings-form.module.scss15
-rw-r--r--src/components/organisms/forms/settings-form.tsx17
2 files changed, 28 insertions, 4 deletions
diff --git a/src/components/organisms/forms/settings-form.module.scss b/src/components/organisms/forms/settings-form.module.scss
index a6a2077..a05c60c 100644
--- a/src/components/organisms/forms/settings-form.module.scss
+++ b/src/components/organisms/forms/settings-form.module.scss
@@ -2,10 +2,25 @@
.label {
margin-right: auto;
+}
+.setting,
+.label--select {
@include mix.media("screen") {
+ @include mix.dimensions(null, "2xs") {
+ font-size: var(--font-size-sm);
+ }
+
@include mix.dimensions(null, "2xs", "height") {
font-size: var(--font-size-sm);
}
}
}
+
+.items {
+ @include mix.media("screen") {
+ @include mix.dimensions(null, "2xs", "height") {
+ margin: var(--spacing-2xs) 0;
+ }
+ }
+}
diff --git a/src/components/organisms/forms/settings-form.tsx b/src/components/organisms/forms/settings-form.tsx
index c897fa5..9c2cd2c 100644
--- a/src/components/organisms/forms/settings-form.tsx
+++ b/src/components/organisms/forms/settings-form.tsx
@@ -35,17 +35,26 @@ const SettingsForm: FC<SettingsFormProps> = ({
});
return (
- <Form aria-label={ariaLabel} onSubmit={() => null}>
- <ThemeToggle labelClassName={styles.label} />
- <PrismThemeToggle labelClassName={styles.label} />
+ <Form
+ aria-label={ariaLabel}
+ itemsClassName={styles.items}
+ onSubmit={() => null}
+ >
+ <ThemeToggle className={styles.setting} labelClassName={styles.label} />
+ <PrismThemeToggle
+ className={styles.setting}
+ labelClassName={styles.label}
+ />
<MotionToggle
+ className={styles.setting}
labelClassName={styles.label}
storageKey={motionStorageKey}
value={false}
/>
<AckeeSelect
+ className={styles.setting}
initialValue="full"
- labelClassName={styles.label}
+ labelClassName={`${styles.label} ${styles['label--select']}`}
tooltipClassName={tooltipClassName}
storageKey={ackeeStorageKey}
/>