From cc56f8f57086322b15039def722a2c553e7f7734 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20Alexander=20Str=C3=B8mseng?=
 <magnus.stromseng@gmail.com>
Date: Sat, 13 Apr 2024 23:05:28 +0200
Subject: [PATCH] 203 homepage style globe (#285)

* style(frontend): :lipstick: style globe, now uses borders, and has transparent background

* random strapi generated update idk why
---
 frontend/src/app/page.tsx                     | 20 +++++++------------
 .../homeComponents/SatelliteSelector.tsx      |  2 +-
 .../satelliteData/SatelliteDataHome.tsx       | 12 +++++------
 3 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index c6f01ac..0cda91a 100644
--- 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
index 9350cf2..c579e82 100644
--- 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
index a11d9f5..a0eb254 100644
--- a/frontend/src/components/satelliteData/SatelliteDataHome.tsx
+++ b/frontend/src/components/satelliteData/SatelliteDataHome.tsx
@@ -42,8 +42,8 @@ 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"
@@ -51,7 +51,7 @@ export default function SatelliteDataHome() {
                     </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"
@@ -59,7 +59,7 @@ export default function SatelliteDataHome() {
                     </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"
@@ -67,7 +67,7 @@ export default function SatelliteDataHome() {
                     </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