feat: update TableBackground and LobbyScreen for improved UI and functionality; add promo code support in LobbyScreen

src/components/TableBackground.js

@@ -6,7 +6,7 @@ export default function TableBackground({ children, style }) {
   return (
     <View style={[styles.wrapper, style]}>
       <LinearGradient
-        colors={[colors.tableEdge, '#3e2a10']}
+        colors={[colors.tableFeltDark, '#0a3a2a']}
         start={{ x: 0, y: 0 }}
         end={{ x: 1, y: 1 }}
         style={styles.edge}
@@ -37,7 +37,7 @@ const styles = StyleSheet.create({
     borderTopRightRadius: 12,
     borderBottomLeftRadius: 280,
     borderBottomRightRadius: 280,
-    padding: 6
+    padding: 4
   },
   felt: {
     flex: 1,

src/screens/LobbyScreen.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { ActivityIndicator, StyleSheet, Text, TextInput, View } from 'react-native';
+import { ActivityIndicator, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useStripe } from '@stripe/stripe-react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -13,6 +13,7 @@ export default function LobbyScreen({ user, token, onLogout, onSelectTable, onRe
   const [depositLoading, setDepositLoading] = useState(false);
   const [depositError, setDepositError] = useState('');
   const [customAmount, setCustomAmount] = useState('');
+  const [promoCode, setPromoCode] = useState('');
   const insets = useSafeAreaInsets();
   const { initPaymentSheet, presentPaymentSheet } = useStripe();
 
@@ -35,9 +36,10 @@ export default function LobbyScreen({ user, token, onLogout, onSelectTable, onRe
     try {
       setDepositLoading(true);
       setDepositError('');
+      const code = promoCode.trim().toUpperCase();
       const data = await apiFetch('/api/wallet/deposit-intent', token, {
         method: 'POST',
-        body: JSON.stringify({ amount })
+        body: JSON.stringify(code ? { amount, promoCode: code } : { amount })
       });
 
       const init = await initPaymentSheet({
@@ -71,6 +73,7 @@ export default function LobbyScreen({ user, token, onLogout, onSelectTable, onRe
       }
 
       await onRefreshUser();
+      setPromoCode('');
     } catch (err) {
       setDepositError(err.message || 'Nem sikerult a feltoltes.');
     } finally {
@@ -96,6 +99,11 @@ export default function LobbyScreen({ user, token, onLogout, onSelectTable, onRe
           paddingBottom: insets.bottom + 16
         }
       ]}
+    >
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
       >
         <View style={styles.header}>
           <View>
@@ -135,6 +143,19 @@ export default function LobbyScreen({ user, token, onLogout, onSelectTable, onRe
               disabled={depositLoading || !customValid}
             />
           </View>
+          <View style={styles.promoRow}>
+            <Text style={styles.customLabel}>Promó kód</Text>
+            <View style={styles.promoInputRow}>
+              <TextInput
+                value={promoCode}
+                onChangeText={(value) => setPromoCode(value.replace(/\\s/g, '').toUpperCase())}
+                placeholder="PL. BLACKJACK2025"
+                placeholderTextColor="rgba(255,255,255,0.35)"
+                autoCapitalize="characters"
+                style={styles.customInput}
+              />
+            </View>
+          </View>
           {depositError ? <Text style={styles.error}>{depositError}</Text> : null}
         </View>
 
@@ -167,6 +188,7 @@ export default function LobbyScreen({ user, token, onLogout, onSelectTable, onRe
             })}
           </View>
         )}
+      </ScrollView>
     </LinearGradient>
   );
 }
@@ -176,6 +198,9 @@ const styles = StyleSheet.create({
     flex: 1,
     padding: 20
   },
+  scrollContent: {
+    paddingBottom: 20
+  },
   header: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -249,6 +274,19 @@ const styles = StyleSheet.create({
     fontSize: 11,
     marginTop: 6
   },
+  promoRow: {
+    marginTop: 12
+  },
+  promoInputRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.08)',
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.12)'
+  },
   tableList: {
     gap: 12
   },

src/screens/TableScreen.js

@@ -145,6 +145,9 @@ export default function TableScreen({ token, tableId, user, onLeave }) {
         <View style={styles.rotateWrap}>
           <Text style={styles.rotateTitle}>Fordítsd el a telefont</Text>
           <Text style={styles.rotateSubtitle}>A blackjack asztal fekvő nézetben működik jól.</Text>
+          <View style={styles.rotateActions}>
+            <CasinoButton label="Vissza" onPress={onLeave} variant="red" />
+          </View>
         </View>
       </LinearGradient>
     );
@@ -270,7 +273,7 @@ const styles = StyleSheet.create({
   tableContent: {
     flex: 1,
     justifyContent: 'space-between',
-    paddingBottom: 8
+    paddingBottom: 120
   },
   seatLayer: {
     flex: 1,
@@ -278,14 +281,14 @@ const styles = StyleSheet.create({
   },
   seatSpot: {
     position: 'absolute',
-    width: 96,
-    transform: [{ translateX: -48 }]
+    width: 92,
+    transform: [{ translateX: -46 }]
   },
   controlsOverlay: {
     position: 'absolute',
-    left: 12,
-    right: 12,
-    bottom: 14,
+    left: 18,
+    right: 18,
+    bottom: 12,
     gap: 10
   },
   blurPanel: {
@@ -365,15 +368,18 @@ const styles = StyleSheet.create({
     fontSize: 14,
     marginTop: 12,
     textAlign: 'center'
+  },
+  rotateActions: {
+    marginTop: 20
   }
 });
 
 const seatPositions = {
-  0: { left: '8%', top: '62%' },
-  1: { left: '22%', top: '55%' },
-  2: { left: '36%', top: '50%' },
-  3: { left: '50%', top: '48%' },
-  4: { left: '64%', top: '50%' },
-  5: { left: '78%', top: '55%' },
-  6: { left: '92%', top: '62%' }
+  0: { left: '8%', top: '52%' },
+  1: { left: '22%', top: '45%' },
+  2: { left: '36%', top: '40%' },
+  3: { left: '50%', top: '38%' },
+  4: { left: '64%', top: '40%' },
+  5: { left: '78%', top: '45%' },
+  6: { left: '92%', top: '52%' }
 };