chore: change styles in class view

Author: OGALEXI

client/src/Components/ClassView/CheckboxListSession.tsx

@@ -36,9 +36,9 @@ const CheckboxListSession: React.FC<Props> = ({ studentList, sessionId }) => {
             (attendee) => attendee?.email === student.email
           )
         ) {
-          return <CheckBoxChecked className="w-10 h-10" />;
+          return <CheckBoxChecked className="w-10 h-10 mx-2" />;
         }
-        return <CheckBoxEmpty className="w-10 h-10" />;
+        return <CheckBoxEmpty className="w-10 h-10 mx-2" />;
       })}
     </div>
   );

client/src/Components/ClassView/ClassDashboard.tsx

@@ -4,7 +4,7 @@ import SessionBtn from './SessionBtn';
 import RegisterBtn from './RegisterBtn';
 
 const viewStyle = 'flex flex-row justify-around';
-const listStyle = 'rounded-sm shadow-xl w-1/2';
+const listStyle = 'rounded-sm shadow-sm w-1/2';
 
 const ClassDashboard: React.FC<{ courseId: number }> = ({ courseId }) => {
   return (

client/src/Components/ClassView/ClassView.tsx

@@ -11,9 +11,9 @@ import User from '../../Types/user';
 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 py-4 rounded-sm font-bold text-lg w-1/3 text-white mb-4';
+  'flex justify-center bg-black py-4 rounded-sm text-lg w-1/3 text-white mb-4 h-16';
 const listHeader =
-  'w-1/2 bg-green p-2 text-white text-bold text-lg rounded-t-sm';
+  'w-1/2 bg-green p-2 text-white text-lg rounded-t-sm h-16';
 
 const ClassView: React.FC = () => {
   const dispatch = useDispatch();
@@ -50,11 +50,12 @@ const ClassView: React.FC = () => {
             </div>
             <Link to={link} className={attendanceStyle}>
               <h3
-                className="text-lg"
+                className="text-lg invisible md:visible w-0 md:w-full flex justify-center h-0 md:h-full"
                 onClick={() => dispatch(setHistory(history))}
               >
                 {history ? 'Back to dashboard' : 'Attendance history'}
               </h3>
+              <h3 className="visible md:invisible md:w-0 md:h-0">History</h3>
             </Link>
           </div>
           {history ? <Outlet /> : <ClassDashboard courseId={courseId} />}

client/src/Components/ClassView/RegisterBtn.tsx

@@ -1,6 +1,6 @@
 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 registerStyle = 'flex justify-center bg-green hover:bg-green-light py-4 rounded-sm text-lg mb-8 text-white h-16';
 
 const RegisterBtn: React.FC<{ courseId: number }> = ({ courseId }) => {
   function openQR() {
@@ -11,7 +11,10 @@ const RegisterBtn: React.FC<{ courseId: number }> = ({ courseId }) => {
     );
   }
 
-  return <button onClick={openQR} className={registerStyle}>Register students</button>;
+  return <div className={registerStyle}>
+    <button onClick={openQR} className="invisible md:visible w-0 md:w-full flex justify-center h-0 md:h-full">Register students</button>
+    <p className="visible md:invisible md:w-0 md:h-0">Register</p>
+  </div>;
 };
 
 export default RegisterBtn;

client/src/Components/ClassView/SessionBtn.tsx

@@ -8,8 +8,8 @@ import { setSession } from '../../store/actions';
 import Session from '../../Types/session';
 
 const sessionBtnStyle =
-  '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';
+  'flex justify-center bg-green hover:bg-green-light py-4 rounded-sm text-lg mb-4 h-16 shadow-2xl';
+const btnTextStyle = 'text-lg text-white';
 
 const SessionBtn: React.FC<{ courseId: number }> = ({ courseId }) => {
   const [running, setRunning] = useState(false);
@@ -21,6 +21,7 @@ const SessionBtn: React.FC<{ courseId: number }> = ({ courseId }) => {
   );
 
   const btnText = running ? 'End Session' : 'Start Session';
+  const smallBtn = running ? 'End' : 'Start';
 
   const createSessionDB = async () => {
     // create new session in DB
@@ -64,7 +65,8 @@ const SessionBtn: React.FC<{ courseId: number }> = ({ courseId }) => {
   return (
     <div className={sessionBtnStyle}>
       <button className={btnTextStyle} onClick={handleClick}>
-        {btnText}
+        <p className="invisible md:visible w-0 md:w-full flex justify-center h-0 md:h-full">{btnText}</p>
+        <p className="visible md:invisible md:w-0 md:h-0">{smallBtn}</p>
       </button>
     </div>
   );

client/src/Components/ClassView/StudentElement.tsx

@@ -7,8 +7,8 @@ interface Props {
 
 const StudentElement: React.FC<Props> = ({ name, lastname }) => {
   return (
-    <div className='flex justify-center place-items-center p-4'>
-      <h3>{lastname} {name}</h3>
+    <div className='flex h-10 mx-2'>
+      <h3 className="mt-2">{lastname} {name}</h3>
     </div>
   );
 };

client/src/Components/ClassView/StudentsList.tsx

@@ -11,7 +11,7 @@ import CheckboxListSession from './CheckboxListSession';
 import CheckboxListHistory from '../Calendar/CheckboxListHistory';
 const ENDPOINT = 'http://localhost:4000';
 
-const listStyle = 'flex flex-col justify-start items-start';
+const listStyle = 'flex flex-col justify-start items-start shadow-bottom';
 
 const StudentsList: React.FC<{ courseId: number }> = ({ courseId }) => {
   const studentsState = useSelector(
@@ -57,8 +57,8 @@ const StudentsList: React.FC<{ courseId: number }> = ({ courseId }) => {
   return (
     <div className={listStyle}>
       {students?.length ? (
-        <div className='flex'>
-          <div>
+        <div className='flex flex-row w-full justify-between'>
+          <div className="flex flex-col">
             {students.map((student) => {
               return (
                 <StudentElement
@@ -69,16 +69,18 @@ const StudentsList: React.FC<{ courseId: number }> = ({ courseId }) => {
               );
             })}
           </div>
-          {!!session && (
-            <CheckboxListSession
-              // @ts-ignore
-              studentList={students}
-              sessionId={session.id}
-            />
-          )}
-          {history && studentsState && (
-            <CheckboxListHistory studentList={studentsState} />
-          )}
+          <div>
+            {!!session && (
+              <CheckboxListSession
+                // @ts-ignore
+                studentList={students}
+                sessionId={session.id}
+              />
+            )}
+            {history && studentsState && (
+              <CheckboxListHistory studentList={studentsState} />
+            )}
+          </div>
         </div>
       ) : (
         <p>No students registered for this class yet</p>

client/tailwind.config.js

@@ -28,6 +28,9 @@ module.exports = {
         DEFAULT: '#000000',
       },
     },
+    boxShadow: {
+      bottom: '0 3px 2px -1px rgba(0, 0, 0, 0.2)'
+    },
     extend: {
       fontFamily: {
         sans: ['Inter', ...defaultTheme.fontFamily.sans],