styles: refactor codebase base style

src/components/background-gradient.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-
-export function BackgroundGradient() {
-  return (
-    <div
-      className="fixed inset-0 -z-10 h-full w-full overflow-hidden pointer-events-none"
-      aria-hidden="true"
-    >
-      {/* Top Gradient */}
-      <div className="absolute inset-x-0 top-0 transform-gpu overflow-hidden blur-3xl">
-        <div
-          className="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-288.75"
-          style={{
-            clipPath:
-              'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-          }}
-        />
-      </div>
-
-      {/* Middle/Bottom Gradient for balance */}
-      <div className="absolute inset-x-0 bottom-0 transform-gpu overflow-hidden blur-3xl">
-        <div
-          className="relative left-[calc(50%+11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+30rem)] sm:w-288.75"
-          style={{
-            clipPath:
-              'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-export function BackgroundGradientBottom() {
-  return null; // Integrated into the main BackgroundGradient component
-}

src/components/data-table/Header/index.tsx

@@ -23,8 +23,8 @@ const TopHeader = ({
       {(title || onAddNew) && (
         <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
           <div>
-            {title ? <h2 className="text-base font-semibold">{title}</h2> : null}
-            <p className="text-sm text-muted-foreground">Total {itemCount ?? 0}</p>
+            {title ? <h2>{title}</h2> : null}
+            <p className="text-muted-foreground">Total {itemCount ?? 0}</p>
           </div>
           {onAddNew ? (
             <Button onClick={onAddNew}>

src/components/data-table/TableHeader.tsx

@@ -7,7 +7,7 @@ import { cn } from '@/lib/utils';
 
 const TableHeader = <TData, _>({ table }: { table: Table<TData> }) => {
   return (
-    <ShadTableHeader className="sticky top-0 z-10 bg-card/80 backdrop-blur-xl">
+    <ShadTableHeader className="sticky top-0 z-10 bg-card">
       {table.getHeaderGroups().map((headerGroup) => (
         <TableRow key={headerGroup.id}>
           {headerGroup.headers.map((header) => {
@@ -25,7 +25,7 @@ const TableHeader = <TData, _>({ table }: { table: Table<TData> }) => {
                 key={header.id}
                 onClick={canSort ? header.column.getToggleSortingHandler() : undefined}
                 className={cn(
-                  'h-10 bg-card/80 px-2 text-foreground backdrop-blur-xl transition-colors',
+                  'h-10 bg-card px-2 text-foreground transition-colors',
                   canSort && 'cursor-pointer select-none hover:bg-muted/60',
                   sortDirection && 'bg-muted/70',
                 )}

src/components/page-header.tsx

@@ -15,18 +15,11 @@ export function PageHeader({ title, description, icon: Icon, children, actions }
   return (
     <Reveal direction="down" className="w-full">
       <div className="flex items-center justify-between w-full">
-        <div className="flex items-center gap-6">
-          {/* <div className="p-3.5 rounded-xl bg-primary text-primary-foreground flex items-center justify-center shadow-lg shadow-primary/5 ring-1 ring-white/10">
-                        {Icon && <Icon className="h-7 w-7" />}
-                        {children}
-                    </div> */}
+
           <div className="flex flex-col">
-            <h1 className="text-3xl font-extrabold tracking-tight ">{title}</h1>
-            <p className="text-muted-foreground mt-1 text-sm font-semibold tracking-wide opacity-80">
-              {description}
-            </p>
+            <h1>{title}</h1>
+            <p className="text-muted-foreground opacity-80">{description}</p>
           </div>
-        </div>
         {actions && <div className="flex items-center gap-4">{actions}</div>}
       </div>
     </Reveal>

src/components/powered-by.tsx

@@ -1,10 +0,0 @@
-import Image from 'next/image';
-
-export function PoweredBy() {
-  return (
-    <div className="flex items-center justify-center gap-2 mt-3 transition-opacity duration-300">
-      <span className="font-medium text-muted-foreground">Powered by</span>
-      <Image src="/sg.svg" alt="Sentient Geeks" width={130} height={20} />
-    </div>
-  );
-}

src/components/ui/card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card"
       className={cn(
-        'flex flex-col gap-6 rounded-xl border bg-card backdrop-blur-xl py-6 text-card-foreground',
+        'flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground',
         className,
       )}
       {...props}

src/components/ui/dialog.tsx

@@ -130,7 +130,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
+      className={cn(className)}
       {...props}
     />
   )
@@ -143,7 +143,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-muted-foreground", className)}
       {...props}
     />
   )

src/components/ui/sheet.tsx

@@ -112,7 +112,7 @@ function SheetTitle({
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn("font-semibold text-foreground", className)}
+      className={cn("text-foreground", className)}
       {...props}
     />
   )
@@ -125,7 +125,7 @@ function SheetDescription({
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-muted-foreground", className)}
       {...props}
     />
   )

src/components/ui/sidebar.tsx

@@ -162,7 +162,7 @@ function Sidebar({
       <div
         data-slot="sidebar"
         className={cn(
-          'bg-sidebar backdrop-blur-xl text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
           className,
         )}
         {...props}
@@ -179,7 +179,7 @@ function Sidebar({
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="bg-sidebar backdrop-blur-xl text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
           style={
             {
               '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
@@ -236,7 +236,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="bg-sidebar backdrop-blur-xl group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
         >
           {children}
         </div>

src/components/ui/tooltip.tsx

@@ -1,9 +1,9 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 function TooltipProvider({
   delayDuration = 0,
@@ -15,19 +15,19 @@ function TooltipProvider({
       delayDuration={delayDuration}
       {...props}
     />
-  );
+  )
 }
 
-function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  );
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
 }
 
-function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
 }
 
 function TooltipContent({
@@ -42,16 +42,16 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
-          className,
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
-  );
+  )
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }