From 235ff0ff2818aa92255d164b9937ac5214089605 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20Alexander=20Str=C3=B8mseng?=
 <magnus.stromseng@gmail.com>
Date: Sun, 14 Apr 2024 14:12:41 +0200
Subject: [PATCH] 291 redesign pages to use a black transparent background
 instead of cards (#295)

* feat(frontend): :art: Change all sites to use new padding and colored background

* strapi types probably forgotten from a previous merge
---
 backend/types/generated/contentTypes.d.ts     | 204 ------------------
 .../src/app/blog/[articleSlug]/layout.tsx     |   5 +
 frontend/src/app/blog/layout.tsx              |   5 -
 frontend/src/app/blog/page.tsx                |  29 +--
 frontend/src/app/layout.tsx                   |   2 +-
 frontend/src/app/projects/layout.tsx          |   4 +-
 .../app/satellites/[satelliteSlug]/page.tsx   |  86 ++++----
 frontend/src/app/satellites/layout.tsx        |   4 +-
 frontend/src/app/satellites/page.tsx          |  15 +-
 frontend/src/components/PageLayout.tsx        |  21 ++
 frontend/src/components/PagePadding.tsx       |  19 --
 11 files changed, 102 insertions(+), 292 deletions(-)
 create mode 100644 frontend/src/app/blog/[articleSlug]/layout.tsx
 delete mode 100644 frontend/src/app/blog/layout.tsx
 create mode 100644 frontend/src/components/PageLayout.tsx
 delete mode 100644 frontend/src/components/PagePadding.tsx

diff --git a/backend/types/generated/contentTypes.d.ts b/backend/types/generated/contentTypes.d.ts
index 8a0a25f..10a9ea6 100644
--- a/backend/types/generated/contentTypes.d.ts
+++ b/backend/types/generated/contentTypes.d.ts
@@ -362,205 +362,6 @@ export interface AdminTransferTokenPermission extends Schema.CollectionType {
   };
 }
 
-export interface ApiArticleArticle extends Schema.CollectionType {
-  collectionName: 'articles';
-  info: {
-    singularName: 'article';
-    pluralName: 'articles';
-    displayName: 'Article';
-    description: '';
-  };
-  options: {
-    draftAndPublish: true;
-  };
-  attributes: {
-    previewTitle: Attribute.String & Attribute.Required & Attribute.Unique;
-    slug: Attribute.UID<'api::article.article', 'previewTitle'> &
-      Attribute.Required;
-    datePublished: Attribute.Date & Attribute.Required;
-    coverImage: Attribute.Media;
-    body: Attribute.Blocks & Attribute.Required;
-    author: Attribute.Relation<
-      'api::article.article',
-      'manyToOne',
-      'api::author.author'
-    >;
-    Tag: Attribute.Enumeration<['Featured', 'News', 'Updates']>;
-    createdAt: Attribute.DateTime;
-    updatedAt: Attribute.DateTime;
-    publishedAt: Attribute.DateTime;
-    createdBy: Attribute.Relation<
-      'api::article.article',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-    updatedBy: Attribute.Relation<
-      'api::article.article',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-  };
-}
-
-export interface ApiAuthorAuthor extends Schema.CollectionType {
-  collectionName: 'authors';
-  info: {
-    singularName: 'author';
-    pluralName: 'authors';
-    displayName: 'Author';
-  };
-  options: {
-    draftAndPublish: true;
-  };
-  attributes: {
-    name: Attribute.String & Attribute.Required;
-    avatar: Attribute.Media;
-    articles: Attribute.Relation<
-      'api::author.author',
-      'oneToMany',
-      'api::article.article'
-    >;
-    createdAt: Attribute.DateTime;
-    updatedAt: Attribute.DateTime;
-    publishedAt: Attribute.DateTime;
-    createdBy: Attribute.Relation<
-      'api::author.author',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-    updatedBy: Attribute.Relation<
-      'api::author.author',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-  };
-}
-
-export interface ApiMostRecentImageMostRecentImage
-  extends Schema.CollectionType {
-  collectionName: 'most_recent_images';
-  info: {
-    singularName: 'most-recent-image';
-    pluralName: 'most-recent-images';
-    displayName: 'Most Recent Image';
-  };
-  options: {
-    draftAndPublish: true;
-  };
-  attributes: {
-    mostRecentImage: Attribute.Media & Attribute.Required;
-    satellite: Attribute.Relation<
-      'api::most-recent-image.most-recent-image',
-      'manyToOne',
-      'api::satellite.satellite'
-    >;
-    createdAt: Attribute.DateTime;
-    updatedAt: Attribute.DateTime;
-    publishedAt: Attribute.DateTime;
-    createdBy: Attribute.Relation<
-      'api::most-recent-image.most-recent-image',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-    updatedBy: Attribute.Relation<
-      'api::most-recent-image.most-recent-image',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-  };
-}
-
-export interface ApiProjectProject extends Schema.CollectionType {
-  collectionName: 'projects';
-  info: {
-    singularName: 'project';
-    pluralName: 'projects';
-    displayName: 'Project';
-    description: '';
-  };
-  options: {
-    draftAndPublish: true;
-  };
-  attributes: {
-    title: Attribute.String & Attribute.Required & Attribute.Unique;
-    content: Attribute.Blocks;
-    slug: Attribute.UID<'api::project.project', 'title'> & Attribute.Required;
-    previewImage: Attribute.Media;
-    satellites: Attribute.Relation<
-      'api::project.project',
-      'manyToMany',
-      'api::satellite.satellite'
-    >;
-    createdAt: Attribute.DateTime;
-    updatedAt: Attribute.DateTime;
-    publishedAt: Attribute.DateTime;
-    createdBy: Attribute.Relation<
-      'api::project.project',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-    updatedBy: Attribute.Relation<
-      'api::project.project',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-  };
-}
-
-export interface ApiSatelliteSatellite extends Schema.CollectionType {
-  collectionName: 'satellites';
-  info: {
-    singularName: 'satellite';
-    pluralName: 'satellites';
-    displayName: 'Satellite';
-    description: '';
-  };
-  options: {
-    draftAndPublish: true;
-  };
-  attributes: {
-    name: Attribute.String & Attribute.Required & Attribute.Unique;
-    celestrakURL: Attribute.String & Attribute.Unique;
-    catalogNumberNORAD: Attribute.String & Attribute.Unique;
-    content: Attribute.Blocks;
-    previewImage: Attribute.Media;
-    projects: Attribute.Relation<
-      'api::satellite.satellite',
-      'manyToMany',
-      'api::project.project'
-    >;
-    most_recent_images: Attribute.Relation<
-      'api::satellite.satellite',
-      'oneToMany',
-      'api::most-recent-image.most-recent-image'
-    >;
-    missionStatus: Attribute.String;
-    createdAt: Attribute.DateTime;
-    updatedAt: Attribute.DateTime;
-    publishedAt: Attribute.DateTime;
-    createdBy: Attribute.Relation<
-      'api::satellite.satellite',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-    updatedBy: Attribute.Relation<
-      'api::satellite.satellite',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-  };
-}
-
 export interface PluginUploadFile extends Schema.CollectionType {
   collectionName: 'files';
   info: {
@@ -1222,11 +1023,6 @@ declare module '@strapi/types' {
       'admin::api-token-permission': AdminApiTokenPermission;
       'admin::transfer-token': AdminTransferToken;
       'admin::transfer-token-permission': AdminTransferTokenPermission;
-      'api::article.article': ApiArticleArticle;
-      'api::author.author': ApiAuthorAuthor;
-      'api::most-recent-image.most-recent-image': ApiMostRecentImageMostRecentImage;
-      'api::project.project': ApiProjectProject;
-      'api::satellite.satellite': ApiSatelliteSatellite;
       'plugin::upload.file': PluginUploadFile;
       'plugin::upload.folder': PluginUploadFolder;
       'plugin::content-releases.release': PluginContentReleasesRelease;
diff --git a/frontend/src/app/blog/[articleSlug]/layout.tsx b/frontend/src/app/blog/[articleSlug]/layout.tsx
new file mode 100644
index 0000000..de2f2b5
--- /dev/null
+++ b/frontend/src/app/blog/[articleSlug]/layout.tsx
@@ -0,0 +1,5 @@
+import { PageColoredBackground } from "@/components/PageLayout";
+import React from "react";
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return <PageColoredBackground>{children}</PageColoredBackground>;
+}
diff --git a/frontend/src/app/blog/layout.tsx b/frontend/src/app/blog/layout.tsx
deleted file mode 100644
index 3eab227..0000000
--- a/frontend/src/app/blog/layout.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { PagePadding } from "@/components/PagePadding";
-import React from "react";
-export default function Layout({ children }: { children: React.ReactNode }) {
-    return <PagePadding>{children}</PagePadding>;
-}
diff --git a/frontend/src/app/blog/page.tsx b/frontend/src/app/blog/page.tsx
index f09dca9..d138cab 100644
--- a/frontend/src/app/blog/page.tsx
+++ b/frontend/src/app/blog/page.tsx
@@ -9,6 +9,9 @@ import {
     PageHeader,
 } from "@/components/PageHeader";
 
+import { PagePadding } from "@/components/PageLayout";
+import React from "react";
+
 export interface BlogPost {
     key: string | null | undefined;
     firstArticle?: boolean | null | undefined;
@@ -47,18 +50,20 @@ export default async function BlogPage({
 
     return (
         <>
-            <PageHeaderAndSubtitle>
-                <PageHeader>Blog</PageHeader>
-                <PageSubtitle>
-                    Welcome to the blog! Here you can find all of the articles
-                    we have written.
-                </PageSubtitle>
-            </PageHeaderAndSubtitle>
-            <div className="flex flex-col justify-center">
-                {/* <BlogDataCards articles={articleCache[currentPage]} /> */}
-                <BlogDataCards articles={articleList} />
-                <BlogPaginator totalArticles={totalArticles} />
-            </div>
+            <PagePadding>
+                <PageHeaderAndSubtitle>
+                    <PageHeader>Blog</PageHeader>
+                    <PageSubtitle>
+                        Welcome to the blog! Here you can find all of the
+                        articles we have written.
+                    </PageSubtitle>
+                </PageHeaderAndSubtitle>
+                <div className="flex flex-col justify-center">
+                    {/* <BlogDataCards articles={articleCache[currentPage]} /> */}
+                    <BlogDataCards articles={articleList} />
+                    <BlogPaginator totalArticles={totalArticles} />
+                </div>
+            </PagePadding>
         </>
     );
 }
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 3789aed..d6ff91d 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -28,7 +28,7 @@ export default function RootLayout({
                 <ApolloWrapper>
                     <Navbar />
                     <ErrorBoundaryNavigation>
-                        <main className="flex-grow">
+                        <main className="flex grow flex-col">
                             <Starfield />
                             {children}
                         </main>
diff --git a/frontend/src/app/projects/layout.tsx b/frontend/src/app/projects/layout.tsx
index 3eab227..de2f2b5 100644
--- a/frontend/src/app/projects/layout.tsx
+++ b/frontend/src/app/projects/layout.tsx
@@ -1,5 +1,5 @@
-import { PagePadding } from "@/components/PagePadding";
+import { PageColoredBackground } from "@/components/PageLayout";
 import React from "react";
 export default function Layout({ children }: { children: React.ReactNode }) {
-    return <PagePadding>{children}</PagePadding>;
+    return <PageColoredBackground>{children}</PageColoredBackground>;
 }
diff --git a/frontend/src/app/satellites/[satelliteSlug]/page.tsx b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
index 1c69542..87001b1 100644
--- a/frontend/src/app/satellites/[satelliteSlug]/page.tsx
+++ b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
@@ -32,60 +32,58 @@ export default async function SatelliteInfoPage({
     if (!satelliteInfo) return <div>Loading...</div>;
 
     return (
-        <div className="my-12 flex min-h-screen items-center justify-center">
-            <div className="flex w-2/3 flex-col">
-                <div className="flex w-full flex-col items-center border-2 border-gray-600 bg-black p-4">
-                    {/* Container for satname, stats and sat image */}
-                    <div className="flex w-full flex-col bg-gray-600 p-0.5 xl:flex-row">
-                        {/* Stats Container */}
-                        <div className="z-10 flex w-full flex-col">
-                            <div className="bg-black p-5">
-                                <h1 className="text-xl font-bold tracking-wide">
-                                    {satelliteInfo.name}
-                                </h1>
-                            </div>
-                            <div className="mt-0.5">
-                                <SatelliteDataHome />
-                            </div>
+        <>
+            <div className="flex w-full flex-col items-center ">
+                {/* Container for satname, stats and sat image */}
+                <div className="flex w-full flex-col bg-gray-600 p-0.5 xl:flex-row">
+                    {/* Stats Container */}
+                    <div className="z-10 flex w-full flex-col">
+                        <div className="bg-black p-5">
+                            <h1 className="text-xl font-bold tracking-wide">
+                                {satelliteInfo.name}
+                            </h1>
                         </div>
-
-                        {/* Image container */}
-                        <div className="z-0 ml-0.5 w-full">
-                            <div className="flex h-full w-full items-center justify-center bg-black">
-                                <h1>Satellite Image</h1>
-                            </div>
+                        <div className="mt-0.5">
+                            <SatelliteDataHome />
                         </div>
                     </div>
 
-                    {/* Container for map */}
-                    <div className="mt-6 w-full">
-                        <Map2d satName={satelliteInfo.name} />
+                    {/* Image container */}
+                    <div className="z-0 ml-0.5 w-full">
+                        <div className="flex h-full w-full items-center justify-center bg-black">
+                            <h1>Satellite Image</h1>
+                        </div>
                     </div>
+                </div>
 
-                    {/* Container for body content */}
-                    <div className="mt-6">
-                        <BlockRendererClient content={satelliteInfo.content} />
-                    </div>
+                {/* Container for map */}
+                <div className="mt-6 w-full">
+                    <Map2d satName={satelliteInfo.name} />
                 </div>
 
-                {/* Related projects */}
-                <div className="mt-8 flex w-full flex-col items-center border-2 border-gray-600 bg-black p-4">
-                    {satelliteInfo.relatedProjects?.length != 0 ? (
-                        <h1 className="text-xl font-bold">Related Projects</h1>
-                    ) : null}
+                {/* Container for body content */}
+                <div className="mt-6">
+                    <BlockRendererClient content={satelliteInfo.content} />
+                </div>
+            </div>
 
-                    <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
-                        {satelliteInfo.relatedProjects?.map(
-                            (project: ProjectOrSatellite) => (
-                                <RelatedProjectsAndSatellites
-                                    project={project}
-                                    key={project.id}
-                                />
-                            ),
-                        )}
-                    </div>
+            {/* Related projects */}
+            <div className="mt-8 flex w-full flex-col items-center">
+                {satelliteInfo.relatedProjects?.length != 0 ? (
+                    <h1 className="text-xl font-bold">Related Projects</h1>
+                ) : null}
+
+                <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
+                    {satelliteInfo.relatedProjects?.map(
+                        (project: ProjectOrSatellite) => (
+                            <RelatedProjectsAndSatellites
+                                project={project}
+                                key={project.id}
+                            />
+                        ),
+                    )}
                 </div>
             </div>
-        </div>
+        </>
     );
 }
diff --git a/frontend/src/app/satellites/layout.tsx b/frontend/src/app/satellites/layout.tsx
index 3eab227..de2f2b5 100644
--- a/frontend/src/app/satellites/layout.tsx
+++ b/frontend/src/app/satellites/layout.tsx
@@ -1,5 +1,5 @@
-import { PagePadding } from "@/components/PagePadding";
+import { PageColoredBackground } from "@/components/PageLayout";
 import React from "react";
 export default function Layout({ children }: { children: React.ReactNode }) {
-    return <PagePadding>{children}</PagePadding>;
+    return <PageColoredBackground>{children}</PageColoredBackground>;
 }
diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx
index 9cf1870..9e02a25 100644
--- a/frontend/src/app/satellites/page.tsx
+++ b/frontend/src/app/satellites/page.tsx
@@ -1,4 +1,9 @@
 import { gql } from "@/__generated__/gql";
+import {
+    PageHeaderAndSubtitle,
+    PageHeader,
+    PageSubtitle,
+} from "@/components/PageHeader";
 import SatelliteStatsTableRow from "@/components/satelliteData/SatelliteStatsTableRow";
 import { getClient } from "@/lib/ApolloClient";
 const GET_SATELLITES = gql(`
@@ -33,9 +38,13 @@ export default async function Satellites() {
 
         return (
             <div className="flex w-full flex-col items-center justify-center">
-                <h1 className="my-10 text-4xl font-extrabold  text-white">
-                    Satellites
-                </h1>
+                <PageHeaderAndSubtitle>
+                    <PageHeader>Satellites</PageHeader>
+                    <PageSubtitle>
+                        Here are the satellites we have worked on. Click on them
+                        to see more details.
+                    </PageSubtitle>
+                </PageHeaderAndSubtitle>
                 <table className="w-4/5 table-auto border-collapse rounded-md border-b border-white shadow">
                     <thead>
                         <tr className="border-y border-white px-3 py-2 text-left text-white">
diff --git a/frontend/src/components/PageLayout.tsx b/frontend/src/components/PageLayout.tsx
new file mode 100644
index 0000000..ea1bafb
--- /dev/null
+++ b/frontend/src/components/PageLayout.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+// Used for pages that do not requre a colored transparent background
+function PagePadding({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="mx-auto w-full max-w-6xl px-8 py-8 md:px-10">
+            {children}
+        </div>
+    );
+}
+
+// Used for pages that require a colored transparent background
+function PageColoredBackground({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="mx-auto w-full max-w-6xl grow bg-black bg-opacity-50 px-4 py-8 sm:px-8 md:px-10">
+            {children}
+        </div>
+    );
+}
+
+export { PageColoredBackground, PagePadding };
diff --git a/frontend/src/components/PagePadding.tsx b/frontend/src/components/PagePadding.tsx
deleted file mode 100644
index d88122e..0000000
--- a/frontend/src/components/PagePadding.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-function VerticalPagePadding({ children }: { children: React.ReactNode }) {
-    return <div className="py-8">{children}</div>;
-}
-
-function HorizontalPagePadding({ children }: { children: React.ReactNode }) {
-    return <div className="px-8 md:px-10">{children}</div>;
-}
-
-function PagePadding({ children }: { children: React.ReactNode }) {
-    return (
-        <HorizontalPagePadding>
-            <VerticalPagePadding>{children}</VerticalPagePadding>
-        </HorizontalPagePadding>
-    );
-}
-
-export { VerticalPagePadding, HorizontalPagePadding, PagePadding };