chore: add welcome link in login

Author: OGALEXI

client/package-lock.json

@@ -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>
   );

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

@@ -58,6 +58,10 @@ module.exports = {
         '5/7': '71.4285714%',
         '6/7': '85.7142857%',
       },
+      padding: {
+        '1/2': '50%',
+        full: '100%'
+      }
     },
     screens: {
       tablet: '272px',

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

@@ -59,7 +59,7 @@ export const userModule: Module & { typeDefs: DocumentNode[] } = createModule({
     Query: {
       me: async (
         _: any,
-        {},
+        { },
         {
           orm,
           req,
@@ -130,14 +130,14 @@ export const userModule: Module & { typeDefs: DocumentNode[] } = createModule({
 
       logoutUser: async (
         _: any,
-        {},
+        { },
         {
           req,
         }: {
           req: Request;
         }
       ) => {
-        if (req?.session) req.session.destroy(() => {});
+        if (req?.session) req.session.destroy(() => { });
         return { data: true };
       },
     },