feat: update Navbar and Faucet components for improved user experience

Author: ErwanDecoster

src/components/navbar/NavBar.tsx

@@ -24,11 +24,11 @@ export function Navbar() {
         <span className="hidden lg:block">iExec Explorer</span>
       </ChainLink>
       <div className="mr-8 flex items-center gap-4 md:mr-0">
+        <Button variant="link" asChild className="text-foreground -mr-4">
+          <ChainLink to="/faucet">Faucet</ChainLink>
+        </Button>
         {isConnected && (
-          <div className="hidden md:flex">
-            <Button variant="link" asChild className="text-foreground">
-              <ChainLink to="/faucet">Faucet</ChainLink>
-            </Button>
+          <div className="-mr-4 hidden md:flex">
             <Button variant="link" asChild className="text-foreground">
               <ChainLink to={`/address/${userAddress}?from=my_activity`}>
                 My activity
@@ -37,9 +37,9 @@ export function Navbar() {
             <Button variant="link" asChild className="text-foreground">
               <ChainLink to="/account">iExec Account</ChainLink>
             </Button>
-            <span className="border-secondary border-l" />
           </div>
         )}
+        <span className="border-secondary h-9 border-l" />
         <div className="content hidden gap-4 md:flex">
           <ModeToggle />
           <ChainSelector />

src/hooks/useLoginLogout.ts

@@ -1,11 +1,14 @@
+import { useAuth } from '@clerk/clerk-react';
 import { useAppKit } from '@reown/appkit/react';
 import { useDisconnect } from 'wagmi';
 
 export function useLoginLogout() {
   const { open } = useAppKit();
   const { disconnectAsync } = useDisconnect();
+  const { signOut } = useAuth()
 
   const logout = async () => {
+    signOut()
     try {
       await disconnectAsync();
     } catch (err) {

src/routes/$chainSlug/_layout/faucet.tsx

@@ -147,9 +147,21 @@ function FaucetRoute() {
         <SignedIn>
           <div className="space-y-4">
             <div className="flex flex-col justify-center gap-4 md:flex-row md:items-center">
-              <Button className="dark:bg-popover bg-primary-foreground hover:bg-muted text-primary dark:text-brand px-1 duration-300">
-                <UserButton showName />
-              </Button>
+              <div className="flex-none">
+                <UserButton
+                  showName
+                  appearance={{
+                    elements: {
+                      userButtonTrigger: {
+                        background: 'var(--primary-foreground)',
+                        color: 'var(--primary)',
+                        borderRadius: '9999px',
+                        padding: '8px',
+                      },
+                    },
+                  }}
+                />
+              </div>
               <div className="relative w-full">
                 <Input
                   className="max-w-80 min-w-full pr-11"