From 581cbf6a276d6de5165c4132ea0e79415efe02ee Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Tue, 6 Feb 2024 17:49:16 +0300
Subject: [PATCH] [MOB-54] UI Fixes (#2059)

* UI fixes - rive animation - SD version in settings - and more

* twStyle
---
 apps/mobile/assets/rive/tabs.riv              | Bin 9419 -> 8052 bytes
 apps/mobile/src/components/header/Header.tsx  |   9 ++++--
 apps/mobile/src/navigation/TabNavigator.tsx   |  28 +++++++++++++-----
 apps/mobile/src/screens/settings/Settings.tsx |   9 +++---
 4 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/apps/mobile/assets/rive/tabs.riv b/apps/mobile/assets/rive/tabs.riv
index 1db36b7bc05580520a8223fa5439b20265707073..a655fbaca17f015d06b7e6f3e9c81049a248b767 100644
GIT binary patch
delta 385
zcmX@@`Nd8+$TQ59ouTQG`Vq!Aj0_+kzFAf(mQg_7oINowGdHm$)l!2&(wKd+p^Eh6
zt1?xLEMQi)Y}IB)Ia5Ym%PvNCpTx@4A_YSR+o_C<3@aHK9H#?mAcq0OVqmaiaA2?p
z3vR9!&0(6%EFs4zHCai*da}HP%;s2$ct!(cQ@~1@kqu)88EOYNk&(e+qx@Dr9%Ls@
ze$QvkSU7nhzsTfx0rtsS{E?IEgp?;Y^UF-$!{5i)J9z=WC|JfzKy~sd;mXM?L}VsA
zi=<AL6*ZrHNF-9-)SM%~EVZaCGqs!n*)<Ljhd|uVV7GaJyci3r&AKY`lO<Ke8FhdG
V<EV|H7aR!8&;WoK1`Z!P1^~pqU~m8c

delta 1041
zcmaJ<OK1~O6n*z)%!JewiM5$G=2HnV5o$FIp~h;e`KX0LAd0mMkt~J~sVPmSDGFNY
zGN7A_8c}EkUAPhr?z?d3)=hV@?NX=<6<6w;$xJ@PW)?Gd&U>7D&pqcy;`2-(H*-BB
zlC|ydC)kB=@D+BT3B-CljR%g8!#1WY;VbDVCOv2Hsb?PDk{9Z@AsxX}qKFgHW89KL
zPPjzK!)d~lNBqc($W-*RW&F*&7?tPHE&C1yCdGWIcqgx^@d&@zVdadt=Ls6@6Vej2
zD7HAdF8T1Mv}Vw)m{h-5JRF;JELPQWwWzL;cn!qa{9Uy?7A4c<;xhnp{t16wAc=-c
zSfETMax6qbX}Iy>&FjA;lsadYShXL6gIKpuHTLYcAb*xKY2{*}pqBetZ6v`dIWy6F
z2qgW2S4N|^pd&WIzXn*Y!B8%ny>>F0%g$ZRG=VRclFAN{_lIx7DpQ8|KyKnsMbb1g
z(%PFGb9Dh5Nq%Fv7hsCm*74_gP}dQ$Br!!8a7KID`3#?W`<+f%{cxR*uJ+R(=%M%z
zL*K-lk}0kMQ#tmf44Z4|Ol1PRNq2^@4);Oi*&M-5Dq@u01Ht+Or(QKS=@{Ies)1cw
zEEE>h9#?rjy6n8H+iApy61{$D#i-?O2juQLXNwh0E$N9f&0Xf^?gDMRlShRsOgS+?
z_xQeN-P-u_#w{)Q-S5FKelG?C$LIIUs2NTpie@+sH9}h>ZKu;wQ8letDpZ<4t!R>e
Dx+e#$

diff --git a/apps/mobile/src/components/header/Header.tsx b/apps/mobile/src/components/header/Header.tsx
index adef0b5bf..ff6413eb3 100644
--- 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
index a4eddde2f..a5e12120d 100644
--- 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
index f74fb55fc..b4e7d52be 100644
--- 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>