From add5093fa3e9a4d1eb76094f087c0d07e554f7ee Mon Sep 17 00:00:00 2001
From: grngxd <36968271+grngxd@users.noreply.github.com>
Date: Sat, 10 Aug 2024 00:15:24 +0100
Subject: [PATCH] a

---
 web/src/components/user/User.tsx | 36 ++++++++------------------------
 1 file changed, 9 insertions(+), 27 deletions(-)

diff --git a/web/src/components/user/User.tsx b/web/src/components/user/User.tsx
index 362f6a9..b719019 100644
--- a/web/src/components/user/User.tsx
+++ b/web/src/components/user/User.tsx
@@ -1,5 +1,4 @@
-import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
-import { animate } from "motion";
+import { component$, useSignal } from "@builder.io/qwik";
 import { UserType } from "~/lib/types";
 import { LucideUsers } from "../icons/lucide/LucideUsers";
 
@@ -12,43 +11,26 @@ interface UserProps {
 
 export default component$((props: UserProps) => {
     const visible = useSignal(false);
-    const accountSwitcher = useSignal<Element>();
-    const animating = useSignal(false);
-
-    useVisibleTask$(({ track }) => {
-        track(() => visible.value);
-        if (accountSwitcher.value && !animating.value) {
-            animating.value = true;
-            animate(accountSwitcher.value, {
-                opacity: visible.value ? 1 : 0,
-                transform: visible.value ? "translateY(0)" : "translateY(10px)"
-            }, {
-                duration: 0.3,
-            });
-            animating.value = false
-        }
-    });
 
     return (
         <div>
-            <div class="!relative w-full">
+            <div class="relative w-full">
                 <div
-                    ref={accountSwitcher}
                     id="account-switcher"
-                    class={`!absolute bottom-2 w-full h-48 bg-clatter-gray-300 rounded-4xl !shadow-lg !overflow-hidden !transition-all !duration-300 !ease-in-out ${visible.value ? 'visible' : 'invisible'}`}
+                    class={`absolute bottom-2 w-full h-48 bg-clatter-gray-300 rounded-4xl shadow-lg overflow-hidden transition-opacity duration-300 ease-in-out transform ${visible.value ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'}`}
                 >
                     Account Switcher
                 </div>
             </div>
 
-            <div class="w-full !h-16 rounded-full p-2 bg-clatter-gray-300 flex justify-between gap-2">
+            <div class="w-full h-16 rounded-full p-2 bg-clatter-gray-300 flex justify-between gap-2">
                 <div class="flex gap-2">
                     <img src={props.user.avatar} alt="avatar" class="w-12 h-12 rounded-full" />
                     <div class="flex flex-col gap-1 justify-center">
-                        <p class="!text-md !font-semibold">{props.user.displayName}</p>
-                        <p class="!text-sm !font-semibold -mt-2.5">
-                            <span class="!text-clatter-gray-400">@</span>
-                            <span class="!text-clatter-gray-500">
+                        <p class="text-md font-semibold">{props.user.displayName}</p>
+                        <p class="text-sm font-semibold -mt-2.5">
+                            <span class="text-clatter-gray-400">@</span>
+                            <span class="text-clatter-gray-500">
                                 {props.user.userName} {props.action}
                             </span>
                         </p>
@@ -58,7 +40,7 @@ export default component$((props: UserProps) => {
                 {props.accountSwitcher && (
                     <button
                         onClick$={() => visible.value = !visible.value}
-                        class="!p-2 !rounded-full !bg-clatter-gray-400 !text-white !font-semibold text-lg w-12 h-12 flex items-center justify-center hover:!bg-clatter-gray-500 active:scale-95 transition-all"
+                        class="p-2 rounded-full bg-clatter-gray-400 text-white font-semibold text-lg w-12 h-12 flex items-center justify-center hover:bg-clatter-gray-500 active:scale-95 transition-all"
                     >
                         <LucideUsers />
                     </button>