Merge pull request #34 from sparrowapp-dev/refactor/login-revamp

Refactor: login revamp
sparrowapp-dev · May 21, 2024 · 04d1e37 · 04d1e37
2 parents 0f3e0dc + c59afe4
commit 04d1e37
Show file tree

Hide file tree

Showing 16 changed files with 1,217 additions and 1,178 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -11,7 +11,8 @@
 	import OauthRedirect from './pages/Auth/oauth-redirect/OauthRedirect.svelte';
 	import AuthSuccess from './pages/Auth/auth-success/AuthSuccess.svelte';
 	import EntryPoint from './pages/Auth/entry-point/EntryPoint.svelte';
-	import bg from "$lib/assets/body-gradient.png";
+	import BgContainer from '$lib/components/bgContainer/BgContainer.svelte';
+	import bg from '$lib/assets/sparrowLogoBackground.svg';
 	export let url = '/';
 </script>
 
@@ -29,8 +30,8 @@
 	<Route path="/*"><Navigate to="/init" /></Route>
 </Router>
 <Toast/>
-<div style="height:300px; bottom:0; left:0;
-right:0; z-index:-1 !important" class="w-100 position-fixed">
+
+<div style="height: 100vh; top:0; left:0;
+right:0; z-index:-100 !important" class="w-100 position-fixed">
 	<img src={bg} alt="" style="height:100%; width:100%;">
 </div>
-
diff --git a/src/lib/assets/logoSparrowSquare.svg b/src/lib/assets/logoSparrowSquare.svg
diff --git a/src/lib/assets/logoSparrowSquare2.svg b/src/lib/assets/logoSparrowSquare2.svg
diff --git a/src/lib/assets/sparrowLogoBackground.svg b/src/lib/assets/sparrowLogoBackground.svg
diff --git a/src/lib/components/bgContainer/BgContainer.svelte b/src/lib/components/bgContainer/BgContainer.svelte
@@ -0,0 +1,48 @@
+<script>
+</script>
+
+
+<div class="parent d-flex align-items-center justify-content-center text-white rounded">
+    <div
+        class="position-relative overflow-hidden p-5 m-4 rounded-4 container d-flex flex-column align-items-center justify-content-center w-100"
+        style="border: 1px solid var(--bg-container-border); max-width: 504px;"
+    >
+        <div style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: var(--bg-container);
+            backdrop-filter: blur( 50px );
+            -webkit-backdrop-filter: blur( 50px );
+            border-radius: 10px; z-index: 0;">
+        </div>
+        <div style="width: 39px;
+            height: 104px;
+            opacity: 0.2;background: var(--bg-container-one);
+            border-radius: 100%; position: absolute; top: calc(250px - 72px); left: -20px;
+            z-index: -1;
+        "></div>
+        <div style="width: 305px;
+            height: 77px;background: var(--bg-container-two);
+            opacity: 0.2;
+            border-radius: 100%; position: absolute; top: 0; left: calc(250px - 152px); z-index: -1;
+        "></div>
+        <div style="width: 131px;
+            height: 85px;
+            opacity: 0.2;background: var(--bg-container-three);
+            border-radius: 100%; position: absolute; top: calc(250px - 60px); right: 0px; z-index: -1;
+        "></div>
+        <div style="width: 305px;
+            height: 77px;
+            opacity: 0.2;background: var(--bg-container-four);
+            border-radius: 100%; position: absolute; bottom: -35px; left: calc(250px - 150px); z-index: -1;
+        "></div>
+        <div class=" d-flex flex-column align-items-center justify-content-center w-100" style="z-index: 100;">
+            <slot></slot>
+        </div>
+    </div>
+</div>
+
+
+<style>
+	.parent {
+		min-height: 100vh;
+		overflow: auto;
+	}
+</style>
diff --git a/src/lib/components/button/Button.svelte b/src/lib/components/button/Button.svelte
@@ -92,11 +92,11 @@
       background-color: var(--blackColor);
     }
     .custom-btn-primary {
-      background-color: var(--primary-btn-color);
+      background-color: var(--primary-color);
       color: var(--white-color);
     }
     .custom-btn-primary-gradient{
-        background: linear-gradient(270deg, #6147ff -1.72%, #1193f0 100%);;
+        // background: linear-gradient(270deg, #6147ff -1.72%, #1193f0 100%);
         color: white;
     }
     .custom-btn-dark {

diff --git a/src/lib/components/help/SupportHelp.svelte b/src/lib/components/help/SupportHelp.svelte
@@ -2,12 +2,13 @@
 	import constants from "$lib/utils/constants";
 </script>
 <div class="w-100 d-flex align-items-center justify-content-center">
-    <a href={`mailto:${constants.SPARROW_SUPPORT_EMAIL}`} class="px-2 sparrow-fs-12">Need Help?</a>
-    <span class="px-2 text-textColor fw-bold" >|</span>
-    <a href={`mailto:${constants.SPARROW_SUPPORT_EMAIL}`} class="px-2 sparrow-fs-12">Report Issue</a>
+    <a href={`mailto:${constants.SPARROW_SUPPORT_EMAIL}`} class="sparrow-fs-12">Need Help?</a>
+    <span class="px-2 text-textColor mb-1" >|</span>
+    <a href={`mailto:${constants.SPARROW_SUPPORT_EMAIL}`} class="sparrow-fs-12">Report Issue</a>
 </div>
 <style>
     a{
         text-decoration: none;
+        color: var(--editor-angle-bracket);
     }
 </style>
diff --git a/src/lib/components/o-auth/Oauth.svelte b/src/lib/components/o-auth/Oauth.svelte
@@ -6,8 +6,8 @@
 		navigate(constants.SPARROW_OAUTH);
 	};
 </script>
-<div class="d-flex flex-column align-items-center pb-3 justify-content-center">
-    <p>or continue with</p>
+<div class="d-flex flex-column align-items-center py-3 justify-content-center">
+    <p class="sparrow-fs-12 mb-2">or continue with</p>
     <div class="d-flex gap-4">
         <button
             on:click={handleSignInWithGoogle}