Merge pull request #93 from usingbrain/bubblegum

instruction styling

Author: OGALEXI

client/src/Assets/classdata.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/openclass.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/registerstudents.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/startsession.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)'