From 883c7b22f75c61311e77c38b23c994f191c669bf Mon Sep 17 00:00:00 2001
From: EliasKnudsen <38568225+EliasKnudsen@users.noreply.github.com>
Date: Wed, 17 Apr 2024 16:26:27 +0200
Subject: [PATCH] Homepage styling closing #315 (#317)

* Homepage styling closing #315

* prettier
---
 frontend/src/app/page.tsx                            |  6 +++---
 .../components/satelliteData/SatelliteDataHome.tsx   | 12 ++++++------
 frontend/src/components/ui/launchDateCountDown.tsx   |  2 +-
 frontend/src/lib/data/fetchSatelliteInfo.ts          |  3 ++-
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index cc36579..4d10a75 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -23,15 +23,15 @@ export default async function Home() {
 
     return (
         <>
-            <div className="flex min-h-[calc(100vh-73px)] flex-col gap-0 xl:flex-row">
+            <div className="flex min-h-[calc(100vh-73px)] flex-col gap-0 sm:flex-row">
                 {/* Stats Container */}
-                <div className="z-10 flex w-full flex-col border-2 border-r border-gray-600 bg-black md:min-w-[500px] xl:w-1/3">
+                <div className="z-10 flex w-full flex-col  border-b-2 border-l-2 border-r-2 border-t-2 border-gray-600 bg-black md:min-w-[500px] xl:w-1/3">
                     <SatelliteSelector />
                     <SatelliteDataHome />
                 </div>
 
                 {/* Globe Container */}
-                <div className="z-0 w-full overflow-x-hidden border-2 border-t-0 border-gray-600 xl:w-2/3 xl:border-t-2">
+                <div className="z-0 w-full overflow-x-hidden border-b-2  border-l-2 border-r-2 border-t-0 border-gray-600 sm:border-l-0 sm:border-t-2 xl:w-2/3">
                     <div className="flex h-full items-center justify-center ">
                         <SatelliteGlobeNoSSR />
                     </div>
diff --git a/frontend/src/components/satelliteData/SatelliteDataHome.tsx b/frontend/src/components/satelliteData/SatelliteDataHome.tsx
index 79e58c4..b234413 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-1 sm:grid-cols-2 md:grid-cols-1">
-                <div className="border-y border-gray-600 bg-black p-5 md:border-r">
+            <div className="grid grid-cols-2">
+                <div className="border  border-l-0 border-r-0 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="border-y border-gray-600 bg-black p-5 md:border-l">
+                <div className="border  border-l-2 border-r-0 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="border-y border-gray-600 bg-black p-5 md:border-r">
+                <div className="border  border-l-0 border-r-0 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="border-y border-gray-600 bg-black p-5 md:border-l">
+                <div className="border  border-l-2 border-r-0 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="border-t border-gray-600 bg-black p-5">
+            <div className="border border-b-0 border-l-0 border-r-0 border-gray-600 bg-black p-5 sm:border-b-2">
                 <div>
                     <p className="text-xl font-medium">
                         {satelliteInfo
diff --git a/frontend/src/components/ui/launchDateCountDown.tsx b/frontend/src/components/ui/launchDateCountDown.tsx
index 107855d..b7cc15c 100644
--- a/frontend/src/components/ui/launchDateCountDown.tsx
+++ b/frontend/src/components/ui/launchDateCountDown.tsx
@@ -49,7 +49,7 @@ const LaunchDateCountDown: React.FC<LaunchDateCountDownProps> = ({
         return () => clearInterval(intervalId);
     }, [launchDateString]);
 
-    if (hasLaunched == undefined) {
+    if (hasLaunched == undefined || launchDateString == undefined) {
         return <></>;
     }
     return (
diff --git a/frontend/src/lib/data/fetchSatelliteInfo.ts b/frontend/src/lib/data/fetchSatelliteInfo.ts
index 3a112f8..e004102 100644
--- a/frontend/src/lib/data/fetchSatelliteInfo.ts
+++ b/frontend/src/lib/data/fetchSatelliteInfo.ts
@@ -82,7 +82,8 @@ export default async function fetchSatelliteInfo({
             graphqlData?.data?.satellites?.data[0]?.attributes
                 ?.catalogNumberNORAD ?? undefined,
         launchDate:
-            graphqlData.data.satellites?.data[0]?.attributes?.launchDate ?? "",
+            graphqlData.data.satellites?.data[0]?.attributes?.launchDate ??
+            undefined,
     };
 
     return satelliteInfo;