Merge pull request #90 from usingbrain/main

pulling style changes

Author: usingbrain

client/src/Components/Calendar/StudentHistory.tsx

@@ -8,6 +8,9 @@ import moment from 'moment';
 const StudentHistory: React.FC = () => {
   const courseId = Number(useParams().courseId);
   const studentId = Number(useParams().studentId);
+  const name = 'Friend';
+  const lastname = 'buddy';
+
   const [{ fetching, data, error }] = useIndividualAttendanceQuery({
     variables: { courseId, studentId },
   });
@@ -21,22 +24,27 @@ const StudentHistory: React.FC = () => {
 
   if (indivHistory) {
     return (
-      <div className=" flex flex-row flex-wrap w-5/6 justify-start ">
-        {indivHistory.map((session) => {
-          const date = new Date(Number(session!.date));
-          const UTCdate = date.toUTCString();
+      <div>
+        <h1 className="flex justify-center text-lg md:text-xl">{name} {lastname}</h1>
+        <section className="flex justify-center h-1/4 md:h-1/2 lg:h-5/6 xl:h-screen p-4">
+          <div className=" flex flex-row flex-wrap justify-start bg-white w-11/12 md:h-2/3 lx:w-9/12 overflow-scroll border-green border-8">
+            {indivHistory.map((session) => {
+              const date = new Date(Number(session!.date));
+              const UTCdate = date.toUTCString();
 
-          return (
-            <div className="flex flex-col justify-center p-4 items-center">
-              {session!.attended ? (
-                <CheckBoxChecked className="w-10 h-10" />
-              ) : (
-                <CheckBoxCrossed className="w-10 h-10" />
-              )}
-              <p>{moment(UTCdate).format('L')}</p>
-            </div>
-          );
-        })}
+              return (
+                <div className="flex flex-col justify-center w-26 p-2 md:w-32 items-center border-2 border-black m-1 hover:bg-green-xlight">
+                  {session!.attended ? (
+                    <CheckBoxChecked className="w-10 h-10" />
+                  ) : (
+                    <CheckBoxCrossed className="w-10 h-10" />
+                  )}
+                  <p>{moment(UTCdate).format('L')}</p>
+                </div>
+              );
+            })}
+          </div>
+        </section>
       </div>
     );
   }

client/src/Components/ClassView/StudentElementHistory.tsx

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

client/src/Components/ClassView/StudentsList.tsx

@@ -2,8 +2,6 @@ import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { setCurrentList } from '../../store/actions';
 import { useAssignedStudentsQuery, User } from '../../generated/graphql';
-import Lottie from 'react-lottie';
-import loadingAnimation from '../../Assets/loadinganimation.json';
 import StudentElement from './StudentElement';
 import Session from '../../Types/session';
 import socketIOClient from 'socket.io-client';
@@ -41,17 +39,7 @@ const StudentsList: React.FC<{ courseId: number }> = ({ courseId }) => {
     socket.on('ASSIGNMENT_CHANGE', () => refetchAssigned());
   }, []);
 
-  const loadingAnimationOptions = {
-    loop: true,
-    autoplay: true,
-    animationData: loadingAnimation,
-    rendererSettings: {},
-  };
-
-  if (fetching)
-    return (
-      <Lottie options={loadingAnimationOptions} height={400} width={'100%'} />
-    );
+  if (fetching) { };
 
   if (error) return <h2>Oops something went wrong try again</h2>;
 

client/src/Components/TeacherHomepage/Homepage.tsx

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