From 273e310ee33096472b4a9395c8401e2fdf256965 Mon Sep 17 00:00:00 2001
From: Sean S <sean@goforward.group>
Date: Wed, 11 Dec 2024 14:20:08 -0500
Subject: [PATCH] clean up

---
 src/app/Builder/page.tsx        |  2 +-
 src/app/providers.tsx           |  1 -
 src/components/Header/index.tsx | 51 +++++++++++++--------------------
 src/styles/globals.css          | 27 +++++++++++++++++
 4 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/src/app/Builder/page.tsx b/src/app/Builder/page.tsx
index c55057f..fe50c0f 100644
--- a/src/app/Builder/page.tsx
+++ b/src/app/Builder/page.tsx
@@ -3,7 +3,7 @@ import { Button } from "src/components/ui/button";
 
 export default function BuilderPage() {
   return (
-    <div className="container mx-auto">
+    <div className="container mx-auto tactical">
       <table className="table-auto border-separate border-spacing-2 border border-slate-500">
         <thead>
           <tr>
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index 057c919..5e66b8c 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -1,7 +1,6 @@
 // app/providers.tsx
 'use client';
 
-import { ChakraProvider } from '@chakra-ui/react';
 
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 3909f43..df9c64d 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -1,38 +1,27 @@
-import { Box, Flex, Link, Heading } from "@chakra-ui/react";
 import NextLink from 'next/link';
 
 const Header: React.FC = () => {
   return (
-    <>
-      <Box as="header" bg="primary" color="white" px="6" py="4" shadow="md">
-        <Flex justify="space-between" align="center" maxW="5xl" mx="auto">
-          <Heading as="h1" size="lg">
-
-            <Link color="#374151" _hover={{ textDecoration: "none" }}>
-              <NextLink href="/" passHref> Ballistic Builder </NextLink>
-            </Link>
-
-
-          </Heading>
-          <Flex as="nav" gap="6">
-
-            <Link color="#374151" _hover={{ textDecoration: "underline" }}>
-              <NextLink href="/builder" passHref> Builder </NextLink>
-            </Link>
-
-
-            <Link color="#374151" _hover={{ textDecoration: "underline" }}>
-              <NextLink href="/products" passHref>  Products </NextLink>
-            </Link>
-
-            <Link color="#374151" _hover={{ textDecoration: "underline" }}>
-              <NextLink href="/auth/signin" passHref> Sign In </NextLink>
-            </Link>
-
-          </Flex>
-        </Flex>
-      </Box>
-    </>
+    <header style={{ backgroundColor: '#7C8C58', color: 'white', padding: '16px 24px', boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', maxWidth: '80rem', margin: '0 auto' }}>
+        <h1 style={{ fontSize: '1.5rem' }}>
+          <NextLink href="/" passHref>
+            <a style={{ color: '#374151', textDecoration: 'none' }}>Ballistic Builder</a>
+          </NextLink>
+        </h1>
+        <nav style={{ display: 'flex', gap: '24px' }}>
+          <NextLink href="/builder" passHref>
+            <a style={{ color: '#374151', textDecoration: 'underline' }}>Builder</a>
+          </NextLink>
+          <NextLink href="/products" passHref>
+            <a style={{ color: '#374151', textDecoration: 'underline' }}>Products</a>
+          </NextLink>
+          <NextLink href="/auth/signin" passHref>
+            <a style={{ color: '#374151', textDecoration: 'underline' }}>Sign In</a>
+          </NextLink>
+        </nav>
+      </div>
+    </header>
   );
 };
 
diff --git a/src/styles/globals.css b/src/styles/globals.css
index f102207..de8e250 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -60,6 +60,33 @@ body {
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
   }
+
+  .tactical {
+    --background: #D9D4CC;
+    --foreground: #262621;
+    --card: #D9D4CC;
+    --card-foreground: #262621;
+    --popover: #D9D4CC;
+    --popover-foreground: #262621;
+    --primary: #7C8C58;
+    --primary-foreground: #D9D4CC;
+    --secondary: #BCBF63;
+    --secondary-foreground: #262621;
+    --muted: #BCBF63;
+    --muted-foreground: #262621;
+    --accent: #D98841;
+    --accent-foreground: #D9D4CC;
+    --destructive: #D98841;
+    --destructive-foreground: #D9D4CC;
+    --border: #7C8C58;
+    --input: #7C8C58;
+    --ring: #BCBF63;
+    --chart-1: #7C8C58;
+    --chart-2: #BCBF63;
+    --chart-3: #262621;
+    --chart-4: #D9D4CC;
+    --chart-5: #D98841;
+  }
 }
 
 @layer base {