From ec243c555863829f6c38bec814efedc3013d2bd2 Mon Sep 17 00:00:00 2001
From: Netcup Gituser <netcup@umbach.dev>
Date: Sun, 3 Dec 2023 15:17:36 +0100
Subject: [PATCH] theme

---
 package.json                                 |   2 +-
 src/components/MyScreenContainer.tsx         |   4 +-
 src/configs/appNonSaveVarReducer.ts          |   2 -
 src/configs/appVarReducer.ts                 |  12 +-
 src/navigation/navigation.tsx                |   5 +
 src/navigation/registration/registration.tsx |   4 +-
 src/navigation/tabs/main/MapTab.tsx          |  16 ++-
 src/navigation/tabs/main/ProfileTab.tsx      |   2 +-
 src/pages/profile/profile.tsx                | 125 ++++++++++---------
 src/pages/welcome/signUp/signUp.tsx          |  43 ++++---
 10 files changed, 109 insertions(+), 106 deletions(-)

diff --git a/package.json b/package.json
index fdd4e8a..b120742 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "lint": "eslint .",
-    "start": "react-native start",
+    "start": "host=0.0.0.0 react-native start",
     "test": "jest"
   },
   "dependencies": {
diff --git a/src/components/MyScreenContainer.tsx b/src/components/MyScreenContainer.tsx
index accf695..7392634 100644
--- a/src/components/MyScreenContainer.tsx
+++ b/src/components/MyScreenContainer.tsx
@@ -1,10 +1,8 @@
 import {ReactNode} from 'react';
 import {ScrollView, StyleProp, View, ViewStyle} from 'react-native';
-
-import { useSelector } from 'react-redux';
+import {useSelector} from 'react-redux';
 import {RootState} from '@redux/store';
 
-
 interface MyScreenContainerProps {
   children: ReactNode;
   style?: StyleProp<ViewStyle>;
diff --git a/src/configs/appNonSaveVarReducer.ts b/src/configs/appNonSaveVarReducer.ts
index faf6617..74099bb 100644
--- a/src/configs/appNonSaveVarReducer.ts
+++ b/src/configs/appNonSaveVarReducer.ts
@@ -1,8 +1,6 @@
 import {createSlice} from '@reduxjs/toolkit';
 import type {PayloadAction} from '@reduxjs/toolkit';
-
 import {appStatus, non_save_vars} from './appNonSaveVar';
-
 import {ThemeTokensType} from '@configs/colors';
 
 export const appNonSaveVariablesSlice = createSlice({
diff --git a/src/configs/appVarReducer.ts b/src/configs/appVarReducer.ts
index d8834a0..e5bea75 100644
--- a/src/configs/appVarReducer.ts
+++ b/src/configs/appVarReducer.ts
@@ -1,17 +1,15 @@
 import {createSlice} from '@reduxjs/toolkit';
 import type {PayloadAction} from '@reduxjs/toolkit';
-
 import {
   PREFERENCES_VARS,
   preferences_vars_default,
   RegisterProcess,
-  ThemeMode,
 } from './appVar';
-import {non_save_vars, NON_SAVE_VARS} from './appNonSaveVar';
 import LangFormat from '@lang/default';
 import {lang as defaultLang} from '@lang/en';
-import { UserId } from './types';
-import { MyUserAccount } from '@user/types';
+import {UserId} from './types';
+import {MyUserAccount} from '@user/types';
+import {ThemeMode} from './colors';
 
 export interface appVariablesState {
   preferences: PREFERENCES_VARS;
@@ -39,10 +37,10 @@ export const appVariablesSlice = createSlice({
     setRegisterProcess: (state, action: PayloadAction<RegisterProcess>) => {
       state.preferences.RegisterProcess = action.payload;
     },
-    setCurrentAccount:(state, action: PayloadAction<UserId>) => {
+    setCurrentAccount: (state, action: PayloadAction<UserId>) => {
       state.preferences.selectedAccount = action.payload;
     },
-    setAccount:(state, action: PayloadAction<MyUserAccount>) => {
+    setAccount: (state, action: PayloadAction<MyUserAccount>) => {
       state.preferences.accounts[action.payload.UserId] = action.payload;
     },
   },
diff --git a/src/navigation/navigation.tsx b/src/navigation/navigation.tsx
index cad8d15..a5168d4 100644
--- a/src/navigation/navigation.tsx
+++ b/src/navigation/navigation.tsx
@@ -117,6 +117,11 @@ function CustomTabBar(props: BottomTabBarProps) {
           margin: 10,
           backgroundColor: currentTheme.backgroundDark300,
           borderRadius: 20,
+          position: 'absolute',
+          zIndex: 100,
+          bottom: 0,
+          borderColor: currentTheme.backgroundDark300,
+          borderWidth: 3,
         }}>
         {state.routes.map((route, index) => {
           const isFocused = state.index === index;
diff --git a/src/navigation/registration/registration.tsx b/src/navigation/registration/registration.tsx
index 476875b..044f98b 100644
--- a/src/navigation/registration/registration.tsx
+++ b/src/navigation/registration/registration.tsx
@@ -220,7 +220,9 @@ function RegistrationPreview({type}: {type: 'login' | 'signup'}) {
 
         <View style={{flexDirection: 'row'}}>
           {type === 'login' ? (
-            <Text>{lang.previewLogin.dontHaveAccount}</Text>
+            <Text color={currentTheme.textLight100}>
+              {lang.previewLogin.dontHaveAccount}
+            </Text>
           ) : (
             <Text color={currentTheme.textLight100}>
               {lang.previewSignup.alreadyHaveAccount}
diff --git a/src/navigation/tabs/main/MapTab.tsx b/src/navigation/tabs/main/MapTab.tsx
index c5bcc0e..5c19efe 100644
--- a/src/navigation/tabs/main/MapTab.tsx
+++ b/src/navigation/tabs/main/MapTab.tsx
@@ -1,10 +1,11 @@
-import { MyScreenContainer } from '@components/MyScreenContainer';
-import { Text } from '@gluestack-ui/themed';
+import {MyScreenContainer} from '@components/MyScreenContainer';
+import {Text} from '@gluestack-ui/themed';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from '@react-navigation/native-stack';
 import {RootState} from '@redux/store';
+import {View} from 'react-native';
 import {useSelector} from 'react-redux';
 
 export const MapTabName = 'Map';
@@ -19,7 +20,9 @@ export type MapScreenNavigationProp =
   NativeStackNavigationProp<MapStackNavigatorParamList>;
 
 function MapTab() {
-  const lang = useSelector((state: RootState) => state.appVariables.lang.navigation.home.map);
+  const lang = useSelector(
+    (state: RootState) => state.appVariables.lang.navigation.home.map,
+  );
   const currentTheme = useSelector(
     (state: RootState) => state.nonSaveVariables.theme.colors,
   );
@@ -33,12 +36,7 @@ function MapTab() {
     <MapStack.Navigator initialRouteName="Overview">
       <MapStack.Screen
         name="Overview"
-        options={{
-          title: lang.tabName,
-          headerShown: true,
-          headerShadowVisible: false,
-          headerStyle: headerStyle,
-        }}
+        options={{headerShown: false}}
         component={MapScreen}
       />
     </MapStack.Navigator>
diff --git a/src/navigation/tabs/main/ProfileTab.tsx b/src/navigation/tabs/main/ProfileTab.tsx
index 2471880..f29bea0 100644
--- a/src/navigation/tabs/main/ProfileTab.tsx
+++ b/src/navigation/tabs/main/ProfileTab.tsx
@@ -44,7 +44,7 @@ export default function ProfileTab() {
   );
 
   const headerStyle = {
-    backgroundColor: currentTheme.backgroundDark400
+    backgroundColor: currentTheme.backgroundDark400,
   };
 
   return (
diff --git a/src/pages/profile/profile.tsx b/src/pages/profile/profile.tsx
index 2bb4c61..64a6059 100644
--- a/src/pages/profile/profile.tsx
+++ b/src/pages/profile/profile.tsx
@@ -8,7 +8,7 @@ import {MyIcon} from '@components/MyIcon';
 import {useNavigation} from '@react-navigation/native';
 import {ProfileScreenNavigationProp} from '@navigation/tabs/main/ProfileTab';
 import {MyIconInput} from '@components/MyInput';
-import {useEffect, useState} from 'react';
+import {useEffect, useLayoutEffect, useState} from 'react';
 import {RootScreenNavigationProp} from '@navigation/navigation';
 import {useSelector} from 'react-redux';
 import {RootState} from '@redux/store';
@@ -37,7 +37,9 @@ export function ProfileOverview() {
         alignItems: 'center',
         paddingTop: 10,
       }}>
-      <UserAvatar />
+      <View style={{paddingBottom: 10}}>
+        <UserAvatar />
+      </View>
 
       <MyTitle text="Max Mustermann" />
 
@@ -96,68 +98,67 @@ export function ProfileSettings() {
   const rootNavigation = useNavigation<RootScreenNavigationProp>();
 
   return (
-    <ScrollView>
-      <MyScreenContainer
-        style={{
-          paddingTop: 10,
-        }}>
-        <View style={{alignItems: 'center'}}>
-          <UserAvatar />
-        </View>
+    <MyScreenContainer
+      scrollView
+      style={{
+        paddingTop: 10,
+      }}>
+      <View style={{alignItems: 'center'}}>
+        <UserAvatar />
+      </View>
 
-        <SettingsItemContainer title={lang.accountData.title}>
-          <SettingsItem
-            icon="person"
-            title={lang.accountData.accountName}
-            value="max_mustermann"
-          />
+      <SettingsItemContainer title={lang.accountData.title}>
+        <SettingsItem
+          icon="person"
+          title={lang.accountData.accountName}
+          value="max_mustermann"
+        />
 
-          <SettingsItem
-            icon="person"
-            title={lang.accountData.username}
-            value="Max Mustermann"
-            onPress={() => navigation.navigate('UpdateUsername')}
-          />
+        <SettingsItem
+          icon="person"
+          title={lang.accountData.username}
+          value="Max Mustermann"
+          onPress={() => navigation.navigate('UpdateUsername')}
+        />
 
-          <SettingsItem
-            icon="phone-iphone"
-            title={lang.accountData.phoneNumber}
-            value="+49 1510 21334143"
-          />
-        </SettingsItemContainer>
+        <SettingsItem
+          icon="phone-iphone"
+          title={lang.accountData.phoneNumber}
+          value="+49 1510 21334143"
+        />
+      </SettingsItemContainer>
 
-        <SettingsItemContainer title={lang.changePassword.title}>
-          <SettingsItem
-            icon="lock"
-            title={lang.changePassword.password}
-            value={lang.changePassword.tapToChange}
-            onPress={() => navigation.navigate('UpdatePassword')}
-          />
-        </SettingsItemContainer>
+      <SettingsItemContainer title={lang.changePassword.title}>
+        <SettingsItem
+          icon="lock"
+          title={lang.changePassword.password}
+          value={lang.changePassword.tapToChange}
+          onPress={() => navigation.navigate('UpdatePassword')}
+        />
+      </SettingsItemContainer>
 
-        <SettingsItemContainer title={lang.moreInfo.title}>
-          <SettingsItem
-            icon="help"
-            title={lang.moreInfo.help}
-            onPress={() => navigation.navigate('Help')}
-          />
+      <SettingsItemContainer title={lang.moreInfo.title}>
+        <SettingsItem
+          icon="help"
+          title={lang.moreInfo.help}
+          onPress={() => navigation.navigate('Help')}
+        />
 
-          <SettingsItem
-            icon="info"
-            title={lang.moreInfo.about}
-            onPress={() => navigation.navigate('About')}
-          />
+        <SettingsItem
+          icon="info"
+          title={lang.moreInfo.about}
+          onPress={() => navigation.navigate('About')}
+        />
 
-          <SettingsItem
-            icon="logout"
-            title={lang.moreInfo.logout}
-            onPress={() =>
-              rootNavigation.navigate('Registration', {screen: 'LoginPreview'})
-            }
-          />
-        </SettingsItemContainer>
-      </MyScreenContainer>
-    </ScrollView>
+        <SettingsItem
+          icon="logout"
+          title={lang.moreInfo.logout}
+          onPress={() =>
+            rootNavigation.navigate('Registration', {screen: 'LoginPreview'})
+          }
+        />
+      </SettingsItemContainer>
+    </MyScreenContainer>
   );
 }
 
@@ -264,8 +265,10 @@ export function UpdateUsername() {
           setNewUsername(text);
         }}
       />
-      <Text color={currentTheme.textLight100} style={{marginTop: 12}}>{lang.changeUsername.info}</Text>
-      <Text color={currentTheme.textLight100} >{lang.changeUsername.info2}</Text>
+      <Text color={currentTheme.textLight100} style={{marginTop: 12}}>
+        {lang.changeUsername.info}
+      </Text>
+      <Text color={currentTheme.textLight100}>{lang.changeUsername.info2}</Text>
     </MyScreenContainer>
   );
 }
@@ -340,7 +343,9 @@ export function UpdatePassword() {
         />
       </View>
 
-      <Text color={currentTheme.textLight100} style={{marginTop: 12}}>{lang.info}</Text>
+      <Text color={currentTheme.textLight100} style={{marginTop: 12}}>
+        {lang.info}
+      </Text>
       <Text color={currentTheme.textLight100}>{lang.info2}</Text>
     </MyScreenContainer>
   );
diff --git a/src/pages/welcome/signUp/signUp.tsx b/src/pages/welcome/signUp/signUp.tsx
index cd82b64..21f9337 100644
--- a/src/pages/welcome/signUp/signUp.tsx
+++ b/src/pages/welcome/signUp/signUp.tsx
@@ -119,7 +119,7 @@ export function SignUpStepVerifyPhoneNumber() {
           description={`${lang.signUpStepVerifyPhoneNumber.description} +49 15** ******43`}
         />
 
-        <KeyboardAvoidingView style={{gap: 12, marginTop: 20}}>
+        <View style={{gap: 12, marginTop: 20}}>
           <ConfirmationCodeInput />
 
           <MyButton
@@ -138,7 +138,7 @@ export function SignUpStepVerifyPhoneNumber() {
               color={currentTheme.textLight400}
             />
           </View>
-        </KeyboardAvoidingView>
+        </View>
       </ContentContainer>
     </MyScreenContainer>
   );
@@ -192,31 +192,30 @@ export function SignUpStepAccountName() {
 
   return (
     <MyScreenContainer
+      scrollView
       style={{
         flexDirection: 'column',
       }}>
-      <ScrollView>
-        <ContentContainer>
-          <Title
-            text={lang.signUpStepAccountName.title}
-            description={lang.signUpStepAccountName.description}
+      <ContentContainer>
+        <Title
+          text={lang.signUpStepAccountName.title}
+          description={lang.signUpStepAccountName.description}
+        />
+
+        <View style={{gap: 12, marginTop: 20}}>
+          <MyIconInput
+            text={lang.signUpStepAccountName.inputAccountName}
+            iconName="person"
           />
 
-          <View style={{gap: 12, marginTop: 20}}>
-            <MyIconInput
-              text={lang.signUpStepAccountName.inputAccountName}
-              iconName="person"
-            />
-
-            <MyButton
-              type="primary"
-              text={lang.signUpStepAccountName.buttonGetStarted}
-              style={{marginBottom: 2}}
-              onPress={() => navigateToHome(navigation)}
-            />
-          </View>
-        </ContentContainer>
-      </ScrollView>
+          <MyButton
+            type="primary"
+            text={lang.signUpStepAccountName.buttonGetStarted}
+            style={{marginBottom: 2}}
+            onPress={() => navigateToHome(navigation)}
+          />
+        </View>
+      </ContentContainer>
     </MyScreenContainer>
   );
 }