Update guest PWA v2 UI and likes

resources/js/guest-v2/components/CompassHub.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { YStack } from '@tamagui/stacks';
+import { XStack, YStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Button } from '@tamagui/button';
+import { X } from 'lucide-react';
 import { useGuestThemeVariant } from '../lib/guestTheme';
+import { getBentoSurfaceTokens } from '../lib/bento';
 
 export type CompassAction = {
   key: string;
@@ -40,6 +42,10 @@ export default function CompassHub({
 }: CompassHubProps) {
   const close = () => onOpenChange(false);
   const { isDark } = useGuestThemeVariant();
+  const bentoSurface = getBentoSurfaceTokens(isDark);
+  const tileShadow = isDark
+    ? '0 10px 0 rgba(2, 6, 23, 0.55), 0 20px 24px rgba(2, 6, 23, 0.45)'
+    : '0 10px 0 rgba(15, 23, 42, 0.18), 0 18px 22px rgba(15, 23, 42, 0.16)';
   const [visible, setVisible] = React.useState(open);
   const [closing, setClosing] = React.useState(false);
 
@@ -86,10 +92,11 @@ export default function CompassHub({
         justifyContent="center"
         pointerEvents="box-none"
       >
-        <YStack alignItems="center" justifyContent="center" gap="$3" pointerEvents="auto">
-          <Text fontSize="$5" fontFamily="$display" fontWeight="$8" color="$color">
-            {title}
-          </Text>
+        <YStack
+          alignItems="center"
+          justifyContent="center"
+          pointerEvents="auto"
+        >
           <YStack
             key={closing ? 'compass-out' : 'compass-in'}
             width={280}
@@ -97,6 +104,27 @@ export default function CompassHub({
             position="relative"
             className={closing ? 'guest-compass-flyout' : 'guest-compass-flyin'}
           >
+            <Button
+              size="$3"
+              circular
+              backgroundColor={bentoSurface.backgroundColor}
+              borderWidth={1}
+              borderBottomWidth={3}
+              borderColor={bentoSurface.borderColor}
+              borderBottomColor={bentoSurface.borderBottomColor}
+              onPress={close}
+              aria-label="Close compass"
+              style={{
+                position: 'absolute',
+                right: -18,
+                top: -18,
+                boxShadow: tileShadow,
+                transform: 'rotate(-6deg)',
+                zIndex: 2,
+              }}
+            >
+              <X size={16} color={isDark ? '#F8FAFF' : '#0F172A'} />
+            </Button>
             {quadrants.map((action, index) => (
               <Button
                 key={action.key}
@@ -107,11 +135,14 @@ export default function CompassHub({
                 width={120}
                 height={120}
                 borderRadius={24}
-                backgroundColor="$surface"
+                backgroundColor={bentoSurface.backgroundColor}
                 borderWidth={1}
-                borderColor="$borderColor"
+                borderBottomWidth={3}
+                borderColor={bentoSurface.borderColor}
+                borderBottomColor={bentoSurface.borderBottomColor}
                 position="absolute"
                 {...quadrantPositions[index]}
+                style={{ boxShadow: tileShadow }}
               >
                 <YStack alignItems="center" gap="$2">
                   {action.icon}
@@ -131,10 +162,17 @@ export default function CompassHub({
               height={90}
               borderRadius={45}
               backgroundColor="$primary"
+              borderWidth={1}
+              borderBottomWidth={3}
+              borderColor={bentoSurface.borderColor}
+              borderBottomColor={bentoSurface.borderBottomColor}
               position="absolute"
               top="50%"
               left="50%"
-              style={{ transform: 'translate(-45px, -45px)' }}
+              style={{
+                transform: 'translate(-45px, -45px)',
+                boxShadow: tileShadow,
+              }}
             >
               <YStack alignItems="center" gap="$1">
                 {centerAction.icon}
@@ -144,9 +182,6 @@ export default function CompassHub({
               </YStack>
             </Button>
           </YStack>
-          <Text fontSize="$2" color="$color" opacity={0.6}>
-            Tap outside to close
-          </Text>
         </YStack>
       </YStack>
     </YStack>