Add AuthContext to FormReview and adjust image detail

src/components/ReviewForm.js

@@ -1,10 +1,16 @@
 import Form from "react-bootstrap/Form"
 import Button from "react-bootstrap/Button"
 
+import { AuthContext } from "../contexts/AuthContext"
+import { useContext } from "react"
+
+
 export function ReviewForm(props) {
+  const auth = useContext(AuthContext)
+  if (auth) {
     return (
       <Form>
-      <h3>Rewiew this movie</h3>
+        <h3>Review this movie</h3>
         <Form.Group>
           <Form.Label>Star</Form.Label>
           <Form.Select>
@@ -26,4 +32,8 @@ export function ReviewForm(props) {
         <Button type="submit" variant="primary">Submit</Button>
       </Form>
     )
+  }
+  else {
+    return null
+  }
 }

src/pages/Detail.js

@@ -27,10 +27,10 @@ export function Detail(props) {
                     </Col>
                 </Row>
                 <Row>
-                    <Col md={6}>
+                    <Col md={4}>
                         <ItemImage source={movieData.cover_image} />
                     </Col>
-                    <Col md={6}>
+                    <Col md={8}>
                         <h2>More Information</h2>
                         <h3>Synopsis</h3>
                         <p>{movieData.synopsis}</p>
@@ -57,4 +57,4 @@ export function Detail(props) {
         return null;
 
     }
-    }
+}