From df992cfc8f8c36711ff4e76dcdfd2e83061c74bd Mon Sep 17 00:00:00 2001 From: Games4Doritos Date: Thu, 27 Nov 2025 10:56:35 +0800 Subject: [PATCH 1/5] 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 0000000..d0aec3d --- /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 2/5] 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 d0aec3d..edb80e0 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 3/5] 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 edb80e0..fb32293 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 616c2b1..74b095a 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 703a9f5..fb69f0b 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 4/5] 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 fb32293..88f8000 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 5/5] 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 88f8000..c9d09f4 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}