refactor: changed design to be more responsive

Rustic-Citrus · Jun 30, 2024 · 07eadfb · 07eadfb
1 parent 3399dcb
commit 07eadfb
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 57 deletions.
diff --git a/src/components/LessonPlanCreate.jsx b/src/components/LessonPlanCreate.jsx
@@ -1,3 +1,4 @@
+import Container from "react-bootstrap/Container";
 import Col from "react-bootstrap/Col";
 import Row from "react-bootstrap/Row";
 import Image from "react-bootstrap/Image";
@@ -42,14 +43,17 @@ export const LessonPlanCreate = () => {
 
   const [lessonPlan, setLessonPlan] = useState(lessonPlanTemplate);
   const [authorised, setAuthorised] = useState(false);
-  
+
   useEffect(() => {
     if (user._id === userId) {
       setAuthorised(true);
     }
 
     if (!lessonApiRef.current) {
-      lessonApiRef.current = new LessonPlanAPI(import.meta.env.VITE_API_ENDPOINT, userId);
+      lessonApiRef.current = new LessonPlanAPI(
+        import.meta.env.VITE_API_ENDPOINT,
+        userId
+      );
     }
   }, [user, userId, authorised]);
 
@@ -114,38 +118,38 @@ export const LessonPlanCreate = () => {
 
   return (
     <>
-      <Row>
-        <Col xs={2}>
-          <Link to={`/simplifica-frontend/${userId}`}>
-            <Button
-              variant="outline-secondary"
-              className="mx-5 my-2"
-              title="Go back to profile."
-              aria-label="back-button"
-            >
-              <Image src="/simplifica-frontend/arrow-left.svg"></Image>
-            </Button>
-          </Link>
-        </Col>
-      </Row>
+      <Container>
+        <Row>
+          <Col xs={2}>
+            <Link to={`/simplifica-frontend/${userId}`}>
+              <Button
+                variant="outline-secondary"
+                className="mx-3 mx-lg-5 my-2"
+                title="Go back to profile."
+                aria-label="back-button"
+              >
+                <Image src="/simplifica-frontend/arrow-left.svg"></Image>
+              </Button>
+            </Link>
+          </Col>
+        </Row>
+      </Container>
 
-      <Card className="mx-5">
+      <Card className="mx-3 mx-lg-5">
         <Card.Header>New Lesson Plan</Card.Header>
         <Card.Body>
           <Form>
-            <Card.Title>
+            <Card.Title className="mb-3">
               <Row className="align-items-center">
                 <Col xs={9} sm={10} md={10}>
                   <Form.Group>
-                    <FloatingLabel controlId="topic" label="Lesson Topic">
-                      <Form.Control
-                        type="text"
-                        placeholder="Lesson Topic"
-                        aria-label="topic-input"
-                        name="topic"
-                        onChange={handleChange}
-                      />
-                    </FloatingLabel>
+                    <Form.Control
+                      type="text"
+                      placeholder="Lesson Topic"
+                      aria-label="topic-input"
+                      name="topic"
+                      onChange={handleChange}
+                    />
                   </Form.Group>
                 </Col>
                 <Col xs={1} sm={2} md={{ span: 1, offset: 1 }}>

diff --git a/src/components/LessonPlanView.jsx b/src/components/LessonPlanView.jsx
@@ -1,52 +1,55 @@
+import data from "../../data/user.json";
+
+import { Link, useParams } from "react-router-dom";
+
+import Container from "react-bootstrap/Container";
 import Col from "react-bootstrap/Col";
 import Row from "react-bootstrap/Row";
 import Image from "react-bootstrap/Image";
 import Button from "react-bootstrap/Button";
 import Nav from "react-bootstrap/Nav";
 import Tab from "react-bootstrap/Tab";
 import Card from "react-bootstrap/Card";
-// import PropTypes from "prop-types";
-import data from "../../data/user.json";
-import { Link } from "react-router-dom";
-import { useParams } from "react-router-dom";
 
 export const LessonPlanView = () => {
   const lessonPlan = data[0].lesson_plans[0];
   const { userId, lessonId } = useParams();
 
   return (
     <>
-      <Row>
-        <Col xs={2}>
-          <Link to={`/simplifica-frontend/${userId}`}>
-            <Button
-              variant="outline-secondary"
-              className="mx-5 my-2"
-              title="Go back to profile."
-              aria-label="back-button"
-            >
-              <Image src="/arrow-left.svg"></Image>
-            </Button>
-          </Link>
-        </Col>
-      </Row>
+      <Container>
+        <Row>
+          <Col xs={2}>
+            <Link to={`/simplifica-frontend/${userId}`}>
+              <Button
+                variant="outline-secondary"
+                className="mx-3 mx-lg-5 my-2"
+                title="Go back to profile."
+                aria-label="back-button"
+              >
+                <Image src="/simplifica-frontend/arrow-left.svg"></Image>
+              </Button>
+            </Link>
+          </Col>
+        </Row>
+      </Container>
 
-      <Card className="mx-5">
+      <Card className="mx-3 mx-lg-5">
         <Card.Header>Lesson Plan</Card.Header>
         <Card.Body>
           <Card.Title>
             <Row>
-              <Col xs={6} sm={8} md={10}>
+              <Col xs={8} sm={8} md={10}>
                 <h1 className="display-6">{lessonPlan.topic}</h1>
               </Col>
-              <Col xs={3} sm={2} md={1}>
+              <Col xs={2} sm={2} md={1}>
                 <Button variant="outline-secondary">
-                  <Image src="/pencil.svg"></Image>
+                  <Image src="/simplifica-frontend/pencil.svg"></Image>
                 </Button>
               </Col>
-              <Col xs={3} sm={2} md={1}>
+              <Col xs={2} sm={2} md={1}>
                 <Button variant="outline-danger">
-                  <Image src="/trash.svg"></Image>
+                  <Image src="/simplifica-frontend/trash.svg"></Image>
                 </Button>
               </Col>
             </Row>
@@ -132,15 +135,29 @@ export const LessonPlanView = () => {
 
             <Nav variant="pills" className="flex-row mt-3">
               <Nav.Item>
-                <Nav.Link eventKey="presentation" title="See the presentation phase.">Presentation</Nav.Link>
+                <Nav.Link
+                  eventKey="presentation"
+                  title="See the presentation phase."
+                >
+                  Presentation
+                </Nav.Link>
               </Nav.Item>
               <Nav.Item>
-                <Nav.Link eventKey="practice" title="See the practice phase."variant="outline-dark">
+                <Nav.Link
+                  eventKey="practice"
+                  title="See the practice phase."
+                  variant="outline-dark"
+                >
                   Practice
                 </Nav.Link>
               </Nav.Item>
               <Nav.Item>
-                <Nav.Link eventKey="production" title="See the production phase.">Production</Nav.Link>
+                <Nav.Link
+                  eventKey="production"
+                  title="See the production phase."
+                >
+                  Production
+                </Nav.Link>
               </Nav.Item>
             </Nav>
           </Tab.Container>

diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx
@@ -49,8 +49,8 @@ export const Profile = () => {
   };
 
   return (
-    <Container className="pt-5 mt-5 mx-5 px-4 align-middle">
-      <Row className="mb-3 mt-5 mx-5 pt-5 align-items-center">
+    <Container className="pt-5 mt-3 mt-lg-5 mx-lg-5 px-4 align-middle">
+      <Row className="mb-3 mx-2 mt-3 mt-lg-5 mx-lg-5 pt-5 align-items-center">
         <Col xs={8} md={10}>
           <h1 className="display-3" aria-label="title">
             My Lesson Plans
@@ -64,7 +64,7 @@ export const Profile = () => {
           </Link>
         </Col>
       </Row>
-      <Table striped className="mx-5">
+      <Table striped className="mx-1 mx-lg-5">
         <thead>
           <tr>
             <th>#</th>