feat: new screens | components/rework | assets | api integration

Route.tsx

@@ -8,8 +8,11 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import WelcomeScreen from './src/screens/WelcomeScreen';
 import LoginScreen from './src/screens/LoginScreen';
 import RegisterScreen from './src/screens/RegisterScreen';
+import ResetPasswordScreen from './src/screens/ResetPasswordScreen';
+import ResetPasswordDeepScreen from './src/screens/ResetPasswordDeepScreen';
 
 import { NAVIGATION_PAGES } from './src/types';
+import { storageGet } from './src/storage';
 
 const ScreenStack = createStackNavigator();
 const BottomTab = createBottomTabNavigator();
@@ -19,7 +22,8 @@ SplashScreen.preventAutoHideAsync();
 const Route = () => {
   const [fontsLoaded] = useFonts({
     'redhat-900': require('./assets/fonts/RedHatDisplay-Black-900.ttf'),
-    'redhat-700': require('./assets/fonts/RedHatDisplay-Bold-700.ttf')
+    'redhat-700': require('./assets/fonts/RedHatDisplay-Bold-700.ttf'),
+    'redhat-600': require('./assets/fonts/RedHatDisplay-SemiBold-600.ttf')
   });
 
   useEffect(() => {
@@ -36,6 +40,8 @@ const Route = () => {
     return null;
   }
 
+  const token = storageGet('token');
+
   return (
     <ScreenStack.Navigator
       screenOptions={{ headerShown: false }}
@@ -44,6 +50,11 @@ const Route = () => {
       <ScreenStack.Screen name={NAVIGATION_PAGES.WELCOME} component={WelcomeScreen} />
       <ScreenStack.Screen name={NAVIGATION_PAGES.LOGIN} component={LoginScreen} />
       <ScreenStack.Screen name={NAVIGATION_PAGES.REGISTER} component={RegisterScreen} />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.RESET_PASSWORD} component={ResetPasswordScreen} />
+      <ScreenStack.Screen
+        name={NAVIGATION_PAGES.RESET_PASSWORD_DEEP}
+        component={ResetPasswordDeepScreen}
+      />
       <ScreenStack.Screen name={NAVIGATION_PAGES.IN_APP}>
         {() => (
           <BottomTab.Navigator

assets/icons/close.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.41919 0.580712C1.91151 0.0730308 1.08839 0.0730308 0.580712 0.580712C0.0730308 1.08839 0.0730308 1.91151 0.580712 2.41919L6.16147 7.99995L0.580712 13.5807C0.073031 14.0884 0.0730313 14.9115 0.580712 15.4192C1.08839 15.9269 1.91151 15.9269 2.41919 15.4192L7.99995 9.83843L13.5807 15.4192C14.0884 15.9269 14.9115 15.9269 15.4192 15.4192C15.9269 14.9115 15.9269 14.0884 15.4192 13.5807L9.83843 7.99995L15.4192 2.41919C15.9269 1.91151 15.9269 1.08839 15.4192 0.580712C14.9115 0.0730308 14.0884 0.0730308 13.5807 0.580712L7.99995 6.16147L2.41919 0.580712Z" fill="#0F3F4F"/>
+</svg>

src/api/query/index.ts

@@ -1,11 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { request } from '../../utils';
-import { API } from '../../types';
-
-export const apiCall = (key: API, data?: unknown, enabled?: boolean) => {
-  return useQuery({
-    enabled: enabled ?? false,
-    queryKey: [key],
-    queryFn: () => request.postForm(key, data ?? {})
-  });
-};

src/components/BigText/index.tsx

@@ -0,0 +1,13 @@
+import React, { FC, ReactNode } from 'react';
+import { Text } from 'react-native';
+import { styles } from './styles';
+
+type Props = {
+  children: ReactNode;
+};
+
+const BigText: FC<Props> = ({ children }) => {
+  return <Text style={styles.text}>{children}</Text>;
+};
+
+export default BigText;

src/components/BigText/styles.ts

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+import { getFontSize } from '../../utils';
+import { Colors } from '../../theme';
+
+export const styles = StyleSheet.create({
+  text: {
+    fontSize: getFontSize(20),
+    fontFamily: 'redhat-700',
+    color: Colors.DARK_BLUE
+  }
+});

src/components/Button/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, ReactNode } from 'react';
 import { Text, TouchableOpacity } from 'react-native';
 
-import { styling } from './styles';
+import { styles } from './styles';
 import { ButtonVariants } from '../../types/components';
 
 type Props = {
@@ -11,13 +11,42 @@ type Props = {
 };
 
 const Button: FC<Props> = ({ children, variant, onPress }) => {
-  const styles = styling(variant ?? ButtonVariants.FILL);
-
   return (
-    <TouchableOpacity style={styles.touchableOpacity} onPress={onPress}>
-      <Text style={styles.text}>{children}</Text>
-    </TouchableOpacity>
+    <>
+      {variant === ButtonVariants.OPACITY ? (
+        <OpacityButton onPress={onPress} children={children} />
+      ) : variant === ButtonVariants.FILL ? (
+        <FillButton onPress={onPress} children={children} />
+      ) : variant == ButtonVariants.TEXT ? (
+        <TextButton children={children} onPress={onPress} />
+      ) : (
+        <FillButton onPress={onPress} children={children} />
+      )}
+    </>
   );
 };
 
+type VariantProps = {
+  children?: ReactNode;
+  onPress?: () => void;
+};
+
+const OpacityButton: FC<VariantProps> = ({ onPress, children }) => (
+  <TouchableOpacity style={[styles.button, styles.opacityButton]} onPress={onPress}>
+    <Text style={[styles.text, styles.opacityText]}>{children}</Text>
+  </TouchableOpacity>
+);
+
+const FillButton: FC<VariantProps> = ({ onPress, children }) => (
+  <TouchableOpacity style={[styles.button, styles.fillButton]} onPress={onPress}>
+    <Text style={[styles.text, styles.fillText]}>{children}</Text>
+  </TouchableOpacity>
+);
+
+const TextButton: FC<VariantProps> = ({ onPress, children }) => (
+  <TouchableOpacity style={styles.button} onPress={onPress}>
+    <Text style={[styles.text, styles.textButtonText]}>{children}</Text>
+  </TouchableOpacity>
+);
+
 export default Button;

src/components/Button/styles.ts

@@ -1,25 +1,38 @@
 import { StyleSheet } from 'react-native';
+
 import { Colors } from '../../theme';
+import { getFontSize } from '../../utils';
 import { ButtonVariants } from '../../types/components';
 
-export const styling = (variant: ButtonVariants) => {
-  return StyleSheet.create({
-    touchableOpacity: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      borderRadius: 8,
-      backgroundColor: variant,
-      gap: 10,
-      padding: 12,
-      borderStyle: variant === ButtonVariants.OPACITY ? 'solid' : undefined,
-      borderWidth: variant === ButtonVariants.OPACITY ? 1 : undefined,
-      borderColor: variant === ButtonVariants.OPACITY ? 'rgba(255, 255, 255, 0.4)' : undefined
-    },
-    text: {
-      fontSize: 16,
-      color: Colors.WHITE,
-      fontFamily: 'redhat-700'
-    }
-  });
-};
+export const styles = StyleSheet.create({
+  button: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 8,
+    gap: 10,
+    padding: 12
+  },
+  text: {
+    fontSize: getFontSize(16),
+    fontFamily: 'redhat-700'
+  },
+  opacityButton: {
+    borderStyle: 'solid',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.4)',
+    backgroundColor: ButtonVariants.OPACITY
+  },
+  opacityText: {
+    color: Colors.WHITE
+  },
+  fillButton: {
+    backgroundColor: ButtonVariants.FILL
+  },
+  fillText: {
+    color: Colors.WHITE
+  },
+  textButtonText: {
+    color: Colors.DARK_BLUE
+  }
+});

src/components/Header/index.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { styles } from './style';
+
+import ChevronLeft from '../../../assets/icons/chevron-left.svg';
+
+type Props = {
+  label: string;
+};
+
+const Header: FC<Props> = ({ label }) => {
+  const navigation = useNavigation();
+
+  // navigation.setOptions() TODO
+
+  return (
+    <View style={styles.wrapper}>
+      <TouchableOpacity onPress={() => navigation.goBack()}>
+        <View style={styles.chevronWrapper}>
+          <ChevronLeft />
+        </View>
+      </TouchableOpacity>
+      <Text style={styles.label}>{label}</Text>
+      <View>
+        <Text>Text</Text>
+      </View>
+    </View>
+  );
+};
+
+export default Header;

src/components/Header/style.ts

@@ -0,0 +1,27 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../theme';
+import { getFontSize } from '../../utils';
+
+export const styles = StyleSheet.create({
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    marginTop: '5%',
+    marginBottom: '5%'
+  },
+  chevronWrapper: {
+    width: 25,
+    height: 25,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  label: {
+    fontFamily: 'redhat-700',
+    fontSize: getFontSize(14),
+    color: Colors.DARK_BLUE
+  }
+});

src/components/Input/index.tsx

@@ -0,0 +1,34 @@
+import React, { FC, useState } from 'react';
+import { TextInput, Text, View, InputModeOptions } from 'react-native';
+import { styling } from './style';
+
+type Props = {
+  placeholder: string;
+  onChange: (text: string) => void;
+  header?: string;
+  isPrivate?: boolean;
+  inputMode?: InputModeOptions;
+};
+
+const Input: FC<Props> = ({ onChange, placeholder, header, isPrivate, inputMode }) => {
+  const [focused, setFocused] = useState(false);
+
+  const styles = styling(focused);
+
+  return (
+    <View>
+      {header ? <Text style={styles.text}>{header}</Text> : null}
+      <TextInput
+        inputMode={inputMode ?? 'text'}
+        secureTextEntry={isPrivate ?? false}
+        placeholder={placeholder}
+        onChangeText={onChange}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        style={styles.wrapper}
+      />
+    </View>
+  );
+};
+
+export default Input;

src/components/Input/style.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../theme';
+import { getFontSize } from '../../utils';
+
+export const styling = (focused: boolean) =>
+  StyleSheet.create({
+    wrapper: {
+      width: '100%',
+      color: Colors.DARK_BLUE,
+      height: 44,
+      borderStyle: 'solid',
+      borderWidth: 1,
+      borderColor: focused ? Colors.DARK_BLUE : 'rgba(250, 250, 250, 1)',
+      borderRadius: 6,
+      backgroundColor: 'rgba(250, 250, 250, 1)',
+      fontSize: 15,
+      padding: 10
+    },
+    text: {
+      color: Colors.DARK_BLUE,
+      fontSize: getFontSize(14),
+      fontFamily: 'redhat-700',
+      marginBottom: 5
+    }
+  });

src/components/Modal/ModalHeader/modal-header.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import { View, Text } from 'react-native';
+
+import { styles } from './style';
+
+import CloseSVG from '../../../../assets/icons/close.svg';
+
+type Props = {
+  textHeader: string;
+};
+
+const ModalHeader: FC<Props> = ({ textHeader }) => {
+  return (
+    <View>
+      <Text style={styles.textHeader}>{textHeader}</Text>
+    </View>
+  );
+};
+
+export default ModalHeader;

src/components/Modal/ModalHeader/style.ts

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../theme';
+
+export const styles = StyleSheet.create({
+  textHeader: {
+    fontFamily: 'redhat-600',
+    fontSize: 14,
+    color: Colors.DARK_BLUE
+  }
+});

src/components/Modal/index.tsx

@@ -0,0 +1,24 @@
+import React, { FC, ReactNode } from 'react';
+import { Modal as ReactModal } from 'react-native';
+
+type Props = {
+  children: ReactNode;
+  visible: boolean;
+  onRequestClose?: () => void;
+};
+
+const Modal: FC<Props> = ({ children, onRequestClose, visible }) => {
+  return (
+    <ReactModal
+      animationType={'slide'}
+      statusBarTranslucent={true}
+      presentationStyle={'pageSheet'}
+      visible={visible}
+      onRequestClose={onRequestClose}
+    >
+      {children}
+    </ReactModal>
+  );
+};
+
+export default Index;

src/components/PageWrapper/index.tsx

@@ -0,0 +1,15 @@
+import React, { FC, ReactNode } from 'react';
+import { SafeAreaView, StyleProp, ViewStyle } from 'react-native';
+
+import { styles } from './styles';
+
+type Props = {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+const PageWrapper: FC<Props> = ({ children, style }) => {
+  return <SafeAreaView style={[styles.wrapper, style]}>{children}</SafeAreaView>;
+};
+
+export default PageWrapper;

src/components/PageWrapper/styles.ts

@@ -0,0 +1,5 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  wrapper: { marginLeft: '5%', marginRight: '5%' }
+});

src/modules/auth/api/auth-api.tsx

@@ -0,0 +1,19 @@
+import { request } from '../../../utils';
+import { API } from '../../../types';
+
+export enum ResultTypes {
+  ERROR = 'ERROR',
+  OK = 'OK'
+}
+
+export type PostLoginUserReturn = {
+  token: string;
+  status?: string;
+  result: ResultTypes;
+  result_description?: string;
+};
+
+export const authApi = {
+  loginUser: (data: { login: string; pass: string }) =>
+    request.postForm<PostLoginUserReturn>(API.LOGIN, data)
+};

src/modules/auth/api/auth-query-keys.tsx

@@ -0,0 +1,3 @@
+export const authQueryKeys = {
+  loginUser: () => ['loginUser'] as const
+};

src/modules/auth/api/queries/use-post-login.tsx

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+import { authApi, PostLoginUserReturn } from '../auth-api';
+import { BaseAxiosError } from '../../../../types';
+import { authQueryKeys } from '../auth-query-keys';
+
+export const usePostLogin = (data: { login: string; pass: string }, enabled: boolean) => {
+  return useQuery<PostLoginUserReturn, BaseAxiosError>({
+    queryKey: authQueryKeys.loginUser(),
+    queryFn: async () => {
+      const response = await authApi.loginUser(data);
+      return response.data;
+    },
+    enabled
+  });
+};

src/screens/LoginScreen/index.tsx

@@ -0,0 +1,64 @@
+import { FC, useState } from 'react';
+import { View } from 'react-native';
+import { NavigationProp } from '@react-navigation/native';
+
+import Header from '../../components/Header';
+import Input from '../../components/Input';
+import Button from '../../components/Button';
+import BigText from '../../components/BigText';
+import PageWrapper from '../../components/PageWrapper';
+
+import { ButtonVariants } from '../../types/components';
+import { storageSet } from '../../storage';
+import { NAVIGATION_PAGES } from '../../types';
+
+import { usePostLogin } from '../../modules/auth/api/queries/use-post-login';
+
+type Props = {
+  navigation: NavigationProp<any>;
+};
+
+const LoginScreen: FC<Props> = ({ navigation }) => {
+  const [login, setLogin] = useState('');
+  const [pass, setPass] = useState('');
+
+  const { data, refetch } = usePostLogin({ login, pass }, false);
+
+  if (data) {
+    if (data.token) {
+      storageSet('token', data.token);
+    }
+  }
+
+  return (
+    <PageWrapper>
+      <Header label={'Login'} />
+      <View style={{ gap: 15 }}>
+        <BigText>Welcome back</BigText>
+        <Input
+          header={'Email address'}
+          placeholder={'Email or login'}
+          inputMode={'email'}
+          onChange={(e) => setLogin(e)}
+        />
+        <Input
+          header={'Password'}
+          isPrivate={true}
+          placeholder={'Login'}
+          onChange={(e) => setPass(e)}
+        />
+      </View>
+      <View style={{ gap: 30, marginTop: '5%' }}>
+        <Button
+          variant={ButtonVariants.TEXT}
+          onPress={() => navigation.navigate(NAVIGATION_PAGES.RESET_PASSWORD)}
+        >
+          Forgot password
+        </Button>
+        <Button onPress={() => refetch()}>Login</Button>
+      </View>
+    </PageWrapper>
+  );
+};
+
+export default LoginScreen;

src/screens/ResetPasswordDeepScreen/index.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { Text, View } from 'react-native';
+
+import PageWrapper from '../../components/PageWrapper';
+import BigText from '../../components/BigText';
+import Input from '../../components/Input';
+import Button from '../../components/Button';
+
+import { styles } from './styles';
+
+const ResetPasswordDeepScreen = () => {
+  const [pass, setPass] = useState('');
+  const [repPass, setRepPass] = useState('');
+
+  //TODO: Add pass checks | add res pass functionality
+
+  return (
+    <PageWrapper style={{ marginTop: '10%' }}>
+      <View style={{ gap: 15 }}>
+        <BigText>Reset password</BigText>
+        <Text style={styles.smallText}>
+          Minimum length of the password must be equal or greater 8 symbols. Leading and trailing
+          spaces will be ignored
+        </Text>
+        <Input placeholder={'Password'} onChange={(s) => setPass(s)} header={'New password'} />
+        <Input
+          placeholder={'Repeat password'}
+          onChange={(s) => setRepPass(s)}
+          header={'Confirm new password'}
+        />
+      </View>
+      <View style={{ marginTop: '10%' }}>
+        <Button>Reset password</Button>
+      </View>
+    </PageWrapper>
+  );
+};
+
+export default ResetPasswordDeepScreen;

src/screens/ResetPasswordDeepScreen/styles.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+import { getFontSize } from '../../utils';
+
+export const styles = StyleSheet.create({
+  smallText: {
+    fontSize: getFontSize(14),
+    color: '#3E6471'
+  }
+});

src/screens/ResetPasswordScreen/index.tsx

@@ -0,0 +1,48 @@
+import React, { FC, useState } from 'react';
+import { Text, View } from 'react-native';
+import type { NavigationProp } from '@react-navigation/native';
+
+import PageWrapper from '../../components/PageWrapper';
+import Header from '../../components/Header';
+import BigText from '../../components/BigText';
+import Button from '../../components/Button';
+import Input from '../../components/Input';
+
+import { NAVIGATION_PAGES } from '../../types';
+
+import { styles } from './styles';
+
+type Props = {
+  navigation: NavigationProp<any>;
+};
+
+const ResetPasswordScreen: FC<Props> = ({ navigation }) => {
+  const [email, setEmail] = useState('');
+
+  //TODO: Add pass checks | add res pass functionality
+
+  return (
+    <PageWrapper>
+      <Header label={'Reset Password'} />
+      <View style={{ gap: 15 }}>
+        <BigText>Please enter your valid email</BigText>
+        <Text style={styles.smallText}>
+          Type email which you used for registration and check your inbox for further instructions
+        </Text>
+        <Input
+          onChange={(s) => setEmail(s)}
+          placeholder={'Email'}
+          header={'Email address'}
+          inputMode={'email'}
+        />
+      </View>
+      <View style={{ marginTop: '10%' }}>
+        <Button onPress={() => navigation.navigate(NAVIGATION_PAGES.RESET_PASSWORD_DEEP)}>
+          Send
+        </Button>
+      </View>
+    </PageWrapper>
+  );
+};
+
+export default ResetPasswordScreen;

src/screens/ResetPasswordScreen/styles.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+import { getFontSize } from '../../utils';
+
+export const styles = StyleSheet.create({
+  smallText: {
+    fontSize: getFontSize(14),
+    color: '#3E6471'
+  }
+});

src/screens/WelcomeScreen.tsx

@@ -1,11 +0,0 @@
-import { View, Text } from 'react-native';
-
-const WelcomeScreen = () => {
-  return (
-    <View>
-      <Text>Hi everyone!</Text>
-    </View>
-  );
-};
-
-export default WelcomeScreen;

src/screens/WelcomeScreen/index.tsx

@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import { ImageBackground, SafeAreaView, View, Text } from 'react-native';
+import type { NavigationProp } from '@react-navigation/native';
+
+import Button from '../../components/Button';
+import { ButtonVariants } from '../../types/components';
+
+import { styles } from './style';
+import { NAVIGATION_PAGES } from '../../types';
+
+import LogoSVG from '../../../assets/images/logo.svg';
+
+type Props = {
+  navigation: NavigationProp<any>;
+};
+
+const WelcomeScreen: FC<Props> = ({ navigation }) => {
+  return (
+    <View>
+      <ImageBackground
+        style={{ height: '100%' }}
+        source={require('../../../assets/images/welcome-background.png')}
+      >
+        <View style={styles.overlay} />
+
+        <SafeAreaView style={styles.wrapper}>
+          <LogoSVG style={{ display: 'flex', alignSelf: 'center' }} />
+          <View style={styles.buttonsAndText}>
+            <Text style={styles.text}>Endless exploring...</Text>
+            <View style={{ gap: 10 }}>
+              <Button>Get started</Button>
+              <Button
+                onPress={() => navigation.navigate(NAVIGATION_PAGES.LOGIN)}
+                variant={ButtonVariants.OPACITY}
+              >
+                Login
+              </Button>
+            </View>
+          </View>
+        </SafeAreaView>
+      </ImageBackground>
+    </View>
+  );
+};
+
+export default WelcomeScreen;

src/screens/WelcomeScreen/style.ts

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../theme';
+import { getFontSize } from '../../utils';
+
+export const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(15, 63, 79, 0.6)'
+  },
+  text: {
+    fontFamily: 'redhat-900',
+    color: Colors.WHITE,
+    fontSize: getFontSize(60),
+    alignSelf: 'center'
+  },
+  wrapper: {
+    display: 'flex',
+    height: '100%',
+    justifyContent: 'space-around',
+    margin: '5%'
+  },
+  buttonsAndText: {
+    display: 'flex',
+    gap: 10
+  }
+});

src/storage/async-storage.ts

@@ -1,9 +1,9 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
-export const get = (key: string) => {
-  return AsyncStorage.getItem(key);
+export const storageGet = (key: string) => {
+  return AsyncStorage.getItem(key).then((data) => data);
 };
 
-export const set = (key: string, value: string) => {
+export const storageSet = (key: string, value: string) => {
   AsyncStorage.setItem(key, value).then();
 };

src/types/api.ts

@@ -1,3 +1,5 @@
+import { AxiosError } from 'axios';
+
 export enum API_ROUTE {
   USER = 'user'
 }
@@ -9,3 +11,5 @@ export enum API_ENDPOINT {
 export enum API {
   LOGIN = `${API_ROUTE.USER}/${API_ENDPOINT.LOGIN}`
 }
+
+export type BaseAxiosError = AxiosError;

src/types/components/button.ts

@@ -2,5 +2,6 @@ import { Colors } from '../../theme';
 
 export enum ButtonVariants {
   FILL = Colors.ORANGE,
+  TEXT = Colors.DARK_BLUE,
   OPACITY = 'rgba(33, 37, 41, 0.2)'
 }

src/types/navigation.ts

@@ -2,6 +2,8 @@ export enum NAVIGATION_PAGES {
   WELCOME = 'welcome',
   LOGIN = 'login',
   REGISTER = 'registration',
+  RESET_PASSWORD = 'resetPassword',
+  RESET_PASSWORD_DEEP = 'resetPasswordDeep',
   IN_APP = 'inAppStack',
   LOCATION_TAB = 'Location',
   TRAVELS_TAB = 'Travels',