refactor: ♻️ Make corner radius more consistent across UI

Author: CPlusPatch

components/editor/mentions-list.vue

@@ -1,5 +1,5 @@
 <template>
-    <Command class="rounded-lg border shadow-md min-w-[200px]" :selected-value="items[selectedIndex]?.key">
+    <Command class="rounded border shadow-md min-w-[200px]" :selected-value="items[selectedIndex]?.key">
         <CommandList>
             <CommandEmpty>No results found.</CommandEmpty>
             <CommandGroup class="mentions-group" heading="Users">

components/notes/content.vue

@@ -19,7 +19,7 @@
             $style.content,
         ]" v-html="content" v-render-emojis="emojis"></div>
         <div v-if="isOverflowing && collapsed"
-            class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black/5 to-transparent rounded-b-md"></div>
+            class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black/5 to-transparent rounded-b"></div>
         <Button v-if="isOverflowing" @click="collapsed = !collapsed"
             class="absolute bottom-2 right-1/2 translate-x-1/2">{{
                 collapsed

components/profiles/profile-badge.vue

@@ -9,7 +9,7 @@
                         </path>
                     </g>
                 </svg>
-                <img v-else-if="icon" :src="icon" alt="" class="size-4 rounded-sm" />
+                <img v-else-if="icon" :src="icon" alt="" class="size-4 rounded" />
                 {{ name }}
             </Badge>
         </TooltipTrigger>
@@ -33,4 +33,4 @@ defineProps<{
     icon?: string;
     verified?: boolean;
 }>();
-</script>
+</script>

components/sidebars/account-switcher.vue

@@ -35,7 +35,7 @@
         <DropdownMenuTrigger :as-child="true">
             <slot />
         </DropdownMenuTrigger>
-        <DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom"
+        <DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded" side="bottom"
             align="end" :side-offset="4">
             <DropdownMenuLabel class="p-0 font-normal">
                 <Button @click="switchAccount(identity.account.id)" variant="ghost" size="lg"

components/sidebars/sidebar.vue

@@ -1,20 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { ChevronDownIcon } from "lucide-vue-next";
-import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
-} from "~/components/ui/breadcrumb";
-import { Separator } from "~/components/ui/separator";
-import {
-    SidebarInset,
-    SidebarProvider,
-    SidebarTrigger,
-} from "~/components/ui/sidebar";
+import { SidebarInset, SidebarProvider } from "~/components/ui/sidebar";
 import { SettingIds } from "~/settings";
 import Timelines from "../navigation/timelines.vue";
 import LeftSidebar from "./left-sidebar.vue";

components/ui/alert-dialog/AlertDialogContent.vue

@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded',
           props.class,
         )
       "

components/ui/alert/index.ts

@@ -5,7 +5,7 @@ export { default as AlertDescription } from "./AlertDescription.vue";
 export { default as AlertTitle } from "./AlertTitle.vue";
 
 export const alertVariants = cva(
-    "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+    "relative w-full rounded border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
     {
         variants: {
             variant: {

components/ui/aspect-ratio/AspectRatio.vue

@@ -15,7 +15,7 @@ export const avatarVariant = cva(
             },
             shape: {
                 circle: "rounded-full",
-                square: "rounded-md",
+                square: "rounded",
             },
         },
     },

components/ui/aspect-ratio/index.ts

@@ -2,7 +2,7 @@ import { type VariantProps, cva } from "class-variance-authority";
 export { default as Button } from "./Button.vue";
 
 export const buttonVariants = cva(
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
     {
         variants: {
             variant: {
@@ -19,9 +19,9 @@ export const buttonVariants = cva(
             },
             size: {
                 default: "h-9 px-4 py-2",
-                sm: "h-8 rounded-md px-3 text-xs",
-                lg: "h-10 rounded-md px-8",
-                icon: "h-9 w-9",
+                sm: "h-8 px-3 text-xs",
+                lg: "h-10 px-8",
+                icon: "size-9",
             },
         },
         defaultVariants: {