From 9ee62079f5e2fb8c4d17c3f46f134f9236e8ab19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Loipf=C3=BChrer?= Date: Thu, 4 Jan 2024 15:35:46 +0100 Subject: [PATCH] feat(mobile): improve splash screen, add logo to login screen --- frontend/apps/mobile/.gitignore | 1 + frontend/apps/mobile/project.json | 21 ++++++++++++------- frontend/apps/mobile/src/App.tsx | 4 ++-- frontend/apps/mobile/src/AppWrapper.tsx | 2 +- .../apps/mobile/src/hooks/useColorScheme.ts | 2 -- frontend/apps/mobile/src/screens/Login.tsx | 9 ++++++++ .../apps/mobile/src/screens/SplashScreen.tsx | 13 +++++++----- frontend/apps/web/src/pages/auth/Register.tsx | 1 + 8 files changed, 36 insertions(+), 17 deletions(-) diff --git a/frontend/apps/mobile/.gitignore b/frontend/apps/mobile/.gitignore index e69de29b..f40fe050 100644 --- a/frontend/apps/mobile/.gitignore +++ b/frontend/apps/mobile/.gitignore @@ -0,0 +1 @@ +assets \ No newline at end of file diff --git a/frontend/apps/mobile/project.json b/frontend/apps/mobile/project.json index 35a0d87f..010792e2 100644 --- a/frontend/apps/mobile/project.json +++ b/frontend/apps/mobile/project.json @@ -4,9 +4,16 @@ "sourceRoot": "apps/mobile/src", "projectType": "application", "targets": { + "collect-assets": { + "executor": "nx:run-commands", + "options": { + "commands": ["mkdir -p apps/mobile/src/assets", "cp -rf assets/* apps/mobile/src/assets/"], + "parallel": false + } + }, "start": { "executor": "@nx/react-native:start", - "dependsOn": ["ensure-symlink", "sync-deps", "pod-install"], + "dependsOn": ["ensure-symlink", "sync-deps", "pod-install", "collect-assets"], "options": { "port": 8081 } @@ -19,12 +26,12 @@ }, "run-ios": { "executor": "@nx/react-native:run-ios", - "dependsOn": ["ensure-symlink", "sync-deps", "pod-install"], + "dependsOn": ["ensure-symlink", "sync-deps", "pod-install", "collect-assets"], "options": {} }, "bundle-ios": { "executor": "@nx/react-native:bundle", - "dependsOn": ["ensure-symlink"], + "dependsOn": ["ensure-symlink", "collect-assets"], "outputs": ["{options.bundleOutput}"], "options": { "entryFile": "src/main.tsx", @@ -34,7 +41,7 @@ }, "run-android": { "executor": "@nx/react-native:run-android", - "dependsOn": ["ensure-symlink", "sync-deps"], + "dependsOn": ["ensure-symlink", "sync-deps", "collect-assets"], "options": {} }, "build-android": { @@ -43,13 +50,13 @@ "{projectRoot}/android/app/build/outputs/bundle", "{projectRoot}/android/app/build/outputs/apk" ], - "dependsOn": ["ensure-symlink", "sync-deps"], + "dependsOn": ["ensure-symlink", "sync-deps", "collect-assets"], "options": {} }, "build-ios": { "executor": "@nx/react-native:build-ios", "outputs": ["{projectRoot}/ios/build/Build"], - "dependsOn": ["ensure-symlink", "sync-deps", "pod-install"], + "dependsOn": ["ensure-symlink", "sync-deps", "pod-install", "collect-assets"], "options": {} }, "pod-install": { @@ -58,7 +65,7 @@ }, "bundle-android": { "executor": "@nx/react-native:bundle", - "dependsOn": ["ensure-symlink"], + "dependsOn": ["ensure-symlink", "collect-assets"], "outputs": ["{options.bundleOutput}"], "options": { "entryFile": "src/main.tsx", diff --git a/frontend/apps/mobile/src/App.tsx b/frontend/apps/mobile/src/App.tsx index 5238ae5a..6e5ef693 100644 --- a/frontend/apps/mobile/src/App.tsx +++ b/frontend/apps/mobile/src/App.tsx @@ -15,10 +15,10 @@ import { SafeAreaProvider } from "react-native-safe-area-context"; import MaterialIcons from "react-native-vector-icons/MaterialIcons"; import { ApiProvider } from "./core/ApiProvider"; import { createApi } from "./core/api"; -import useColorScheme from "./hooks/useColorScheme"; +import { useColorScheme } from "./hooks/useColorScheme"; import { Navigation } from "./navigation"; import { NotificationProvider } from "./notifications"; -import SplashScreen from "./screens/SplashScreen"; +import { SplashScreen } from "./screens/SplashScreen"; import { selectAuthSlice, selectSettingsSlice, diff --git a/frontend/apps/mobile/src/AppWrapper.tsx b/frontend/apps/mobile/src/AppWrapper.tsx index 039e0056..7a263e95 100644 --- a/frontend/apps/mobile/src/AppWrapper.tsx +++ b/frontend/apps/mobile/src/AppWrapper.tsx @@ -3,7 +3,7 @@ import "react-native-gesture-handler"; import { Provider } from "react-redux"; import { PersistGate } from "redux-persist/integration/react"; import { App } from "./App"; -import SplashScreen from "./screens/SplashScreen"; +import { SplashScreen } from "./screens/SplashScreen"; import { persistor, store } from "./store"; export const AppWrapper: React.FC = () => { diff --git a/frontend/apps/mobile/src/hooks/useColorScheme.ts b/frontend/apps/mobile/src/hooks/useColorScheme.ts index 7efaf238..814cb60f 100644 --- a/frontend/apps/mobile/src/hooks/useColorScheme.ts +++ b/frontend/apps/mobile/src/hooks/useColorScheme.ts @@ -6,5 +6,3 @@ import { ColorSchemeName, useColorScheme as _useColorScheme } from "react-native export const useColorScheme = (): NonNullable => { return _useColorScheme() as NonNullable; }; - -export default useColorScheme; diff --git a/frontend/apps/mobile/src/screens/Login.tsx b/frontend/apps/mobile/src/screens/Login.tsx index 37f5909a..b3029dca 100644 --- a/frontend/apps/mobile/src/screens/Login.tsx +++ b/frontend/apps/mobile/src/screens/Login.tsx @@ -12,6 +12,7 @@ import { RootDrawerScreenProps } from "../navigation/types"; import { notify } from "../notifications"; import { useAppDispatch } from "../store"; import { useTranslation } from "react-i18next"; +import LogoSvg from "../assets/logo.svg"; const validationSchema = z.object({ server: z.string({ required_error: "server is required" }).url({ message: "invalid server url" }), @@ -66,6 +67,9 @@ export const LoginScreen: React.FC> = ({ navigati + + + > = ({ navigati }; const styles = StyleSheet.create({ + logoContainer: { + alignItems: "center", + justifyContent: "center", + height: 100, + }, container: { padding: 8, }, diff --git a/frontend/apps/mobile/src/screens/SplashScreen.tsx b/frontend/apps/mobile/src/screens/SplashScreen.tsx index 27ac28e0..8e3cd931 100644 --- a/frontend/apps/mobile/src/screens/SplashScreen.tsx +++ b/frontend/apps/mobile/src/screens/SplashScreen.tsx @@ -1,21 +1,24 @@ import React from "react"; import { StyleSheet, View } from "react-native"; -import { ActivityIndicator, Text } from "react-native-paper"; +import LogoSvg from "../assets/logo.svg"; export const SplashScreen: React.FC = () => { return ( - - Splash screen + + + ); }; const styles = StyleSheet.create({ container: { + flex: 1, justifyContent: "center", alignItems: "center", }, + logoContainer: { + height: 150, + }, }); - -export default SplashScreen; diff --git a/frontend/apps/web/src/pages/auth/Register.tsx b/frontend/apps/web/src/pages/auth/Register.tsx index 40c5b739..6a191315 100644 --- a/frontend/apps/web/src/pages/auth/Register.tsx +++ b/frontend/apps/web/src/pages/auth/Register.tsx @@ -161,6 +161,7 @@ export const Register: React.FC = () => { required fullWidth type="password" + name="password" label={t("common.password")} onBlur={handleBlur} onChange={handleChange}