Enhance Tailwind configuration and update component styles

- Added a new `dataviz-2` color configuration in `tailwind.config.ts` for improved data visualization.
- Updated the `--dataviz` CSS variable in `globals.css` for better color consistency.
- Adjusted margins in the `Header` component to improve layout.
- Refined styles in the `UsageBanners` component by removing unnecessary margins.
- Updated the `SparklinesChart` component to utilize the new `dataviz-2` color for hover effects.

client/src/app/[site]/components/Header/Header.tsx

@@ -6,5 +6,13 @@ import { UsageBanners } from "./UsageBanners";
 export function Header() {
   const { user } = userStore();
 
-  return <div className="flex flex-col">{user && <UsageBanners />}</div>;
+  return (
+    <div className="flex flex-col">
+      {user && (
+        <div className="m-4 mb-0">
+          <UsageBanners />
+        </div>
+      )}
+    </div>
+  );
 }

client/src/app/[site]/components/Header/UsageBanners.tsx

@@ -39,7 +39,7 @@ export function UsageBanners() {
     site.monthlyEventCount > site.eventLimit
   ) {
     return (
-      <Alert variant="destructive" className="p-4 m-4">
+      <Alert variant="destructive" className="p-4">
         <div className="flex items-start space-x-3">
           <AlertTriangle className="h-5 w-5 mt-0.5" />
           <div className="flex-1">
@@ -78,7 +78,7 @@ export function UsageBanners() {
   // If approaching limit (>90%), show warning banner
   if (isNearLimit) {
     return (
-      <Alert className="p-4 bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800  m-4">
+      <Alert className="p-4 bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800">
         <div className="flex items-start space-x-3">
           <AlertTriangle className="h-5 w-5 mt-0.5 text-amber-500" />
           <div className="flex-1">

client/src/app/[site]/main/components/MainSection/SparklinesChart.tsx

@@ -62,7 +62,7 @@ export function SparklinesChart({
       useMesh={true}
       animate={false}
       enableSlices={"x"}
-      colors={[isHovering ? "hsl(var(--dataviz))" : "hsl(var(--dataviz))"]}
+      colors={[isHovering ? "hsl(var(--dataviz-2))" : "hsl(var(--dataviz))"]}
       enableArea={false}
       areaBaselineValue={0}
       areaOpacity={0.3}

client/src/app/globals.css

@@ -27,7 +27,8 @@ body {
     --ring: 240 5.9% 10%;
     --radius: 0.3rem;
 
-    --dataviz: 230 60% 85%;
+    --dataviz: 230 100% 85%;
+    --dataviz-2: 230 100% 92%;
     
     --accent-50: var(--emerald-50);
     --accent-100: var(--emerald-100);

client/tailwind.config.ts

@@ -55,6 +55,7 @@ module.exports = {
         },
         dataviz: {
           DEFAULT: "hsl(var(--dataviz))",
+          "2": "hsl(var(--dataviz-2))",
         },
         popover: {
           DEFAULT: "hsl(var(--popover))",