Merge pull request #95 from usingbrain/main

pulling instruction component

Author: usingbrain

client/src/Assets/classdata.png

@@ -5,10 +5,10 @@ import { useCourseOverviewQuery } from '../../generated/graphql';
 import moment from 'moment';
 
 const overviewStyle =
-  '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 bg-white w-full h-full overflow-scroll';
+  '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/2 lg:h-3/4 px-2 pb-2';
+
+const historyStyle =
+  'flex flex-row flex-wrap justify-start bg-white w-full overflow-scroll h-6/7';
 
 const Overview: React.FC = () => {
   const courseId = Number(useParams().courseId);
@@ -26,18 +26,18 @@ const Overview: React.FC = () => {
 
   console.log('history: ', history);
   return (
-    <div>
+    <div className="h-screen">
       <div className={overviewStyle}>
-        <article className='flex flex-col justify-center p-2 h-full'>
-          <p className='m-auto text-xl text-white pb-2'>Attendance</p>
+        <article className='flex flex-col justify-center h-full'>
+          <p className='m-auto text-xl text-white pb-2 h-8 flex'>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'>
+                    <div className='h-20 p-2 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'>

client/src/Assets/openclass.png

@@ -13,9 +13,9 @@ const btnStyle = {
 };
 
 const alertStyle =
-  'text-white text-center flex flex-col items-center justify-evenly h-56 w-96 fixed top-2/3 inset-x-1/2 bg-black p-12';
+  'text-white text-center flex flex-col items-center justify-evenly h-1/3 w-1/3 fixed top-1/3 inset-x-1/2 bg-black p-12';
 
-const alertBtnStyle = 'hover:bg-white hover:text-black border-white p-4';
+const alertBtnStyle = 'text-white bg-black border-2 border-black hover:border-white p-4 w-1/2 m-1';
 
 const DeleteBtn: React.FC<{ courseId: number }> = ({ courseId }) => {
   const navigate = useNavigate();

client/src/Assets/registerstudents.png

@@ -6,7 +6,7 @@ import { setHistory, setSelected } from '../../store/actions';
 import CourseType from '../../Types/course';
 
 let courseStyle =
-  'flex py-2 font-light text-left text-white w-full border-2 border-green hover:border-white justify-center';
+  'flex flex-col py-2 font-light text-left text-white w-full border-2 border-green hover:border-white justify-center items-center';
 
 const Course: React.FC<{ course: CourseType }> = ({ course }) => {
   const dispatch = useDispatch();
@@ -19,7 +19,8 @@ const Course: React.FC<{ course: CourseType }> = ({ course }) => {
 
   return (
     <div className={courseStyle} onClick={handleClick}>
-      <p className='flex justify-center border-b-2 w-1/4 pb-4'>{course.name}</p>
+      <p className='flex justify-center pb-4'>{course.name}</p>
+      <hr className="border-b-2 border-white w-1/4" />
     </div>
   );
 };

client/src/Assets/startsession.png

@@ -1,12 +1,46 @@
-import React from 'react';
+import openOrCreate from '../../Assets/openclass.png';
+import registerImg from '../../Assets/registerstudents.png';
+import startImg from '../../Assets/startsession.png';
+import attendanceImg from '../../Assets/classdata.png';
+import studentData from '../../Assets/studentdata.png';
+
+const imgStyle = "bg-white rounded-full h-16 w-16 flex justify-center items-center"
+const info = "w-2/3 text-2xl h-20 flex md:pl-8 pl-1 pr-2 items-center rounded-full justify-between"
 
 const Instruction = () => {
   return (
-    <div className="text-center text-lg flex flex-col justify-evenly h-48">
-      <h2 className="p-8">
-        &lt;-- Click here to add a new course to your list
-      </h2>
-      <h2 className="p-8">&lt;-- or choose one that already exists</h2>
+    <div className="h-screen flex flex-col items-center">
+      <h1 className="text-5xl my-8">Quick start</h1>
+      <p className={`${info} mb-4 bg-shades-one`}>
+        Create or open a class
+        <div className={imgStyle}>
+          <img src={openOrCreate} alt="Open or create class" className="h-10 w-10" />
+        </div>
+      </p>
+      <p className={`${info} my-4 bg-shades-two`}>
+        Register students
+        <div className={imgStyle}>
+          <img src={registerImg} alt="Open or create class" className="h-10 w-10" />
+        </div>
+      </p>
+      <p className={`${info} my-4 bg-shades-three`}>
+        Start a session
+        <div className={imgStyle}>
+          <img src={startImg} alt="Open or create class" className="h-10 w-10" />
+        </div>
+      </p>
+      <p className={`${info} my-4 bg-shades-four`}>
+        Access attendance data
+        <div className={imgStyle}>
+          <img src={attendanceImg} alt="Open or create class" className="h-10 w-10" />
+        </div>
+      </p>
+      <p className={`${info} my-4 bg-shades-five`}>
+        Check individual student data
+        <div className={imgStyle}>
+          <img src={studentData} alt="Open or create class" className="h-10 w-10" />
+        </div>
+      </p>
     </div>
   );
 };

client/src/Assets/studentdata.png

@@ -27,6 +27,13 @@ module.exports = {
       black: {
         DEFAULT: '#000000',
       },
+      shades: {
+        one: '#C7F4F0',
+        two: '#AFEBE5',
+        three: '#79D4CC',
+        four: '#43BFB3',
+        five: '#00A393'
+      }
     },
     boxShadow: {
       bottom: '0 3px 2px -1px rgba(0, 0, 0, 0.2)'