Merge pull request #65 from usingbrain/bubblegum

class styling changes

Author: OGALEXI

client/src/Components/ClassView/ClassDashboard.tsx

@@ -4,14 +4,21 @@ import SessionBtn from './SessionBtn';
 import RegisterBtn from './RegisterBtn';
 
 const viewStyle =
-  'flex flex-col justify-start items-left content-center pt-4 w-1/2 pl-4 h-full';
+  'flex flex-row justify-between items-left content-center pt-4 w-full px-8 h-full';
+const listStyle = "rounded-sm shadow-xl w-1/2";
+const listHeader = "bg-green p-2 text-white text-bold text-lg rounded-t-sm";
 
 const ClassDashboard: React.FC<{ courseId: number }> = ({ courseId }) => {
   return (
     <div className={viewStyle}>
-      <RegisterBtn courseId={courseId} />
-      <SessionBtn courseId={courseId} />
-      <StudentsList courseId={courseId} />
+      <section className={listStyle}>
+        <div className={listHeader}>Students</div>
+        <StudentsList courseId={courseId} />
+      </section>
+      <article>
+        <SessionBtn courseId={courseId} />
+        <RegisterBtn courseId={courseId} />
+      </article>
       {/* TODO: add DELETE COURSE BUTTON */}
     </div>
   );

client/src/Components/ClassView/ClassView.tsx

@@ -9,6 +9,7 @@ import Overview from '../Calendar/Overview';
 
 const headerStyle =
   'bg-black text-white flex flex-row justify-between items-center content-center p-8 h-20 mb-4 text-3xl';
+const attendanceStyle = 'flex justify-center bg-black hover:bg-green-light py-4 rounded-sm font-bold text-lg mb-4 w-1/3 m-auto text-white';
 
 const ClassView: React.FC = () => {
   const dispatch = useDispatch();
@@ -33,17 +34,17 @@ const ClassView: React.FC = () => {
             </button>
           </Link>
         </div>
-        <div>
-          <Link to={link}>
+        <article className="">
+          {history ? <Outlet /> : <ClassDashboard courseId={courseId} />}
+          <Link to={link} className={attendanceStyle}>
             <h3
               className="text-lg"
               onClick={() => dispatch(setHistory(history))}
             >
-              {history ? 'back to dashboard' : 'attendance history'}
+              {history ? 'Back to dashboard' : 'Attendance history'}
             </h3>
           </Link>
-          {history ? <Outlet /> : <ClassDashboard courseId={courseId} />}
-        </div>
+        </article>
       </section>
     );
   }

client/src/Components/ClassView/RegisterBtn.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+const registerStyle = 'flex justify-center bg-green hover:bg-green-light py-4 rounded-sm font-bold text-lg mb-8 text-white h-16 w-full';
+
 const RegisterBtn: React.FC<{ courseId: number }> = ({ courseId }) => {
   function openQR() {
     window.open(
@@ -9,7 +11,7 @@ const RegisterBtn: React.FC<{ courseId: number }> = ({ courseId }) => {
     );
   }
 
-  return <button onClick={openQR}>REGISTER BUTTON</button>;
+  return <button onClick={openQR} className={registerStyle}>Register students</button>;
 };
 
 export default RegisterBtn;

client/src/Components/ClassView/SessionBtn.tsx

@@ -8,7 +8,7 @@ import { setSession } from '../../store/actions';
 import Session from '../../Types/session';
 
 const sessionBtnStyle =
-  'bg-green hover:bg-green-light py-4 px-8 rounded font-bold text-lg mb-4';
+  'flex justify-center bg-green hover:bg-green-light py-4 rounded-sm font-bold text-lg mb-4 h-16';
 const btnTextStyle = 'font-bold text-lg text-white';
 
 const SessionBtn: React.FC<{ courseId: number }> = ({ courseId }) => {

client/src/Components/TeacherDashboard/AddForm.tsx

@@ -76,13 +76,13 @@ const AddForm: React.FC = () => {
           </div>
           <form onSubmit={(e) => handleSubmit(e)} className="flex flex-row items-center w-full shadow-xl">
             <input
-              className="h-14 w-full sm:w-full text-black"
+              className="h-14 w-full sm:w-full text-black rounded-l-sm"
               type="text"
               value={title}
               placeholder="Input class title."
               onChange={(e) => setTitle(e.target.value)}
             />
-            <button type="submit" className="bg-green text-white text-lg lg:text-2xl sm:text-xl w-4/12 lg:w-2/12 h-14">Add</button>
+            <button type="submit" className="bg-green text-white text-lg lg:text-2xl sm:text-xl w-4/12 lg:w-2/12 h-14 rounded-r-sm">Add</button>
           </form>
         </article>
       </section>

client/src/Components/TeacherDashboard/Course.tsx

@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import { setHistory, setSelected } from '../../store/actions';
 import CourseType from '../../Types/course';
 
-let courseStyle = 'flex py-2 font-light text-left text-white w-full hover:bg-green-light justify-center';
+let courseStyle = 'flex flex-col py-2 font-light text-left text-white w-full hover:bg-green-light justify-center';
 
 const Course: React.FC<{ course: CourseType }> = ({ course }) => {
   const dispatch = useDispatch();
@@ -15,7 +15,8 @@ const Course: React.FC<{ course: CourseType }> = ({ course }) => {
   };
   return (
     <div className={courseStyle} onClick={handleClick}>
-      <p className="flex justify-center border-b-2 w-1/4 pb-4">{course.name}</p>
+      <p className="flex justify-center pb-4">{course.name}</p>
+      <hr className="border-b-1 border-white w-1/4 m-auto"></hr>
     </div>
   );
 };

client/src/Components/TeacherHomepage/Navbar.tsx

@@ -20,7 +20,7 @@ const Navbar: React.FC<{ user: User }> = ({ user }) => {
   return (
     <nav className={navStyle}>
       <Link to='/'>
-        <QRLogo className='w-2/3 lg:w-1/4 flex' />
+        <QRLogo className='w-1/2 lg:w-2/3 flex' />
       </Link>
       <section className='flex flex-row items-center'>
         <h3 className='pr-8 font-lato font-bold text-lg'>