feat(frontend): 🎨 add text to select satellite button (#297)

* feat(frontend): 🎨 add text to select satellite button * style(frontend): 🎨 Update SatDropdown component to display selected satellite and add icon * Update SatDropdown component to display selected satellite and add icon --------- Co-authored-by: Mads Hermansen <mads.d.hermansen+main@gmail.com>
NTNU-SmallSatLab · Apr 24, 2024 · dd39da7 · dd39da7
1 parent 64282e0
commit dd39da7
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/frontend/src/components/homeComponents/SatDropdown.tsx b/frontend/src/components/homeComponents/SatDropdown.tsx
@@ -96,15 +96,19 @@ export default function SatDropdown({
     return (
         <div className="w-full">
             <button
-                className="flex w-full cursor-pointer flex-row items-center justify-between bg-black p-4 text-left text-xl font-bold tracking-wide"
+                className="flex w-full cursor-pointer flex-row  justify-between bg-black p-4 text-left"
                 onClick={toggleDropdown}
             >
-                {selectedSatellite || "Select a Satellite"}
+                <div className="flex flex-col">
+                    <div>{selectedSatellite || "Select a Satellite"}</div>
+                    <p className=" text-gray-400">Selected Satellite</p>
+                </div>
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="2em"
                     height="2em"
                     viewBox="0 0 24 24"
+                    className="self-center justify-self-center"
                 >
                     <path fill="currentColor" d="m7 10l5 5l5-5z" />
                 </svg>