From ca0a0f9c6650269282fae9f58b3d449f3a2ac666 Mon Sep 17 00:00:00 2001
From: Vincent Tannos <tannos.vincent@gmail.com>
Date: Tue, 12 Nov 2024 13:08:39 +1100
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=94=98=20Add=20Button=20Component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                  | 11 ++++++++
 frontend/src/Button/Button.module.css | 29 +++++++++++++++++++++
 frontend/src/Button/Button.tsx        | 36 +++++++++++++++++++++++++++
 3 files changed, 76 insertions(+)
 create mode 100644 frontend/src/Button/Button.module.css
 create mode 100644 frontend/src/Button/Button.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b98806f..c895a29 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,6 +3,7 @@ import Event from "./Event/Event";
 import { Keyword, KeywordOptions } from "./Keyword/Keyword";
 import bbq from "./assets/bbq.png";
 import NavBar from './NavBar/NavBar';
+import Button, { ButtonOptions } from './Button/Button';
 
 function App() {
   return (
@@ -26,6 +27,16 @@ function App() {
       <Keyword type={KeywordOptions.Delete}>Frunk Dwindleward</Keyword>
       <Keyword type={KeywordOptions.Delete}>Frunk Dwindleward</Keyword>
       <Keyword type={KeywordOptions.Delete}>Frunk Dwindleward</Keyword>
+      <Button 
+        type={ButtonOptions.Plus}
+      ></Button>
+      <Button 
+        type={ButtonOptions.Bookmark}
+      ></Button>
+      <Button
+        type={ButtonOptions.String}
+        children="Log In">
+      </Button>
       <NavBar
         profileImage="https://i.redd.it/white-pharaoh-in-school-textbook-v0-fgr8oliazlkd1.jpg?width=225&format=pjpg&auto=webp&s=04dc4c2c8a0170c4e161091673352cd966591475"
       ></NavBar>
diff --git a/frontend/src/Button/Button.module.css b/frontend/src/Button/Button.module.css
new file mode 100644
index 0000000..57e615e
--- /dev/null
+++ b/frontend/src/Button/Button.module.css
@@ -0,0 +1,29 @@
+.button {
+  background: hsl(203, 88%, 27%);
+  border: 0px;
+  border-radius: 8px;
+  width: fit-content;
+  font-size: 24px;
+  color: hsl(0, 0%, 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0px;
+  margin: 0px;
+  box-shadow: 0px 0px 4px rgb(0, 0, 0, 25%);
+}
+
+.button:hover {
+  background-color: hsl(202, 49%, 90%);
+  color: hsl(0, 0%, 0%);
+}
+
+.icon {
+  height: 64px;
+  padding: 16px;
+}
+
+.string {
+  padding: 12px 28px;
+  margin: 0px;
+}
diff --git a/frontend/src/Button/Button.tsx b/frontend/src/Button/Button.tsx
new file mode 100644
index 0000000..03fa8ad
--- /dev/null
+++ b/frontend/src/Button/Button.tsx
@@ -0,0 +1,36 @@
+import { PlusIcon } from '@heroicons/react/24/solid';
+import classes from './Button.module.css';
+import { BookmarkIcon } from '@heroicons/react/24/outline';
+
+export enum ButtonOptions {
+  String,
+  Plus,
+  Bookmark
+}
+
+type ButtonProps = {
+  children?: string;
+  type: ButtonOptions;
+};
+
+function Button(props: ButtonProps) {
+  return (
+    <button className={classes.button}>
+      {(props.type === ButtonOptions.Plus) && 
+        (<PlusIcon className={classes.icon}></PlusIcon>)
+      }
+
+      {(props.type === ButtonOptions.Bookmark) && 
+        (<BookmarkIcon className={classes.icon}></BookmarkIcon>)
+      }
+
+      {(props.type === ButtonOptions.String) && 
+        (<p
+          className={classes.string}
+        >{props.children}</p>)
+      }
+    </button>
+  );
+}
+
+export default Button;

From f8a71a66323857fe2b3375ee544b46609e8b47a9 Mon Sep 17 00:00:00 2001
From: Vincent Tannos <tannos.vincent@gmail.com>
Date: Tue, 12 Nov 2024 16:44:41 +1100
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=94=98=20Add=20Suggestions=20to=20But?=
 =?UTF-8?q?ton=20Component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- change rgb to hsl/a
- change p tag to span for string button
- change white colour to light blue
---
 frontend/src/App.tsx                  | 23 +++++++---------------
 frontend/src/Button/Button.module.css |  7 +++----
 frontend/src/Button/Button.tsx        | 28 +++++++++++++--------------
 3 files changed, 23 insertions(+), 35 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c895a29..0fa3b54 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,8 +2,8 @@ import "./App.css";
 import Event from "./Event/Event";
 import { Keyword, KeywordOptions } from "./Keyword/Keyword";
 import bbq from "./assets/bbq.png";
-import NavBar from './NavBar/NavBar';
-import Button, { ButtonOptions } from './Button/Button';
+import NavBar from "./NavBar/NavBar";
+import Button, { ButtonOptions } from "./Button/Button";
 
 function App() {
   return (
@@ -27,21 +27,12 @@ function App() {
       <Keyword type={KeywordOptions.Delete}>Frunk Dwindleward</Keyword>
       <Keyword type={KeywordOptions.Delete}>Frunk Dwindleward</Keyword>
       <Keyword type={KeywordOptions.Delete}>Frunk Dwindleward</Keyword>
-      <Button 
-        type={ButtonOptions.Plus}
-      ></Button>
-      <Button 
-        type={ButtonOptions.Bookmark}
-      ></Button>
-      <Button
-        type={ButtonOptions.String}
-        children="Log In">
-      </Button>
-      <NavBar
-        profileImage="https://i.redd.it/white-pharaoh-in-school-textbook-v0-fgr8oliazlkd1.jpg?width=225&format=pjpg&auto=webp&s=04dc4c2c8a0170c4e161091673352cd966591475"
-      ></NavBar>
+      <Button type={ButtonOptions.Plus}></Button>
+      <Button type={ButtonOptions.Bookmark}></Button>
+      <Button type={ButtonOptions.String}>Log in</Button>
+      <NavBar profileImage="https://i.redd.it/white-pharaoh-in-school-textbook-v0-fgr8oliazlkd1.jpg?width=225&format=pjpg&auto=webp&s=04dc4c2c8a0170c4e161091673352cd966591475"></NavBar>
     </>
   );
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/frontend/src/Button/Button.module.css b/frontend/src/Button/Button.module.css
index 57e615e..44bb114 100644
--- a/frontend/src/Button/Button.module.css
+++ b/frontend/src/Button/Button.module.css
@@ -4,18 +4,18 @@
   border-radius: 8px;
   width: fit-content;
   font-size: 24px;
-  color: hsl(0, 0%, 100%);
+  color: hsl(202, 49%, 90%);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0px;
   margin: 0px;
-  box-shadow: 0px 0px 4px rgb(0, 0, 0, 25%);
+  box-shadow: 0px 0px 4px hsla(0, 0%, 0%, 0.25);
 }
 
 .button:hover {
   background-color: hsl(202, 49%, 90%);
-  color: hsl(0, 0%, 0%);
+  color: hsla(0, 0%, 0%);
 }
 
 .icon {
@@ -25,5 +25,4 @@
 
 .string {
   padding: 12px 28px;
-  margin: 0px;
 }
diff --git a/frontend/src/Button/Button.tsx b/frontend/src/Button/Button.tsx
index 03fa8ad..f2d5054 100644
--- a/frontend/src/Button/Button.tsx
+++ b/frontend/src/Button/Button.tsx
@@ -1,11 +1,11 @@
-import { PlusIcon } from '@heroicons/react/24/solid';
-import classes from './Button.module.css';
-import { BookmarkIcon } from '@heroicons/react/24/outline';
+import { PlusIcon } from "@heroicons/react/24/solid";
+import classes from "./Button.module.css";
+import { BookmarkIcon } from "@heroicons/react/24/outline";
 
 export enum ButtonOptions {
   String,
   Plus,
-  Bookmark
+  Bookmark,
 }
 
 type ButtonProps = {
@@ -16,19 +16,17 @@ type ButtonProps = {
 function Button(props: ButtonProps) {
   return (
     <button className={classes.button}>
-      {(props.type === ButtonOptions.Plus) && 
-        (<PlusIcon className={classes.icon}></PlusIcon>)
-      }
+      {props.type === ButtonOptions.Plus && (
+        <PlusIcon className={classes.icon}></PlusIcon>
+      )}
 
-      {(props.type === ButtonOptions.Bookmark) && 
-        (<BookmarkIcon className={classes.icon}></BookmarkIcon>)
-      }
+      {props.type === ButtonOptions.Bookmark && (
+        <BookmarkIcon className={classes.icon}></BookmarkIcon>
+      )}
 
-      {(props.type === ButtonOptions.String) && 
-        (<p
-          className={classes.string}
-        >{props.children}</p>)
-      }
+      {props.type === ButtonOptions.String && (
+        <span className={classes.string}>{props.children}</span>
+      )}
     </button>
   );
 }