diff options
Diffstat (limited to 'src/components/organisms/forms')
| -rw-r--r-- | src/components/organisms/forms/settings-form.module.scss | 15 | ||||
| -rw-r--r-- | src/components/organisms/forms/settings-form.tsx | 17 |
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} /> |
