Dietary preferences Page

front-end/src/components/PreferenceBox.css

@@ -0,0 +1,24 @@
+.PreferenceBox {
+    background-color: lightgray;
+    padding: 40px 10px;
+    margin: 10px 20px;
+    border-radius: 20px;
+    border: 1px black solid;
+    flex: 33%;
+}
+
+.active-box {
+    box-shadow: 5px 3px 5px grey;
+}
+
+@media screen and (max-width: 650px) {
+    .PreferenceBox {
+        margin: 10px; 
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .PreferenceBox {
+        margin: 5px;
+    }
+}

front-end/src/components/PreferenceBox.jsx

@@ -0,0 +1,14 @@
+import './PreferenceBox.css';
+
+import React from 'react';
+
+function PreferenceBox(props) {
+
+  return (
+    <div className={ props.currActive == props.value ? "PreferenceBox active-box" : "PreferenceBox"} onClick={() => {props.sendToParent(props.value)}} key={props.value}>
+      <p>Preference #{props.value}</p> 
+    </div>
+  );
+}
+
+export default PreferenceBox;

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 {
 }
 

front-end/src/components/SkipButton.jsx

@@ -2,6 +2,7 @@ import './SkipButton.css';
 
 import React from 'react';
 
+
 function SkipButton() {
   return (
     <div className="SkipButton">

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;
+}

front-end/src/components/SubmitButton.jsx

@@ -0,0 +1,13 @@
+import './SubmitButton.css';
+
+import React from 'react';
+
+function SubmitButton() {
+  return (
+    <div className="SubmitButton">
+      <button id="submit-button">Submit</button>
+    </div>
+  );
+}
+
+export default SubmitButton;

front-end/src/pages/App.jsx

@@ -11,13 +11,13 @@ 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';
 import Footer from "../components/Footer";
 import Header from "../components/Header";
 
-
 function App() {
   return (
     <div className="App">
@@ -40,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>

front-end/src/pages/DietaryPreferences.css

@@ -0,0 +1,38 @@
+.DietaryPreferences #submit-button{
+    margin: 50px 10px;
+}
+
+#preferences-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#dp-select-text{
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+.pref-container{
+    display: flex;
+    justify-content: center;
+    width: 40%;
+}
+
+@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%;
+    }
+}

front-end/src/pages/DietaryPreferences.jsx

@@ -0,0 +1,42 @@
+import './DietaryPreferences.css';
+
+import SkipButton from '../components/SkipButton';
+import PreferenceBox from '../components/PreferenceBox';
+import SubmitButton from '../components/SubmitButton';
+
+import React from 'react';
+
+function DietaryPreferences() {
+  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 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 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 className="pref-container">
+          <PreferenceBox value={7} sendToParent={setActive} currActive={active}/>
+          <PreferenceBox value={8} sendToParent={setActive} currActive={active}/>
+          <PreferenceBox value={9} sendToParent={setActive} currActive={active}/>
+        </div>
+      </div>
+      <SubmitButton/>
+  </div>
+  );
+}
+
+export default DietaryPreferences;

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>
   );

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"
         />

front-end/src/pages/RandomCuisine.jsx

@@ -16,6 +16,6 @@ function RandomCuisine() {
       </div>
     </div>
   );
-};
+}
 
 export default RandomCuisine;