chore: overview changes

Author: OGALEXI

client/src/Components/Calendar/Overview.tsx

@@ -4,6 +4,10 @@ import { useCourseOverviewQuery } from '../../generated/graphql';
 //package for date format
 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";
+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 Overview: React.FC = () => {
   const courseId = Number(useParams().courseId);
   const [{ fetching, data, error }] = useCourseOverviewQuery({
@@ -22,26 +26,33 @@ const Overview: React.FC = () => {
   console.log('history: ', history);
   return (
     <div>
-      <h3>Students assigned to this course: {total}</h3>
-      <section className="flex flex-row flex-wrap justify-evenly w-5/6">
-        {!!sessions &&
-          sessions.map((session) => {
-            if (session) {
-              const date = new Date(Number(session.createdAt));
-              const UTCdate = date.toUTCString();
-              return (
-                <div className="w-1/3 p-2 text-center">
-                  <Link to={`/homepage/classes/${courseId}/${session.id}`}>
-                    <div>
-                      <h5 className="text-lg">{session.attendance}</h5>
-                      <p>{moment(UTCdate).format('L')}</p>
+      <div className={overviewStyle}>
+        <header>
+          <h3 className={headerStyle}>Students assigned to this course: {total}</h3>
+        </header>
+        <article className="flex flex-col justify-center">
+          <p className="m-auto text-xl">Attendance</p>
+          <section className={historyStyle}>
+            {!!sessions &&
+              sessions.map((session) => {
+                if (session) {
+                  const date = new Date(Number(session.createdAt));
+                  const UTCdate = date.toUTCString();
+                  return (
+                    <div className="w-26 p-2 md:w-32 text-center border-2 border-black m-1 hover:bg-green-xlight">
+                      <Link to={`/homepage/classes/${courseId}/${session.id}`}>
+                        <div>
+                          <h5 className="text-lg sm:text-xl">{session.attendance}</h5>
+                          <p className="text-sm sm:text-md">{moment(UTCdate).format('L')}</p>
+                        </div>
+                      </Link>
                     </div>
-                  </Link>
-                </div>
-              );
-            }
-          })}
-      </section>
+                  );
+                }
+              })}
+          </section>
+        </article>
+      </div>
     </div>
   );
 };

client/src/Components/Calendar/SessionHistory.tsx

@@ -3,6 +3,8 @@ import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 import { useSessionAttendanceQuery } from '../../generated/graphql';
 
+const btnStyle = "bg-green text-white p-4 shadow-md";
+
 const SessionHistory: React.FC = () => {
   const courseId = Number(useParams().courseId);
   const sessionId = Number(useParams().sessionId);
@@ -21,9 +23,11 @@ const SessionHistory: React.FC = () => {
   return (
     <div>
       {/* button back to overview */}
-      <Link to={`/homepage/classes/${courseId}/history`}>
-        <button>Back to history overview</button>
-      </Link>
+      <footer className="flex justify-center">
+        <Link to={`/homepage/classes/${courseId}/history`}>
+          <button className={btnStyle}>Back to history overview</button>
+        </Link>
+      </footer>
       {/* student list for this session */}
       {/* each student is clickable to get individual attendance */}
     </div>

client/src/Components/ClassView/ClassView.tsx

@@ -9,7 +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 attendanceStyle = 'flex justify-center bg-black hover:bg-green-light py-4 rounded-sm font-bold text-lg mb-4 w-1/3 text-white ';
 
 const ClassView: React.FC = () => {
   const dispatch = useDispatch();
@@ -34,8 +34,7 @@ const ClassView: React.FC = () => {
             </button>
           </Link>
         </div>
-        <article className="">
-          {history ? <Outlet /> : <ClassDashboard courseId={courseId} />}
+        <article className="flex self-end">
           <Link to={link} className={attendanceStyle}>
             <h3
               className="text-lg"
@@ -45,6 +44,7 @@ const ClassView: React.FC = () => {
             </h3>
           </Link>
         </article>
+        {history ? <Outlet /> : <ClassDashboard courseId={courseId} />}
       </section>
     );
   }