Revamp guest v2 upload camera controls

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

@@ -6,11 +6,13 @@ import { useGuestThemeVariant } from '../lib/guestTheme';
 type FloatingActionButtonProps = {
   onPress: () => void;
   onLongPress?: () => void;
+  hidden?: boolean;
 };
 
-export default function FloatingActionButton({ onPress, onLongPress }: FloatingActionButtonProps) {
+export default function FloatingActionButton({ onPress, onLongPress, hidden = false }: FloatingActionButtonProps) {
   const longPressTriggered = React.useRef(false);
   const { isDark } = useGuestThemeVariant();
+  const translateValue = hidden ? 'translateX(-50%) translateY(36px) scale(0.72)' : 'translateX(-50%)';
 
   return (
     <Button
@@ -45,8 +47,11 @@ export default function FloatingActionButton({ onPress, onLongPress }: FloatingA
       shadowOpacity={0.5}
       shadowRadius={22}
       shadowOffset={{ width: 0, height: 10 }}
+      opacity={hidden ? 0 : 1}
+      pointerEvents={hidden ? 'none' : 'auto'}
       style={{
-        transform: 'translateX(-50%)',
+        transform: translateValue,
+        transition: 'transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 220ms ease',
         boxShadow: isDark
           ? '0 20px 40px rgba(255, 79, 216, 0.38), 0 0 0 8px rgba(255, 79, 216, 0.16)'
           : '0 18px 32px rgba(15, 23, 42, 0.2), 0 0 0 8px rgba(255, 255, 255, 0.7)',