CLASSROOMIO-T-1: 1st logic for signup

src/components/AuthUI/index.svelte

@@ -6,6 +6,7 @@
   export let supabase;
   export let handleSubmit;
   export let isLogin = true;
+  export let showOnlyContent = false;
 
   async function signInWithGoogle() {
     const { data, error } = await supabase.auth.signInWithOAuth({
@@ -15,49 +16,57 @@
 </script>
 
 <div class="w-full min-h-screen flex items-center justify-center mt-4">
-  <div class="container border border-gray bg-white">
+  <div
+    class="container border border-gray bg-white {showOnlyContent && 'h-2/4'}"
+  >
     <div class="flex items-center flex-col p-2 lg:px-8 lg:py-4">
-      <div class="flex items-center w-full justify-center">
-        <img
-          src="/logo-192.png"
-          alt="ClassroomIO logo"
-          height="50"
-          width="50"
-          data-atf="1"
-        />
-        <h4 class="text-xl">ClassroomIO</h4>
-      </div>
+      {#if !showOnlyContent}
+        <div class="flex items-center w-full justify-center">
+          <img
+            src="/logo-192.png"
+            alt="ClassroomIO logo"
+            height="50"
+            width="50"
+            data-atf="1"
+          />
+          <h4 class="text-xl">ClassroomIO</h4>
+        </div>
+      {/if}
       <form
         on:submit|preventDefault={handleSubmit}
         class="flex items-center flex-col w-10/12"
       >
         <slot />
       </form>
-      <div class="w-10/12 mb-3">
-        <p class="text-sm mb-5">or sign up with:</p>
-        <PrimaryButton
-          variant={VARIANTS.OUTLINED}
-          onClick={signInWithGoogle}
-          className="py-3 sm:w-full w-full"
-        >
-          <GoogleIconColored />
-          <span class="ml-2">Sign up with Google</span>
-        </PrimaryButton>
-      </div>
-    </div>
-    <div class="w-full p-6 border-t border-grey text-center">
-      {#if isLogin}
-        Not registered yet? <a
-          class="hover:underline text-blue-700"
-          href="/signup">Sign up</a
-        >
-      {:else}
-        Already have an account? <a
-          class="hover:underline text-blue-700"
-          href="/login">Log In</a
-        >
+      {#if !showOnlyContent}
+        <div class="w-10/12 mb-3">
+          <p class="text-sm mb-5">or sign up with:</p>
+          <PrimaryButton
+            variant={VARIANTS.OUTLINED}
+            onClick={signInWithGoogle}
+            className="py-3 sm:w-full w-full"
+          >
+            <GoogleIconColored />
+            <span class="ml-2">Sign up with Google</span>
+          </PrimaryButton>
+        </div>
       {/if}
     </div>
+    {#if !showOnlyContent}
+      <div class="w-full p-6 border-t border-grey text-center">
+        {#if isLogin}
+          Not registered yet? <a
+            class="hover:underline text-blue-700"
+            href="/signup">Sign up</a
+          >
+        {:else}
+          Already have an account? <a
+            class="hover:underline text-blue-700"
+            href="/login">Log In</a
+          >
+        {/if}
+      </div>
+    {/if}
   </div>
 </div>
 

src/components/Icons/EmailSentIcon.svelte

@@ -0,0 +1,44 @@
+<svg
+  width="120"
+  height="120"
+  viewBox="0 0 120 120"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M85.3281 31H34.6719C33.4724 31 32.5 31.9724 32.5 33.1719V70.8281C32.5 72.0276 33.4724 73 34.6719 73H85.3281C86.5276 73 87.5 72.0276 87.5 70.8281V33.1719C87.5 31.9724 86.5276 31 85.3281 31ZM34.6719 27C31.2632 27 28.5 29.7632 28.5 33.1719V70.8281C28.5 74.2368 31.2632 77 34.6719 77H85.3281C88.7368 77 91.5 74.2368 91.5 70.8281V33.1719C91.5 29.7632 88.7368 27 85.3281 27H34.6719Z"
+    fill="#0233BD"
+  />
+  <rect
+    x="40.9844"
+    y="37.875"
+    width="36.4141"
+    height="3.08594"
+    rx="1.54297"
+    fill="#658DFE"
+  />
+  <rect
+    x="40.9844"
+    y="44.0469"
+    width="36.4141"
+    height="3.08594"
+    rx="1.54297"
+    fill="#658DFE"
+  />
+  <rect
+    x="40.9844"
+    y="50.2188"
+    width="36.4141"
+    height="3.08594"
+    rx="1.54297"
+    fill="#658DFE"
+  />
+  <path
+    d="M23 94.0391V62.5938H97V94.0391C97 96.067 95.356 97.7109 93.3281 97.7109H26.6719C24.644 97.7109 23 96.067 23 94.0391Z"
+    fill="#658DFE"
+    stroke="#0233BD"
+    stroke-width="5"
+  />
+</svg>