[MOB-48] Settings screen redesigned (#2034)

* Settings screen designed

* ts

* fix test id

* remove test for now

apps/mobile/src/components/settings/SettingsItem.tsx

@@ -1,5 +1,5 @@
 import { CaretRight, Icon } from 'phosphor-react-native';
-import { Pressable, Text, View, ViewStyle } from 'react-native';
+import { Pressable, Text, View } from 'react-native';
 import { tw, twStyle } from '~/lib/tailwind';
 
 type SettingsItemProps = {
@@ -7,31 +7,42 @@ type SettingsItemProps = {
 	onPress?: () => void;
 	leftIcon?: Icon;
 	rightArea?: React.ReactNode;
+	rounded?: 'top' | 'bottom';
 };
 
 export function SettingsItem(props: SettingsItemProps) {
+	//due to SectionList limitation of not being able to modify each section individually
+	//we have to use this 'hacky' way to make the top and bottom rounded
+	const borderRounded =
+		props.rounded === 'top' ? 'rounded-t-md' : props.rounded === 'bottom' && 'rounded-b-md';
+	const border =
+		props.rounded === 'top'
+			? 'border-t border-r border-l border-app-input'
+			: props.rounded === 'bottom'
+			? 'border-b border-app-input border-r border-l'
+			: 'border-app-input border-l border-r';
 	return (
 		<Pressable onPress={props.onPress}>
-			<View style={tw`flex flex-row items-center justify-between bg-app-darkBox px-4`}>
-				<View style={tw`flex flex-row items-center py-3`}>
-					{props.leftIcon &&
-						props.leftIcon({ size: 20, color: tw.color('ink'), style: tw`mr-3` })}
-					<Text style={tw`text-[14px] font-medium text-ink`}>{props.title}</Text>
+			<View style={twStyle(' border-app-input bg-sidebar-box', borderRounded, border)}>
+				<View style={tw`h-auto flex-row items-center`}>
+					{props.leftIcon && (
+						<View
+							style={tw`ml-4 mr-5 h-8 w-8 items-center justify-center rounded-full bg-app-input`}
+						>
+							{props.leftIcon({ size: 20, color: tw.color('ink-dull') })}
+						</View>
+					)}
+					<View
+						style={twStyle(
+							`flex-1 flex-row items-center justify-between py-4`,
+							borderRounded !== 'rounded-b-md' && 'border-b border-app-input'
+						)}
+					>
+						<Text style={tw`text-sm font-medium text-ink`}>{props.title}</Text>
+						<CaretRight style={tw`mr-4`} size={16} color={tw.color('ink')} />
+					</View>
 				</View>
-				{props.rightArea ? (
-					props.rightArea
-				) : (
-					<CaretRight size={16} color={tw.color('ink')} />
-				)}
 			</View>
 		</Pressable>
 	);
 }
-
-export function SettingsItemDivider(props: { style?: ViewStyle }) {
-	return (
-		<View style={twStyle('bg-app-darkLine', props.style)}>
-			<View style={tw`mx-3 border-b border-b-app-darkLine`} />
-		</View>
-	);
-}

apps/mobile/src/navigation/TabNavigator.tsx

@@ -30,7 +30,6 @@ export default function TabNavigator() {
 		icon: React.ReactNode;
 		label: string;
 		labelStyle: Style;
-		testId?: string;
 	}[] = [
 		{
 			name: 'OverviewStack',
@@ -75,8 +74,7 @@ export default function TabNavigator() {
 				/>
 			),
 			label: 'Browse',
-			labelStyle: tw`text-[10px] font-semibold`,
-			testId: 'browse-tab'
+			labelStyle: tw`text-[10px] font-semibold`
 		},
 		{
 			name: 'SettingsStack',
@@ -122,9 +120,7 @@ export default function TabNavigator() {
 						tabBarLabel: screen.label,
 						tabBarLabelStyle: screen.labelStyle,
 						tabBarIcon: () => (
-							<TouchableWithoutFeedback testID={screen.testId}>
-								{screen.icon}
-							</TouchableWithoutFeedback>
+							<TouchableWithoutFeedback>{screen.icon}</TouchableWithoutFeedback>
 						)
 					}}
 					listeners={() => ({

apps/mobile/src/screens/settings/Settings.tsx

@@ -15,7 +15,7 @@ import {
 import React from 'react';
 import { SectionList, Text, TouchableWithoutFeedback, View } from 'react-native';
 import { DebugState, useDebugState, useDebugStateEnabler } from '@sd/client';
-import { SettingsItem, SettingsItemDivider } from '~/components/settings/SettingsItem';
+import { SettingsItem } from '~/components/settings/SettingsItem';
 import { tw, twStyle } from '~/lib/tailwind';
 import { SettingsStackParamList, SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack';
 
@@ -25,6 +25,7 @@ type SectionType = {
 		title: string;
 		icon: Icon;
 		navigateTo: keyof SettingsStackParamList;
+		rounded?: 'top' | 'bottom';
 	}[];
 };
 
@@ -35,7 +36,8 @@ const sections: (debugState: DebugState) => SectionType[] = (debugState) => [
 			{
 				icon: GearSix,
 				navigateTo: 'GeneralSettings',
-				title: 'General'
+				title: 'General',
+				rounded: 'top'
 			},
 			{
 				icon: Books,
@@ -55,7 +57,8 @@ const sections: (debugState: DebugState) => SectionType[] = (debugState) => [
 			{
 				icon: PuzzlePiece,
 				navigateTo: 'ExtensionsSettings',
-				title: 'Extensions'
+				title: 'Extensions',
+				rounded: 'bottom'
 			}
 		]
 	},
@@ -65,7 +68,8 @@ const sections: (debugState: DebugState) => SectionType[] = (debugState) => [
 			{
 				icon: GearSix,
 				navigateTo: 'LibraryGeneralSettings',
-				title: 'General'
+				title: 'General',
+				rounded: 'top'
 			},
 			{
 				icon: HardDrive,
@@ -80,7 +84,8 @@ const sections: (debugState: DebugState) => SectionType[] = (debugState) => [
 			{
 				icon: TagSimple,
 				navigateTo: 'TagsSettings',
-				title: 'Tags'
+				title: 'Tags',
+				rounded: 'bottom'
 			}
 			// {
 			// 	icon: Key,
@@ -95,19 +100,22 @@ const sections: (debugState: DebugState) => SectionType[] = (debugState) => [
 			{
 				icon: FlyingSaucer,
 				navigateTo: 'About',
-				title: 'About'
+				title: 'About',
+				rounded: 'top'
 			},
 			{
 				icon: Heart,
 				navigateTo: 'Support',
-				title: 'Support'
+				title: 'Support',
+				rounded: !debugState.enabled ? 'bottom' : undefined
 			},
 			...(debugState.enabled
 				? ([
 						{
 							icon: Gear,
 							navigateTo: 'Debug',
-							title: 'Debug'
+							title: 'Debug',
+							rounded: 'bottom'
 						}
 				  ] as const)
 				: [])
@@ -119,7 +127,7 @@ function renderSectionHeader({ section }: { section: { title: string } }) {
 	return (
 		<Text
 			style={twStyle(
-				'mb-2 ml-2 text-sm font-bold text-ink',
+				'mb-4 text-md font-bold text-ink',
 				section.title === 'Client' ? 'mt-2' : 'mt-5'
 			)}
 		>
@@ -132,16 +140,16 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps<
 	const debugState = useDebugState();
 
 	return (
-		<View style={tw`flex-1`}>
+		<View style={tw`flex-1 bg-mobile-screen px-7`}>
 			<SectionList
 				sections={sections(debugState)}
-				contentContainerStyle={tw`py-4`}
-				ItemSeparatorComponent={SettingsItemDivider}
+				contentContainerStyle={tw`py-5`}
 				renderItem={({ item }) => (
 					<SettingsItem
 						title={item.title}
 						leftIcon={item.icon}
 						onPress={() => navigation.navigate(item.navigateTo as any)}
+						rounded={item.rounded}
 					/>
 				)}
 				renderSectionHeader={renderSectionHeader}

apps/mobile/tests/onboarding.yml

@@ -10,6 +10,4 @@ appId: com.spacedrive.app
 - tapOn:
     id: 'share-minimal'
 - tapOn: 'Continue'
-- tapOn:
-    id: 'browse-tab'
 - assertVisible: 'TestLib'