203 homepage style globe (#285)

* style(frontend): 💄 style globe, now uses borders, and has transparent background * random strapi generated update idk why
NTNU-SmallSatLab · Apr 13, 2024 · cc56f8f · cc56f8f
1 parent a5fac10
commit cc56f8f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 20 deletions.
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -23,21 +23,16 @@ export default async function Home() {
 
     return (
         <>
-            <div className="flex flex-col bg-gray-600 p-0.5 xl:flex-row">
+            <div className="flex min-h-[calc(100vh-73px)] flex-col gap-0 xl:flex-row">
                 {/* Stats Container */}
-                <div className="z-10 flex w-full min-w-[500px] flex-col xl:w-1/3">
-                    <div className="bg-black p-1">
-                        <SatelliteSelector />
-                    </div>
-                    <div className="mt-0.5">
-                        <SatelliteDataHome />
-                    </div>
-                    <div className="mt-0.5 w-full bg-black xl:flex-grow"></div>
+                <div className="z-10 flex w-full min-w-[500px] flex-col border-2 border-r border-gray-600 bg-black xl:w-1/3">
+                    <SatelliteSelector />
+                    <SatelliteDataHome />
                 </div>
 
                 {/* Globe Container */}
-                <div className="z-0 ml-0.5 w-full xl:w-2/3">
-                    <div className="flex h-full items-center justify-center bg-black">
+                <div className="z-0 w-full overflow-x-hidden border-2 border-gray-600 xl:w-2/3 ">
+                    <div className="flex h-full items-center justify-center ">
                         <SatelliteGlobeNoSSR />
                     </div>
                 </div>
@@ -49,8 +44,7 @@ export default async function Home() {
             >
                 <div className="prose prose-invert flex flex-col items-center text-center prose-img:rounded-xl">
                     <h1>
-                        TEST NUMBER 3 Empowering Space Exploration One Satellite
-                        at a Time
+                        Empowering Space Exploration One Satellite at a Time
                     </h1>
 
                     <div className="relative h-[300px] w-[300px]">

diff --git a/frontend/src/components/homeComponents/SatelliteSelector.tsx b/frontend/src/components/homeComponents/SatelliteSelector.tsx
@@ -21,7 +21,7 @@ export default function SatelliteSelector() {
     }
 
     return (
-        <div className="m-0 w-full p-0">
+        <div className="m-0 w-full border-b border-gray-600 p-0">
             <SatDropdown
                 satelliteNames={satelliteNames}
                 selectedSatellite={selectedSatellite}

diff --git a/frontend/src/components/satelliteData/SatelliteDataHome.tsx b/frontend/src/components/satelliteData/SatelliteDataHome.tsx
@@ -42,32 +42,32 @@ export default function SatelliteDataHome() {
 
     return (
         <div>
-            <div className="grid grid-cols-2 gap-0.5">
-                <div className="bg-black p-5">
+            <div className="grid grid-cols-2 ">
+                <div className="border-y border-r border-gray-600 bg-black p-5">
                     <p className="text-xl font-medium">
                         {satelliteInfo
                             ? satelliteInfo.velocity + " km/s"
                             : "Loading..."}
                     </p>
                     <p className="text-gray-400">Velocity</p>
                 </div>
-                <div className="bg-black p-5">
+                <div className="border-y border-l border-gray-600 bg-black p-5">
                     <p className="text-xl font-medium">
                         {satelliteInfo
                             ? satelliteInfo.altitude + " km"
                             : "Loading..."}
                     </p>
                     <p className="text-gray-400">Altitude</p>
                 </div>
-                <div className="bg-black p-5">
+                <div className="border-y border-r border-gray-600 bg-black p-5">
                     <p className="text-xl font-medium">
                         {satelliteInfo
                             ? satelliteInfo.latitudeDeg + "° N"
                             : "Loading..."}
                     </p>
                     <p className="text-gray-400">Latitude</p>
                 </div>
-                <div className="bg-black p-5">
+                <div className="border-y border-l border-gray-600 bg-black p-5">
                     <p className="text-xl font-medium">
                         {satelliteInfo
                             ? satelliteInfo.longitudeDeg + "° E"
@@ -77,7 +77,7 @@ export default function SatelliteDataHome() {
                 </div>
             </div>
 
-            <div className="mt-0.5 bg-black p-5">
+            <div className="border-t border-gray-600 bg-black p-5 xl:border-b-2">
                 <div>
                     <p className="text-xl font-medium">
                         {satelliteInfo