Fix/UI (#6)

* header and logo fixed * half ui fixes * ui fixes
auvoid · Nov 4, 2024 · 47e263e · 47e263e
1 parent 86552eb
commit 47e263e
Show file tree

Hide file tree

Showing 30 changed files with 5,208 additions and 6,610 deletions.
diff --git a/apps/client/package.json b/apps/client/package.json
@@ -48,6 +48,7 @@
 		"jspdf": "^2.5.2",
 		"moment": "^2.30.1",
 		"pdfjs-dist": "^4.8.69",
+		"svelte-loading-spinners": "^0.3.6",
 		"svelte-qrcode-action": "^1.0.2"
 	}
 }
diff --git a/apps/client/src/lib/components/fragments/CvPreview.svelte b/apps/client/src/lib/components/fragments/CvPreview.svelte
@@ -49,35 +49,35 @@
 		{/each}
 	</div>
 </Modal>
-
 <div class="flex flex-col items-center self-center">
 	<div class="aspect-[1/1.414] min-w-[595px] flex" bind:this={toPdf}>
 		<div class="w-[30%] h-full bg-cyan-900 py-10 px-4 flex flex-col justify-between items-center">
 			<div>
-				<div>
-					<h1 class="font-semibold text-lg text-gray-50 mb-1">Contact</h1>
-					<div class="flex flex-col gap-[3px]">
-						<div class="text-xs font-medium text-gray-300">
-							{#if email}
-								<div class="flex items-center gap-1">
-									<EnvelopeSolid></EnvelopeSolid>{email}
-								</div>
-							{/if}
-							{#if phoneNum}
-								<div class="flex items-center gap-1">
-									<PhoneSolid></PhoneSolid>{phoneNum}
-								</div>
-							{/if}
-
-							{#if linkedin}
-								<div class="flex items-center gap-1">
-									<LinkedinSolid></LinkedinSolid>{linkedin}
-								</div>
-							{/if}
+				{#if email || phoneNum || linkedin}
+					<div>
+						<h1 class="font-semibold text-lg text-gray-50 mb-1">Contact</h1>
+						<div class="flex flex-col gap-[3px]">
+							<div class="text-xs font-medium text-gray-300">
+								{#if email}
+									<div class="flex items-center gap-1">
+										<EnvelopeSolid></EnvelopeSolid>{email}
+									</div>
+								{/if}
+								{#if phoneNum}
+									<div class="flex items-center gap-1">
+										<PhoneSolid></PhoneSolid>{phoneNum}
+									</div>
+								{/if}
+								{#if linkedin}
+									<div class="flex items-center gap-1">
+										<LinkedinSolid></LinkedinSolid>{linkedin}
+									</div>
+								{/if}
+							</div>
 						</div>
 					</div>
-				</div>
-				<Hr hrClass="h-px my-4 bg-gray-500 border-0" />
+					<Hr hrClass="h-px my-4 bg-gray-500 border-0" />
+				{/if}
 				<h1 class="font-semibold text-lg text-gray-50 mb-1">About</h1>
 				<div class="text-xs text-gray-200">
 					{intro}
@@ -229,7 +229,6 @@
 											</div>
 										</div>
 									</div>
-
 									<BadgeCheckSolid size="md" color="#184c64"></BadgeCheckSolid>
 								</div>
 							</Card>

diff --git a/apps/client/src/lib/components/fragments/Header.svelte b/apps/client/src/lib/components/fragments/Header.svelte
@@ -14,11 +14,12 @@
 	</div>
 	<div class="w-2/5">
 		<Search
+			disabled
 			class="w-full text-ellipsis rounded-lg py-[12px] focus:border-brand-green focus:ring-brand-green"
 			size="md"
 		></Search>
 	</div>
 	<div>
-		<Button color="yellow" on on:click={() => goto('/new-vcv')}>Create New VCV</Button>
+		<Button color="purple" on on:click={() => goto('/new-vcv')}>Create New VCV</Button>
 	</div>
 </header>
diff --git a/apps/client/src/lib/components/fragments/Sidebar.svelte b/apps/client/src/lib/components/fragments/Sidebar.svelte
@@ -13,7 +13,6 @@
 
 	$: activeUrl = $page.url.pathname;
 
-
 	const handleLogout = async () => {
 		token.update(() => '');
 		window.location.pathname = '/login';
@@ -22,14 +21,14 @@
 
 <Sidebar {activeUrl}>
 	<SidebarWrapper
-		class="shadow-xl h-[calc(100vh-130px)] w-64 bg-white border flex flex-col justify-between"
+		class="shadow-xl h-[calc(100vh-130px)] rounded-l-none w-64 bg-white border flex flex-col justify-between"
 	>
 		<div>
 			<SidebarGroup>
 				<div class="flex flex-col gap-6 mb-3">
 					<div class="flex items-center gap-3">
 						<Avatar rounded class="object-cover" src="" />
-						<h2 class="text-lg font-semibold">User name</h2>
+						<h2 class="text-lg font-semibold">Welcome!</h2>
 					</div>
 				</div>
 				<SidebarItem href="/dashboard" active={activeUrl === '/dashboard'} label="Your VCVs">

diff --git a/apps/client/src/lib/components/ui/Badge.svelte b/apps/client/src/lib/components/ui/Badge.svelte
@@ -17,7 +17,7 @@
 			styling = 'dark:bg-brand-red_dark dark:text-red-300';
 			break;
 		case 'yellow':
-			styling = 'dark:bg-brand-yellow_darkest dark:text-brand-yellow';
+			styling = 'dark:bg-brand-purple_darkest dark:text-brand-purple';
 			break;
 		case 'green':
 			styling = 'dark:bg-brand-dark_green dark:text-brand-light_green';

diff --git a/apps/client/src/lib/components/ui/Button.svelte b/apps/client/src/lib/components/ui/Button.svelte
@@ -4,28 +4,20 @@
 	import { twMerge } from 'tailwind-merge';
 
 	interface $$Props extends Omit<ComponentProps<Button>, 'color'> {
-		color?: 'yellow' | 'white' | 'light-yellow' | 'light-blue' | 'none';
+		color?: 'purple' | 'white' | 'none';
 		buttonClass?: string;
 	}
 
-	export let color: $$Props['color'] = 'yellow';
+	export let color: $$Props['color'] = 'purple';
 	export let buttonClass = '';
 	switch (color) {
-		case 'yellow':
-			buttonClass += ' bg-brand-yellow text-gray-800 hover:bg-brand-yellow_hover focus:ring-0';
+		case 'purple':
+			buttonClass += ' bg-brand-purple text-white hover:bg-brand-purple_hover focus:ring-0';
 			break;
 		case 'white':
 			buttonClass +=
 				' bg-gray-50 text-gray-800 border-[1px] hover:bg-gray-100 focus:ring-0 border-gray-300';
 			break;
-		case 'light-blue':
-			buttonClass +=
-				' bg-blue-100 text-gray-800 border-[1px] hover:bg-blue-200 focus:ring-0 border-blue-300';
-			break;
-		case 'light-yellow':
-			buttonClass +=
-				' bg-brand-yellow_light text-gray-800 border-[1px] hover:bg-brand-yellow focus:ring-0 border-yellow-300';
-			break;
 		default:
 			buttonClass += '';
 			break;

diff --git a/apps/client/src/lib/components/ui/Checkbox.svelte b/apps/client/src/lib/components/ui/Checkbox.svelte
@@ -16,7 +16,7 @@
 	<Checkbox
 		{...$$props}
 		id="checkbox"
-		class="{checkedColor === 'green' ? 'text-brand-green' : 'text-brand-yellow'} focus focus:ring-0"
+		class="{checkedColor === 'green' ? 'text-brand-green' : 'text-brand-purple'} focus focus:ring-0"
 		on:click
 		bind:checked
 		on:change

diff --git a/apps/client/src/lib/components/ui/Loading.svelte b/apps/client/src/lib/components/ui/Loading.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { BarLoader } from 'svelte-loading-spinners';
+</script>
+
+<div class="align-center flex h-[300px] w-full flex-col items-center justify-center gap-5">
+	<h2 class="text-lg font-medium">Loading</h2>
+	<div>
+		<BarLoader color="#9187cd"></BarLoader>
+	</div>
+</div>
diff --git a/apps/client/src/lib/components/ui/Logo.svelte b/apps/client/src/lib/components/ui/Logo.svelte
@@ -1,21 +1 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<g clip-path="url(#clip0_44_7)">
-		<path
-			d="M16.3684 17.5479C14.9975 17.5479 13.6272 18.0696 12.5837 19.113L6.63879 25.0579L11.8708 30.2899C14.1514 32.5704 17.8488 32.5704 20.1293 30.2899L25.7295 24.6897L20.1531 19.1133C19.1099 18.0702 17.739 17.5482 16.3684 17.5482V17.5479Z"
-			fill="#F7D57E"
-		/>
-		<path
-			d="M16.1383 9.12177C14.7677 9.12177 13.3971 9.64349 12.3537 10.6869L2.31079 20.7297L4.89258 23.3115L10.8375 17.3666C12.3148 15.8893 14.279 15.0756 16.3684 15.0756C18.4577 15.0756 20.4219 15.8893 21.8992 17.3666L27.4756 22.943L29.8274 20.5913L19.9227 10.6866C18.8792 9.64318 17.5086 9.12146 16.138 9.12146L16.1383 9.12177Z"
-			fill="#F7D57E"
-		/>
-		<path
-			d="M10.6075 8.94076C12.0848 7.46348 14.0489 6.64976 16.1383 6.64976C18.2277 6.64976 20.1918 7.46348 21.6691 8.94076L31.37 18.6416C32.4819 16.4499 32.1221 13.7031 30.2899 11.871L20.1292 1.71039C17.8487 -0.570129 14.1513 -0.570129 11.8708 1.71039L1.7101 11.871C-0.17298 13.754 -0.500754 16.6028 0.725544 18.8226L10.6072 8.94107L10.6075 8.94076Z"
-			fill="#F7D57E"
-		/>
-	</g>
-	<defs>
-		<clipPath id="clip0_44_7">
-			<rect width="32" height="32" fill="white" />
-		</clipPath>
-	</defs>
-</svg>
+<img src="/images/VCV-Textless-Logo.png" width="32" height="32" alt="VCV Logo" />
diff --git a/apps/client/src/routes/(auth)/login/+page.svelte b/apps/client/src/routes/(auth)/login/+page.svelte
@@ -43,7 +43,7 @@
 		></Input>
 	</div>
 	<div class="flex w-full gap-2">
-		<Button buttonClass="w-full" color="yellow" on:click={handleLogin}>Login</Button>
+		<Button buttonClass="w-full" color="purple" on:click={handleLogin}>Login</Button>
 		<Button buttonClass="w-full" color="white" on:click={() => goto('/')}>Cancel</Button>
 	</div>
 	<small class="w-full">

diff --git a/apps/client/src/routes/(auth)/sign-up/+page.svelte b/apps/client/src/routes/(auth)/sign-up/+page.svelte
@@ -57,7 +57,7 @@
 		></Input>
 	</div>
 	<div class="flex w-full gap-2">
-		<Button buttonClass="w-full" color="yellow" on:click={handleSignup}>Signup</Button>
+		<Button buttonClass="w-full" color="purple" on:click={handleSignup}>Signup</Button>
 		<Button buttonClass="w-full" color="white" on:click={() => goto('/')}>Cancel</Button>
 	</div>
 	<small class="w-full">

diff --git a/apps/client/src/routes/(private)/+layout.svelte b/apps/client/src/routes/(private)/+layout.svelte
@@ -23,12 +23,15 @@
 	<div>
 		<Header></Header>
 	</div>
-	<div class="flex gap-5 fixed w-full mt-[88px]">
+	<div class="gap-5 fixed w-full mt-[88px] lg:flex hidden">
 		<div>
 			<Sidebar></Sidebar>
 		</div>
 		<div class="w-full me-5">
 			<slot></slot>
 		</div>
 	</div>
+	<div class="flex h-screen w-screen items-center justify-center text-center lg:hidden">
+		This content currently does not support your screen.
+	</div>
 </div>