Play state

src/meta/play-meta.js

@@ -130,4 +130,3 @@ export const plays = [
 ];
 
 
-

src/plays/states/States.css

@@ -4,6 +4,10 @@
   flex-direction: column;
 }
 
+.play-area-result {
+  margin-left: 2rem;
+}
+
 .play-area {
   border-right-width: 0.1rem;
   border-right-style: solid;
@@ -26,12 +30,28 @@
 .submit-button {
   height: 2rem;
   width: 6rem;
-  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 1rem;
   background: rgb(108, 226, 252);
   border: none;
   outline: none;
   margin-top: 1.2rem;
   margin-left: 4rem;
   border-radius: 1rem;
+}
+
+@media only screen and (max-width: 760px)  {
+  .play-area-container {
+    display: flex;
+    flex-direction: column;
+    margin-top: 3rem;
+  }
+
+  .play-area {
+    border: none;
+  }
+
+  .play-area-result {
+    margin-left: 0.5rem;
+    margin-top: 1.5rem;
+  }
 }

src/plays/states/States.jsx

@@ -3,10 +3,9 @@ import { getPlayById } from "meta/play-meta-util";
 import PlayHeader from "common/playlists/PlayHeader";
 import "./states.css";
 
-function States(props) {
-  // Do not remove the below lines.
-  // The following code is to fetch the current play from the URL
-  const { id } = props;
+function States() {
+  const location = useLocation();
+  const { id } = location.state;
   const play = getPlayById(id);
 
   // Your Code Start below.
@@ -34,6 +33,21 @@ function States(props) {
   const handleDurationChange = (e) => {
     setDuration(e.target.value);
   };
+=======
+
+import { useLocation } from 'react-router-dom';
+import { getPlayById } from 'meta/play-meta-util';
+
+import PlayHeader from 'common/playlists/PlayHeader';
+
+function States() {
+  // Do not remove the below lines. 
+  // The following code is to fetch the current play from the URL
+  const location = useLocation();
+  const { id } = location.state;
+  const play = getPlayById(id);
+
+  // Your Code Start below.
 
   return (
     <>
@@ -82,9 +96,9 @@ function States(props) {
 
               <div className="play-area-result">
                 {!display ? (
-                  <p style={{marginLeft: '2rem'}}>Enter Details of the Message</p>
+                  <p >Enter Details of the Message</p>
                 ) : (
-                  <h3 style={{marginLeft: '2rem'}}>Welcome to State Play, {name} </h3>
+                  <h3 >Welcome to State Play, {name} </h3>
                 )}
               </div>
             </div>

src/plays/states/states.css

@@ -4,6 +4,10 @@
   flex-direction: column;
 }
 
+.play-area-result {
+  margin-left: 2rem;
+}
+
 .play-area {
   border-right-width: 0.1rem;
   border-right-style: solid;
@@ -26,12 +30,28 @@
 .submit-button {
   height: 2rem;
   width: 6rem;
-  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 1rem;
   background: rgb(108, 226, 252);
   border: none;
   outline: none;
   margin-top: 1.2rem;
   margin-left: 4rem;
   border-radius: 1rem;
+}
+
+@media only screen and (max-width: 760px)  {
+  .play-area-container {
+    display: flex;
+    flex-direction: column;
+    margin-top: 3rem;
+  }
+
+  .play-area {
+    border: none;
+  }
+
+  .play-area-result {
+    margin-left: 0.5rem;
+    margin-top: 1.5rem;
+  }
 }