Create Loading Screen and Halfscreen (#131)

* create loading screen

* implement halfscreen

* make necessary changes for half and loading screens

web/components/logos/HalfScreen.tsx

@@ -0,0 +1,17 @@
+export default function HalfScreen() {
+  return (
+    <div className="flex flex-col bg-custom-background w-full h-[20%] justify-center items-center sm:w-1/2 sm:h-full">
+      <div className="flex flex-row relative w-full h-[40%] justify-center sm:w-[17%] sm:h-[13%] sm:mb-[5%]">
+        <img
+          src="/MBBLogo.svg"
+          className="shrink-0 stroke-[2.1px] object-contain sm:stroke-[3px]"
+        ></img>
+      </div>
+      <div className="hidden sm:flex flex-col w-full h-[10%] justify-center shrink-0">
+        <p className="text-white text-center font-opensans text-3xl font-bold tracking-wide uppercase sm:text-4xl">
+          Motherhood <br /> Beyond bars
+        </p>
+      </div>
+    </div>
+  );
+}

web/components/logos/Loading.tsx

@@ -0,0 +1,17 @@
+export default function LoadingScreen() {
+  return (
+    <div className="flex flex-col bg-custom-background w-full h-screen justify-center items-center">
+      <div className="flex flex-row relative w-full h-[10%] justify-center mb-[10%] sm:w-[17%] sm:h-[13%] sm:mb-[5%]">
+        <img
+          src="/MBBLogo.svg"
+          className="shrink-0 stroke-[2.1px] object-contain sm:stroke-[3px]"
+        ></img>
+      </div>
+      <div className="flex flex-col w-full h-[10%] justify-center shrink-0">
+        <p className="text-white text-center font-opensans text-3xl font-bold tracking-wide uppercase sm:text-4xl">
+          Motherhood <br /> Beyond bars
+        </p>
+      </div>
+    </div>
+  );
+}

web/pages/login.tsx

@@ -8,7 +8,6 @@ import { AuthFormValues } from "@lib/types/common";
 import { UserContext } from "@lib/contexts/userContext";
 
 import ErrorAlert from "@components/errorAlert";
-import MBBLogo from "@components/mbbLogo";
 import Button from "@components/atoms/Button";
 import TextInput from "@components/atoms/TextInput";
 
@@ -26,9 +25,9 @@ export default function LoginScreen() {
         <div className="flex h-screen">
           <div className="w-1/2 place-items-center gradient-bg">
             <div className="flex flex-wrap flex-col place-content-center h-full">
-              <div className="self-center">
+              {/* <div className="self-center">
                 <MBBLogo />
-              </div>
+              </div> */}
               <br />
               <div className="text-white text-4xl uppercase text-center font-opensans font-bold">
                 Motherhood <br /> Beyond Bars

web/tailwind.config.js

@@ -11,6 +11,9 @@ module.exports = {
       opensans: ["Open Sans", "sans-serif"],
     },
     extend: {
+      backgroundImage: {
+        'custom-background': 'radial-gradient(115.79% 108.31% at 24.4% 30.17%, #EDB1CB 0.01%, #B14378 92.53%)'
+      },
       fontFamily: {
         sans: ["Open Sans", ...defaultTheme.fontFamily.sans],
       },