chore: Mess around with page animations + fix sidebar color + navbar account hover

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);

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>
 			)}
 		/>

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>
 

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">