From 8ac0493a1f8e8753d0819bf7ebe841444df2326e Mon Sep 17 00:00:00 2001
From: luctra02 <64017398+luctra02@users.noreply.github.com>
Date: Tue, 16 Apr 2024 17:34:59 +0200
Subject: [PATCH] 301 style project page and blog page to look similiar (#302)

* style(frontend): :lipstick: Change grid on project page and border styling on blog page

* style(frontend): :lipstick: style blogcard component instead of changing blogcard to card

* style(frontend): :lipstick: remove justify start for related satellite/project cards

* style(frontend): :lipstick: change border radius on project and blogs and hover effect on projects

* style(frontend): :lipstick: add the same on hover effect in project page as for related satellites/projects

* fix(frontend): :bug: remove wrong content on satellite page

* style(frontend): :lipstick: change related satellites/projects title and make all the cards center in flex

* refactor(frontend): :recycle: Prettier write

* refactor(frontend): :sparkles: Remove unused layout component and update CSS classes in ProjectsPage

* feat(frontend): :sparkles: add layout to project page

* refactor(frontend): :art:

---------

Co-authored-by: Mads Hermansen <mads.d.hermansen+main@gmail.com>
---
 .../projects/{ => [projectSlug]}/layout.tsx   |  0
 .../src/app/projects/[projectSlug]/page.tsx   | 54 ++++++++++---------
 frontend/src/app/projects/page.tsx            | 20 +++----
 .../app/satellites/[satelliteSlug]/page.tsx   | 35 ++++++------
 .../RelatedProjectsAndSatellites.tsx          |  4 +-
 frontend/src/components/shadcn/card.tsx       |  2 +-
 frontend/src/components/ui/blogCard.tsx       |  2 +-
 7 files changed, 62 insertions(+), 55 deletions(-)
 rename frontend/src/app/projects/{ => [projectSlug]}/layout.tsx (100%)

diff --git a/frontend/src/app/projects/layout.tsx b/frontend/src/app/projects/[projectSlug]/layout.tsx
similarity index 100%
rename from frontend/src/app/projects/layout.tsx
rename to frontend/src/app/projects/[projectSlug]/layout.tsx
diff --git a/frontend/src/app/projects/[projectSlug]/page.tsx b/frontend/src/app/projects/[projectSlug]/page.tsx
index b6d3276..3062aae 100644
--- a/frontend/src/app/projects/[projectSlug]/page.tsx
+++ b/frontend/src/app/projects/[projectSlug]/page.tsx
@@ -73,36 +73,38 @@ export default async function Page({
         projectTitle = STRAPI_URL + projectTitle;
     }
     return (
-        <div className="flex flex-col items-center gap-4">
+        <div className="mt-8 flex flex-col items-center gap-4">
             <BlockRendererClient content={content} />
             {graphqlData.data.projects?.data[0].attributes?.satellites?.data
                 .length != 0 && (
-                <h1 className="mb-2 mt-2 text-xl font-bold">
-                    Related Satellites
-                </h1>
+                <>
+                    <div className="prose prose-invert mb-1 lg:prose-xl">
+                        <h2>Related Satellites</h2>
+                    </div>
+                    <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4">
+                        {graphqlData.data.projects?.data[0].attributes?.satellites?.data.map(
+                            (satellite: any) => {
+                                const previewImage =
+                                    satellite?.attributes?.previewImage?.data
+                                        ?.attributes?.url ?? undefined;
+                                const satelliteObject: ProjectOrSatellite = {
+                                    id: satellite.id,
+                                    title: satellite.attributes.name,
+                                    previewImage: previewImage,
+                                    slug: satellite.attributes.name,
+                                    isProject: false,
+                                };
+                                return (
+                                    <RelatedProjectsAndSatellites
+                                        project={satelliteObject}
+                                        key={satellite.id}
+                                    />
+                                );
+                            },
+                        )}
+                    </div>
+                </>
             )}
-            <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
-                {graphqlData.data.projects?.data[0].attributes?.satellites?.data.map(
-                    (satellite: any) => {
-                        const previewImage =
-                            satellite?.attributes?.previewImage?.data
-                                ?.attributes?.url ?? undefined;
-                        const satelliteObject: ProjectOrSatellite = {
-                            id: satellite.id,
-                            title: satellite.attributes.name,
-                            previewImage: previewImage,
-                            slug: satellite.attributes.name,
-                            isProject: false,
-                        };
-                        return (
-                            <RelatedProjectsAndSatellites
-                                project={satelliteObject}
-                                key={satellite.id}
-                            />
-                        );
-                    },
-                )}
-            </div>
         </div>
     );
 }
diff --git a/frontend/src/app/projects/page.tsx b/frontend/src/app/projects/page.tsx
index 10f6795..6e4081a 100644
--- a/frontend/src/app/projects/page.tsx
+++ b/frontend/src/app/projects/page.tsx
@@ -60,7 +60,7 @@ export default async function ProjectsPage() {
     }
 
     return (
-        <div>
+        <div className="mx-auto w-full max-w-6xl grow bg-opacity-50 px-4 py-8 sm:px-8 md:px-10">
             <div className="flex flex-col items-center justify-center">
                 <PageHeaderAndSubtitle>
                     <PageHeader>Our Projects</PageHeader>
@@ -70,8 +70,8 @@ export default async function ProjectsPage() {
                 </PageHeaderAndSubtitle>
             </div>
 
-            <div className="grid grid-cols-1 gap-12 md:grid-cols-2 md:gap-16 lg:grid-cols-3 xl:grid-cols-4">
-                {graphqlData.data.projects.data.map((project) => {
+            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+                {graphqlData.data.projects.data.map((project: any) => {
                     let previewImage =
                         project?.attributes?.previewImage?.data?.attributes
                             ?.url;
@@ -81,11 +81,11 @@ export default async function ProjectsPage() {
                     }
                     return (
                         <Link
-                            className="h-full transition-transform duration-200 ease-in-out hover:scale-105 hover:transform sm:m-4"
+                            className="h-full sm:m-4"
                             href={"/projects/" + project?.attributes?.slug}
                             key={project.id}
                         >
-                            <Card className="h-full w-full">
+                            <Card className="h-full w-full hover:border-blue-500">
                                 <CardHeader></CardHeader>
                                 <CardContent>
                                     <div className="w-full">
@@ -108,10 +108,12 @@ export default async function ProjectsPage() {
                                             {project?.attributes?.title}
                                         </CardTitle>
                                         <p className="break-words">
-                                            {SlicePreviewText(
-                                                project?.attributes?.content ??
-                                                    [],
-                                            )}
+                                            <span>
+                                                {SlicePreviewText(
+                                                    project?.attributes
+                                                        ?.content ?? [],
+                                                )}
+                                            </span>
                                         </p>
                                     </div>
                                 </CardContent>
diff --git a/frontend/src/app/satellites/[satelliteSlug]/page.tsx b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
index 63b197e..30cb72b 100644
--- a/frontend/src/app/satellites/[satelliteSlug]/page.tsx
+++ b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
@@ -81,22 +81,25 @@ export default async function SatelliteInfoPage({
             </div>
 
             {/* Related projects */}
-            {satelliteInfo.relatedProjects?.length != 0 ? (
-                <div className="mt-8 flex w-full flex-col items-center">
-                    <h1 className="text-xl font-bold">Related Projects</h1>
-
-                    <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>
-            ) : null}
+            <div className="mt-8 flex w-full flex-col items-center">
+                {satelliteInfo.relatedProjects?.length != 0 ? (
+                    <>
+                        <div className="prose prose-invert mb-1 lg:prose-xl">
+                            <h2>Related Projects</h2>
+                        </div>
+                        <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4">
+                            {satelliteInfo.relatedProjects?.map(
+                                (project: ProjectOrSatellite) => (
+                                    <RelatedProjectsAndSatellites
+                                        project={project}
+                                        key={project.id}
+                                    />
+                                ),
+                            )}
+                        </div>
+                    </>
+                ) : null}
+            </div>
         </>
     );
 }
diff --git a/frontend/src/components/RelatedProjectsAndSatellites.tsx b/frontend/src/components/RelatedProjectsAndSatellites.tsx
index 3815383..4b48518 100644
--- a/frontend/src/components/RelatedProjectsAndSatellites.tsx
+++ b/frontend/src/components/RelatedProjectsAndSatellites.tsx
@@ -23,11 +23,11 @@ export default function RelatedProjectsAndSatellites({
 
     return (
         <Link
-            className="m-1 transition-transform duration-200 ease-in-out hover:scale-105 hover:transform sm:m-4"
+            className="m-1 sm:m-4"
             href={"/" + projectOrSatellite + "/" + project.slug}
             key={project.id}
         >
-            <Card className="md:w-68 flex h-full w-64 flex-col">
+            <Card className="md:w-68 flex h-full w-64 flex-col hover:border-blue-500">
                 <CardHeader>
                     <CardTitle className="mb-2 mt-2 text-center text-xl font-bold">
                         {project.title}
diff --git a/frontend/src/components/shadcn/card.tsx b/frontend/src/components/shadcn/card.tsx
index b07d192..91ba51c 100644
--- a/frontend/src/components/shadcn/card.tsx
+++ b/frontend/src/components/shadcn/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
     <div
         ref={ref}
         className={cn(
-            "rounded-lg border bg-card text-card-foreground shadow-sm",
+            "border bg-card text-card-foreground shadow-sm",
             className,
         )}
         {...props}
diff --git a/frontend/src/components/ui/blogCard.tsx b/frontend/src/components/ui/blogCard.tsx
index f1389dc..4c86c51 100644
--- a/frontend/src/components/ui/blogCard.tsx
+++ b/frontend/src/components/ui/blogCard.tsx
@@ -9,7 +9,7 @@ const BlogCard = React.forwardRef<
     <div
         ref={ref}
         className={cn(
-            "flex flex-col border border-white bg-background p-5 text-card-foreground",
+            "flex flex-col border bg-background p-5 text-card-foreground",
             className,
         )}
         {...props}