Trash Day (#151)

app/src/Navigation.tsx

@@ -39,7 +39,6 @@ import PassportDataInfoScreen from './screens/Settings/PassportDataInfoScreen';
 import ShowRecoveryPhraseScreen from './screens/Settings/ShowRecoveryPhraseScreen';
 import SettingsScreen from './screens/SettingsScreen';
 import SplashScreen from './screens/SplashScreen';
-import StartScreen from './screens/StartScreen';
 import useNavigationStore from './stores/navigationStore';
 import { black, slate300, white } from './utils/colors';
 
@@ -70,12 +69,6 @@ const AppNavigation = createNativeStackNavigator({
         headerShown: false,
       },
     },
-    Start: {
-      screen: StartScreen,
-      options: {
-        headerShown: false,
-      },
-    },
     Modal: {
       screen: ModalScreen,
       options: {

app/src/components/CustomButton.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-
-import { Button, Text } from 'tamagui';
-
-import { bgBlue, bgGreen, textBlack } from '../utils/colors';
-
-interface CustomButtonProps {
-  text: string;
-  onPress: () => void;
-  Icon?: React.ReactNode;
-  bgColor?: string;
-  h?: string;
-  isDisabled?: boolean;
-  disabledOnPress?: () => void;
-  blueVariant?: boolean;
-}
-
-const CustomButton: React.FC<CustomButtonProps> = ({
-  text,
-  onPress,
-  Icon,
-  bgColor,
-  isDisabled,
-  disabledOnPress,
-  blueVariant,
-}) => {
-  return (
-    <Button
-      bg={bgColor ? bgColor : blueVariant ? bgBlue : bgGreen}
-      h={blueVariant ? '$8' : '$5'}
-      borderRadius="$10"
-      onPress={isDisabled ? disabledOnPress : onPress}
-    >
-      {Icon && <Button.Icon>{Icon}</Button.Icon>}
-      <Text
-        textAlign="center"
-        fontSize={blueVariant ? '$6' : '$5'}
-        fontWeight="bold"
-        color={textBlack}
-      >
-        {text}
-      </Text>
-    </Button>
-  );
-};
-
-export default CustomButton;

app/src/screens/MockDataScreen.tsx

@@ -21,15 +21,8 @@ import {
 
 import { countryCodes } from '../../../common/src/constants/constants';
 import { genMockPassportData } from '../../../common/src/utils/passports/genMockPassportData';
-import CustomButton from '../components/CustomButton';
 import { usePassport } from '../stores/passportDataProvider';
-import {
-  bgWhite,
-  borderColor,
-  separatorColor,
-  textBlack,
-  white,
-} from '../utils/colors';
+import { borderColor, separatorColor, textBlack, white } from '../utils/colors';
 import { buttonTap, selectionChange } from '../utils/haptic';
 
 interface MockDataScreenProps {}
@@ -316,12 +309,10 @@ const MockDataScreen: React.FC<MockDataScreenProps> = ({}) => {
           <Text mb="$2" textAlign="center" fontSize="$4" color={textBlack}>
             These passport data are only for testing purposes.
           </Text>
-          <CustomButton
-            onPress={handleGenerate}
-            text="Generate passport data"
-            Icon={isGenerating ? <Spinner /> : <Cpu color={textBlack} />}
-            isDisabled={isGenerating}
-          />
+          <Button onPress={handleGenerate} disabled={isGenerating}>
+            {isGenerating ? <Spinner /> : <Cpu color={textBlack} />} Generate
+            passport data
+          </Button>
         </YStack>
       </YStack>
       <Sheet
@@ -334,7 +325,7 @@ const MockDataScreen: React.FC<MockDataScreenProps> = ({}) => {
       >
         <Sheet.Overlay />
         <Sheet.Frame
-          bg={bgWhite}
+          bg={white}
           borderTopLeftRadius="$9"
           borderTopRightRadius="$9"
         >
@@ -385,7 +376,7 @@ const MockDataScreen: React.FC<MockDataScreenProps> = ({}) => {
       >
         <Sheet.Overlay />
         <Sheet.Frame
-          bg={bgWhite}
+          bg={white}
           borderTopLeftRadius="$9"
           borderTopRightRadius="$9"
         >

app/src/screens/StartScreen.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-
-import { useNavigation } from '@react-navigation/native';
-import { ArrowRight } from '@tamagui/lucide-icons';
-import { Image, Text, YStack } from 'tamagui';
-
-import CustomButton from '../components/CustomButton';
-import useHapticNavigation from '../hooks/useHapticNavigation';
-import OPENPASSPORT_LOGO from '../images/openpassport.png';
-import { textBlack } from '../utils/colors';
-import { buttonTap } from '../utils/haptic';
-
-const StartScreen: React.FC = () => {
-  const navigation = useNavigation();
-  const onPassportOnboardingPress = useHapticNavigation('PassportOnboarding');
-  const onMockPassportPress = useHapticNavigation('CreateMock');
-  return (
-    <YStack f={1}>
-      <YStack f={1} mt="$6" mb="$2.5" gap="$0" ai="center" jc="space-between">
-        <Text fontSize={38} color={textBlack} textAlign="center">
-          Welcome to OpenPassport.
-        </Text>
-        <Image src={OPENPASSPORT_LOGO} width={400} height={300} />
-        <Text textAlign="center" fontSize="$4" color={textBlack}>
-          No personal information will be shared without your explicit consent.
-        </Text>
-      </YStack>
-
-      <YStack gap="$2.5">
-        <CustomButton
-          Icon={<ArrowRight />}
-          text="Use my passport"
-          onPress={onPassportOnboardingPress}
-        />
-        {/* TODO Only display this button during dev mode */}
-        <CustomButton
-          bgColor="white"
-          Icon={<ArrowRight />}
-          text="Use a mock passport"
-          onPress={onMockPassportPress}
-        />
-        <CustomButton
-          text="Cancel"
-          bgColor="$gray4"
-          onPress={() => {
-            buttonTap();
-            navigation.goBack();
-          }}
-        />
-      </YStack>
-    </YStack>
-  );
-};
-
-export default StartScreen;

app/src/utils/colors.ts

@@ -24,23 +24,5 @@ export const yellow500 = '#FDE047';
 
 // OLD
 export const borderColor = '#343434';
-export const bgColor = '#161616';
-export const componentBgColor = '#1c1c1c';
-export const componentBgColor2 = '#232323';
-export const blueColor = '#3185FC';
-export const textColor1 = '#ededed';
-export const textColor2 = '#a0a0a0';
-export const blueColorDark = '#11233e';
-export const blueColorLight = '#0090ff';
-export const greenColorDark = '#10291e';
-export const greenColorLight = '#30a46b';
-export const redColorDark = '#3c181a';
-export const redColorLight = '#e5484d';
-export const yellowColorDark = '#2d2200';
-export const yellowColorLight = '#f5d90a';
-export const bgWhite = '#F5F5F5';
 export const textBlack = '#333333';
-export const bgGreen2 = '#94FBAB';
-export const bgGreen = '#AEECEF';
-export const bgBlue = '#69DFFF';
 export const separatorColor = '#E0E0E0';