Use size-* className instead of h-* w-*

Georiviere · Apr 23, 2024 · 812a17d · 812a17d
1 parent 52cff60
commit 812a17d
Show file tree

Hide file tree

Showing 12 changed files with 18 additions and 18 deletions.
diff --git a/src/app/[locale]/map/[details]/[id]/loading.tsx b/src/app/[locale]/map/[details]/[id]/loading.tsx
@@ -6,7 +6,7 @@ export default function Loading() {
   const t = useTranslations();
   return (
     <Icons.loading
-      className="m-auto h-8 w-8 animate-spin text-primary"
+      className="m-auto size-8 animate-spin text-primary"
       role="img"
       aria-label={t('site.loading')}
     />

diff --git a/src/components/error-message.tsx b/src/components/error-message.tsx
@@ -13,7 +13,7 @@ export default function ErrorMessage({
   return (
     <div className="container my-10 grow">
       <Alert variant="destructive">
-        <Icons.alert className="h-4 w-4" />
+        <Icons.alert className="size-4" />
         <AlertTitle className="ml-6">{title}</AlertTitle>
         {message && <AlertDescription>{message}</AlertDescription>}
       </Alert>

diff --git a/src/components/map/geometry-tooltip.tsx b/src/components/map/geometry-tooltip.tsx
@@ -27,7 +27,7 @@ export const GeometryTooltip = ({
         {properties.attachments?.[0]?.thumbnail && (
           <Image
             loading="lazy"
-            className="aspect-[4/3] h-auto w-auto object-cover transition-all group-hover:scale-105"
+            className="aspect-[4/3] size-auto object-cover transition-all group-hover:scale-105"
             src={properties.attachments[0].thumbnail}
             alt=""
             width="400"

diff --git a/src/components/observation-form.tsx b/src/components/observation-form.tsx
@@ -123,7 +123,7 @@ export default function ObservationForm({ jsonSchema, handleSubmit }: Props) {
   if (validationMessage?.error === false) {
     return (
       <Alert variant="default">
-        <Icons.check className="h-4 w-4" />
+        <Icons.check className="size-4" />
         <AlertTitle className="ml-6">{t('validation.title')}</AlertTitle>
         <AlertDescription>{t('validation.content')}</AlertDescription>
       </Alert>
@@ -134,7 +134,7 @@ export default function ObservationForm({ jsonSchema, handleSubmit }: Props) {
     <Form {...form}>
       {validationMessage?.error && (
         <Alert variant="destructive">
-          <Icons.alert className="h-4 w-4" />
+          <Icons.alert className="size-4" />
           <AlertTitle className="ml-6">{t('error.title')}</AlertTitle>
           <AlertDescription>{validationMessage.message}</AlertDescription>
         </Alert>

diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
@@ -27,7 +27,7 @@ export function SiteHeader({ menu }: Props) {
         <Link href="/" className="flex items-center space-x-2">
           {settings && settings.customization.header?.logo?.src ? (
             <Image
-              className="lock hidden h-8 w-8 sm:inline"
+              className="lock hidden size-8 sm:inline"
               width={32}
               height={32}
               {...settings.customization.header.logo}
@@ -36,7 +36,7 @@ export function SiteHeader({ menu }: Props) {
           ) : (
             <Icons.logo
               {...propsForSVGPresentation}
-              className="lock hidden h-8 w-8 sm:inline"
+              className="lock hidden size-8 sm:inline"
             />
           )}
           <span className="font-bold">{t('title')}</span>

diff --git a/src/components/suggestion-list.tsx b/src/components/suggestion-list.tsx
@@ -44,7 +44,7 @@ export default function SuggestionList({
             {item.images?.[0]?.thumbnail && (
               <CardMedia>
                 <Carousel
-                  className="aspect-[4/3] h-auto w-auto object-cover transition-all group-hover:scale-105"
+                  className="aspect-[4/3] size-auto object-cover transition-all group-hover:scale-105"
                   images={convertAttachementsToImages(item.images, true)}
                   width={400}
                   height={300}

diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
@@ -38,7 +38,7 @@ const AccordionTrigger = React.forwardRef<
       {children}
       <ChevronDown
         {...propsForSVGPresentation}
-        className="h-4 w-4 transition-transform duration-200"
+        className="size-4 transition-transform duration-200"
       />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>

diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
@@ -57,7 +57,7 @@ const NavigationMenuTrigger = React.forwardRef<
   >
     {children}{' '}
     <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      className="relative top-[1px] ml-1 size-3 transition duration-200 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuPrimitive.Trigger>
@@ -113,7 +113,7 @@ const NavigationMenuIndicator = React.forwardRef<
     )}
     {...props}
   >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ));
 NavigationMenuIndicator.displayName =

diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
@@ -14,7 +14,7 @@ const ScrollArea = React.forwardRef<
     className={cn('relative overflow-hidden', className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] pb-20 md:pb-0">
+    <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit] pb-20 md:pb-0">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />

diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
@@ -26,7 +26,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className="size-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -85,9 +85,9 @@ const SelectItem = React.forwardRef<
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="size-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
 

diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
@@ -161,7 +161,7 @@ const SheetContent = React.forwardRef<
     >
       {children}
       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
+        <X className="size-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>

diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
@@ -26,12 +26,12 @@ const Switch = React.forwardRef<
     >
       <SwitchPrimitives.Thumb
         className={cn(
-          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+          'pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
         )}
       >
         {isLoading && (
           <Icons.loading
-            className="h-full w-full animate-spin text-primary"
+            className="size-full animate-spin text-primary"
             role="img"
             aria-label={t('site.loading')}
           />