From df992cfc8f8c36711ff4e76dcdfd2e83061c74bd Mon Sep 17 00:00:00 2001 From: Games4Doritos Date: Thu, 27 Nov 2025 10:56:35 +0800 Subject: [PATCH 01/10] Added Feature Box Component Created the component as FeatureBox with two props: width and height, so you can dynamically change its size --- client/src/components/ui/featureBox.tsx | 49 +++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 client/src/components/ui/featureBox.tsx diff --git a/client/src/components/ui/featureBox.tsx b/client/src/components/ui/featureBox.tsx new file mode 100644 index 00000000..d0aec3de --- /dev/null +++ b/client/src/components/ui/featureBox.tsx @@ -0,0 +1,49 @@ +import { Heading1 } from "lucide-react"; +import * as React from "react"; + +interface dimensions { + width: number; + height: number; +} + +function FeatureBox({ width, height }: dimensions): React.JSX.Element { + return ( + <> +
+
+
+ Box title +
+
+ Subtitle please code for a cause and develop a game at uwa +
+
+
+ + ); +} + +export default FeatureBox; From a526b0e45d9429a695652dabbe6ff8ed3a6b3010 Mon Sep 17 00:00:00 2001 From: Games4Doritos Date: Thu, 27 Nov 2025 20:16:31 +0800 Subject: [PATCH 02/10] Update featureBox.tsx --- client/src/components/ui/featureBox.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/src/components/ui/featureBox.tsx b/client/src/components/ui/featureBox.tsx index d0aec3de..edb80e07 100644 --- a/client/src/components/ui/featureBox.tsx +++ b/client/src/components/ui/featureBox.tsx @@ -1,4 +1,3 @@ -import { Heading1 } from "lucide-react"; import * as React from "react"; interface dimensions { From 83d3ae710b7509776404d54066597ca00b1efda7 Mon Sep 17 00:00:00 2001 From: Games4Doritos Date: Sat, 29 Nov 2025 14:58:10 +0800 Subject: [PATCH 03/10] Added custom dark colour + revisions Added a custom dark purple colour to the config and globals files, seen in the desired component in the issue brief, as well as moving Also revised the feature box's props to title and text, instead of height and width (which now change from rem), which are strings that will be placed in the respective parts of the feature box. --- client/src/components/ui/featureBox.tsx | 38 ++++++++++++------------- client/src/styles/globals.css | 3 ++ client/tailwind.config.ts | 4 +++ 3 files changed, 26 insertions(+), 19 deletions(-) diff --git a/client/src/components/ui/featureBox.tsx b/client/src/components/ui/featureBox.tsx index edb80e07..fb32293e 100644 --- a/client/src/components/ui/featureBox.tsx +++ b/client/src/components/ui/featureBox.tsx @@ -1,18 +1,18 @@ import * as React from "react"; -interface dimensions { - width: number; - height: number; +interface contents { + title: string; + text: string; } -function FeatureBox({ width, height }: dimensions): React.JSX.Element { +function FeatureBox({ title,text }: contents): React.JSX.Element { return ( <>
- Box title + {title}
-
- Subtitle please code for a cause and develop a game at uwa +
+ {text}
@@ -45,4 +45,4 @@ function FeatureBox({ width, height }: dimensions): React.JSX.Element { ); } -export default FeatureBox; +export default FeatureBox; \ No newline at end of file diff --git a/client/src/styles/globals.css b/client/src/styles/globals.css index 616c2b14..74b095a0 100644 --- a/client/src/styles/globals.css +++ b/client/src/styles/globals.css @@ -28,6 +28,9 @@ --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 100%; + --dark: 260, 52.38%, 12.35%; + --dark-foreground: 0 0% 100%; + --border: 235 47% 20%; --input: 235 47% 20%; --ring: 236 47% 7%; diff --git a/client/tailwind.config.ts b/client/tailwind.config.ts index 703a9f55..fb69f0b9 100644 --- a/client/tailwind.config.ts +++ b/client/tailwind.config.ts @@ -59,6 +59,10 @@ const config = { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, + dark: { + DEFAULT: "hsl(var(--dark))", + foreground: "hsl(var(--dark-foreground))" + } }, borderRadius: { lg: "var(--radius)", From f6e6c6c00d8d5863c1c7a177309e23849c0a654c Mon Sep 17 00:00:00 2001 From: Games4Doritos Date: Sat, 29 Nov 2025 15:06:51 +0800 Subject: [PATCH 04/10] formatting :( --- client/src/components/ui/featureBox.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/client/src/components/ui/featureBox.tsx b/client/src/components/ui/featureBox.tsx index fb32293e..88f80004 100644 --- a/client/src/components/ui/featureBox.tsx +++ b/client/src/components/ui/featureBox.tsx @@ -5,13 +5,13 @@ interface contents { text: string; } -function FeatureBox({ title,text }: contents): React.JSX.Element { +function FeatureBox({ title, text }: contents): React.JSX.Element { return ( <>
{title}
-
- {text} -
+
{text}
); } -export default FeatureBox; \ No newline at end of file +export default FeatureBox; From a2d27e607c90acf91622a9479782600f34bdbac7 Mon Sep 17 00:00:00 2001 From: Games4Doritos Date: Thu, 4 Dec 2025 21:26:01 +0800 Subject: [PATCH 05/10] Reworked the shape, added responsiveness, and made requested changes -Added a third prop called hOffset, which simply changes the marginLeft of the component, allowing for horizontal freedom -Changed the geometry of the shape, where the trapezoids on the top-left and bottom-right corners have a fixed height, and so don't change as the box squishes inwards - Made the component's width responsive at 60vw as opposed to a fixed rem value - Made the component's height responsive to the amount of content, e.g it's height increases as its width decreases to still contain all the text - Replaced divs containg title and text with appropriate h3 and p - Migrated most properties in style to tailwind classes, some calc() and ${} things don't work in it so have been kept in style --- client/src/components/ui/featureBox.tsx | 29 +++++++++---------------- 1 file changed, 10 insertions(+), 19 deletions(-) diff --git a/client/src/components/ui/featureBox.tsx b/client/src/components/ui/featureBox.tsx index 88f80004..c9d09f42 100644 --- a/client/src/components/ui/featureBox.tsx +++ b/client/src/components/ui/featureBox.tsx @@ -3,40 +3,31 @@ import * as React from "react"; interface contents { title: string; text: string; + hOffset: number; } -function FeatureBox({ title, text }: contents): React.JSX.Element { +function FeatureBox({ title, text, hOffset }: contents): React.JSX.Element { return ( <>
-
- {title} -
-
{text}
+

{title}

+

{text}

From d203ea23fb00df37f551630e94fac58ced7c0e97 Mon Sep 17 00:00:00 2001 From: Games4Doritos Date: Sat, 6 Dec 2025 15:40:11 +0800 Subject: [PATCH 06/10] Update dark-alt color value in globals.css --- client/src/styles/globals.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/styles/globals.css b/client/src/styles/globals.css index ea9d2ba5..403a5fcc 100644 --- a/client/src/styles/globals.css +++ b/client/src/styles/globals.css @@ -7,7 +7,7 @@ /* Figma Colours */ --dark-1: 0 0% 0%; --dark-2: 236 64% 10%; - --dark-alt: 296 50% 11%; + --dark-alt: 260 52.38% 12.35%; --neutral-1: 235 64% 30%; --neutral-2: 235 64% 40%; --neutral-3: 235 64% 49%; From 05bc3cccc3ab65bc4d45412637cf483034511cf9 Mon Sep 17 00:00:00 2001 From: Games4Doritos Date: Wed, 10 Dec 2025 17:39:14 +0800 Subject: [PATCH 07/10] Changed some styling + removed hOffset + -Removed the set width for the component at 60vw, the component will simply have a maximum width of 60% of the parent element's width. -Changed some style properties of the component, notably changing the background of the content of the box to be the standardised dark-alt colour -Removed the hOffset component as it is assumed to be horizontally centered -Modified the boxSizing property of the component to 'border-box', which will hopefully help more with responsiveness --- client/src/components/ui/featureBox.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/client/src/components/ui/featureBox.tsx b/client/src/components/ui/featureBox.tsx index c9d09f42..87709db3 100644 --- a/client/src/components/ui/featureBox.tsx +++ b/client/src/components/ui/featureBox.tsx @@ -3,30 +3,30 @@ import * as React from "react"; interface contents { title: string; text: string; - hOffset: number; } -function FeatureBox({ title, text, hOffset }: contents): React.JSX.Element { +function FeatureBox({ title, text}: contents): React.JSX.Element { return ( <>
-

{title}

+

{title}

{text}

From 342cf6b17c16770c0113f2b56cdebeb9acf6e119 Mon Sep 17 00:00:00 2001 From: Games4Doritos Date: Wed, 10 Dec 2025 17:40:21 +0800 Subject: [PATCH 08/10] formatting --- client/src/components/ui/featureBox.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/client/src/components/ui/featureBox.tsx b/client/src/components/ui/featureBox.tsx index 87709db3..52a9c013 100644 --- a/client/src/components/ui/featureBox.tsx +++ b/client/src/components/ui/featureBox.tsx @@ -5,24 +5,23 @@ interface contents { text: string; } -function FeatureBox({ title, text}: contents): React.JSX.Element { +function FeatureBox({ title, text }: contents): React.JSX.Element { return ( <>
From a7318b4ba0d025dfea58d5d88618507213e0dc78 Mon Sep 17 00:00:00 2001 From: Games4Doritos Date: Fri, 12 Dec 2025 22:26:24 +0800 Subject: [PATCH 09/10] Removed old dark color (was replaced in new colours) --- client/src/styles/globals.css | 3 --- client/tailwind.config.ts | 4 ---- 2 files changed, 7 deletions(-) diff --git a/client/src/styles/globals.css b/client/src/styles/globals.css index fbc69767..403a5fcc 100644 --- a/client/src/styles/globals.css +++ b/client/src/styles/globals.css @@ -48,9 +48,6 @@ --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 100%; - --dark: 260, 52.38%, 12.35%; - --dark-foreground: 0 0% 100%; - --border: 235 47% 20%; --input: 235 47% 20%; --ring: 236 47% 7%; diff --git a/client/tailwind.config.ts b/client/tailwind.config.ts index fb69f0b9..703a9f55 100644 --- a/client/tailwind.config.ts +++ b/client/tailwind.config.ts @@ -59,10 +59,6 @@ const config = { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, - dark: { - DEFAULT: "hsl(var(--dark))", - foreground: "hsl(var(--dark-foreground))" - } }, borderRadius: { lg: "var(--radius)", From 79b3789017a833e2dc41e58bbab38de63c3fae76 Mon Sep 17 00:00:00 2001 From: Games4Doritos Date: Sat, 13 Dec 2025 14:18:52 +0800 Subject: [PATCH 10/10] Updated a colour to now draw from the updated tailwind config file --- client/src/components/ui/featureBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/ui/featureBox.tsx b/client/src/components/ui/featureBox.tsx index 52a9c013..0a3fd9a4 100644 --- a/client/src/components/ui/featureBox.tsx +++ b/client/src/components/ui/featureBox.tsx @@ -23,7 +23,7 @@ function FeatureBox({ title, text }: contents): React.JSX.Element { clipPath: "inherit", boxSizing: "inherit", }} - className="mb-[0.15rem] ml-[0.15rem] bg-[hsl(var(--dark-alt))] p-10" + className="mb-[0.15rem] ml-[0.15rem] bg-dark_alt p-10" >

{title}

{text}