style: final style in the night

Author: BartoszSzatkowski

client/src/Components/Calendar/Overview.tsx

@@ -4,7 +4,7 @@ import { useCourseOverviewQuery } from '../../generated/graphql';
 //package for date format
 import moment from 'moment';
 
-const overviewStyle = 'flex flex-col bg-green w-11/12 mt-4 self-center';
+const overviewStyle = 'flex flex-col w-11/12 mt-4 self-center';
 
 const historyStyle = 'grid grid-cols-6 bg-white w-full h-6/7';
 
@@ -26,7 +26,7 @@ const Overview: React.FC = () => {
   return (
     <div className={overviewStyle}>
       <article className='flex flex-col justify-center h-full'>
-        <p className='flex justify-center items-center text-4xl text-white h-16'>
+        <p className='flex justify-center items-center text-4xl bg-green text-white h-16'>
           Sessions Attendance
         </p>
         <section className={historyStyle}>

client/src/Components/Calendar/StudentHistory.tsx

@@ -8,7 +8,8 @@ import { ReactComponent as CrossIcon } from '../../Assets/solo-cross.svg';
 import moment from 'moment';
 import Student from '../../Types/student';
 
-const btnStyle = 'flex bg-green text-white p-4 shadow-lg m-auto my-8';
+const btnStyle =
+  'flex justify-center items-center bg-green text-white text-lg p-4 h-16 w-1/3 shadow-lg mb-8 mx-11 self-end';
 
 const StudentHistory: React.FC = () => {
   const navigate = useNavigate();
@@ -46,21 +47,21 @@ const StudentHistory: React.FC = () => {
 
   if (indivHistory) {
     return (
-      <div>
+      <div className='flex flex-col'>
         <button className={btnStyle} onClick={handleClick}>
           Back to session overview
         </button>
-        <h1 className='flex justify-center text-lg md:text-xl'>
+        <h1 className='font-bold text-5xl px-16 mb-4'>
           {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'>
+          <div className=' flex flex-row flex-wrap justify-start bg-white w-11/12 md:h-2/3 lx:w-9/12 border-grey border-2'>
             {indivHistory.map((session) => {
               const date = new Date(Number(session!.date));
               const UTCdate = date.toUTCString();
 
               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'>
+                <div className='flex flex-col justify-center w-26 h-26 p-2 md:w-32 items-center border-2 border-white'>
                   {session!.attended ? (
                     <CheckIcon className='w-10 h-10' />
                   ) : (