lint

app/src/components/buttons/AbstractButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, StyleSheet, Pressable, PressableProps } from 'react-native';
-import { black, blueColor, redColorDark, slate200, slate300, white } from '../../utils/colors';
+import { black, slate200, slate300, white } from '../../utils/colors';
 
 
 export interface ButtonProps extends PressableProps {
@@ -19,10 +19,10 @@ interface AbstractButtonProps extends ButtonProps {
     @dev If the button isnt filling the space check that its parent is 100% width
 */
 export default function AbstractButton({children, bgColor, color, ...pressable}: AbstractButtonProps) {
-    const isDisabled = pressable.disabled
-    const backgroundColor = isDisabled ? white : bgColor
-    const textColor = isDisabled ?  slate300 : color
-    const borderColor = isDisabled ? slate200 : backgroundColor
+    const isDisabled = pressable.disabled;
+    const backgroundColor = isDisabled ? white : bgColor;
+    const textColor = isDisabled ?  slate300 : color;
+    const borderColor = isDisabled ? slate200 : backgroundColor;
     return (
         <Pressable {...pressable} style={[styles.container, {backgroundColor, borderColor: borderColor, borderWidth: 4}]}>
             <Text style={[styles.text, {color: textColor}]}>
@@ -34,22 +34,22 @@ export default function AbstractButton({children, bgColor, color, ...pressable}:
 
 const styles = StyleSheet.create({
     container: {
-        position: "relative",
-        justifyContent: "center",
-        flexDirection: "column",
+        position: 'relative',
+        justifyContent: 'center',
+        flexDirection: 'column',
         flexGrow: 0,
         flexShrink: 0,
         backgroundColor: black,
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
         rowGap: 12,
         padding: 16, // plus 4 of border = 20
-        borderRadius: 5
+        borderRadius: 5,
     },
     text: {
         fontFamily: 'Cochin',
         textAlign: 'center',
         fontSize: 18,
-    }
-});
+    },
+});

app/src/screens/DevPlayScreen.tsx

@@ -2,16 +2,20 @@ import React from 'react';
 import {PrimaryButton} from "../components/buttons/PrimaryButton"
 import {SecondaryButton} from "../components/buttons/SecondaryButton"
 import { Text, XStack, YStack } from 'tamagui';
+import { View } from 'react-native';
+import { componentBgColor } from '../utils/colors';
 
 
 const DevPlayScreen = () => {
 
     return (
         <YStack ai="center" f={1} gap="$8" mt="$18" mb="$8">
+            <View style={{padding: 20, display: "flex", alignItems: "center", gap: 20, width: "100%", backgroundColor: componentBgColor}} >
             <Text fontSize="$9">Hello PASSPORT</Text>
             <PrimaryButton disabled>Primary Button Disabled</PrimaryButton>
             <PrimaryButton>Primary Button</PrimaryButton>
             <SecondaryButton>Secondary Button</SecondaryButton>
+            </View>
         <XStack f={1} />
         </YStack>
     )

app/src/utils/colors.ts

@@ -1,17 +1,17 @@
 /// NEW
-export const amber50 = '#FFFBEB'
-export const amber500 = '#F2E3C8' 
-export const black = '#000000'
-export const white = '#ffffff'
-export const slate200 = '#E2E8F0'
-export const slate300 = '#CBD5E1'
-export const slate500 = '#64748B'
-export const slate600 = '#475569'
-export const slate800 =  '#1E293B'
-export const sky500 = '#0EA5E9'
-export const green500 = '#22C55E'
-export const red500 = '#EF4444'
-export const teal500 = '#5EEAD4'
+export const amber50 = '#FFFBEB';
+export const amber500 = '#F2E3C8';
+export const black = '#000000';
+export const white = '#ffffff';
+export const slate200 = '#E2E8F0';
+export const slate300 = '#CBD5E1';
+export const slate500 = '#64748B';
+export const slate600 = '#475569';
+export const slate800 =  '#1E293B';
+export const sky500 = '#0EA5E9';
+export const green500 = '#22C55E';
+export const red500 = '#EF4444';
+export const teal500 = '#5EEAD4';
 
 // OLD
 export const borderColor = '#343434';