diff options
Diffstat (limited to 'src/components/organisms/toolbar')
4 files changed, 24 insertions, 20 deletions
diff --git a/src/components/organisms/toolbar/main-nav.module.scss b/src/components/organisms/toolbar/main-nav.module.scss index 76af935..24abc43 100644 --- a/src/components/organisms/toolbar/main-nav.module.scss +++ b/src/components/organisms/toolbar/main-nav.module.scss @@ -86,3 +86,11 @@ } } } + +.label { + display: flex; + place-content: center; + place-items: center; + width: var(--btn-size, #{fun.convert-px(60)}); + height: var(--btn-size, #{fun.convert-px(60)}); +} diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx index 5695348..dc71c49 100644 --- a/src/components/organisms/toolbar/search.tsx +++ b/src/components/organisms/toolbar/search.tsx @@ -1,6 +1,6 @@ import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox'; -import Label from '@components/atoms/forms/label'; import MagnifyingGlass from '@components/atoms/icons/magnifying-glass'; +import FlippingLabel from '@components/molecules/forms/flipping-label'; import { forwardRef, ForwardRefRenderFunction } from 'react'; import { useIntl } from 'react-intl'; import SearchModal, { type SearchModalProps } from '../modals/search-modal'; @@ -52,13 +52,14 @@ const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = ( setValue={setIsActive} className={`${sharedStyles.checkbox} ${searchStyles.checkbox}`} /> - <Label + <FlippingLabel + className={sharedStyles.label} htmlFor="search-button" aria-label={label} - className={`${sharedStyles.label} ${searchStyles.label}`} + isActive={isActive} > <MagnifyingGlass /> - </Label> + </FlippingLabel> <SearchModal searchPage={searchPage} className={`${sharedStyles.modal} ${searchStyles.modal} ${className}`} diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx index f558eb7..ceb6db4 100644 --- a/src/components/organisms/toolbar/settings.tsx +++ b/src/components/organisms/toolbar/settings.tsx @@ -1,6 +1,6 @@ import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox'; -import Label from '@components/atoms/forms/label'; import Cog from '@components/atoms/icons/cog'; +import FlippingLabel from '@components/molecules/forms/flipping-label'; import { forwardRef, ForwardRefRenderFunction } from 'react'; import { useIntl } from 'react-intl'; import SettingsModal, { @@ -53,13 +53,14 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = ( setValue={setIsActive} className={`${sharedStyles.checkbox} ${settingsStyles.checkbox}`} /> - <Label + <FlippingLabel + className={sharedStyles.label} htmlFor="settings-button" aria-label={label} - className={`${sharedStyles.label} ${settingsStyles.label}`} + isActive={isActive} > <Cog /> - </Label> + </FlippingLabel> <SettingsModal ackeeStorageKey={ackeeStorageKey} className={`${sharedStyles.modal} ${settingsStyles.modal} ${className}`} diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss index 20abe01..86b4924 100644 --- a/src/components/organisms/toolbar/toolbar-items.module.scss +++ b/src/components/organisms/toolbar/toolbar-items.module.scss @@ -38,20 +38,14 @@ --draw-border-color1: var(--color-primary-light); --draw-border-color2: var(--color-primary-lighter); - display: flex; - place-content: center; - place-items: center; - width: var(--btn-size); - height: var(--btn-size); - padding: var(--spacing-2xs); - - &:hover, - &:focus { - @extend %draw-borders; + @include mix.media("screen") { + @include mix.dimensions("sm") { + border-radius: fun.convert-px(5); + } } - &:focus { - color: var(--color-primary-light); + &:hover { + @extend %draw-borders; } &:active { |