Merge pull request #84 from usingbrain/main

pulling style changes for calender from main

Author: usingbrain

client/package-lock.json

@@ -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/Overview.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/Calendar/SessionHistory.tsx

@@ -31,7 +31,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/ClassView.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/ClassView/StudentElementHistory.tsx

@@ -1,15 +1,19 @@
+import attendImg from '../Assets/attendance.png';
+
 const sectionStyle = "bg-white flex flex-row rounded-sm w-11/12 md:h-4/6 h-80 items-center m-auto invisible sm:visible my-32";
-const outerStyle = "bg-black flex rounded-sm h-full w-1/2 lg:w-5/12 flex-col justify-center items-center p-2";
+const outerStyle = "bg-white flex rounded-sm h-full w-1/2 lg:w-5/12 flex-col justify-center items-center p-2";
 const paragraph = "w-1/2 lg:w-7/12 px-10 tracking-wider text-lg md:text-xl xl:px-32 xl:text-2xl leading-loose";
-const imageStyle = "bg-white w-5/6 h-5/6";
+const imageStyle = "bg-white w-5/6 p-1/4";
 
 const Attendance: React.FC = () => {
 
     return (
         <div className="h-screen w-full">
             <section className={sectionStyle}>
                 <div className={outerStyle}>
-                    <article className={imageStyle}></article>
+                    <article className={imageStyle}>
+                        <img src={attendImg} alt="attendance example" className="w-full h-full" />
+                    </article>
                 </div>
                 <div className={paragraph}>
                     Once you begin a session, you'll recieve a list that

client/src/Components/Startpage/Assets/attendance.png

@@ -26,6 +26,7 @@ const loginBtn =
 const linkStyle = 'flex text-white justify-center hover:underline';
 const lottieStyle = 'md:w-1/2 w-0 invisible md:visible';
 const errorStyle = 'w-1/2 xl:w-4/12 flex bg-white h-14 m-auto my-8 text-red';
+const logoStyle = 'm-auto h-1/6 w-1/4 lg:h-1/6 lg:w-1/5 xl:h-1/6 xl:w-1/6 mt-8';
 
 const Login: React.FC = () => {
     const [userInfo, setUserInfo] = useState(initUser);
@@ -70,9 +71,9 @@ const Login: React.FC = () => {
 
     return (
         <div className='h-screen'>
-            <div className='h-20 w-32 m-auto md:my-4 md:h-28 md:w-40 lg:h-32 lg:w-44'>
-                <QRLogo />
-            </div>
+            <Link to={'/'}>
+                <div className={logoStyle}><QRLogo /></div>
+            </Link>
             <div className={outerBox}>
                 <div className={lottieStyle}>
                     <Lottie options={defaultOptions} height={400} width={'100%'} />

client/src/Components/Startpage/Welcome/Attendance.tsx

@@ -26,7 +26,7 @@ const Prompt: React.FC = () => {
     <div className='flex w-full h-full 2xl:px-32 2xl:w-3/4'>
       <Outlet />
       <section className={promptStyle}>
-        <h1 className='text-green font-bold text-5xl md:text-6xl xl:text-7xl text-center'>
+        <h1 className='text-green font-bold text-3xl sm:text-4xl md:text-5xl xl:text-6xl text-center'>
           Welcome to QRCheckd!
         </h1>
         <article className={welcomeStyle}>

client/src/Components/Startpage/Welcome/Login.tsx

@@ -42,8 +42,8 @@ const Welcome: React.FC = () => {
           <Attendance />
         </section>
       </div>
-      <footer className='border-t-2 border-grey-light'>
-        <div className='mx-8 text-grey-light'>@ 2021 QRcheckd. Do whateva.</div>
+      <footer className='border-t-2 border-grey-light invisible sm:visible h-0 sm:h-2'>
+        <div className='mx-8 text-grey-light invisible sm:visible h-0 sm:h-2'>@ 2021 QRcheckd. Do whateva.</div>
       </footer>
     </div>
   );