From d7649263102eeb0111e27193617bc616a2167c34 Mon Sep 17 00:00:00 2001
From: DominicS99 <dominic.sagen@gmail.com>
Date: Sat, 26 Oct 2024 17:50:14 -0700
Subject: [PATCH 1/4] Creating Box

---
 workspaces/simon-game/src/app/components/App.tsx | 10 +++++-----
 workspaces/simon-game/src/app/components/Box.tsx | 16 ++++++++++++++++
 2 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 workspaces/simon-game/src/app/components/Box.tsx

diff --git a/workspaces/simon-game/src/app/components/App.tsx b/workspaces/simon-game/src/app/components/App.tsx
index 3eaddacc..39b8b3b6 100644
--- a/workspaces/simon-game/src/app/components/App.tsx
+++ b/workspaces/simon-game/src/app/components/App.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 
+import { Box } from "./Box.tsx";
+
 export function App() {
   return (
     <div>
-      <div
-        style={{ backgroundColor: "lightblue", height: 100, width: 100 }}
-      ></div>
-      <div style={{ backgroundColor: "orange", height: 100, width: 100 }}></div>
-      <div style={{ backgroundColor: "green", height: 100, width: 100 }}></div>
+      <Box color="green" />
+      <Box />
+      <Box />
     </div>
   );
 }
diff --git a/workspaces/simon-game/src/app/components/Box.tsx b/workspaces/simon-game/src/app/components/Box.tsx
new file mode 100644
index 00000000..29603cb8
--- /dev/null
+++ b/workspaces/simon-game/src/app/components/Box.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+type Props = { color?: string };
+
+export function Box(props: Props) {
+  const style = {
+    backgroundColor: props.color || "lightblue",
+    height: 100,
+    width: 100,
+  };
+  return (
+    <div
+      style= {style}
+    />
+  );
+}
\ No newline at end of file

From a018dbcfe3dbf23b7fd86d5eeb7feed12cc208eb Mon Sep 17 00:00:00 2001
From: DominicS99 <dominic.sagen@gmail.com>
Date: Sun, 27 Oct 2024 18:29:55 -0700
Subject: [PATCH 2/4] Style updates to App and Box. Box objects will have
 rounded corners and spaces; added null op; dynamic height and width updated.

App now has 4 boxes of different colors
---
 .../simon-game/src/app/components/App.tsx       |  5 +++--
 .../simon-game/src/app/components/Box.tsx       | 17 +++++++++--------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/workspaces/simon-game/src/app/components/App.tsx b/workspaces/simon-game/src/app/components/App.tsx
index 39b8b3b6..5d77238e 100644
--- a/workspaces/simon-game/src/app/components/App.tsx
+++ b/workspaces/simon-game/src/app/components/App.tsx
@@ -5,9 +5,10 @@ import { Box } from "./Box.tsx";
 export function App() {
   return (
     <div>
+      <Box color="red" />
+      <Box color="#0050B5" /> //cobalt blue
       <Box color="green" />
-      <Box />
-      <Box />
+      <Box color="yellow" />
     </div>
   );
 }
diff --git a/workspaces/simon-game/src/app/components/Box.tsx b/workspaces/simon-game/src/app/components/Box.tsx
index 29603cb8..73298c58 100644
--- a/workspaces/simon-game/src/app/components/Box.tsx
+++ b/workspaces/simon-game/src/app/components/Box.tsx
@@ -1,16 +1,17 @@
 import React from "react";
 
-type Props = { color?: string };
+type Props = { color?: string; height?: number; width?: number };
 
 export function Box(props: Props) {
-  const style = {
-    backgroundColor: props.color || "lightblue",
-    height: 100,
-    width: 100,
-  };
   return (
     <div
-      style= {style}
+      style={{
+        backgroundColor: props.color ?? "lightblue",
+        height: props.height ?? 100,
+        width: props.width ?? 100,
+        borderRadius: 20, // rounded corners
+        margin: 10, // spaces
+      }}
     />
   );
-}
\ No newline at end of file
+}

From 675c417a6e6f1dc1a42aa5442f1e5c7d8597e489 Mon Sep 17 00:00:00 2001
From: DominicS99 <98355617+DominicS99@users.noreply.github.com>
Date: Mon, 28 Oct 2024 06:02:15 -0700
Subject: [PATCH 3/4] Update workspaces/simon-game/src/app/components/App.tsx

Co-authored-by: Miorel-Lucian Palii <mlpalii@gmail.com>
---
 workspaces/simon-game/src/app/components/App.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/workspaces/simon-game/src/app/components/App.tsx b/workspaces/simon-game/src/app/components/App.tsx
index 5d77238e..4c0d369c 100644
--- a/workspaces/simon-game/src/app/components/App.tsx
+++ b/workspaces/simon-game/src/app/components/App.tsx
@@ -6,7 +6,10 @@ export function App() {
   return (
     <div>
       <Box color="red" />
-      <Box color="#0050B5" /> //cobalt blue
+      <Box color={
+        // cobalt blue
+        "#0050B5"
+      } /> 
       <Box color="green" />
       <Box color="yellow" />
     </div>

From d4b549e98e3a885183a2edcd05798bf031f0fca1 Mon Sep 17 00:00:00 2001
From: DominicS99 <dominic.sagen@gmail.com>
Date: Mon, 28 Oct 2024 06:07:57 -0700
Subject: [PATCH 4/4] Run with yarn format, and made margin a prop component

---
 workspaces/simon-game/src/app/components/App.tsx | 10 ++++++----
 workspaces/simon-game/src/app/components/Box.tsx |  9 +++++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/workspaces/simon-game/src/app/components/App.tsx b/workspaces/simon-game/src/app/components/App.tsx
index 4c0d369c..895d9015 100644
--- a/workspaces/simon-game/src/app/components/App.tsx
+++ b/workspaces/simon-game/src/app/components/App.tsx
@@ -6,10 +6,12 @@ export function App() {
   return (
     <div>
       <Box color="red" />
-      <Box color={
-        // cobalt blue
-        "#0050B5"
-      } /> 
+      <Box
+        color={
+          // cobalt blue
+          "#0050B5"
+        }
+      />
       <Box color="green" />
       <Box color="yellow" />
     </div>
diff --git a/workspaces/simon-game/src/app/components/Box.tsx b/workspaces/simon-game/src/app/components/Box.tsx
index 73298c58..41032b28 100644
--- a/workspaces/simon-game/src/app/components/Box.tsx
+++ b/workspaces/simon-game/src/app/components/Box.tsx
@@ -1,6 +1,11 @@
 import React from "react";
 
-type Props = { color?: string; height?: number; width?: number };
+type Props = {
+  color?: string;
+  height?: number;
+  width?: number;
+  margin?: number;
+};
 
 export function Box(props: Props) {
   return (
@@ -10,7 +15,7 @@ export function Box(props: Props) {
         height: props.height ?? 100,
         width: props.width ?? 100,
         borderRadius: 20, // rounded corners
-        margin: 10, // spaces
+        margin: props.margin, // spaces between boxes
       }}
     />
   );