changed design

rezk2ll · Aug 22, 2023 · 7a68b0a · 7a68b0a
1 parent bf02c03
commit 7a68b0a
Show file tree

Hide file tree

Showing 17 changed files with 111 additions and 113 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -10,7 +10,6 @@ services:
       - .env
     networks:
       - registration-network
-    name: twake-register
 
   openldap:
     image: bitnami/openldap
@@ -23,11 +22,9 @@ services:
       - openldap_data:/bitnami/openldap
     networks:
       - registration-network
-    name: openldap
 
   llng:
     image: yadd/lemonldap-ng-full
-    name: lemonldap
     environment:
       - LOGGER=stderr
       - USERLOGGER=stderr

diff --git a/src/lib/components/dispaly/Info.svelte b/src/lib/components/dispaly/Info.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div
-	class="mb-3 inline-flex w-full items-center rounded-lg bg-gray-900 px-6 py-5 text-sm text-gray-100"
+	class="mb-3 inline-flex w-full items-center rounded-lg  px-6 py-5 text-sm text-gray-500"
 	role="alert"
 >
 	<span class="mr-2">

diff --git a/src/lib/components/input/OtpField.svelte b/src/lib/components/input/OtpField.svelte
@@ -27,5 +27,5 @@
 	bind:this={input}
 	type="text"
 	maxlength="1"
-	class="w-10 outline-none p-3 text-center rounded-md m-1 border-solid border-2 border-blue-800 font-bold text-white transition-all bg-gray-900"
+	class="w-10 outline-none p-3 text-center rounded-md m-1 border-solid border-2 focus:border-blue-600 font-bold transition-all bg-slate-200"
 />
diff --git a/src/lib/components/landing/AccessSelect.svelte b/src/lib/components/landing/AccessSelect.svelte
@@ -1,16 +1,27 @@
-<div class="flex flex-col w-full items-center justify-center">
-	<div class="w-8/12 px-3 mb-5">
+<div class="flex flex-col w-full items-center justify-center space-y-10 pt-20">
+	<div class="bg-white rounded-3xl flex flex-col space-y-5 items-center justify-center w-1/2 p-10">
+		<h1 class="text-black text-4xl not-italic font-bold">Sign in</h1>
 		<a
+			class="w-full rounded-3xl flex h-16 justify-center items-center flex-shrink-0 bg-blue-600 text-white text-center text-2xl not-italic font-medium leading-8"
 			href="/login"
-			class="flex items-center justify-center mt-4 w-full transform rounded-md bg-blue-500 px-6 py-3 text-sm font-medium capitalize tracking-wide text-white transition-colors duration-300 hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50"
-			>Login</a
 		>
+			Sign in
+		</a>
+		<a
+			class="w-full rounded-3xl flex h-16 justify-center items-center flex-shrink-0 bg-slate-200 text-blue-600 text-center text-2xl not-italic font-medium leading-8"
+			href="/#"
+		>
+			Reset password
+		</a>
 	</div>
-	<div class="w-8/12 px-3 mb-5 -mx-3">
+	<div class="bg-white rounded-3xl flex flex-col space-y-5 items-center justify-center w-1/2 p-10">
+		<h1 class="text-black text-4xl not-italic font-bold">Sign up</h1>
+		<p class="text-gray-500 text-center text-xl not-italic font-medium">Unleash Your Team's Potential: Connect, Collaborate, Succeed!</p>
 		<a
+			class="w-full rounded-3xl flex h-16 justify-center items-center flex-shrink-0 bg-green-500 leading-8 text-white text-center text-xl not-italic font-medium"
 			href="/register"
-			class="flex items-center justify-center mt-4 w-full transform rounded-md bg-blue-500 px-6 py-3 text-sm font-medium capitalize tracking-wide text-white transition-colors duration-300 hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50"
-			>Register</a
 		>
+			Sign up
+		</a>
 	</div>
 </div>
diff --git a/src/lib/components/landing/Hero.svelte b/src/lib/components/landing/Hero.svelte
@@ -1,72 +1,20 @@
-<div
-	class="flex w-full flex-col items-center justify-center p-8 lg:w-1/2 lg:bg-gray-100 lg:px-12 lg:dark:bg-gray-800 xl:px-32"
->
-	<h1 class="text-3xl font-semibold capitalize text-gray-800 dark:text-white lg:text-5xl">
-		Join us.
-	</h1>
+<script lang="ts">
+	import Twake from '../logo/Twake.svelte';
+</script>
 
-	<p class="mt-4 text-gray-500 dark:text-gray-400">Join twake on matrix</p>
-
-	<div class="mt-6 md:mt-8">
-		<h3 class="font-medium text-gray-600 dark:text-gray-300">Follow us</h3>
-
-		<div class="-mx-1.5 mt-4 flex">
-			<a
-				class="mx-1.5 transform text-gray-400 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400"
-				href="https://twitter.com/linagora"
-			>
-				<svg
-					class="h-10 w-10 fill-current"
-					viewBox="0 0 24 24"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<path
-						d="M18.6668 6.67334C18.0002 7.00001 17.3468 7.13268 16.6668 7.33334C15.9195 6.49001 14.8115 6.44334 13.7468 6.84201C12.6822 7.24068 11.9848 8.21534 12.0002 9.33334V10C9.83683 10.0553 7.91016 9.07001 6.66683 7.33334C6.66683 7.33334 3.87883 12.2887 9.3335 14.6667C8.0855 15.498 6.84083 16.0587 5.3335 16C7.53883 17.202 9.94216 17.6153 12.0228 17.0113C14.4095 16.318 16.3708 14.5293 17.1235 11.85C17.348 11.0351 17.4595 10.1932 17.4548 9.34801C17.4535 9.18201 18.4615 7.50001 18.6668 6.67268V6.67334Z"
-					/>
-				</svg>
-			</a>
-
-			<a
-				class="mx-1.5 transform text-gray-400 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400"
-				href="https://linkedin.com/linagora"
-			>
-				<svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<path
-						d="M15.2 8.80005C16.4731 8.80005 17.694 9.30576 18.5941 10.2059C19.4943 11.1061 20 12.327 20 13.6V19.2H16.8V13.6C16.8 13.1757 16.6315 12.7687 16.3314 12.4687C16.0313 12.1686 15.6244 12 15.2 12C14.7757 12 14.3687 12.1686 14.0687 12.4687C13.7686 12.7687 13.6 13.1757 13.6 13.6V19.2H10.4V13.6C10.4 12.327 10.9057 11.1061 11.8059 10.2059C12.7061 9.30576 13.927 8.80005 15.2 8.80005Z"
-						fill="currentColor"
-					/>
-					<path d="M7.2 9.6001H4V19.2001H7.2V9.6001Z" fill="currentColor" />
-					<path
-						d="M5.6 7.2C6.48366 7.2 7.2 6.48366 7.2 5.6C7.2 4.71634 6.48366 4 5.6 4C4.71634 4 4 4.71634 4 5.6C4 6.48366 4.71634 7.2 5.6 7.2Z"
-						fill="currentColor"
-					/>
-				</svg>
-			</a>
-
-			<a
-				class="mx-1.5 transform text-gray-400 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400"
-				href="https://facebook.com/linagora"
-			>
-				<svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<path
-						d="M7 10.2222V13.7778H9.66667V20H13.2222V13.7778H15.8889L16.7778 10.2222H13.2222V8.44444C13.2222 8.2087 13.3159 7.9826 13.4826 7.81591C13.6493 7.64921 13.8754 7.55556 14.1111 7.55556H16.7778V4H14.1111C12.9324 4 11.8019 4.46825 10.9684 5.30175C10.1349 6.13524 9.66667 7.2657 9.66667 8.44444V10.2222H7Z"
-						fill="currentColor"
-					/>
-				</svg>
-			</a>
-
-			<a
-				class="mx-1.5 transform text-gray-400 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400"
-				href="https://instagram.com/linagora"
-			>
-				<svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<path
-						d="M11.9294 7.72275C9.65868 7.72275 7.82715 9.55428 7.82715 11.825C7.82715 14.0956 9.65868 15.9271 11.9294 15.9271C14.2 15.9271 16.0316 14.0956 16.0316 11.825C16.0316 9.55428 14.2 7.72275 11.9294 7.72275ZM11.9294 14.4919C10.462 14.4919 9.26239 13.2959 9.26239 11.825C9.26239 10.354 10.4584 9.15799 11.9294 9.15799C13.4003 9.15799 14.5963 10.354 14.5963 11.825C14.5963 13.2959 13.3967 14.4919 11.9294 14.4919ZM17.1562 7.55495C17.1562 8.08692 16.7277 8.51178 16.1994 8.51178C15.6674 8.51178 15.2425 8.08335 15.2425 7.55495C15.2425 7.02656 15.671 6.59813 16.1994 6.59813C16.7277 6.59813 17.1562 7.02656 17.1562 7.55495ZM19.8731 8.52606C19.8124 7.24434 19.5197 6.10901 18.5807 5.17361C17.6453 4.23821 16.51 3.94545 15.2282 3.88118C13.9073 3.80621 9.94787 3.80621 8.62689 3.88118C7.34874 3.94188 6.21341 4.23464 5.27444 5.17004C4.33547 6.10544 4.04628 7.24077 3.98201 8.52249C3.90704 9.84347 3.90704 13.8029 3.98201 15.1238C4.04271 16.4056 4.33547 17.5409 5.27444 18.4763C6.21341 19.4117 7.34517 19.7045 8.62689 19.7687C9.94787 19.8437 13.9073 19.8437 15.2282 19.7687C16.51 19.708 17.6453 19.4153 18.5807 18.4763C19.5161 17.5409 19.8089 16.4056 19.8731 15.1238C19.9481 13.8029 19.9481 9.84704 19.8731 8.52606ZM18.1665 16.5412C17.8881 17.241 17.349 17.7801 16.6456 18.0621C15.5924 18.4799 13.0932 18.3835 11.9294 18.3835C10.7655 18.3835 8.26272 18.4763 7.21307 18.0621C6.51331 17.7837 5.9742 17.2446 5.69215 16.5412C5.27444 15.488 5.37083 12.9888 5.37083 11.825C5.37083 10.6611 5.27801 8.15832 5.69215 7.10867C5.97063 6.40891 6.50974 5.8698 7.21307 5.58775C8.26629 5.17004 10.7655 5.26643 11.9294 5.26643C13.0932 5.26643 15.596 5.17361 16.6456 5.58775C17.3454 5.86623 17.8845 6.40534 18.1665 7.10867C18.5843 8.16189 18.4879 10.6611 18.4879 11.825C18.4879 12.9888 18.5843 15.4916 18.1665 16.5412Z"
-						fill="currentColor"
-					/>
-				</svg>
-			</a>
+<div class="flex flex-col space-y-20 justify-center font-[Inter]">
+	<div class="w-20 h-30">
+		<Twake />
+	</div>
+	<div class="flex flex-col space-y-10">
+		<h1 class="text-8xl font-bold text-black">Collaboration powerhouse</h1>
+		<div class="flex flex-col text-gray-600 font-semibold text-[28px] not-italic">
+			<p>File storage, mail client and calendar.</p>
+			<p>We cover all your needs.</p>
+		</div>
+		<div class="flex flex-col">
+			<p class="text-gray-400 text-2xl not-italic font-semibold">powered by</p>
+			<img src="/logo-linagora.png" alt="Liangora" class="w-40 h-8 flex-shrink-0"/>
 		</div>
 	</div>
 </div>
diff --git a/src/lib/components/logo/Twake.svelte b/src/lib/components/logo/Twake.svelte
@@ -0,0 +1,36 @@
+<svg
+	version="1.1"
+	id="Layer_1"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	x="0px"
+	y="0px"
+	viewBox="0 0 500 500"
+	style="enable-background:new 0 0 500 500;"
+	xml:space="preserve"
+>
+	<style type="text/css">
+		.st0 {
+			fill-rule: evenodd;
+			clip-rule: evenodd;
+		}
+	</style>
+	<g>
+		<path
+			class="st0"
+			d="M162.7,196.1v-73c0-4.1,2.2-7.8,5.7-9.8l75.1-43.1c3.5-2,7.7-2,11.2,0l76.2,43.1c3.6,2,5.8,5.8,5.8,9.9v73.1
+		c0,8.7-9.4,14.2-16.9,9.9l-65-36.8c-3.5-2-7.8-2-11.2,0l-63.8,36.6C172.1,210.3,162.7,204.8,162.7,196.1z"
+		/>
+		<path
+			class="st0"
+			d="M232.4,374.2l-66.1,36.3c-3.5,1.9-7.8,1.9-11.2-0.2l-72.6-42.8c-3.5-2-5.6-5.8-5.6-9.8v-86.1
+		c0-4.1,2.2-7.8,5.7-9.8l63.2-36.5c7.6-4.4,17,1.1,17,9.8l0,73.4c0,4.1,2.2,7.9,5.8,9.9l63.9,35.8
+		C240.2,358.7,240.2,369.9,232.4,374.2z"
+		/>
+		<path
+			class="st0"
+			d="M353.7,225.5l63.2,36.5c3.5,2,5.7,5.8,5.7,9.8l0,86c0,4.1-2.2,7.8-5.7,9.8l-75.1,43c-3.5,2-7.8,2-11.3,0
+		l-63.1-36.4c-7.6-4.4-7.6-15.3,0-19.7l63.6-36.5c3.5-2,5.7-5.8,5.7-9.8l0-72.9C336.7,226.6,346.2,221.1,353.7,225.5z"
+		/>
+	</g>
+</svg>
diff --git a/src/lib/components/otp/PhoneInput.svelte b/src/lib/components/otp/PhoneInput.svelte
@@ -18,9 +18,7 @@
 
 <div class="flex flex-col space-y-8">
 	<div class="flex items-center justify-center">
-		<h3 class="text-lg flex text-center font-semibold leading-tight uppercase text-slate-400">
-			SIGN UP
-		</h3>
+		<h1 class="text-black text-4xl not-italic font-bold">Sign in</h1>
 	</div>
 	{#if invalid}
 		<Fail>This phone number is not available</Fail>
@@ -60,7 +58,7 @@
 				bind:value
 				{options}
 				required={true}
-				class="text-sm rounded-r-lg block w-full p-2.5 focus:outline-none border border-gray-300 border-l-gray-100 dark:border-l-gray-700 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white text-gray-900"
+				class="text-sm rounded-r-lg block w-full p-2.5 focus:border-blue-600 border border-gray-300 border-l-gray-100 bg-gray-100  text-gray-900"
 			/>
 		</div>
 		<input type="hidden" bind:value name="phone" />

diff --git a/src/lib/components/otp/VerifyCode.svelte b/src/lib/components/otp/VerifyCode.svelte
@@ -33,8 +33,8 @@
 	};
 </script>
 
-<div class="flex flex-col space-y-4 items-center justify-center">
-	<h3 class="text-lg font-semibold leading-tight uppercase">OTP Verification</h3>
+<div class="flex flex-col space-y-5 items-center justify-center">
+	<h1 class="text-black text-4xl not-italic font-bold">OTP Verification</h1>
 	{#if valid}
 		<Success>
 			we've sent the verification code to {mask}
@@ -57,7 +57,7 @@
 			on:click={handleSubmit}
 			type="submit"
 			disabled={loading}
-			class="flex items-center cursor-pointer font-bold justify-center m-1 p-3 w-full transform rounded-lg bg-blue-500 disabled:bg-blue-400 capitalize tracking-wide text-white transition-colors duration-300 hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50"
+			class="flex items-center cursor-pointer font-bold justify-center m-1 p-3 w-full transform rounded-xl bg-blue-500 disabled:bg-blue-400 capitalize tracking-wide text-white transition-colors duration-300 hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50"
 		>
 			{#if loading}
 				<Spinner />

diff --git a/src/lib/utils/password.ts b/src/lib/utils/password.ts
@@ -11,4 +11,4 @@
  * @returns {boolean} - whether the password is valid or not
  */
 export const validatePassword = (password: string): boolean =>
-	/^(?=.*\d)(?=.*[!@#$%^&+*])(?=.*[a-z])(?=.*[A-Z]).{8,}$/g.test(password);
+	/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/g.test(password);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,6 +1,5 @@
 <script>
 	import '../app.css';
-	import Nav from '$lib/components/nav/Nav.svelte';
 </script>
 
 <svelte:head>
@@ -12,7 +11,6 @@
 	<title>Sign up on Twake</title>
 </svelte:head>
 
-<div class="min-h-screen w-full overflow-hidden bg-gray-900 flex flex-col">
-	<Nav />
+<div class="min-h-screen w-full overflow-hidden bg-coolgray bg-layout flex flex-col">
 	<slot />
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -4,9 +4,9 @@
 </script>
 
 <div
-	class="flex space-x-4 w-full min-w-screen min-h-screen bg-gray-900 items-center justify-center px-5 py-5"
+	class="flex space-x-4 w-full min-w-screen min-h-screen align-middle lg:px-52 py-5"
 >
-	<div class="rounded-3xl shadow-xl w-full overflow-hidden max-w-6xl">
+	<div class="w-full overflow-hidden">
 		<div class="flex flex-col md:flex-row w-full items-center justify-center">
 			<Hero />
 			<AccessSelect />

diff --git a/src/routes/register/+layout.svelte b/src/routes/register/+layout.svelte
@@ -1,9 +1,14 @@
-<div
-	class="flex space-x-4 w-full min-w-screen min-h-screen bg-gray-900 items-center justify-center"
->
-	<div
-		class="bg-gray-800 text-gray-500 rounded-xl shadow-xl px-2 py-16 md:px-16 w-full md:w-2/3 lg:w-2/5"
-	>
-		<slot />
+<script>
+	import Hero from '$lib/components/landing/Hero.svelte';
+</script>
+
+<div class="flex space-x-4 w-full min-w-screen min-h-screen align-middle md:px-52 pt-20">
+	<div class="w-full overflow-hidden">
+		<div class="flex flex-col md:flex-row w-full items-center justify-center">
+			<Hero />
+			<div class="rounded-xl bg-white shadow-xl px-2 py-16 md:px-16 w-full md:w-2/3">
+				<slot />
+			</div>
+		</div>
 	</div>
 </div>
diff --git a/src/routes/register/+page.server.ts b/src/routes/register/+page.server.ts
@@ -30,8 +30,8 @@ export const actions: Actions = {
 				return fail(400, { phone, taken: true });
 			}
 
-			await send(code, phone);
-
+			// await send(code, phone);
+			console.log({ code })
 			await locals.session.set({
 				code,
 				phone,

diff --git a/src/routes/register/user/+page.svelte b/src/routes/register/user/+page.svelte
@@ -20,10 +20,8 @@
 	$: invalidConfirmPassword = password && password !== confirmPassword;
 </script>
 
-<div class="flex flex-col items-center justify-center p-10 space-y-2">
-	<h1 class="text-3xl font-bold text-center mb-4 cursor-pointer text-white w-full">
-		Create An Account
-	</h1>
+<div class="flex flex-col items-center justify-center space-y-10">
+	<h1 class="text-black text-4xl not-italic font-bold">Create an account</h1>
 	<form action="/register/user" method="POST" class="flex flex-col space-y-4 w-full" use:enhance>
 		{#if form?.missing}
 			<Fail>Nickname is missing</Fail>
@@ -50,14 +48,14 @@
 			required
 			class="{invalidNickname
 				? 'border-red-700 focus:border-red-500'
-				: 'border-blue-700 focus:border-blue-500'}
-				block text-sm py-3 px-4 outline-none w-full p-3 rounded-md m-1 border-solid border-2 font-bold text-white transition-all bg-gray-900"
+				: 'border-slate-200 focus:border-blue-500'}
+				block text-sm py-3 px-4 outline-none w-full p-3 rounded-md m-1 border-solid border-2 font-bold transition-all bg-white"
 		/>
 		<input
 			type="text"
 			name="display_name"
 			placeholder="Dispaly name"
-			class="block text-sm py-3 px-4 outline-none w-full p-3 rounded-md m-1 border-solid border-2 border-blue-700 focus:border-blue-500 font-bold text-white transition-all bg-gray-900"
+			class="block text-sm py-3 px-4 outline-none w-full p-3 rounded-md m-1 border-solid border-2 border-slate-200 focus:border-blue-500 font-bold transition-all bg-white"
 		/>
 		<input
 			type="email"
@@ -66,7 +64,7 @@
 			bind:value={email}
 			class="{invalidEmail
 				? 'border-red-700 focus:border-red-500'
-				: 'border-blue-700 focus:border-blue-500'} block text-sm py-3 px-4 outline-none w-full p-3 rounded-md m-1 border-solid border-2 font-bold text-white transition-all bg-gray-900"
+				: 'border-slate-200 focus:border-blue-500'} block text-sm py-3 px-4 outline-none w-full p-3 rounded-md m-1 border-solid border-2 font-bold transition-all bg-white"
 		/>
 		<input
 			type="password"
@@ -76,7 +74,7 @@
 			placeholder="Password"
 			class="{invalidPassword
 				? 'border-red-700 focus:border-red-500'
-				: 'border-blue-700 focus:border-blue-500'} block text-sm py-3 px-4 outline-none w-full p-3 rounded-md m-1 border-solid border-2 font-bold text-white transition-all bg-gray-900"
+				: 'border-slate-200 focus:border-blue-500'} block text-sm py-3 px-4 outline-none w-full p-3 rounded-md m-1 border-solid border-2 font-bold transition-all bg-white"
 		/>
 		<h3 class="text-slate-500 text-sm pl-1">
 			the password must be at least 8 characters long, with at least a symbol, upper and lower case
@@ -90,7 +88,7 @@
 			placeholder="Confirm password"
 			class="{invalidConfirmPassword
 				? 'border-red-700 focus:border-red-500'
-				: 'border-blue-700 focus:border-blue-500'} block text-sm py-3 px-4 outline-none w-full p-3 rounded-md m-1 border-solid border-2 font-bold text-white transition-all bg-gray-900"
+				: 'border-slate-200 focus:border-blue-500'} block text-sm py-3 px-4 outline-none w-full p-3 rounded-md m-1 border-solid border-2 font-bold transition-all bg-white"
 		/>
 		<input
 			type="submit"

diff --git a/static/Chat-bubble-dynamic-clay.png b/static/Chat-bubble-dynamic-clay.png
diff --git a/static/logo-linagora.png b/static/logo-linagora.png
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,7 +2,14 @@
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
-		extend: {}
+		extend: {
+			colors: {
+				'coolgray': '#EDEEF0'
+			},
+			backgroundImage: {
+				'layout': 'url("/Chat-bubble-dynamic-clay.png"), url("/Chat-bubble-dynamic-clay.png") '
+			}	
+		}
 	},
 	plugins: []
 };