From 4787a571ef67b5c8e315b10abfee51a077e5be06 Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Wed, 7 Aug 2024 12:28:30 +0200
Subject: [PATCH] chore: Mess around with page animations + fix sidebar color +
 navbar account hover

---
 apps/frontend/src/globals.css                 | 20 -------
 .../src/ui/components/AnimatedRoutes.tsx      | 59 ++++++++++++++-----
 apps/frontend/src/ui/components/Navbar.tsx    |  3 +-
 apps/frontend/src/ui/components/Sidebar.tsx   |  2 +-
 4 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/apps/frontend/src/globals.css b/apps/frontend/src/globals.css
index cb4f1099..37bb0326 100644
--- a/apps/frontend/src/globals.css
+++ b/apps/frontend/src/globals.css
@@ -48,26 +48,6 @@ h4 { @apply text-lg font-medium; }
     display: none;
 }
 
-.page-animation-enter-active, .page-animation-leave-active {
-    transition: opacity 130ms, transform 155ms;
-    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.page-animation-enter {
-    opacity: 0.1;
-    transform: translateX(-75px);
-}
-
-.page-animation-enter-to, .page-animation-leave {
-    opacity: 1;
-    transform: translateX(0);
-}
-
-.page-animation-leave-to {
-    opacity: 0;
-    transform: translateX(75px);
-}
-
 .noti-animation-enter-active, .noti-animation-leave-active {
     transition: opacity 160ms, transform 175ms;
     transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
diff --git a/apps/frontend/src/ui/components/AnimatedRoutes.tsx b/apps/frontend/src/ui/components/AnimatedRoutes.tsx
index 8c2121ca..5cee9110 100644
--- a/apps/frontend/src/ui/components/AnimatedRoutes.tsx
+++ b/apps/frontend/src/ui/components/AnimatedRoutes.tsx
@@ -1,32 +1,63 @@
-import { type ParentProps, Show, mergeProps, splitProps } from 'solid-js';
+import { type ParentProps, Show } from 'solid-js';
 import { Transition, type TransitionProps } from 'solid-transition-group';
 import useSettingsContext from '~ui/hooks/useSettings';
 
 function AnimatedRoutes(props: TransitionProps & ParentProps) {
 	const { settings } = useSettingsContext();
 
-	const defaultProps: TransitionProps = {
-		mode: 'outin',
-		enterClass: 'page-animation-enter',
-		enterActiveClass: 'page-animation-enter-active',
-		enterToClass: 'page-animation-enter-to',
-		exitClass: 'page-animation-leave',
-		exitActiveClass: 'page-animation-leave-active',
-		exitToClass: 'page-animation-leave-to',
+	const before: Keyframe = {
+		transform: 'translateX(-85px)',
+		opacity: 0,
 	};
 
-	const [split, rest] = splitProps(props, ['children']);
-	const merged = mergeProps(defaultProps, rest);
+	const after: Keyframe = {
+		transform: 'translateX(0)',
+		opacity: 1,
+	};
 
 	return (
 		<Show
 			when={settings().disable_animations !== true}
 			fallback={(
-				<>{split.children}</>
+				<>{props.children}</>
 			)}
 			children={(
-				<Transition {...merged}>
-					{split.children}
+				<Transition
+					mode="outin"
+					onEnter={(el, done) => {
+						if (settings().disable_animations === true) {
+							done();
+							return;
+						}
+
+						el.animate([
+							before,
+							after,
+						], {
+							duration: 90,
+							easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+						}).onfinish = () => {
+							done();
+						};
+					}}
+					onExit={(el, done) => {
+						if (settings().disable_animations === true) {
+							done();
+							return;
+						}
+
+						el.animate([
+							after,
+							before,
+						], {
+							duration: 95,
+							easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+						}).onfinish = () => {
+							done();
+						};
+					}}
+				>
+					{props.children}
 				</Transition>
 			)}
 		/>
diff --git a/apps/frontend/src/ui/components/Navbar.tsx b/apps/frontend/src/ui/components/Navbar.tsx
index f7a95873..883a59c0 100644
--- a/apps/frontend/src/ui/components/Navbar.tsx
+++ b/apps/frontend/src/ui/components/Navbar.tsx
@@ -80,8 +80,9 @@ function Navbar() {
 				<button
 					ref={profileButton}
 					onClick={() => setProfileMenuOpen(!profileMenuOpen())}
+					class="hover:opacity-70"
 				>
-					<PlayerHead class="w-[30px] h-[30px] rounded-md hover:opacity-70" uuid={controller.defaultAccount()?.id} />
+					<PlayerHead class="w-[32px] h-[32px] rounded-md" uuid={controller.defaultAccount()?.id} />
 				</button>
 			</div>
 
diff --git a/apps/frontend/src/ui/components/Sidebar.tsx b/apps/frontend/src/ui/components/Sidebar.tsx
index c9d6f5b6..5b33e378 100644
--- a/apps/frontend/src/ui/components/Sidebar.tsx
+++ b/apps/frontend/src/ui/components/Sidebar.tsx
@@ -47,7 +47,7 @@ function Sidebar(props: SidebarProps) {
 											<a
 												onClick={() => goto(link[2], link[3])}
 												class={
-                                                    `px-3 py-1 rounded-md text-md hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link[2]) ? 'bg-gray-05' : ''}`
+                                                    `px-3 py-1 rounded-md text-md hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link[2]) ? 'bg-component-bg' : ''}`
 												}
 											>
 												<span class="flex flex-row items-center gap-x-3 *:w-5">