From 0d2d2c5fad6333ff6068877f9d716678089d16e7 Mon Sep 17 00:00:00 2001
From: Tanya Singh <ts3516@nyu.edu>
Date: Thu, 28 Oct 2021 00:28:39 -0400
Subject: [PATCH 1/6] created random cuisine page

---
 front-end/src/pages/App.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/front-end/src/pages/App.jsx b/front-end/src/pages/App.jsx
index 94a94fb..63024ab 100644
--- a/front-end/src/pages/App.jsx
+++ b/front-end/src/pages/App.jsx
@@ -17,7 +17,6 @@ import Wait from './Wait';
 import Footer from "../components/Footer";
 import Header from "../components/Header";
 
-
 function App() {
   return (
     <div className="App">

From 37b6cfe80cb38271d62badaab667b7e02f074f0d Mon Sep 17 00:00:00 2001
From: Tanya Singh <ts3516@nyu.edu>
Date: Thu, 28 Oct 2021 04:50:16 -0400
Subject: [PATCH 2/6] created skip button and submit button components. began
 creating the dietary preferences page, still need to implement functions for
 when a preference is clicked (box border changes color to green)

---
 front-end/src/components/SkipButton.css    |  3 ++
 front-end/src/components/SkipButton.jsx    |  8 +++++
 front-end/src/components/SubmitButton.css  | 11 +++++++
 front-end/src/components/SubmitButton.jsx  | 13 +++++++++
 front-end/src/pages/App.jsx                |  2 ++
 front-end/src/pages/DietaryPreferences.css | 22 ++++++++++++++
 front-end/src/pages/DietaryPreferences.jsx | 34 ++++++++++++++++++++++
 7 files changed, 93 insertions(+)
 create mode 100644 front-end/src/components/SubmitButton.css
 create mode 100644 front-end/src/components/SubmitButton.jsx
 create mode 100644 front-end/src/pages/DietaryPreferences.css
 create mode 100644 front-end/src/pages/DietaryPreferences.jsx

diff --git a/front-end/src/components/SkipButton.css b/front-end/src/components/SkipButton.css
index d4d9407..622ec2c 100644
--- a/front-end/src/components/SkipButton.css
+++ b/front-end/src/components/SkipButton.css
@@ -1,4 +1,7 @@
+<<<<<<< HEAD
 
+=======
+>>>>>>> created skip button and submit button components. began creating the dietary preferences page, still need to implement functions for when a preference is clicked (box border changes color to green)
 .SkipButton {
 }
 
diff --git a/front-end/src/components/SkipButton.jsx b/front-end/src/components/SkipButton.jsx
index 47425e5..02ce421 100644
--- a/front-end/src/components/SkipButton.jsx
+++ b/front-end/src/components/SkipButton.jsx
@@ -2,12 +2,20 @@ import './SkipButton.css';
 
 import React from 'react';
 
+<<<<<<< HEAD
 function SkipButton() {
+=======
+function SkipButton(props) {
+>>>>>>> created skip button and submit button components. began creating the dietary preferences page, still need to implement functions for when a preference is clicked (box border changes color to green)
   return (
     <div className="SkipButton">
       <button id="skip-button">Skip</button>
     </div>
   );
+<<<<<<< HEAD
 }
+=======
+};
+>>>>>>> created skip button and submit button components. began creating the dietary preferences page, still need to implement functions for when a preference is clicked (box border changes color to green)
 
 export default SkipButton;
\ No newline at end of file
diff --git a/front-end/src/components/SubmitButton.css b/front-end/src/components/SubmitButton.css
new file mode 100644
index 0000000..ee653b2
--- /dev/null
+++ b/front-end/src/components/SubmitButton.css
@@ -0,0 +1,11 @@
+.SubmitButton {
+}
+
+#submit-button{
+    color:white;
+    padding: 16px 140px;
+    background-color: #3F3F3F; 
+    font-weight: bold;
+    margin-top: 50px;
+    font-size: 16px;
+}
\ No newline at end of file
diff --git a/front-end/src/components/SubmitButton.jsx b/front-end/src/components/SubmitButton.jsx
new file mode 100644
index 0000000..ccf678f
--- /dev/null
+++ b/front-end/src/components/SubmitButton.jsx
@@ -0,0 +1,13 @@
+import './SubmitButton.css';
+
+import React from 'react';
+
+function SubmitButton(props) {
+  return (
+    <div className="SubmitButton">
+      <button id="submit-button">Submit</button>
+    </div>
+  );
+};
+
+export default SubmitButton;
\ No newline at end of file
diff --git a/front-end/src/pages/App.jsx b/front-end/src/pages/App.jsx
index 63024ab..fa69f36 100644
--- a/front-end/src/pages/App.jsx
+++ b/front-end/src/pages/App.jsx
@@ -11,6 +11,7 @@ import CuisineVote from './CuisineVote';
 import ChooseCuisine from './ChooseCuisine';
 import RandomCuisine from './RandomCuisine';
 import WinningCuisine from './WinningCuisine';
+import DietaryPreferences from './DietaryPreferences';
 import ResultsPage from "./ResultsPage";
 import RestaurauntDetails from "../pages/RestaurantDetails";
 import Wait from './Wait';
@@ -39,6 +40,7 @@ function App() {
         <Route path='/choose' component={ChooseCuisine} exact />
         <Route path='/random' component={RandomCuisine} exact />
         <Route path='/win' component={WinningCuisine} exact />
+        <Route path='/dietary' component={DietaryPreferences} exact/>
       </Switch>
       <Footer />
     </div>
diff --git a/front-end/src/pages/DietaryPreferences.css b/front-end/src/pages/DietaryPreferences.css
new file mode 100644
index 0000000..649b4fe
--- /dev/null
+++ b/front-end/src/pages/DietaryPreferences.css
@@ -0,0 +1,22 @@
+.DietaryPreferences {
+}
+
+#dp-select-text{
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+#preferences-container{
+}
+.pref-container{
+    display: flex;
+    justify-content: center;
+}
+
+#pref1, #pref2, #pref3, #pref4, #pref5, #pref6, #pref7, #pref8, #pref9 {
+    background-color: lightgray;
+    padding: 40px 10px;
+    margin: 10px;
+    border-radius: 20px;
+    border: 1px black solid;
+} 
diff --git a/front-end/src/pages/DietaryPreferences.jsx b/front-end/src/pages/DietaryPreferences.jsx
new file mode 100644
index 0000000..3809fd3
--- /dev/null
+++ b/front-end/src/pages/DietaryPreferences.jsx
@@ -0,0 +1,34 @@
+import './DietaryPreferences.css';
+import SkipButton from '../components/SkipButton';
+
+import React from 'react';
+import SubmitButton from '../components/SubmitButton';
+
+function DietaryPreferences(props) {
+  return (
+    <div className="DietaryPreferences">
+      <SkipButton/>
+      <div id="dp-select-text">Select any dietary preferences</div>
+    <div id="preferences-container">
+      <div class="pref-container">
+        <div id="pref1" >Preference</div>
+        <div id="pref2" > Preference</div>
+        <div id="pref3" >Preference</div>
+      </div>
+      <div class="pref-container">
+        <div id="pref4" >Preference</div>
+        <div id="pref5"> Preference</div>
+        <div id="pref6">Preference</div>
+      </div>
+      <div class="pref-container">
+        <div id="pref7" >Preference</div>
+        <div id="pref8" >Preference</div>
+        <div id="pref9" >Preference</div>
+      </div>
+    </div>
+    <SubmitButton/>
+  </div>
+  );
+};
+
+export default DietaryPreferences;
\ No newline at end of file

From aa205a412cc04569ea95ee6d7cb4687265e1b615 Mon Sep 17 00:00:00 2001
From: Jen-Lopez <jennlolopz@gmail.com>
Date: Thu, 4 Nov 2021 12:52:57 -0400
Subject: [PATCH 3/6] fix user link

---
 front-end/src/pages/InviteCode.jsx | 6 ++++--
 front-end/src/pages/JoinRoom.jsx   | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/front-end/src/pages/InviteCode.jsx b/front-end/src/pages/InviteCode.jsx
index 114c85c..820ca93 100644
--- a/front-end/src/pages/InviteCode.jsx
+++ b/front-end/src/pages/InviteCode.jsx
@@ -26,8 +26,10 @@ function InviteCode() {
         </button>
       </div>
       <Spacer space="75" />
-      <Link to="/user" className="InviteCode__button">
-        <RoomButton content="Continue" />
+      <Link to="/new-user" className="InviteCode__button">
+        <RoomButton
+          content="Continue"
+        />
       </Link>
     </div>
   );
diff --git a/front-end/src/pages/JoinRoom.jsx b/front-end/src/pages/JoinRoom.jsx
index fafee03..84fd7e1 100644
--- a/front-end/src/pages/JoinRoom.jsx
+++ b/front-end/src/pages/JoinRoom.jsx
@@ -14,7 +14,7 @@ function JoinRoom() {
       </div>
       <InviteCodeInput />
       <Spacer space="75"/>
-      <Link to="/user" className="JoinRoom__button">
+      <Link to="/new-user" className="JoinRoom__button">
         <RoomButton
           content="Join"
         />

From ea11f23f6891700d1a82fdb6fd5fa0e03af2d2c2 Mon Sep 17 00:00:00 2001
From: Jen-Lopez <jennlolopz@gmail.com>
Date: Thu, 4 Nov 2021 13:22:34 -0400
Subject: [PATCH 4/6] convert preference to component, fix styling

---
 front-end/src/components/PreferenceBox.css | 21 ++++++++++++
 front-end/src/components/PreferenceBox.jsx | 13 ++++++++
 front-end/src/pages/DietaryPreferences.css | 36 ++++++++++++++------
 front-end/src/pages/DietaryPreferences.jsx | 38 ++++++++++++----------
 4 files changed, 80 insertions(+), 28 deletions(-)
 create mode 100644 front-end/src/components/PreferenceBox.css
 create mode 100644 front-end/src/components/PreferenceBox.jsx

diff --git a/front-end/src/components/PreferenceBox.css b/front-end/src/components/PreferenceBox.css
new file mode 100644
index 0000000..9c5a36d
--- /dev/null
+++ b/front-end/src/components/PreferenceBox.css
@@ -0,0 +1,21 @@
+.PreferenceBox {
+    background-color: lightgray;
+    padding: 40px 10px;
+    margin: 10px 20px;
+    border-radius: 20px;
+    border: 1px black solid;
+    flex: 33%;
+}
+
+
+@media screen and (max-width: 650px) {
+    .PreferenceBox {
+        margin: 10px; 
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .PreferenceBox {
+        margin: 5px;
+    }
+}
diff --git a/front-end/src/components/PreferenceBox.jsx b/front-end/src/components/PreferenceBox.jsx
new file mode 100644
index 0000000..ae7552c
--- /dev/null
+++ b/front-end/src/components/PreferenceBox.jsx
@@ -0,0 +1,13 @@
+import './PreferenceBox.css';
+
+import React from 'react';
+
+function PreferenceBox(props) {
+  return (
+    <div className="PreferenceBox"> 
+      <p>Preference</p> 
+    </div>
+  );
+};
+
+export default PreferenceBox;
\ No newline at end of file
diff --git a/front-end/src/pages/DietaryPreferences.css b/front-end/src/pages/DietaryPreferences.css
index 649b4fe..cadf60e 100644
--- a/front-end/src/pages/DietaryPreferences.css
+++ b/front-end/src/pages/DietaryPreferences.css
@@ -1,4 +1,11 @@
-.DietaryPreferences {
+.DietaryPreferences #submit-button{
+    margin: 50px 10px;
+}
+
+#preferences-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 #dp-select-text{
@@ -6,17 +13,26 @@
     margin-bottom: 50px;
 }
 
-#preferences-container{
-}
 .pref-container{
     display: flex;
     justify-content: center;
+    width: 40%;
 }
 
-#pref1, #pref2, #pref3, #pref4, #pref5, #pref6, #pref7, #pref8, #pref9 {
-    background-color: lightgray;
-    padding: 40px 10px;
-    margin: 10px;
-    border-radius: 20px;
-    border: 1px black solid;
-} 
+@media screen and (max-width: 1200px) {
+    .pref-container {
+        width: 60%;
+    }
+}
+
+@media screen and (max-width: 900px) {
+    .pref-container {
+        width: 80%;
+    }
+}
+
+@media screen and (max-width: 650px) {
+    .pref-container {
+        width: 100%;
+    }
+}
diff --git a/front-end/src/pages/DietaryPreferences.jsx b/front-end/src/pages/DietaryPreferences.jsx
index 3809fd3..43646c6 100644
--- a/front-end/src/pages/DietaryPreferences.jsx
+++ b/front-end/src/pages/DietaryPreferences.jsx
@@ -1,32 +1,34 @@
 import './DietaryPreferences.css';
+
 import SkipButton from '../components/SkipButton';
+import PreferenceBox from '../components/PreferenceBox';
+import SubmitButton from '../components/SubmitButton';
 
 import React from 'react';
-import SubmitButton from '../components/SubmitButton';
 
 function DietaryPreferences(props) {
   return (
     <div className="DietaryPreferences">
       <SkipButton/>
       <div id="dp-select-text">Select any dietary preferences</div>
-    <div id="preferences-container">
-      <div class="pref-container">
-        <div id="pref1" >Preference</div>
-        <div id="pref2" > Preference</div>
-        <div id="pref3" >Preference</div>
-      </div>
-      <div class="pref-container">
-        <div id="pref4" >Preference</div>
-        <div id="pref5"> Preference</div>
-        <div id="pref6">Preference</div>
-      </div>
-      <div class="pref-container">
-        <div id="pref7" >Preference</div>
-        <div id="pref8" >Preference</div>
-        <div id="pref9" >Preference</div>
+      <div id="preferences-container">
+        <div class="pref-container">
+          <PreferenceBox/>
+          <PreferenceBox/>
+          <PreferenceBox/>
+        </div>
+        <div class="pref-container">
+          <PreferenceBox/>
+          <PreferenceBox/>
+          <PreferenceBox/>
+        </div>
+        <div class="pref-container">
+          <PreferenceBox/>
+          <PreferenceBox/>
+          <PreferenceBox/>
+        </div>
       </div>
-    </div>
-    <SubmitButton/>
+      <SubmitButton/>
   </div>
   );
 };

From 3f1490ca5fe0d3d3643412c06cfa15ccf94aa7cf Mon Sep 17 00:00:00 2001
From: Jen-Lopez <jennlolopz@gmail.com>
Date: Thu, 4 Nov 2021 13:39:41 -0400
Subject: [PATCH 5/6] add box shadow on component click

---
 front-end/src/components/PreferenceBox.css |  3 +++
 front-end/src/components/PreferenceBox.jsx |  5 +++--
 front-end/src/pages/DietaryPreferences.jsx | 24 ++++++++++++++--------
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/front-end/src/components/PreferenceBox.css b/front-end/src/components/PreferenceBox.css
index 9c5a36d..dae28b7 100644
--- a/front-end/src/components/PreferenceBox.css
+++ b/front-end/src/components/PreferenceBox.css
@@ -7,6 +7,9 @@
     flex: 33%;
 }
 
+.active-box {
+    box-shadow: 5px 3px 5px grey;
+}
 
 @media screen and (max-width: 650px) {
     .PreferenceBox {
diff --git a/front-end/src/components/PreferenceBox.jsx b/front-end/src/components/PreferenceBox.jsx
index ae7552c..064c622 100644
--- a/front-end/src/components/PreferenceBox.jsx
+++ b/front-end/src/components/PreferenceBox.jsx
@@ -3,9 +3,10 @@ import './PreferenceBox.css';
 import React from 'react';
 
 function PreferenceBox(props) {
+
   return (
-    <div className="PreferenceBox"> 
-      <p>Preference</p> 
+    <div className={ props.currActive == props.value ? "PreferenceBox active-box" : "PreferenceBox"} onClick={() => {props.sendToParent(props.value)}} key={props.value}>
+      <p>Preference #{props.value}</p> 
     </div>
   );
 };
diff --git a/front-end/src/pages/DietaryPreferences.jsx b/front-end/src/pages/DietaryPreferences.jsx
index 43646c6..798920a 100644
--- a/front-end/src/pages/DietaryPreferences.jsx
+++ b/front-end/src/pages/DietaryPreferences.jsx
@@ -7,25 +7,31 @@ import SubmitButton from '../components/SubmitButton';
 import React from 'react';
 
 function DietaryPreferences(props) {
+  const [active, setActive] = React.useState(-1);
+
+  const sendToParent = (index) => {
+    setActive(index);
+  }
+
   return (
     <div className="DietaryPreferences">
       <SkipButton/>
       <div id="dp-select-text">Select any dietary preferences</div>
       <div id="preferences-container">
         <div class="pref-container">
-          <PreferenceBox/>
-          <PreferenceBox/>
-          <PreferenceBox/>
+          <PreferenceBox value={1} sendToParent={sendToParent} currActive={active}/>
+          <PreferenceBox value={2} sendToParent={sendToParent} currActive={active}/>
+          <PreferenceBox value={3} sendToParent={sendToParent} currActive={active}/>
         </div>
         <div class="pref-container">
-          <PreferenceBox/>
-          <PreferenceBox/>
-          <PreferenceBox/>
+          <PreferenceBox value={4} sendToParent={sendToParent} currActive={active}/>
+          <PreferenceBox value={5} sendToParent={sendToParent} currActive={active}/>
+          <PreferenceBox value={6} sendToParent={sendToParent} currActive={active}/>
         </div>
         <div class="pref-container">
-          <PreferenceBox/>
-          <PreferenceBox/>
-          <PreferenceBox/>
+          <PreferenceBox value={7} sendToParent={setActive} currActive={active}/>
+          <PreferenceBox value={8} sendToParent={setActive} currActive={active}/>
+          <PreferenceBox value={9} sendToParent={setActive} currActive={active}/>
         </div>
       </div>
       <SubmitButton/>

From 165907185df0187f3e7f6083b0dae96acdbcefc1 Mon Sep 17 00:00:00 2001
From: Jen-Lopez <jennlolopz@gmail.com>
Date: Thu, 4 Nov 2021 14:48:44 -0400
Subject: [PATCH 6/6] fix lint errors

---
 front-end/src/components/PreferenceBox.jsx |  2 +-
 front-end/src/components/SkipButton.jsx    |  9 +--------
 front-end/src/components/SubmitButton.jsx  |  4 ++--
 front-end/src/pages/DietaryPreferences.jsx | 10 +++++-----
 front-end/src/pages/RandomCuisine.jsx      |  2 +-
 5 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/front-end/src/components/PreferenceBox.jsx b/front-end/src/components/PreferenceBox.jsx
index 064c622..563c6d3 100644
--- a/front-end/src/components/PreferenceBox.jsx
+++ b/front-end/src/components/PreferenceBox.jsx
@@ -9,6 +9,6 @@ function PreferenceBox(props) {
       <p>Preference #{props.value}</p> 
     </div>
   );
-};
+}
 
 export default PreferenceBox;
\ No newline at end of file
diff --git a/front-end/src/components/SkipButton.jsx b/front-end/src/components/SkipButton.jsx
index 02ce421..00319ed 100644
--- a/front-end/src/components/SkipButton.jsx
+++ b/front-end/src/components/SkipButton.jsx
@@ -2,20 +2,13 @@ import './SkipButton.css';
 
 import React from 'react';
 
-<<<<<<< HEAD
+
 function SkipButton() {
-=======
-function SkipButton(props) {
->>>>>>> created skip button and submit button components. began creating the dietary preferences page, still need to implement functions for when a preference is clicked (box border changes color to green)
   return (
     <div className="SkipButton">
       <button id="skip-button">Skip</button>
     </div>
   );
-<<<<<<< HEAD
 }
-=======
-};
->>>>>>> created skip button and submit button components. began creating the dietary preferences page, still need to implement functions for when a preference is clicked (box border changes color to green)
 
 export default SkipButton;
\ No newline at end of file
diff --git a/front-end/src/components/SubmitButton.jsx b/front-end/src/components/SubmitButton.jsx
index ccf678f..df2e864 100644
--- a/front-end/src/components/SubmitButton.jsx
+++ b/front-end/src/components/SubmitButton.jsx
@@ -2,12 +2,12 @@ import './SubmitButton.css';
 
 import React from 'react';
 
-function SubmitButton(props) {
+function SubmitButton() {
   return (
     <div className="SubmitButton">
       <button id="submit-button">Submit</button>
     </div>
   );
-};
+}
 
 export default SubmitButton;
\ No newline at end of file
diff --git a/front-end/src/pages/DietaryPreferences.jsx b/front-end/src/pages/DietaryPreferences.jsx
index 798920a..3099e8f 100644
--- a/front-end/src/pages/DietaryPreferences.jsx
+++ b/front-end/src/pages/DietaryPreferences.jsx
@@ -6,7 +6,7 @@ import SubmitButton from '../components/SubmitButton';
 
 import React from 'react';
 
-function DietaryPreferences(props) {
+function DietaryPreferences() {
   const [active, setActive] = React.useState(-1);
 
   const sendToParent = (index) => {
@@ -18,17 +18,17 @@ function DietaryPreferences(props) {
       <SkipButton/>
       <div id="dp-select-text">Select any dietary preferences</div>
       <div id="preferences-container">
-        <div class="pref-container">
+        <div className="pref-container">
           <PreferenceBox value={1} sendToParent={sendToParent} currActive={active}/>
           <PreferenceBox value={2} sendToParent={sendToParent} currActive={active}/>
           <PreferenceBox value={3} sendToParent={sendToParent} currActive={active}/>
         </div>
-        <div class="pref-container">
+        <div className="pref-container">
           <PreferenceBox value={4} sendToParent={sendToParent} currActive={active}/>
           <PreferenceBox value={5} sendToParent={sendToParent} currActive={active}/>
           <PreferenceBox value={6} sendToParent={sendToParent} currActive={active}/>
         </div>
-        <div class="pref-container">
+        <div className="pref-container">
           <PreferenceBox value={7} sendToParent={setActive} currActive={active}/>
           <PreferenceBox value={8} sendToParent={setActive} currActive={active}/>
           <PreferenceBox value={9} sendToParent={setActive} currActive={active}/>
@@ -37,6 +37,6 @@ function DietaryPreferences(props) {
       <SubmitButton/>
   </div>
   );
-};
+}
 
 export default DietaryPreferences;
\ No newline at end of file
diff --git a/front-end/src/pages/RandomCuisine.jsx b/front-end/src/pages/RandomCuisine.jsx
index e9a8a81..029cd69 100644
--- a/front-end/src/pages/RandomCuisine.jsx
+++ b/front-end/src/pages/RandomCuisine.jsx
@@ -16,6 +16,6 @@ function RandomCuisine() {
       </div>
     </div>
   );
-};
+}
 
 export default RandomCuisine;
\ No newline at end of file