chore: styling calendar

Author: OGALEXI

client/src/Components/Calendar/Overview.tsx

@@ -5,10 +5,10 @@ import { useCourseOverviewQuery } from '../../generated/graphql';
 import moment from 'moment';
 
 const overviewStyle =
-  'flex flex-col m-auto bg-white w-11/12 md:w-10/12 lg:w-9/12 xl:w-7/12 shadow-xl mt-8';
+  'flex flex-col m-auto bg-green w-11/12 md:w-10/12 lg:w-9/12 xl:w-7/12 mt-8 h-1/3 md:h-2/4 lg:h-2/3 xl:h-3/4';
 const headerStyle =
   'flex bg-green shadow-md p-4 justify-center text-white text-md sm:text-lg md:text-xl';
-const historyStyle = 'flex flex-row flex-wrap justify-start w-full';
+const historyStyle = 'flex flex-row flex-wrap justify-start bg-white w-full h-full overflow-scroll';
 
 const Overview: React.FC = () => {
   const courseId = Number(useParams().courseId);
@@ -28,8 +28,8 @@ const Overview: React.FC = () => {
   return (
     <div>
       <div className={overviewStyle}>
-        <article className='flex flex-col justify-center'>
-          <p className='m-auto text-xl'>Attendance</p>
+        <article className='flex flex-col justify-center p-2 h-full'>
+          <p className='m-auto text-xl text-white pb-2'>Attendance</p>
           <section className={historyStyle}>
             {!!sessions &&
               sessions.map((session) => {

client/src/Components/Calendar/SessionHistory.tsx

@@ -5,22 +5,22 @@ import StudentsList from '../ClassView/StudentsList';
 
 // const listStyle = 'flex flex-col justify-start items-start';
 
-const btnStyle = "bg-green text-white p-4 shadow-md";
+const btnStyle = "flex bg-green text-white p-4 shadow-lg m-auto my-8";
 
 const SessionHistory: React.FC = () => {
   const courseId = Number(useParams().courseId);
 
   return (
     <div>
       {/* button back to overview */}
-      <footer className="flex justify-center">
-        <Link to={`/homepage/classes/${courseId}/history`}>
-          <button className={btnStyle}>Back to history overview</button>
-        </Link>
+      <footer className="flex justify-center my-4">
       </footer>
       {/* student list for this session */}
       <StudentsList courseId={courseId} />
       {/* TODO: each student is clickable to get individual attendance */}
+      <Link to={`/homepage/classes/${courseId}/history`}>
+        <button className={btnStyle}>Back to history overview</button>
+      </Link>
     </div>
   );
 };

client/src/Components/ClassView/ClassView.tsx

@@ -32,7 +32,7 @@ const ClassView: React.FC = () => {
 
   if (course && courseId) {
     return (
-      <section className="h-screen flex flex-col justify-start w-3/4">
+      <section className="h-screen flex flex-col justify-start w-3/4 h-full">
         <div className={headerStyle}>
           <h1 className="font-bold">{course.name?.toUpperCase()}</h1>
           <Link to="/homepage">

client/src/Components/ClassView/StudentElementHistory.tsx

@@ -18,13 +18,12 @@ const StudentElementHistory: React.FC<Props> = ({
 
   return (
     <div
-      className="flex justify-center place-items-center h-10"
+      className="flex place-items-center h-10"
       onClick={() =>
         navigate(`/homepage/classes/${courseId}/student/${studentId}`)
       }
     >
-      <h3>{lastname}</h3>
-      <h3>{name}</h3>
+      <h3 className="mx-4">{lastname} {name}</h3>
     </div>
   );
 };

client/src/Components/TeacherDashboard/Course.tsx

@@ -1,4 +1,6 @@
-import React from 'react';
+// @ts-nocheck
+
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { setHistory, setSelected } from '../../store/actions';
 import CourseType from '../../Types/course';
@@ -14,6 +16,7 @@ const Course: React.FC<{ course: CourseType }> = ({ course }) => {
     dispatch(setHistory(true));
     dispatch(setSelected(course));
   };
+
   return (
     <div className={courseStyle} onClick={handleClick}>
       <p className='flex justify-center border-b-2 w-1/4 pb-4'>{course.name}</p>

client/src/Components/TeacherHomepage/Homepage.tsx

@@ -10,7 +10,7 @@ const Homepage: React.FC = () => {
   return (
     <div>
       <Navbar user={user} />
-      <main className="flex flex-row justify-start w-full">
+      <main className="flex flex-row justify-start w-full h-screen">
         <Sidemenu />
         <Outlet />
       </main>