added styling to dropdowns

src/app/assets/AboutIcon.tsx

@@ -0,0 +1,22 @@
+export default function AboutIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.25 11.5V7.5H8.75V11.5H7.25Z"
+        fill="#4D4857"
+      />
+      <path
+        d="M9 5.5C9 6.05228 8.55229 6.5 8 6.5C7.44772 6.5 7 6.05228 7 5.5C7 4.94772 7.44772 4.5 8 4.5C8.55229 4.5 9 4.94772 9 5.5Z"
+        fill="#4D4857"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.25 0.25H15.75V15.75H0.25V0.25ZM1.75 1.75V14.25H14.25V1.75H1.75Z"
+        fill="#4D4857"
+      />
+    </svg>
+  );
+}

src/app/assets/AgendaIcon.tsx

@@ -0,0 +1,15 @@
+export default function AgendaIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.25 2.25H15.75V15.75H0.25V2.25ZM1.75 3.75V14.25H14.25V3.75H1.75Z"
+        fill="#1A1622"
+      />
+      <path fillRule="evenodd" clipRule="evenodd" d="M10.25 5V0.5H11.75V5H10.25Z" fill="#1A1622" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M1 7.25H15V8.75H1V7.25Z" fill="#1A1622" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M4.25 5V0.5H5.75V5H4.25Z" fill="#1A1622" />
+    </svg>
+  );
+}

src/app/assets/GalleryIcon.tsx

@@ -0,0 +1,30 @@
+export default function GalleryIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.10938 13.9531L8.99846 10.064L12.8875 13.9531L8.99846 17.8421L5.10938 13.9531ZM7.2307 13.9531L8.99846 15.7208L10.7662 13.9531L8.99846 12.1853L7.2307 13.9531Z"
+        fill="#4D4857"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.15625 8.99993L4.04534 5.11084L7.93442 8.99993L4.04534 12.889L0.15625 8.99993ZM2.27757 8.99993L4.04534 10.7677L5.8131 8.99993L4.04534 7.23216L2.27757 8.99993Z"
+        fill="#4D4857"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.10938 4.0468L8.99846 0.157715L12.8875 4.0468L8.99846 7.93589L5.10938 4.0468ZM7.2307 4.0468L8.99846 5.81457L10.7662 4.0468L8.99846 2.27904L7.2307 4.0468Z"
+        fill="#4D4857"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.0547 8.99993L13.9438 5.11084L17.8329 8.99993L13.9438 12.889L10.0547 8.99993ZM12.176 8.99993L13.9438 10.7677L15.7115 8.99993L13.9438 7.23216L12.176 8.99993Z"
+        fill="#4D4857"
+      />
+    </svg>
+  );
+}

src/app/assets/MyCardsIcon.tsx

@@ -0,0 +1,12 @@
+export default function MyCardsIcon() {
+  return (
+    <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.8778 0.641579L6.38477 0.240234L6.24566 4.22571L0.109375 4.43945L0.569655 15.7623H5.84298L5.84292 15.764L17.3497 15.764L17.8778 0.641579ZM5.89533 14.2623L6.1932 5.72845L1.66942 5.88602L2.00992 14.2623L5.89533 14.2623ZM7.39619 14.264L7.83153 1.79167L16.3263 2.08832L15.9012 14.264H7.39619Z"
+        fill="#4D4857"
+      />
+    </svg>
+  );
+}

src/app/components/ExpandedCard/ExpandedCard.tsx

@@ -17,6 +17,9 @@ import {
 import GlassButton from '../GlassButton/GlassButton';
 import SectionsIcon from '@/app/assets/SectionsIcon';
 import { getCardLogo } from '@/app/util/getCardLogo';
+import ProfileIcon from '@/app/assets/ProfileIcon';
+import AgendaIcon from '@/app/assets/AgendaIcon';
+import AboutIcon from '@/app/assets/AboutIcon';
 
 export type SectionId = 'faq' | 'agenda' | 'judges';
 
@@ -142,10 +145,22 @@ const ExpandedCardComponent = ({ showExpanded }: ExpandedCardProps) => {
               <SectionsIcon />
             </GlassButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="center">
-            <DropdownMenuItem onClick={() => scrollToSection('faq')}>FAQ</DropdownMenuItem>{' '}
-            <DropdownMenuItem onClick={() => scrollToSection('agenda')}>Agenda</DropdownMenuItem>
-            <DropdownMenuItem onClick={() => scrollToSection('judges')}>Judges</DropdownMenuItem>
+          <DropdownMenuContent className="rounded-lg" sideOffset={8} align="center">
+            <DropdownMenuItem onClick={() => scrollToSection('faq')}>
+              <AboutIcon />
+              About
+            </DropdownMenuItem>{' '}
+            {/* Divider Line*/}
+            <div className="my-1 h-0.5 bg-gray-300" />
+            <DropdownMenuItem onClick={() => scrollToSection('agenda')}>
+              <AgendaIcon />
+              Agenda
+            </DropdownMenuItem>
+            <div className="my-1 h-0.5 bg-gray-300" />
+            <DropdownMenuItem onClick={() => scrollToSection('judges')}>
+              <ProfileIcon />
+              Judges
+            </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       </div>

src/app/components/SignInButton.tsx

@@ -1,5 +1,5 @@
 import { memo, useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { authClient } from '@/lib/auth-client';
 import LoginIcon from '../assets/LoginIcon';
 import GlassButton from './GlassButton/GlassButton';
@@ -13,6 +13,8 @@ import {
 import ProfileIcon from '../assets/ProfileIcon';
 import { Session } from '@/lib/auth';
 import Modal from './Modal';
+import MyCardsIcon from '../assets/MyCardsIcon';
+import GalleryIcon from '../assets/GalleryIcon';
 
 interface SignInButtonProps {
   session: Session | null;
@@ -22,6 +24,7 @@ interface SignInButtonProps {
 function SignInButton({ session, className }: SignInButtonProps) {
   const [openLoginModal, setOpenLoginModal] = useState(false);
   const [openSignOutModal, setOpenSignOutModal] = useState(false);
+  const pathname = usePathname();
   const router = useRouter();
 
   const handleSignOut = async () => {
@@ -68,10 +71,19 @@ function SignInButton({ session, className }: SignInButtonProps) {
             <ProfileIcon />
           </GlassButton>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="center">
-          <DropdownMenuItem onClick={() => router.push('/my-cards')}>My Cards</DropdownMenuItem>{' '}
-          {/* Placeholder for now */}
-          <DropdownMenuItem onClick={() => setOpenSignOutModal(true)}>Sign Out</DropdownMenuItem>
+        <DropdownMenuContent className="rounded-lg" sideOffset={8} align="center">
+          <DropdownMenuItem
+            onClick={() => router.push(pathname === '/my-cards' ? '/' : '/my-cards')}
+          >
+            {pathname === '/my-cards' ? <GalleryIcon /> : <MyCardsIcon />}
+            {pathname === '/my-cards' ? 'Gallery' : 'My Cards'}
+          </DropdownMenuItem>
+          {/* Divider Line*/}
+          <div className="my-1 h-0.5 bg-gray-300" />
+          <DropdownMenuItem onClick={() => setOpenSignOutModal(true)}>
+            <LoginIcon />
+            Log Out
+          </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
     </div>