Improve sign-in and auth

Author: lucemans

web/package.json

@@ -18,6 +18,7 @@
         "@dnd-kit/utilities": "^3.2.2",
         "@radix-ui/react-avatar": "^1.1.3",
         "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-dropdown-menu": "^2.1.6",
         "@radix-ui/react-popover": "^1.1.6",
         "@radix-ui/react-switch": "^1.1.3",
         "@radix-ui/react-tooltip": "^1.1.8",

web/pnpm-lock.yaml

@@ -345,8 +345,8 @@ export const MusicRadio: FC = () => {
     };
 
     return (
-        <div className="card w-full">
-            <div className="flex items-center justify-between mb-4">
+        <div className="card w-full flex flex-col gap-4">
+            <div className="flex items-center justify-between">
                 <h1 className="text-primary">Fishing Village Radio</h1>
                 <div className="flex items-center gap-2 flex-wrap justify-end">
                     <button
@@ -362,7 +362,7 @@ export const MusicRadio: FC = () => {
                 </div>
             </div>
 
-            <p className="text-secondary mb-2">
+            <p className="text-secondary grow">
                 {isIOS ? 'Tap Listen to start the radio' : 'Enjoy the tunes in sync with the party'}
             </p>
 

web/src/components/MusicRadio.tsx

@@ -7,10 +7,17 @@ import { FaSteam } from "react-icons/fa";
 import { BsMusicNoteBeamed } from "react-icons/bs";
 import { useGuestAuth, useUser } from "@/api/auth";
 import { Avatar } from "./auth/Avatar";
-import { LuLogOut } from "react-icons/lu";
+import { LuLogOut, LuSettings } from "react-icons/lu";
 import { toast } from "sonner";
 import { baseUrl } from "@/api/api";
 import { useApp } from '@/hooks/context';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from "@radix-ui/react-dropdown-menu";
+import { NotImplemented } from "./modal/NotImplemented";
 
 export const Navbar = () => {
     return (
@@ -49,27 +56,47 @@ export const UserProfile: FC<{}> = () => {
 
     return (
         <div className="flex items-center gap-1 text-ellipsis overflow-hidden">
-            <div className="flex items-center gap-1">
-                <Avatar src={user?.avatar_url} seed={user?.user_id} />
-                <span className="break-words block overflow-hidden text-ellipsis whitespace-nowrap">{user?.name}</span>
-            </div>
-            <button className="button flex items-center gap-1" onClick={logout}>
-                <LuLogOut className="size-4" />
-                <span className="hidden sm:block">Logout</span>
-            </button>
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <button className="flex items-center gap-1 cursor-pointer outline-none px-3 mr-2 button border-b border-b-primarybg">
+                        <Avatar src={user?.avatar_url} seed={user?.user_id} />
+                        <span className="break-words block overflow-hidden text-ellipsis whitespace-nowrap">{user?.name}</span>
+                    </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                    align="end"
+                    sideOffset={5}
+                    className="bg-primary border border-tertiary rounded-md p-2 shadow-md z-50 min-w-[200px]"
+                >
+                    <DropdownMenuItem className="focus:outline-none focus:bg-secondary rounded-md">
+                        <NotImplemented>
+                            <button className="button flex items-center gap-2 w-full">
+                                <LuSettings className="size-4" />
+                                <span>Preferences</span>
+                            </button>
+                        </NotImplemented>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className="focus:outline-none focus:bg-secondary rounded-md">
+                        <button className="button button-rust flex items-center gap-2 w-full" onClick={logout}>
+                            <LuLogOut className="size-4" />
+                            <span>Logout</span>
+                        </button>
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
         </div>
     );
 };
 
 export const LoginModal: FC = () => {
     const { isLoginOpen, closeLogin, openLogin } = useApp();
-    
+
     return (
         <Dialog open={isLoginOpen} onOpenChange={closeLogin}>
             {/* <DialogTrigger asChild> */}
-                <button className="button" onClick={openLogin}>
-                    <span>Login</span>
-                </button>
+            <button className="button" onClick={openLogin}>
+                <span>Login</span>
+            </button>
             {/* </DialogTrigger> */}
             <Modal size="medium">
                 <LoginModalContent />

web/src/components/Navbar.tsx

@@ -10,7 +10,7 @@ export const CodeEntryMod: FC<{}> = () => {
     const results = codes.slice(0, codeCount);
 
     return (
-        <div className="card h-fit w-full flex flex-col gap-2 !pb-2" style={{ gridColumn: '-2 / -1' }}>
+        <div className="card w-full flex flex-col gap-2 !pb-2" style={{ gridColumn: '-2 / -1' }}>
             <div className="flex items-center justify-between">
                 <h1 className="text-primary">Code Entry (WIP)</h1>
                 <div className="flex items-center gap-1">
@@ -22,7 +22,7 @@ export const CodeEntryMod: FC<{}> = () => {
                     </ToolTip>
                 </div>
             </div>
-            <div className="w-full -mx-4 px-4 box-content bg-primary py-2">
+            <div className="w-full -mx-4 px-4 box-content bg-primary py-2 grow">
                 <ul className="space-y-1">
                     {
                         results.map((code) => (

web/src/components/party/codes/CodeEntryMod.tsx

@@ -11,7 +11,10 @@ export default {
             colors: {
                 accent: '#CCC46A',
                 primary: '#F5F5F5',
+                primarybg: '#3F3D3C',
                 secondary: '#858585',
+                secondarybg: '#53504D',
+                tertiary: '#2d2b29',
                 rust: '#AA4735',
                 'rust-active': '#852E1E',
                 // background: 'var(--theme-bg-color)',