From a17fb910eda7979d41f35df72a008a7eac4b7867 Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Thu, 22 Feb 2024 15:20:31 +0300
Subject: [PATCH] [MOB-62] Spacing & padding tweaks (#2117)

Spacing & padding tweaks
---
 apps/mobile/src/components/browse/BrowseLocations.tsx   | 6 +++---
 apps/mobile/src/components/browse/BrowseTags.tsx        | 8 +++-----
 apps/mobile/src/components/browse/Categories.tsx        | 6 +++---
 apps/mobile/src/components/browse/Jobs.tsx              | 6 +++---
 apps/mobile/src/components/header/Header.tsx            | 3 +--
 apps/mobile/src/components/layout/ScreenContainer.tsx   | 4 ++--
 apps/mobile/src/components/overview/Categories.tsx      | 4 ++--
 apps/mobile/src/components/overview/Devices.tsx         | 4 +---
 apps/mobile/src/components/overview/OverviewSection.tsx | 7 ++++---
 apps/mobile/src/components/overview/OverviewStats.tsx   | 4 ++--
 apps/mobile/src/screens/settings/Settings.tsx           | 4 ++--
 11 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/apps/mobile/src/components/browse/BrowseLocations.tsx b/apps/mobile/src/components/browse/BrowseLocations.tsx
index eff26a579..804e91f3c 100644
--- a/apps/mobile/src/components/browse/BrowseLocations.tsx
+++ b/apps/mobile/src/components/browse/BrowseLocations.tsx
@@ -97,8 +97,8 @@ const BrowseLocations = () => {
 	const locations = useCache(result.data?.items);
 
 	return (
-		<View style={tw`gap-5`}>
-			<View style={tw`w-full flex-row items-center justify-between px-7`}>
+		<View style={tw`gap-3`}>
+			<View style={tw`w-full flex-row items-center justify-between px-6`}>
 				<Text style={tw`text-lg font-bold text-white`}>Locations</Text>
 				<View style={tw`flex-row gap-3`}>
 					<Pressable
@@ -129,7 +129,7 @@ const BrowseLocations = () => {
 					data={locations}
 					ListEmptyComponent={() => (
 						<View
-							style={tw`relative h-auto w-[85.5vw] flex-col items-center justify-center overflow-hidden rounded-md border border-dashed border-sidebar-line  p-4`}
+							style={tw`relative h-auto w-[87.5vw] flex-col items-center justify-center overflow-hidden rounded-md border border-dashed border-sidebar-line  p-4`}
 						>
 							<Icon name="Folder" size={38} />
 							<Text style={tw`mt-2 text-center font-medium text-ink-dull`}>
diff --git a/apps/mobile/src/components/browse/BrowseTags.tsx b/apps/mobile/src/components/browse/BrowseTags.tsx
index 5ecc31cc1..125be6cac 100644
--- a/apps/mobile/src/components/browse/BrowseTags.tsx
+++ b/apps/mobile/src/components/browse/BrowseTags.tsx
@@ -22,13 +22,11 @@ type TagItemProps = {
 	onPress: () => void;
 	tagStyle?: ClassInput;
 	viewStyle?: 'grid' | 'list';
-	rightActions?: () => void;
 };
 
 export const TagItem = ({
 	tag,
 	onPress,
-	rightActions,
 	tagStyle,
 	viewStyle = 'grid'
 }: TagItemProps) => {
@@ -146,8 +144,8 @@ const BrowseTags = () => {
 	const modalRef = useRef<ModalRef>(null);
 
 	return (
-		<View style={tw`gap-5`}>
-			<View style={tw`w-full flex-row items-center justify-between px-7`}>
+		<View style={tw`gap-3`}>
+			<View style={tw`w-full flex-row items-center justify-between px-6`}>
 				<Text style={tw`text-lg font-bold text-white`}>Tags</Text>
 				<View style={tw`flex-row gap-3`}>
 					<Pressable onPress={() => navigation.navigate('Tags')}>
@@ -192,7 +190,7 @@ const BrowseTags = () => {
 					keyExtractor={(item) => item.id.toString()}
 					horizontal
 					showsHorizontalScrollIndicator={false}
-					contentContainerStyle={tw`px-7`}
+					contentContainerStyle={tw`px-6`}
 					ItemSeparatorComponent={() => <View style={tw`w-2`} />}
 				/>
 			</Fade>
diff --git a/apps/mobile/src/components/browse/Categories.tsx b/apps/mobile/src/components/browse/Categories.tsx
index 073e3170e..086f4f46c 100644
--- a/apps/mobile/src/components/browse/Categories.tsx
+++ b/apps/mobile/src/components/browse/Categories.tsx
@@ -28,11 +28,11 @@ const CATEGORIES_LIST = [
 ];
 const Categories = () => {
 	return (
-		<View style={tw`relative gap-5`}>
-			<Text style={tw`px-7 text-lg font-bold text-white`}>Library</Text>
+		<View style={tw`relative gap-3`}>
+			<Text style={tw`px-6 text-lg font-bold text-white`}>Library</Text>
 			<Fade width={30} height="100%" color="mobile-screen">
 				<ScrollView showsHorizontalScrollIndicator={false} horizontal>
-					<View style={tw`flex-row gap-2 px-7`}>
+					<View style={tw`flex-row gap-2 px-6`}>
 						{CATEGORIES_LIST.map((c, i) => {
 							return <Category icon={c.icon} key={i} name={c.name} />;
 						})}
diff --git a/apps/mobile/src/components/browse/Jobs.tsx b/apps/mobile/src/components/browse/Jobs.tsx
index 151b1b6f5..afe3de4f6 100644
--- a/apps/mobile/src/components/browse/Jobs.tsx
+++ b/apps/mobile/src/components/browse/Jobs.tsx
@@ -9,13 +9,13 @@ import Fade from '../layout/Fade';
 
 const Jobs = () => {
 	return (
-		<View style={tw`gap-5`}>
-			<View style={tw`w-full flex-row items-center justify-between px-7`}>
+		<View style={tw`gap-3`}>
+			<View style={tw`w-full flex-row items-center justify-between px-5`}>
 				<Text style={tw`text-lg font-bold text-white`}>Jobs</Text>
 			</View>
 			<Fade color="mobile-screen" height="100%" width={30}>
 				<ScrollView horizontal showsHorizontalScrollIndicator={false}>
-					<View style={tw`flex-row gap-2 px-7`}>
+					<View style={tw`flex-row gap-2 px-5`}>
 						<Job message="Processed 300 of 1431 orphan paths..." progress={55} />
 						<Job message="All tasks have been completed successfully" progress={100} />
 						<Job
diff --git a/apps/mobile/src/components/header/Header.tsx b/apps/mobile/src/components/header/Header.tsx
index 964b561ba..fc0ec444c 100644
--- a/apps/mobile/src/components/header/Header.tsx
+++ b/apps/mobile/src/components/header/Header.tsx
@@ -44,7 +44,6 @@ export default function Header({
 	const navigation = useNavigation();
 	const explorerStore = useExplorerStore();
 	const routeParams = route?.route.params as any;
-
 	const headerHeight = useSafeAreaInsets().top;
 
 	return (
@@ -54,7 +53,7 @@ export default function Header({
 				{ paddingTop: headerHeight }
 			)}
 		>
-			<View style={tw`mx-auto h-auto w-full justify-center px-7 pb-5`}>
+			<View style={tw`mx-auto h-auto w-full justify-center px-5 pb-4`}>
 				<View style={tw`w-full flex-row items-center justify-between`}>
 					<View style={tw`flex-row items-center gap-3`}>
 						{navBack && (
diff --git a/apps/mobile/src/components/layout/ScreenContainer.tsx b/apps/mobile/src/components/layout/ScreenContainer.tsx
index be5eaec79..452e63edf 100644
--- a/apps/mobile/src/components/layout/ScreenContainer.tsx
+++ b/apps/mobile/src/components/layout/ScreenContainer.tsx
@@ -15,14 +15,14 @@ const ScreenContainer = ({ children, style, scrollview = true, tabHeight = true
 	const height = useBottomTabBarHeight();
 	return scrollview ? (
 		<ScrollView
-			contentContainerStyle={twStyle('justify-between gap-6 py-5', style)}
+			contentContainerStyle={twStyle('justify-between gap-10 py-6', style)}
 			style={twStyle('flex-1 bg-mobile-screen', { marginBottom: tabHeight && height })}
 		>
 			{children}
 		</ScrollView>
 	) : (
 		<View
-			style={twStyle('flex-1 justify-between gap-6 bg-mobile-screen py-5', style, {
+			style={twStyle('flex-1 justify-between gap-10 bg-mobile-screen py-6', style, {
 				marginBottom: tabHeight && height
 			})}
 		>
diff --git a/apps/mobile/src/components/overview/Categories.tsx b/apps/mobile/src/components/overview/Categories.tsx
index 502e7cc7e..2e479cc13 100644
--- a/apps/mobile/src/components/overview/Categories.tsx
+++ b/apps/mobile/src/components/overview/Categories.tsx
@@ -16,7 +16,7 @@ interface Props {
 const Categories = ({ kinds }: Props) => {
 	return (
 		<View>
-			<Text style={tw`px-7 pb-5 text-lg font-bold text-white`}>Categories</Text>
+			<Text style={tw`px-6 pb-3 text-lg font-bold text-white`}>Categories</Text>
 			<View>
 				<Fade color="mobile-screen" width={30} height="100%">
 					<VirtualizedListWrapper horizontal>
@@ -24,7 +24,7 @@ const Categories = ({ kinds }: Props) => {
 							data={kinds.data?.statistics
 								?.sort((a, b) => b.count - a.count)
 								.filter((i) => i.kind !== 0)}
-							contentContainerStyle={tw`pl-7`}
+							contentContainerStyle={tw`pl-5`}
 							numColumns={Math.ceil(Number(kinds.data?.statistics.length ?? 0) / 2)}
 							key={kinds.data?.statistics ? 'kinds' : '_'} //needed to update numColumns when data is available
 							keyExtractor={(item) => item.name}
diff --git a/apps/mobile/src/components/overview/Devices.tsx b/apps/mobile/src/components/overview/Devices.tsx
index 4466c189f..8037c7b3c 100644
--- a/apps/mobile/src/components/overview/Devices.tsx
+++ b/apps/mobile/src/components/overview/Devices.tsx
@@ -30,14 +30,13 @@ function hardwareModelToIcon(hardwareModel: HardwareModel) {
 
 const Devices = ({ node, stats }: Props) => {
 	return (
-		<View>
 			<OverviewSection title="Devices" count={node ? 1 : 0}>
 				<View>
 					<Fade height={'100%'} width={30} color="mobile-screen">
 						<ScrollView
 							horizontal
 							showsHorizontalScrollIndicator={false}
-							contentContainerStyle={tw`px-7`}
+							contentContainerStyle={tw`px-6`}
 						>
 							{node && (
 								<StatCard
@@ -63,7 +62,6 @@ const Devices = ({ node, stats }: Props) => {
 					</Fade>
 				</View>
 			</OverviewSection>
-		</View>
 	);
 };
 
diff --git a/apps/mobile/src/components/overview/OverviewSection.tsx b/apps/mobile/src/components/overview/OverviewSection.tsx
index 9f3eb536c..126e5d7e0 100644
--- a/apps/mobile/src/components/overview/OverviewSection.tsx
+++ b/apps/mobile/src/components/overview/OverviewSection.tsx
@@ -9,8 +9,9 @@ interface Props extends PropsWithChildren {
 
 const OverviewSection = ({ title, count, children }: Props) => {
 	return (
-		<>
-			<View style={tw`flex-row items-center gap-3 px-7 pb-5`}>
+		<View>
+			{/* The view wrapper is needed to prevent gap spacing from screen container */}
+			<View style={tw`flex-row items-center gap-3 px-6 pb-3`}>
 				<Text style={tw`text-lg font-bold text-white`}>{title}</Text>
 				<View
 					style={tw`flex h-[24px] w-[24px] items-center justify-center rounded-full border border-app-button/40 px-1`}
@@ -19,7 +20,7 @@ const OverviewSection = ({ title, count, children }: Props) => {
 				</View>
 			</View>
 			{children}
-		</>
+		</View>
 	);
 };
 
diff --git a/apps/mobile/src/components/overview/OverviewStats.tsx b/apps/mobile/src/components/overview/OverviewStats.tsx
index 642a14bf2..9df6aeb26 100644
--- a/apps/mobile/src/components/overview/OverviewStats.tsx
+++ b/apps/mobile/src/components/overview/OverviewStats.tsx
@@ -98,8 +98,8 @@ const OverviewStats = ({ stats }: Props) => {
 	};
 
 	return (
-		<View style={tw`px-7`}>
-			<Text style={tw`pb-5 text-lg font-bold text-white`}>Statistics</Text>
+		<View style={tw`px-6`}>
+			<Text style={tw`pb-3 text-lg font-bold text-white`}>Statistics</Text>
 			<View style={tw`h-[250px] w-full flex-row justify-between gap-2`}>
 				<View style={tw`h-full w-[49%] flex-col justify-between gap-2`}>
 					{renderStatItems()}
diff --git a/apps/mobile/src/screens/settings/Settings.tsx b/apps/mobile/src/screens/settings/Settings.tsx
index 1fadbf874..1c100eab3 100644
--- a/apps/mobile/src/screens/settings/Settings.tsx
+++ b/apps/mobile/src/screens/settings/Settings.tsx
@@ -128,7 +128,7 @@ function renderSectionHeader({ section }: { section: { title: string } }) {
 	return (
 		<Text
 			style={twStyle(
-				'mb-4 text-md font-bold text-ink',
+				'mb-3 text-lg font-bold text-ink',
 				section.title === 'Client' ? 'mt-2' : 'mt-5'
 			)}
 		>
@@ -141,7 +141,7 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps<
 	const debugState = useDebugState();
 
 	return (
-		<ScreenContainer tabHeight={false} scrollview={false} style={tw`relative gap-0 px-7 py-0`}>
+		<ScreenContainer tabHeight={false} scrollview={false} style={tw`gap-0 px-6 py-0`}>
 			<SectionList
 				sections={sections(debugState)}
 				contentContainerStyle={tw`h-auto pb-5 pt-3`}