small ui improvements (#15)

fpgmaas · Jul 3, 2024 · 40ad8ee · 40ad8ee
1 parent e01fbe5
commit 40ad8ee
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/frontend/app/components/ToggleSwitch.tsx b/frontend/app/components/ToggleSwitch.tsx
@@ -14,22 +14,22 @@ const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
   onToggle,
 }) => {
   return (
-    <div className="flex space-x-4 bg-sky-800 p-2 rounded-lg shadow-md">
+    <div className="flex space-x-4 bg-sky-900 p-2 rounded-lg shadow-md">
       <button
-        className={`px-4 py-2 rounded ${
+        className={`px-4 py-2 w-[80px] rounded ${
           selectedOption === option1
             ? "bg-white text-sky-900"
-            : " bg-sky-950 text-white"
+            : " bg-sky-950 text-white hover:bg-sky-700"
         }`}
         onClick={() => onToggle(option1)}
       >
         {option1}
       </button>
       <button
-        className={`px-4 py-2 rounded ${
+        className={`px-4 py-2 w-[80px] rounded ${
           selectedOption === option2
             ? "bg-white text-sky-900"
-            : " bg-sky-950 text-white"
+            : " bg-sky-950 text-white hover:bg-sky-700"
         }`}
         onClick={() => onToggle(option2)}
       >

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -107,7 +107,7 @@ export default function Home() {
         </div>
 
         {results.length > 0 && (
-          <div className="w-full flex justify-center mt-6">
+          <div className="w-full flex justify-center mt-0">
             <ToggleSwitch
               option1="Plot"
               option2="Table"
@@ -121,14 +121,14 @@ export default function Home() {
           {" "}
           {/* Reference to this div */}
           {results.length > 0 && view === "Plot" && (
-            <div className="w-full flex justify-center mt-6">
+            <div className="w-full flex justify-center mt-0">
               <div className="w-full max-w-[1200px] bg-sky-900 p-6 rounded-lg shadow-lg flex flex-col justify-center items-center">
                 <ScatterPlot results={results} />
               </div>
             </div>
           )}
           {results.length > 0 && view === "Table" && (
-            <div className="w-full flex justify-center mt-6">
+            <div className="w-full flex justify-center mt-0">
               <div className="w-full bg-sky-900 p-6 rounded-lg shadow-lg flex flex-col  justify-center  items-center">
                 <SearchResultsTable
                   results={results}
@@ -143,7 +143,7 @@ export default function Home() {
 
         <div className="w-full flex justify-center mt-6">
           <button
-            className="w-full max-w-[250px] p-2 border border-sky-700 rounded bg-sky-800 text-white hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-700"
+            className="w-full max-w-[250px] p-2 border border-sky-700 rounded bg-sky-900 text-white hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-700"
             onClick={() => setInfoBoxVisible(!infoBoxVisible)}
           >
             {infoBoxVisible ? "Hide Info" : "How does this work?"}