feat: enhance Seat, TableBackground, TableMarkings, and TableScreen components for improved styling and layout adjustments

src/components/Seat.js

@@ -6,7 +6,7 @@ export default function Seat({ seat, highlight }) {
   const isEmpty = !seat.username;
 
   return (
-    <View style={[styles.seat, highlight && styles.highlight]}>
+    <View style={[styles.seat, isEmpty && styles.emptySeat, highlight && styles.highlight]}>
       <Text style={styles.name}>{isEmpty ? 'Üres hely' : seat.username}</Text>
       <View style={styles.betBox}>
         <Text style={styles.betLabel}>{seat.bet > 0 ? `${seat.bet} Ft` : 'TÉT'}</Text>
@@ -36,11 +36,16 @@ export default function Seat({ seat, highlight }) {
 
 const styles = StyleSheet.create({
   seat: {
-    padding: 8,
+    padding: 6,
-    borderRadius: 12,
+    borderRadius: 10,
-    backgroundColor: 'rgba(0,0,0,0.2)',
+    backgroundColor: 'rgba(0,0,0,0.18)',
     borderWidth: 1,
-    borderColor: 'rgba(255,255,255,0.08)'
+    borderColor: 'rgba(255,255,255,0.08)',
+    alignItems: 'center'
+  },
+  emptySeat: {
+    backgroundColor: 'rgba(0,0,0,0.12)',
+    borderColor: 'rgba(255,255,255,0.12)'
   },
   highlight: {
     borderColor: colors.goldBright,
@@ -50,23 +55,23 @@ const styles = StyleSheet.create({
   },
   name: {
     color: colors.text,
-    fontSize: 12,
+    fontSize: 10,
     fontFamily: fonts.body,
     fontWeight: '600'
   },
   betBox: {
-    marginTop: 6,
+    marginTop: 4,
-    alignSelf: 'flex-start',
+    alignSelf: 'center',
-    paddingHorizontal: 8,
+    paddingHorizontal: 6,
-    paddingVertical: 4,
+    paddingVertical: 3,
-    borderRadius: 6,
+    borderRadius: 5,
     borderWidth: 1,
     borderColor: colors.gold,
     backgroundColor: 'rgba(0,0,0,0.15)'
   },
   betLabel: {
     color: colors.goldBright,
-    fontSize: 11,
+    fontSize: 10,
     fontFamily: fonts.mono
   },
   hand: {

src/components/TableBackground.js

@@ -27,24 +27,25 @@ export default function TableBackground({ children, style }) {
 
 const styles = StyleSheet.create({
   wrapper: {
+    flex: 1,
     width: '100%',
     padding: 0
   },
   edge: {
     flex: 1,
-    borderTopLeftRadius: 60,
+    borderTopLeftRadius: 12,
-    borderTopRightRadius: 60,
+    borderTopRightRadius: 12,
     borderBottomLeftRadius: 280,
     borderBottomRightRadius: 280,
     padding: 6
   },
   felt: {
     flex: 1,
-    borderTopLeftRadius: 48,
+    borderTopLeftRadius: 8,
-    borderTopRightRadius: 48,
+    borderTopRightRadius: 8,
     borderBottomLeftRadius: 260,
     borderBottomRightRadius: 260,
-    padding: 14,
+    padding: 12,
     overflow: 'hidden'
   },
   innerRing: {
@@ -55,9 +56,9 @@ const styles = StyleSheet.create({
     right: 16,
     borderWidth: 2,
     borderColor: 'rgba(255,255,255,0.15)',
-    borderTopLeftRadius: 40,
+    borderTopLeftRadius: 6,
-    borderTopRightRadius: 40,
+    borderTopRightRadius: 6,
-    borderBottomLeftRadius: 240,
+    borderBottomLeftRadius: 230,
-    borderBottomRightRadius: 240
+    borderBottomRightRadius: 230
   }
 });

src/components/TableMarkings.js

@@ -24,7 +24,7 @@ export default function TableMarkings() {
 const styles = StyleSheet.create({
   container: {
     position: 'absolute',
-    top: 58,
+    top: 42,
     left: 0,
     right: 0,
     alignItems: 'center'
@@ -32,7 +32,7 @@ const styles = StyleSheet.create({
   title: {
     color: colors.goldBright,
     fontFamily: fonts.display,
-    fontSize: 14,
+    fontSize: 13,
     letterSpacing: 2
   },
   subtitle: {

src/screens/TableScreen.js

@@ -226,7 +226,7 @@ const styles = StyleSheet.create({
   },
   tableWrap: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: 'flex-start',
     alignItems: 'center',
     marginTop: 8,
     marginBottom: 8,
@@ -256,8 +256,8 @@ const styles = StyleSheet.create({
   },
   seatSpot: {
     position: 'absolute',
-    width: 110,
+    width: 96,
-    transform: [{ translateX: -55 }]
+    transform: [{ translateX: -48 }]
   },
   controlsOverlay: {
     position: 'absolute',
@@ -327,11 +327,11 @@ const styles = StyleSheet.create({
 });
 
 const seatPositions = {
-  0: { left: '10%', top: '50%' },
+  0: { left: '8%', top: '62%' },
-  1: { left: '24%', top: '44%' },
+  1: { left: '22%', top: '55%' },
-  2: { left: '38%', top: '38%' },
+  2: { left: '36%', top: '50%' },
-  3: { left: '50%', top: '36%' },
+  3: { left: '50%', top: '48%' },
-  4: { left: '62%', top: '38%' },
+  4: { left: '64%', top: '50%' },
-  5: { left: '76%', top: '44%' },
+  5: { left: '78%', top: '55%' },
-  6: { left: '90%', top: '50%' }
+  6: { left: '92%', top: '62%' }
 };