Homepage styling closing #315 (#317)

* Homepage styling closing #315 * prettier
NTNU-SmallSatLab · Apr 17, 2024 · 883c7b2 · 883c7b2
1 parent 455729a
commit 883c7b2
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 11 deletions.
diff --git 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
@@ -42,32 +42,32 @@ 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"
                             : "Loading..."}
                     </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"
                             : "Loading..."}
                     </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"
                             : "Loading..."}
                     </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
@@ -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
@@ -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;