Cluster guest v2 capture controls

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

@@ -129,6 +129,7 @@ export default function AppShell({ children }: AppShellProps) {
         </YStack>
         {showFab ? (
           <>
+            {isUploadRoute ? null : (
               <Button
                 size="$3"
                 circular
@@ -144,12 +145,13 @@ export default function AppShell({ children }: AppShellProps) {
               >
                 <Home size={16} color={actionIconColor} />
               </Button>
+            )}
             <FloatingActionButton
               onPress={goTo('/upload')}
               hidden={isUploadRoute}
             />
             <Button
-              size="$4"
+              size="$5"
               circular
               position="fixed"
               bottom={28}
@@ -158,12 +160,12 @@ export default function AppShell({ children }: AppShellProps) {
               backgroundColor={isDark ? 'rgba(12, 16, 32, 0.75)' : 'rgba(255, 255, 255, 0.9)'}
               borderWidth={1}
               borderColor={isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.12)'}
-              width={54}
+              width={72}
-              height={54}
+              height={72}
               onPress={openCompass}
               style={{ boxShadow: isDark ? '0 10px 20px rgba(2, 6, 23, 0.45)' : '0 8px 16px rgba(15, 23, 42, 0.14)' }}
             >
-              <Menu size={18} color={actionIconColor} />
+              <Menu size={24} color={actionIconColor} />
             </Button>
           </>
         ) : null}

resources/js/guest-v2/screens/UploadScreen.tsx

@@ -500,13 +500,23 @@ export default function UploadScreen() {
               />
             )}
             {cameraState === 'ready' && !previewUrl ? (
-              <XStack
+              <YStack
                 position="absolute"
                 bottom="$4"
                 left="$4"
                 right="$4"
                 alignItems="center"
-                justifyContent="space-between"
+              >
+                <XStack
+                  gap="$2"
+                  alignItems="center"
+                  justifyContent="center"
+                  padding="$2"
+                  borderRadius={999}
+                  borderWidth={1}
+                  borderColor={isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.14)'}
+                  backgroundColor={isDark ? 'rgba(12, 16, 32, 0.6)' : 'rgba(255, 255, 255, 0.8)'}
+                  style={{ boxShadow: accessoryShadow }}
                 >
                   <Button
                     size="$3"
@@ -516,13 +526,12 @@ export default function UploadScreen() {
                     borderColor={flashPreferred ? 'rgba(255,255,255,0.25)' : mutedButtonBorder}
                     onPress={handleToggleFlash}
                     disabled={facingMode !== 'environment'}
-                  style={{ boxShadow: accessoryShadow }}
                     aria-label={t('upload.controls.toggleFlash', 'Toggle flash')}
                   >
                     {flashPreferred ? (
-                    <Zap size={18} color="#FFFFFF" />
+                      <Zap size={20} color="#FFFFFF" />
                     ) : (
-                    <ZapOff size={18} color={iconColor} />
+                      <ZapOff size={20} color={iconColor} />
                     )}
                   </Button>
                   <Button
@@ -530,17 +539,17 @@ export default function UploadScreen() {
                     circular
                     backgroundColor="$primary"
                     onPress={handleCapture}
-                  width={90}
+                    width={98}
-                  height={90}
+                    height={98}
                     borderRadius={999}
                     shadowColor={isDark ? 'rgba(255, 79, 216, 0.5)' : 'rgba(15, 23, 42, 0.2)'}
                     shadowOpacity={0.5}
-                  shadowRadius={22}
+                    shadowRadius={24}
-                  shadowOffset={{ width: 0, height: 10 }}
+                    shadowOffset={{ width: 0, height: 12 }}
                     style={{ boxShadow: fabShadow }}
                     aria-label={t('upload.captureButton', 'Capture')}
                   >
-                  <Camera size={34} color="#FFFFFF" />
+                    <Camera size={40} color="#FFFFFF" />
                   </Button>
                   <Button
                     size="$3"
@@ -549,12 +558,12 @@ export default function UploadScreen() {
                     borderWidth={1}
                     borderColor={mutedButtonBorder}
                     onPress={handleSwitchCamera}
-                  style={{ boxShadow: accessoryShadow }}
                     aria-label={t('upload.controls.switchCamera', 'Switch camera')}
                   >
-                  <RefreshCcw size={18} color={iconColor} />
+                    <RefreshCcw size={20} color={iconColor} />
                   </Button>
                 </XStack>
+              </YStack>
             ) : null}
             {(cameraState === 'ready' || cameraState === 'starting' || cameraState === 'preview') ? (
               <Button