remove lesson pool tab for students, small styling changes

ANovaBerkeley · Feb 17, 2021 · 969b0b3 · 969b0b3
1 parent 82e7ee1
commit 969b0b3
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 29 deletions.
diff --git a/client/src/components/AuthComponent.js b/client/src/components/AuthComponent.js
@@ -54,7 +54,7 @@ const AuthComponent = props => {
   } else {
     return (
       <div>
-        <NavBar />
+        <NavBar isMentor={mentor} />
         <Component ismentor={mentor} id={match.params.id} />
       </div>
     );

diff --git a/client/src/components/NavBar.js b/client/src/components/NavBar.js
@@ -6,17 +6,13 @@ import { NavLink } from 'react-router-dom';
 
 const logo = require('../stylesheets/logo.png');
 
-const NavBar = () => {
+const NavBar = props => {
+  const { isMentor } = props;
+
   const [drawerVisible, setDrawerVisible] = useState(false);
-  // constructor(props) {
-  //   super(props);
-  //   this.state = {
-  //     drawerVisible: false,
-  //   };
-  // }
 
   const showDrawer = () => {
-   setDrawerVisible(true);
+    setDrawerVisible(true);
   };
 
   const hideDrawer = () => {
@@ -43,9 +39,11 @@ const NavBar = () => {
               <Menu.Item className="menuItem" key="lessons">
                 <NavLink to="/SiteLessons">Site Material</NavLink>
               </Menu.Item>
-              <Menu.Item className="menuItem" key="lessonpool">
-                <NavLink to="/LessonPool">Lesson Pool</NavLink>
-              </Menu.Item>
+              {isMentor && (
+                <Menu.Item className="menuItem" key="lessonpool">
+                  <NavLink to="/LessonPool">Lesson Pool</NavLink>
+                </Menu.Item>
+              )}
               <Menu.Item className="menuItem" key="roster">
                 <NavLink to="/Roster">Roster</NavLink>
               </Menu.Item>
@@ -90,11 +88,13 @@ const NavBar = () => {
                   Site Material
                 </NavLink>
               </Menu.Item>
-              <Menu.Item className="menuItem" key="lessonpool">
-                <NavLink onClick={hideDrawer} to="/LessonPool">
-                  Lesson Pool
-                </NavLink>
-              </Menu.Item>
+              {isMentor && (
+                <Menu.Item className="menuItem" key="lessonpool">
+                  <NavLink onClick={hideDrawer} to="/LessonPool">
+                    Lesson Pool
+                  </NavLink>
+                </Menu.Item>
+              )}
               <Menu.Item className="menuItem" key="roster">
                 <NavLink onClick={hideDrawer} to="/Roster">
                   Roster
@@ -116,6 +116,6 @@ const NavBar = () => {
       </nav>
     );
   }
-}
+};
 
 export default NavBar;
diff --git a/client/src/components/Profile.js b/client/src/components/Profile.js
@@ -97,7 +97,12 @@ const Profile = () => {
         </Row>
         <Row>
           <Col>
-            <Avatar size={64} onClick={() => showModal(true)} icon="edit" />
+            <Avatar
+              className="editIcon"
+              size={64}
+              onClick={() => showModal(true)}
+              icon="edit"
+            />
             <Modal
               className="editModal"
               title="Edit Your Profile"

diff --git a/client/src/components/RosterCard.js b/client/src/components/RosterCard.js
@@ -9,7 +9,7 @@ const { TextArea } = Input;
 const RosterCard = props => {
   const { mentor, person } = props;
 
-  const { id, username, email, candy, hobby, notes } = person;
+  const { id, username, email, candy, hobby, notes } = person; // TODO: fetch candy and hobby to display here!
   const [showEditModal, setShowEditModal] = useState(false);
   const [editedNotes, setEditedNotes] = useState('');
   const [displayNotes, setDisplayNotes] = useState(notes);
@@ -53,8 +53,8 @@ const RosterCard = props => {
         <div>
           <h2>Name: {username}</h2>
           <p>Email: {email}</p>
-          <p>Favorite Candy: {candy}</p>
-          <p>Favorite Hobby: {hobby}</p>
+          {/* <p>Favorite Candy: {candy}</p>
+          <p>Favorite Hobby: {hobby}</p> */}
           <p>Notes: {displayNotes}</p>
         </div>
       );

diff --git a/client/src/stylesheets/LessonPool.css b/client/src/stylesheets/LessonPool.css
@@ -39,8 +39,9 @@
 .fxLessonPoolContainer {
   padding-top: 100px;
   background-color: #e6f4fc;
-  width: 100%;
+  width: 100vw;
   height: 100%;
+  min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/client/src/stylesheets/NavBar.css b/client/src/stylesheets/NavBar.css
@@ -90,10 +90,16 @@
   width: 100%;
 }
 
+.ant-btn-primary {
+  border-color: #e6f4fc;
+}
+
 @media (max-width: 767px) {
   .barsMenu {
-    display: inline-block;
-    top: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 5px;
   }
   .leftMenu,
   .rightMenu {

diff --git a/client/src/stylesheets/Profile.css b/client/src/stylesheets/Profile.css
@@ -26,7 +26,7 @@
 }
 
 @media (max-width: 767px) {
-  .profileBox{
+  .profileBox {
     width: 80%;
   }
 }
@@ -160,6 +160,16 @@ input[type='submit']:hover {
   opacity: 0.8;
 }
 
+.editIcon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.ant-avatar.ant-avatar-icon {
+  padding-top: 0px;
+}
+
 .editModal {
   padding: 10px 10px;
 }

diff --git a/client/src/stylesheets/Roster.css b/client/src/stylesheets/Roster.css
@@ -4,8 +4,9 @@
   background-color: #e6f4fc;
   margin: 0;
   padding: 100px 10px;
-  width: 100%;
+  width: 100vw;
   height: 100%;
+  min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/client/src/stylesheets/SiteLessons.css b/client/src/stylesheets/SiteLessons.css
@@ -11,7 +11,7 @@
 }
 
 @media (max-width: 767px) {
-  .lessonsContainer{
+  .lessonsContainer {
     grid-template-columns: 100%;
   }
 }
@@ -53,8 +53,9 @@
 
 .siteLessonsContainer {
   background-color: #e6f4fc;
-  width: 100%;
+  width: 100vw;
   height: 100%;
+  min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;