feat: update button and component styles to enhance UI consistency

components/shared/button.tsx

@@ -8,7 +8,7 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-black text-white hover:bg-white/5 duration-300",
+        default: "bg-ocean text-white hover:bg-white/5 duration-300",
         destructive: "bg-red-500 text-white hover:bg-red-600",
         outline: "bg-transparent border border-slate-200 hover:bg-slate-800",
         subtle: "bg-slate-100 text-slate-900 hover:bg-slate-200",

components/shared/command.tsx

@@ -15,7 +15,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-zinc-900",
+      "text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-deepocean",
       className
     )}
     {...props}
@@ -40,7 +40,7 @@ const CommandInput = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div
-    className="flex items-center border-b border-ocean px-3"
+    className="flex items-center border-b border-cloud/10 px-3"
     cmdk-input-wrapper=""
   >
     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />

components/shared/dialog.tsx

@@ -50,7 +50,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={clsx(
-        "fixed left-[50%] z-50 flex w-11/12 max-w-md translate-x-[-50%] flex-col gap-4 rounded-lg border border-none bg-zinc-900 p-6 shadow-lg animate-in focus:border-zinc-300 focus:outline-none active:border-none active:outline-none data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+        "fixed left-[50%] z-50 flex w-11/12 max-w-md translate-x-[-50%] flex-col gap-4 rounded-lg border border-cloud/10 bg-deepocean p-6 shadow-lg animate-in focus:border-cloud/10 focus:outline-none active:border-none active:outline-none data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
         className
       )}
       {...props}
@@ -119,7 +119,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={clsx("text-sm text-zinc-100", className)}
+    className={clsx("text-sm text-cloud/10", className)}
     {...props}
   />
 ));

components/shared/gradiant-card.tsx

@@ -6,9 +6,11 @@ const cardVariants = cva("mask relative w-full", {
   variants: {
     variant: {
       default:
-        "rounded-xl bg-black/20 p-5 backdrop-blur-2xl after:absolute after:inset-0 after:rounded-xl after:bg-gradient-to-br after:from-ocean 400/40 after:via-ocean 400/5 after:to-ocean 400/40 after:p-px",
+        "rounded-xl border border-cloud/10 bg-cloud/5 p-5 backdrop-blur-2xl",
+      // "rounded-xl bg-black/20 p-5 backdrop-blur-2xl after:absolute after:inset-0 after:rounded-xl after:bg-gradient-to-br after:from-ocean 400/40 after:via-ocean 400/5 after:to-ocean 400/40 after:p-px",
       clean:
-        "overflow-hidden rounded-2xl bg-neutral-950 px-6 py-5 backdrop-blur-xl after:absolute after:inset-0 after:rounded-2xl after:bg-gradient-to-b after:from-ocean 400/30 after:via-ocean 400/5 after:to-ocean 600/20 after:p-px",
+        "rounded-xl border border-cloud/10 bg-cloud/5 p-5 backdrop-blur-2xl",
+      // "overflow-hidden rounded-2xl bg-neutral-950 px-6 py-5 backdrop-blur-xl after:absolute after:inset-0 after:rounded-2xl after:bg-gradient-to-b after:from-ocean 400/30 after:via-ocean 400/5 after:to-ocean 600/20 after:p-px",
     },
   },
   defaultVariants: {

components/shared/progress.tsx

@@ -22,14 +22,14 @@ const Progress = React.forwardRef<
     <ProgressPrimitive.Root
       ref={ref}
       className={cn(
-        "relative h-[10px] w-full overflow-hidden rounded-full bg-white/10",
+        "relative h-[10px] w-full overflow-hidden rounded-full bg-cloud/10",
         className
       )}
       {...props}
     >
       {pos == "right" ? (
         <ProgressPrimitive.Indicator
-          className="h-full w-full flex-1 rounded-full bg-gradient-to-r from-ocean to-ocean opacity-80 transition-all duration-700 ease-in-out"
+          className="h-full w-full flex-1 rounded-full bg-gradient-to-r from-sea/20 to-sea opacity-80 transition-all duration-700 ease-in-out"
           style={{
             transform: `translateX(${
               100 - (((currentValue || 0) * 100) / (max || 0) || 0)
@@ -38,7 +38,7 @@ const Progress = React.forwardRef<
         />
       ) : (
         <ProgressPrimitive.Indicator
-          className="h-full w-full flex-1 rounded-full bg-gradient-to-r from-ocean to-ocean opacity-80 transition-transform duration-700 ease-in-out"
+          className="h-full w-full flex-1 rounded-full bg-gradient-to-r from-sea/20 to-sea opacity-80 transition-transform duration-700 ease-in-out"
           style={{
             transform: `translateX(-${
               100 - (((currentValue || 0) * 100) / (max || 0) || 0)

components/shared/tabs.tsx

@@ -13,7 +13,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "mask relative inline-flex h-12 w-fit cursor-grab items-center justify-center overflow-hidden rounded-2xl bg-neutral-950 px-1.5 py-1 text-center backdrop-blur-xl after:absolute after:inset-0 after:rounded-2xl after:bg-gradient-to-b after:from-ocean after:via-ocean after:to-ocean after:p-px",
+      "mask relative inline-flex h-10 w-fit cursor-grab items-center justify-center overflow-hidden rounded-2xl border border-cloud/10 bg-cloud/10 p-0.5 text-center backdrop-blur-xl after:absolute after:inset-0 after:rounded-2xl",
       className
     )}
     {...props}
@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex w-full items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all duration-300 hover:rounded-2xl hover:bg-gray-500/25 focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:rounded-xl data-[state=active]:bg-ocean data-[state=active]:text-white data-[state=active]:shadow-sm ",
+      "inline-flex w-full items-center justify-center whitespace-nowrap rounded-2xl px-3 py-1.5 text-sm font-medium transition-all duration-300 hover:bg-cloud/10 focus-visible:border focus-visible:border-cloud/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cloud/10 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-deepocean data-[state=active]:text-white data-[state=active]:shadow-sm ",
       className
     )}
     {...props}
@@ -43,7 +43,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-1.5 focus-visible:outline-none focus-visible:ring-0",
+      "mt-2 focus-visible:outline-none focus-visible:ring-0",
       className
     )}
     {...props}

components/wiki/heroes/heroes-container.tsx

@@ -56,7 +56,11 @@ const HeroesContainer = ({ heroes, query }: IHeroesContainer) => {
       <div className="space-y-4 md:w-[200px]">
         <HeroSearch />
         <GradiantCard
-          className={cn("w-full p-2", "border border-cloud/10 bg-cloud/5")}
+          variant="default"
+          className={cn(
+            "w-full p-2"
+            // "border border-cloud/10 bg-cloud/5"
+          )}
         >
           <HeroFilter orientation="vertical" />
         </GradiantCard>

components/wiki/statistics/tournaments-popover.tsx

@@ -42,7 +42,7 @@ export default function StatsContainer({ children, tourNames }: IStats) {
             <PopoverTrigger asChild>
               <Button
                 variant="outline"
-                className="w-full max-w-md justify-start overflow-hidden text-ellipsis whitespace-nowrap border-ocean text-sm font-semibold data-[state=open]:bg-white/5"
+                className="w-full max-w-md justify-start overflow-hidden text-ellipsis whitespace-nowrap border-cloud/10 text-sm font-semibold data-[state=open]:bg-cloud/10"
               >
                 <span className="block overflow-hidden text-ellipsis whitespace-nowrap">
                   {selectedTournament
@@ -54,7 +54,7 @@ export default function StatsContainer({ children, tourNames }: IStats) {
                 </span>
               </Button>
             </PopoverTrigger>
-            <PopoverContent className="w-full max-w-md border-ocean p-0">
+            <PopoverContent className="w-full max-w-md p-0">
               <Command>
                 <CommandInput
                   placeholder="Search tournament..."