moving to more tailwind

Author: GaelGil

src/components/GraphLegend.tsx

@@ -1,33 +1,31 @@
 // Graph legend component. Only imported in traversal visualiser
 const GraphLegend = () => {
   return (
-    <div className="legend mb-4 text-center">
+    <div className="max-w-6xl mx-auto p-8 px-2">
       <ul className="flex flex-wrap justify-center mb-0">
         <li className="mr-4 mb-2">
           <span className="bg-blue-500 w-4 h-4 inline-block mr-2"></span>
-          <span className="text-gray-700">Start</span>
+          <span>Start</span>
         </li>
         <li className="mr-4 mb-2">
           <span className="bg-green-500 w-4 h-4 inline-block mr-2"></span>
-          <span className="text-gray-700">Objective</span>
+          <span>Objective</span>
         </li>
         <li className="mr-4 mb-2">
           <span className="bg-yellow-500 w-4 h-4 inline-block mr-2"></span>
-          <span className="text-gray-700">Path</span>
+          <span>Path</span>
         </li>
         <li className="mr-4 mb-2">
           <span className="bg-gray-500 w-4 h-4 inline-block mr-2"></span>
-          <span className="text-gray-700">Obstacle</span>
+          <span>Obstacle</span>
         </li>
         <li className="mr-4 mb-2">
-          <span className="bg-teal-500 w-4 h-4 inline-block mr-2"></span>
-          <span className="text-gray-700">Expanded Nodes</span>
+          <span className="bg-teal-300 w-4 h-4 inline-block mr-2"></span>
+          <span>Expanded Nodes</span>
         </li>
         <li className="mr-4 mb-2">
           <span className="bg-red-500 w-4 h-4 inline-block mr-2"></span>
-          <span className="text-gray-700">
-            Weighted (ignored for bfs and dfs)
-          </span>
+          <span>Weighted (ignored for bfs and dfs)</span>
         </li>
       </ul>
     </div>

src/components/Navigation.tsx

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 // simple navbar component to be usedon all pages
 const Navigation = () => {
   return (
-    <div className="border-b border-gray-300">
+    <div className="border-b border-gray-300 m-2">
       <div className="flex p-2 mx-auto space-x-4">
         <Link
           to="/"

src/components/SortingVisualizer.tsx

@@ -59,11 +59,11 @@ const SortingVisualizer: React.FC<ArrayProps> = ({ arraysInfo }) => {
   // the sorting visualizer component
   return (
     <div className="">
-      <div className="array-container">
+      <div className="flex flex-wrap justify-center items-end  h-full w-full">
         {array.map((value, idx) => (
           <div
             key={idx}
-            className="array-bar"
+            className="array-bar mr-1"
             style={{ height: `${value}px` }}
           ></div>
         ))}

src/components/TraversalVisualizer.tsx

@@ -122,10 +122,10 @@ const TraversalVisualizer: React.FC<GraphProps> = ({ graphsInfo }) => {
 
   // the traversal visualizer component
   return (
-    <div className=" ">
+    <div className=" mx-auto ">
       <div className="">
         {matrix.map((row, rowIndex) => (
-          <div key={rowIndex} className={"matrix-row matrix-row-" + rowIndex}>
+          <div key={rowIndex} className={"flex matrix-row-" + rowIndex}>
             {row.map((cell, colIndex) => (
               <div
                 key={colIndex}

src/css/Arrays.css

@@ -1,13 +1,5 @@
 .array-bar {
   background-color: red;
-  width: 20px;
+  width: 10px;
   transition: height 0.2s ease-in-out;
 }
-
-.array-container {
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  flex-wrap: wrap;
-  gap: 2px;
-}

src/css/Graphs.css

@@ -1,54 +1,22 @@
-.matrix-row {
-  display: flex;
-}
-
 .matrix-cell {
-  border: 1px solid black;
-  height: 15px;
   width: 15px;
-  padding: 0px;
-  margin: 0px;
-}
-
-.legend {
-  align-content: center;
-  display: flex;
-  justify-content: center;
-}
-
-.legend ul {
-  list-style: none;
-}
-
-.legend li {
-  display: inline;
-  margin: 10px;
-  padding: 10px;
-}
-
-.matrix-cell {
-  width: 30px;
-  height: 30px;
+  height: 15px;
   margin: 1px;
-  line-height: 30px;
-  font-size: 0.75rem;
+  font-size: 0;
   background-color: #e9ecef;
-  transition: background-color 0.3s;
+  transition: background-color 0.5s;
 }
 
 .start {
   background-color: #0d6efd !important;
-  color: white;
 }
 
 .objective {
   background-color: #198754 !important;
-  color: white;
 }
 
 .obstacle {
   background-color: #6c757d !important;
-  color: white;
 }
 
 .path {
@@ -57,10 +25,8 @@
 
 .weight {
   background-color: red !important;
-  color: white;
 }
 
 .expanded {
   background-color: aquamarine !important;
-  /* color: white; */
 }