[MOB-54] UI Fixes (#2059)

* UI fixes - rive animation - SD version in settings - and more * twStyle
spacedriveapp · Feb 6, 2024 · 48634c2 · 48634c2
1 parent 4e70246
commit 48634c2
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 13 deletions.
diff --git a/apps/mobile/assets/rive/tabs.riv b/apps/mobile/assets/rive/tabs.riv
diff --git a/apps/mobile/src/components/header/Header.tsx b/apps/mobile/src/components/header/Header.tsx
@@ -2,7 +2,7 @@ import { useNavigation } from '@react-navigation/native';
 import { StackHeaderProps } from '@react-navigation/stack';
 import { ArrowLeft, DotsThreeOutline, MagnifyingGlass } from 'phosphor-react-native';
 import { lazy } from 'react';
-import { Pressable, Text, View } from 'react-native';
+import { Platform, Pressable, Text, View } from 'react-native';
 import { tw, twStyle } from '~/lib/tailwind';
 import { getExplorerStore, useExplorerStore } from '~/stores/explorerStore';
 
@@ -71,7 +71,12 @@ export default function Header({
 	};
 
 	return (
-		<View style={tw`relative h-auto w-full border-b border-app-line/50 bg-mobile-header pt-10`}>
+		<View
+			style={twStyle(
+				'relative h-auto w-full border-b border-app-line/50 bg-mobile-header',
+				Platform.OS === 'android' ? 'pt-5' : 'pt-10'
+			)}
+		>
 			<View style={tw`mx-auto mt-5 h-auto w-full justify-center px-7 pb-5`}>
 				<View style={tw`w-full flex-row items-center justify-between`}>
 					<View style={tw`flex-row items-center gap-5`}>

diff --git a/apps/mobile/src/navigation/TabNavigator.tsx b/apps/mobile/src/navigation/TabNavigator.tsx
@@ -3,7 +3,7 @@ import { CompositeScreenProps, NavigatorScreenParams } from '@react-navigation/n
 import { StackScreenProps } from '@react-navigation/stack';
 import { BlurView } from 'expo-blur';
 import { useEffect, useRef, useState } from 'react';
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 import Rive, { RiveRef } from 'rive-react-native';
 import { Style } from 'twrnc/dist/esm/types';
@@ -106,7 +106,12 @@ export default function TabNavigator() {
 					position: 'absolute',
 					backgroundColor: tw.color('mobile-navtab'),
 					borderTopWidth: 1,
-					borderTopColor: tw.color('app-line/50')
+					borderTopColor: tw.color('app-line/50'),
+					height: Platform.OS === 'android' ? 60 : 80,
+					paddingVertical: 5
+				},
+				tabBarItemStyle: {
+					marginBottom: Platform.OS === 'android' ? 10 : 0
 				},
 				tabBarBackground: () => (
 					<BlurView tint="dark" intensity={50} style={StyleSheet.absoluteFill} />
@@ -121,14 +126,21 @@ export default function TabNavigator() {
 					key={screen.name + index}
 					name={screen.name}
 					component={screen.component}
-					options={{
+					options={({ navigation }) => ({
 						tabBarLabel: screen.label,
 						tabBarLabelStyle: screen.labelStyle,
 						tabBarIcon: () => (
-							<TouchableWithoutFeedback>{screen.icon}</TouchableWithoutFeedback>
+							<TouchableWithoutFeedback
+								onPress={() => {
+									navigation.navigate(screen.name);
+									setActiveIndex(index);
+								}}
+							>
+								{screen.icon}
+							</TouchableWithoutFeedback>
 						),
 						tabBarTestID: screen.testID
-					}}
+					})}
 					listeners={() => ({
 						tabPress: () => {
 							setActiveIndex(index);
@@ -158,8 +170,10 @@ const TabBarButton = ({
 	const ref = useRef<RiveRef>(null);
 	useEffect(() => {
 		if (active && ref.current) {
-			ref.current?.play();
-		} else ref.current?.stop();
+			ref.current?.play('animate');
+		} else {
+			ref.current?.stop();
+		}
 	}, [active]);
 	return (
 		<Rive

diff --git a/apps/mobile/src/screens/settings/Settings.tsx b/apps/mobile/src/screens/settings/Settings.tsx
@@ -13,7 +13,7 @@ import {
 	TagSimple
 } from 'phosphor-react-native';
 import React from 'react';
-import { SectionList, Text, TouchableWithoutFeedback, View } from 'react-native';
+import { Platform, SectionList, Text, TouchableWithoutFeedback, View } from 'react-native';
 import { DebugState, useDebugState, useDebugStateEnabler } from '@sd/client';
 import { SettingsItem } from '~/components/settings/SettingsItem';
 import { tw, twStyle } from '~/lib/tailwind';
@@ -143,7 +143,7 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps<
 		<View style={tw`flex-1 bg-mobile-screen px-7`}>
 			<SectionList
 				sections={sections(debugState)}
-				contentContainerStyle={tw`py-5`}
+				contentContainerStyle={tw`h-auto pb-5 pt-3`}
 				renderItem={({ item }) => (
 					<SettingsItem
 						title={item.title}
@@ -164,9 +164,10 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps<
 
 function FooterComponent() {
 	const onClick = useDebugStateEnabler();
-
 	return (
-		<View style={tw`mb-4 mt-6 items-center`}>
+		<View
+			style={twStyle(Platform.OS === 'android' ? 'mb-14 mt-4' : 'mb-20 mt-5', 'items-center')}
+		>
 			<TouchableWithoutFeedback onPress={onClick}>
 				<Text style={tw`text-base font-bold text-ink`}>Spacedrive</Text>
 			</TouchableWithoutFeedback>