updating frontend

Author: GaelGil

src/App.tsx

@@ -1,17 +1,15 @@
-import "./css/App.css";
 import NavBar from "./components/Navigation";
 import { Routes, Route } from "react-router-dom";
 import VisualizersPage from "./pages/Visualiser";
+import "./css/index.css";
 
 function App() {
   return (
     <>
       <NavBar />
-      <main className="main-content">
-        <Routes>
-          <Route path="/" element={<VisualizersPage />} />
-        </Routes>
-      </main>
+      <Routes>
+        <Route path="/" element={<VisualizersPage />} />
+      </Routes>
     </>
   );
 }

src/components/Navigation.tsx

@@ -7,7 +7,7 @@ const Navigation = () => {
       <div className="flex p-2 mx-auto space-x-4">
         <Link
           to="/"
-          className="py-2 text-white text-lg font-bold text-decoration-none"
+          className="py-2 text-white  text-lg font-bold text-decoration-none hover:bg-gray-300 rounded"
         >
           Algorithm Visualiser
         </Link>

src/css/App.css

@@ -1 +1,17 @@
 @import "tailwindcss";
+
+@layer base {
+  html {
+    @apply text-white;
+  }
+}
+
+@theme {
+  --color-secondary-300: oklch(98.5% 0.001 106.423);
+  --color-primary-600: oklch(55.2% 0.016 285.938);
+}
+
+body {
+  background-color: oklch(12.9% 0.042 264.695);
+  font-family: "Roboto", sans-serif;
+}

src/css/index.css

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { Container, ButtonGroup, ToggleButton } from "react-bootstrap";
 import SortingVisualizer from "../components/SortingVisualizer";
 import TraversalVisualizer from "../components/TraversalVisualizer";
 import { arraysInfo } from "../data/arraysInfo";
@@ -9,34 +8,28 @@ const VisualizersPage: React.FC = () => {
   const [selected, setSelected] = useState<"sorting" | "graph">("sorting"); // declare the default state as string
 
   return (
-    <Container className="mt-5">
+    <div className="mt-5">
       <h1 className="text-center mb-4">Algorithm Visualizers</h1>
 
       {/* the selection options for sorting options */}
-      <ButtonGroup className="mb-4 d-flex justify-content-center">
-        <ToggleButton
-          id="sorting-toggle"
-          type="radio"
-          variant="outline-primary"
-          name="visualizer"
-          value="sorting"
-          checked={selected === "sorting"}
-          onChange={() => setSelected("sorting")}
+      <div className="mb-4 d-flex justify-content-center">
+        <button
+          className={`rounded  text-white px-4 py-2 ${
+            selected === "sorting" ? "bg-blue-500" : "bg-gray-500"
+          }`}
+          onClick={() => setSelected("sorting")}
         >
           Sorting Visualizer
-        </ToggleButton>
-        <ToggleButton
-          id="graph-toggle"
-          type="radio"
-          variant="outline-secondary"
-          name="visualizer"
-          value="graph"
-          checked={selected === "graph"}
-          onChange={() => setSelected("graph")}
+        </button>
+        <button
+          className={`rounded text-white  px-4 py-2  ${
+            selected === "graph" ? "bg-blue-500" : "bg-gray-500"
+          }`}
+          onClick={() => setSelected("graph")}
         >
           Graph Visualizer
-        </ToggleButton>
-      </ButtonGroup>
+        </button>
+      </div>
 
       {/* if the current state of our variable selected=sorting then we load the 
         sorting component with its info, otherwise we will load the traversal
@@ -47,7 +40,7 @@ const VisualizersPage: React.FC = () => {
       ) : (
         <TraversalVisualizer graphsInfo={graphsInfo} />
       )}
-    </Container>
+    </div>
   );
 };