fix: use Button's size prop instead of direct font-size class
This commit is contained in:
@@ -61,13 +61,10 @@ function handleReset() {
|
|||||||
{#each SORT_OPTIONS as option}
|
{#each SORT_OPTIONS as option}
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size={isMobileOrTabletPortrait ? 'sm' : 'md'}
|
size={isMobileOrTabletPortrait ? 'xs' : 'sm'}
|
||||||
active={sortStore.value === option}
|
active={sortStore.value === option}
|
||||||
onclick={() => sortStore.set(option)}
|
onclick={() => sortStore.set(option)}
|
||||||
class={cn(
|
class="tracking-wide px-0"
|
||||||
'font-bold uppercase tracking-wide font-primary, px-0',
|
|
||||||
isMobileOrTabletPortrait ? 'text-[0.5625rem]' : 'text-[0.625rem]',
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
{option}
|
{option}
|
||||||
</Button>
|
</Button>
|
||||||
@@ -78,12 +75,9 @@ function handleReset() {
|
|||||||
<!-- Reset_Filters -->
|
<!-- Reset_Filters -->
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size={isMobileOrTabletPortrait ? 'sm' : 'md'}
|
size={isMobileOrTabletPortrait ? 'xs' : 'sm'}
|
||||||
onclick={handleReset}
|
onclick={handleReset}
|
||||||
class={cn(
|
class={cn('group font-mono tracking-widest text-neutral-400', isMobileOrTabletPortrait && 'px-0')}
|
||||||
'group text-[0.5625rem] md:text-[0.625rem] font-mono font-bold uppercase tracking-widest text-neutral-400',
|
|
||||||
isMobileOrTabletPortrait && 'px-0',
|
|
||||||
)}
|
|
||||||
iconPosition="left"
|
iconPosition="left"
|
||||||
>
|
>
|
||||||
{#snippet icon()}
|
{#snippet icon()}
|
||||||
|
|||||||
@@ -70,19 +70,21 @@ let {
|
|||||||
-->
|
-->
|
||||||
<ButtonGroup>
|
<ButtonGroup>
|
||||||
<ToggleButton
|
<ToggleButton
|
||||||
|
size="sm"
|
||||||
active={comparisonStore.side === 'A'}
|
active={comparisonStore.side === 'A'}
|
||||||
onclick={() => comparisonStore.side = 'A'}
|
onclick={() => comparisonStore.side = 'A'}
|
||||||
class="flex-1 tracking-wide font-bold uppercase text-[0.625rem]"
|
class="flex-1 tracking-wide font-bold uppercase"
|
||||||
>
|
>
|
||||||
<span>Left Font</span>
|
<span>Left Font</span>
|
||||||
</ToggleButton>
|
</ToggleButton>
|
||||||
|
|
||||||
<ToggleButton
|
<ToggleButton
|
||||||
class="flex-1 tracking-wide font-bold uppercase text-[0.625rem]"
|
size="sm"
|
||||||
|
class="flex-1 tracking-wide font-bold uppercase"
|
||||||
active={comparisonStore.side === 'B'}
|
active={comparisonStore.side === 'B'}
|
||||||
onclick={() => comparisonStore.side = 'B'}
|
onclick={() => comparisonStore.side = 'B'}
|
||||||
>
|
>
|
||||||
<span class="uppercase">Right Font</span>
|
<span>Right Font</span>
|
||||||
</ToggleButton>
|
</ToggleButton>
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user