diff options
Diffstat (limited to 'src/components/organisms')
| -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}        /> | 
