some visual changes

2024-12-07 18:40:59 +01:00
parent eeef5800d9
commit dc4cb2a6e2
5 changed files with 76 additions and 80 deletions
@@ -3,13 +3,29 @@ import React from "react";
 import {Feather} from "@expo/vector-icons";
 import {useTheme} from "@/src/context/ThemeProvider";
 import AuthenticatedWrapper from "@/src/components/AuthenticatedWrapper";
+import {Dimensions} from "react-native";
+import {Tooltip} from "react-native-paper";
+
+
+const screenWidth = Dimensions.get("window").width;
+
+
+const tabs = [
+    {name: 'modes/text', title: 'Text', icon: 'type'},
+    {name: 'modes/image', title: 'Bilder', icon: 'image'},
+    {name: 'index', title: 'Startseite', icon: 'home'},
+    {name: 'modes/music', title: 'Musik', icon: 'music'},
+    {name: 'modes/clock', title: 'Uhr', icon: 'clock'},
+] as const; // "as const" macht das Array readonly und validiert die Strings.

 export default function TabLayout() {
    const theme = useTheme();
+    const shouldHideText = (screenWidth < 400); // Dynamisch basierend auf der Bildschirmbreite
+
    return (
        <AuthenticatedWrapper>
            <Tabs
-                screenOptions={{
+                screenOptions={({route}) => ({
                    headerStyle: {
                        backgroundColor: theme.theme.colors.primaryContainer,
                    },
@@ -35,46 +51,28 @@ export default function TabLayout() {
                        borderTopColor: theme.theme.colors.outline,
                        elevation: 4,
                    },
-                }}
+                    tabBarItemStyle: {
+                        borderLeftWidth: route.name === tabs[0].name ? 0 : 1,
+                        borderLeftColor: theme.theme.colors.outlineVariant, // Trennlinienfarbe
+                    },
+                })}
            >
-                <Tabs.Screen
-                    name={'modes/text'}
-                    options={{
-                        title: 'Text',
-                        tabBarIcon: ({color}) => <Feather size={28} name="type" color={color}/>,
-                    }}
-                />
-
-                <Tabs.Screen
-                    name={'modes/image'}
-                    options={{
-                        title: 'Bilder',
-                        tabBarIcon: ({color}) => <Feather size={28} name="image" color={color}/>,
-                    }}/>
-
-                <Tabs.Screen
-                    name="index"
-                    options={{
-                        title: 'Startseite',
-                        tabBarIcon: ({color}) => <Feather size={28} name="home" color={color}/>,
-                    }}
-                />
-
-
-                <Tabs.Screen
-                    name={'modes/music'}
-                    options={{
-                        title: 'Musik',
-                        tabBarIcon: ({color}) => <Feather size={28} name="music" color={color}/>,
-                    }}/>
-
-
-                <Tabs.Screen
-                    name={'modes/clock'}
-                    options={{
-                        title: 'Uhr',
-                        tabBarIcon: ({color}) => <Feather size={28} name="clock" color={color}/>,
-                    }}/>
+                {tabs.map(({name, title, icon}) => (
+                    <Tabs.Screen
+                        key={name}
+                        name={name}
+                        options={{
+                            title: shouldHideText ? '' : title,
+                            tabBarIcon: ({color}) => (
+                                <Tooltip
+                                    title={title}
+                                >
+                                    <Feather size={28} name={icon} color={color}/>
+                                </Tooltip>
+                            ),
+                        }}
+                    />
+                ))}

                <Tabs.Screen
                    name="settings"
@@ -12,8 +12,9 @@ export default function HomeScreen() {
            <ThemedHeader>Welcome to the Home Page!</ThemedHeader>
            <ThemedButton mode={"outlined"} onPress={() => {
                console.log("Button pressed");
-                logout();
-                router.replace("/login");
+                logout().then(() => {
+                    router.replace("/login");
+                });
            }
            }>
                Logout
@@ -9,6 +9,7 @@ import {Paragraph, Text} from 'react-native-paper';

 import * as WebBrowser from "expo-web-browser";
 import {useAuth} from "@/src/context/AuthProvider";
+import {StyleSheet, View} from "react-native";

 WebBrowser.maybeCompleteAuthSession();

@@ -21,18 +22,29 @@ export default function SettingsScreen() {
        console.log('Erhaltener Authentifizierungscode:', token);
    };

-    console.log('authenticatedUser', authenticatedUser)
-
    return (
        <ThemedBackground>
            <ThemedHeader>
                Settings
            </ThemedHeader>
-            <Paragraph>Guten Tag, {authenticatedUser?.name}</Paragraph>
-            <ChangePasswordModal/>
-            <ThemeToggleButton/>
-            <SpotifyAuthButton onAuthSuccess={handleAuthSuccess} jwtToken={jwtToken!}/>
-            {token && <Text>Erhaltener Code: {token.access_token}</Text>}
+            <View style={styles.container}>
+                <Paragraph>Guten Tag, {authenticatedUser?.name}</Paragraph>
+                <ChangePasswordModal/>
+                <ThemeToggleButton/>
+                <SpotifyAuthButton
+                    onAuthSuccess={handleAuthSuccess}
+                    jwtToken={jwtToken!}
+                />
+                {token && <Text>Erhaltener Code: {token.access_token}</Text>}
+            </View>
        </ThemedBackground>
    );
 }
+
+const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+        gap: 12, // Für Abstand zwischen den Kind-Elementen (ab React Native 0.71)
+        alignItems: "center", // Zentrierung
+    },
+});
@@ -42,7 +42,6 @@
        "@babel/core": "^7.26.0",
        "@types/jest": "^29.5.14",
        "@types/react": "~18.3.12",
-        "@types/react-native-vector-icons": "^6.4.18",
        "@types/react-test-renderer": "^18.3.0",
        "compression": "^1.7.5",
        "eslint-config-expo": "~8.0.1",
@@ -5028,27 +5027,6 @@
        "csstype": "^3.0.2"
      }
    },
-    "node_modules/@types/react-native": {
-      "version": "0.70.19",
-      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.70.19.tgz",
-      "integrity": "sha512-c6WbyCgWTBgKKMESj/8b4w+zWcZSsCforson7UdXtXMecG3MxCinYi6ihhrHVPyUrVzORsvEzK8zg32z4pK6Sg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/react-native-vector-icons": {
-      "version": "6.4.18",
-      "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.18.tgz",
-      "integrity": "sha512-YGlNWb+k5laTBHd7+uZowB9DpIK3SXUneZqAiKQaj1jnJCZM0x71GDim5JCTMi4IFkhc9m8H/Gm28T5BjyivUw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*",
-        "@types/react-native": "^0.70"
-      }
-    },
    "node_modules/@types/react-test-renderer": {
      "version": "18.3.0",
      "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.3.0.tgz",
@@ -9283,9 +9261,9 @@
      "license": "Apache-2.0"
    },
    "node_modules/express": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -9308,7 +9286,7 @@
        "methods": "~1.1.2",
        "on-finished": "2.4.1",
        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.10",
+        "path-to-regexp": "0.1.12",
        "proxy-addr": "~2.0.7",
        "qs": "6.13.0",
        "range-parser": "~1.2.1",
@@ -9323,6 +9301,10 @@
      },
      "engines": {
        "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
      }
    },
    "node_modules/express/node_modules/cookie": {
@@ -14649,9 +14631,9 @@
      "license": "ISC"
    },
    "node_modules/path-to-regexp": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
      "dev": true,
      "license": "MIT"
    },
@@ -1,6 +1,8 @@
 import React from "react";
 import {ImageBackground, KeyboardAvoidingView, StyleSheet,} from "react-native";
 import {useTheme} from "../../context/ThemeProvider";
+import { Dimensions } from "react-native";
+

 type Props = {
    children: React.ReactNode;
@@ -21,6 +23,8 @@ export default function ThemedBackground({children}: Props) {
    );
 }

+const screenWidth = Dimensions.get("window").width;
+
 const styles = StyleSheet.create({
    background: {
        flex: 1,
@@ -29,8 +33,7 @@ const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
-        width: "100%",
-        maxWidth: 340,
+        width: Math.min(screenWidth, 340),
        alignSelf: "center",
        alignItems: "center",
        justifyContent: "center",