mirror of
https://github.com/unraid/api.git
synced 2026-01-01 14:10:10 -06:00
fix: update brand loading variants for consistent sizing (#1223)
I was seeing strange behavior on /Tools/Registration when forcing the check that happens on page load to fire again. The brand logo SVG was rendering very large. So I set the size to small. But the SVG was still rendering strangely due to the square width and height classes. In the SVG source code, I took `viewBox="0 0 133.52 76.97"` and converted that to an aspect ratio, `133.52/76.97`. And for simpler integers - `133.52/76.97 ≈ 1.735` which is close to `7/4 (1.75)`. So we can use - `aspect-[7/4]`. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Style** - Enhanced the brand loading component’s appearance by enforcing a consistent aspect ratio and streamlining its dimension settings to focus solely on width parameters. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
import { cva } from 'class-variance-authority';
|
import { cva } from 'class-variance-authority';
|
||||||
|
|
||||||
export const brandLoadingVariants = cva('inline-flex items-center justify-center w-full h-full', {
|
export const brandLoadingVariants = cva('inline-flex items-center justify-center w-full h-full aspect-[7/4]', {
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: '',
|
default: '',
|
||||||
@@ -8,10 +8,10 @@ export const brandLoadingVariants = cva('inline-flex items-center justify-center
|
|||||||
white: 'text-white fill-white',
|
white: 'text-white fill-white',
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
sm: 'h-12 w-12',
|
sm: 'w-12',
|
||||||
md: 'h-16 w-16',
|
md: 'w-16',
|
||||||
lg: 'h-20 w-20',
|
lg: 'w-20',
|
||||||
full: 'h-full w-full',
|
full: 'w-full',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
|
|||||||
Reference in New Issue
Block a user