fix: downgrade tailwindcss to v3 (#151)

* fix: downgrade tailwindcss to v3

* chore: auto-fix linting and formatting issues

package.json

@@ -74,9 +74,9 @@
         "eslint-plugin-react-hooks": "^7.0.0",
         "eslint-plugin-react-refresh": "^0.4.23",
         "globals": "^16.4.0",
-        "postcss": "^8.5.6",
+        "postcss": "8.4.24",
         "swagger-typescript-api": "^13.2.15",
-        "tailwindcss": "^4.1.14",
+        "tailwindcss": "3.4.19",
         "typescript": "~5.9.3",
         "typescript-eslint": "^8.46.0",
         "vite": "^7.1.9"

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

postcss.config.mjs

@@ -1,5 +0,0 @@
-export default {
-    plugins: {
-        "@tailwindcss/postcss": {},
-    },
-}

src/components/server.tsx

@@ -465,9 +465,7 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
                                                                     {publicNoteObj.billingDataMod
                                                                         ?.startDate
                                                                         ? new Date(
-                                                                              publicNoteObj
+                                                                              publicNoteObj.billingDataMod!.startDate!,
-                                                                                  .billingDataMod!
-                                                                                  .startDate!,
                                                                           ).toLocaleDateString()
                                                                         : "YYYY-MM-DD"}
                                                                 </Button>
@@ -492,9 +490,7 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
                                                                                 .billingDataMod
                                                                                 ?.startDate
                                                                                 ? new Date(
-                                                                                      publicNoteObj
+                                                                                      publicNoteObj.billingDataMod!.startDate!,
-                                                                                          .billingDataMod!
-                                                                                          .startDate!,
                                                                                   )
                                                                                 : undefined
                                                                         }

src/components/ui/badge.tsx

@@ -23,7 +23,8 @@ const badgeVariants = cva(
 )
 
 export interface BadgeProps
-    extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+    extends HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
     return <div className={cn(badgeVariants({ variant }), className)} {...props} />

src/components/ui/button.tsx

@@ -31,7 +31,8 @@ const buttonVariants = cva(
 )
 
 export interface ButtonProps
-    extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    extends ButtonHTMLAttributes<HTMLButtonElement>,
+        VariantProps<typeof buttonVariants> {
     asChild?: boolean
 }
 

src/components/xui/multi-select.tsx

@@ -67,8 +67,7 @@ const multiSelectVariants = cva(
  * Props for MultiSelect component
  */
 interface MultiSelectProps
-    extends
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-        React.ButtonHTMLAttributes<HTMLButtonElement>,
         VariantProps<typeof multiSelectVariants> {
     /**
      * An array of option objects to be displayed in the multi-select component.

src/components/xui/overlayless-sheet.tsx

@@ -37,8 +37,7 @@ const sheetVariants = cva(
 )
 
 interface SheetContentProps
-    extends
+    extends ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-        ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
         VariantProps<typeof sheetVariants> {
     setOpen: Dispatch<SetStateAction<boolean>>
 }

src/index.css

@@ -1,121 +1,88 @@
-@import "tailwindcss";
+@tailwind base;
-
+@tailwind components;
-@plugin "tailwindcss-animate";
+@tailwind utilities;
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-    --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
-    --color-background: var(--background);
-    --color-foreground: var(--foreground);
-    --color-card: var(--card);
-    --color-card-foreground: var(--card-foreground);
-    --color-popover: var(--popover);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-primary: var(--primary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-secondary: var(--secondary);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-muted: var(--muted);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-accent: var(--accent);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-destructive: var(--destructive);
-    --color-border: var(--border);
-    --color-input: var(--input);
-    --color-ring: var(--ring);
-    --color-chart-1: var(--chart-1);
-    --color-chart-2: var(--chart-2);
-    --color-chart-3: var(--chart-3);
-    --color-chart-4: var(--chart-4);
-    --color-chart-5: var(--chart-5);
-    --color-sidebar: var(--sidebar);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-ring: var(--sidebar-ring);
-}
 
+@layer base {
     :root {
-    --radius: 0.625rem;
+        --radius: 0.5rem;
-    --background: oklch(1 0 0);
+        --background: 0 0% 100%;
-    --foreground: oklch(0.145 0 0);
+        --foreground: 0 0% 3.9%;
-    --card: oklch(1 0 0);
+        --card: 0 0% 100%;
-    --card-foreground: oklch(0.145 0 0);
+        --card-foreground: 0 0% 3.9%;
-    --popover: oklch(1 0 0);
+        --popover: 0 0% 100%;
-    --popover-foreground: oklch(0.145 0 0);
+        --popover-foreground: 0 0% 3.9%;
-    --primary: oklch(0.205 0 0);
+        --primary: 0 0% 9%;
-    --primary-foreground: oklch(0.985 0 0);
+        --primary-foreground: 0 0% 98%;
-    --secondary: oklch(0.97 0 0);
+        --secondary: 0 0% 96.1%;
-    --secondary-foreground: oklch(0.205 0 0);
+        --secondary-foreground: 0 0% 9%;
-    --muted: oklch(0.97 0 0);
+        --muted: 0 0% 96.1%;
-    --muted-foreground: oklch(0.556 0 0);
+        --muted-foreground: 0 0% 45.1%;
-    --accent: oklch(0.97 0 0);
+        --accent: 0 0% 96.1%;
-    --accent-foreground: oklch(0.205 0 0);
+        --accent-foreground: 0 0% 9%;
-    --destructive: oklch(0.577 0.245 27.325);
+        --destructive: 0 84.2% 60.2%;
-    --border: oklch(0.922 0 0);
+        --destructive-foreground: 0 0% 98%;
-    --input: oklch(0.922 0 0);
+        --border: 0 0% 89.8%;
-    --ring: oklch(0.708 0 0);
+        --input: 0 0% 89.8%;
-    --chart-1: oklch(0.646 0.222 41.116);
+        --ring: 0 0% 3.9%;
-    --chart-2: oklch(0.6 0.118 184.704);
+        --chart-1: 12 76% 61%;
-    --chart-3: oklch(0.398 0.07 227.392);
+        --chart-2: 173 58% 39%;
-    --chart-4: oklch(0.828 0.189 84.429);
+        --chart-3: 197 37% 24%;
-    --chart-5: oklch(0.769 0.188 70.08);
+        --chart-4: 43 74% 66%;
-    --sidebar: oklch(0.985 0 0);
+        --chart-5: 27 87% 67%;
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
     }
 
     .dark {
-    --background: oklch(0.145 0 0);
+        --background: 0 0% 9%;
-    --foreground: oklch(0.985 0 0);
+        --foreground: 0 0% 98%;
-    --card: oklch(0.205 0 0);
+        --card: 0 0% 3.9%;
-    --card-foreground: oklch(0.985 0 0);
+        --card-foreground: 0 0% 98%;
-    --popover: oklch(0.205 0 0);
+        --popover: 0 0% 3.9%;
-    --popover-foreground: oklch(0.985 0 0);
+        --popover-foreground: 0 0% 98%;
-    --primary: oklch(0.922 0 0);
+        --primary: 0 0% 98%;
-    --primary-foreground: oklch(0.205 0 0);
+        --primary-foreground: 0 0% 9%;
-    --secondary: oklch(0.269 0 0);
+        --secondary: 0 0% 14.9%;
-    --secondary-foreground: oklch(0.985 0 0);
+        --secondary-foreground: 0 0% 98%;
-    --muted: oklch(0.269 0 0);
+        --muted: 0 0% 14.9%;
-    --muted-foreground: oklch(0.708 0 0);
+        --muted-foreground: 0 0% 63.9%;
-    --accent: oklch(0.269 0 0);
+        --accent: 0 0% 14.9%;
-    --accent-foreground: oklch(0.985 0 0);
+        --accent-foreground: 0 0% 98%;
-    --destructive: oklch(0.704 0.191 22.216);
+        --destructive: 0 62.8% 30.6%;
-    --border: oklch(1 0 0 / 10%);
+        --destructive-foreground: 0 0% 98%;
-    --input: oklch(1 0 0 / 15%);
+        --border: 0 0% 14.9%;
-    --ring: oklch(0.556 0 0);
+        --input: 0 0% 14.9%;
-    --chart-1: oklch(0.488 0.243 264.376);
+        --ring: 0 0% 83.1%;
-    --chart-2: oklch(0.696 0.17 162.48);
+        --chart-1: 220 70% 50%;
-    --chart-3: oklch(0.769 0.188 70.08);
+        --chart-2: 160 60% 45%;
-    --chart-4: oklch(0.627 0.265 303.9);
+        --chart-3: 30 80% 55%;
-    --chart-5: oklch(0.645 0.246 16.439);
+        --chart-4: 280 65% 60%;
-    --sidebar: oklch(0.205 0 0);
+        --chart-5: 340 75% 55%;
-    --sidebar-foreground: oklch(0.985 0 0);
+    }
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
 }
 
 @layer base {
     * {
-        @apply border-border outline-ring/50;
+        @apply border-border;
     }
+
     body {
         @apply bg-background text-foreground;
     }
 }
+
+html,
+body,
+#root {
+    height: 100%;
+}
+
+::-webkit-scrollbar {
+    @apply h-2.5 w-2.5;
+}
+
+::-webkit-scrollbar-track {
+    @apply bg-transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    @apply rounded-full border-[1px] border-solid border-transparent bg-border bg-clip-padding;
+}