list view visual improvements

spacedriveapp · May 17, 2024 · cfc4222 · cfc4222
1 parent 0dbe46b
commit cfc4222
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 10 deletions.
diff --git a/apps/mobile/src/components/explorer/FileItem.tsx b/apps/mobile/src/components/explorer/FileItem.tsx
@@ -37,7 +37,7 @@ const FileItem = ({ data }: FileItemProps) => {
 					{filePath?.extension && `.${filePath.extension}`}
 				</Text>
 			</View>
-			<View style={twStyle(`mx-auto flex-row justify-center pt-1`, {
+			<View style={twStyle(`mx-auto flex-row justify-center pt-1.5`, {
 				left: tags.length * 2 //for every tag we add 2px to the left
 			})}>
 			{tags.map(({tag}: {tag: Tag}, idx: number) => {

diff --git a/apps/mobile/src/components/explorer/FileRow.tsx b/apps/mobile/src/components/explorer/FileRow.tsx
@@ -21,21 +21,21 @@ const FileRow = ({ data }: FileRowProps) => {
 	}, [object]);
 
 	return (
+		<>
 		<View
-			style={twStyle('flex flex-row items-center justify-between px-3', {
+			style={twStyle('flex flex-row items-center px-3', {
 				height: getExplorerStore().listItemSize
 			})}
 		>
-			<View style={tw`flex-row items-center`}>
 			<FileThumb data={data} size={0.6} />
-			<View style={tw`ml-3 max-w-[68%]`}>
-				<Text numberOfLines={1} style={tw`text-center text-xs font-medium text-ink-dull`}>
+			<View style={tw`mx-2 flex-1 flex-row items-center justify-between border-b border-white/10 pb-3`}>
+			<View style={tw`max-w-[80%]`}>
+				<Text numberOfLines={1} style={tw`text-center text-sm font-medium text-ink`}>
 					{filePath?.name}
 					{filePath?.extension && `.${filePath.extension}`}
 				</Text>
 			</View>
-			</View>
-			<View style={twStyle(`mr-2 flex-row`, {
+			<View style={twStyle(`mr-1 flex-row`, {
 				left: tags.length * 6 //for every tag we add 2px to the left,
 			})}>
 			{tags.map(({tag}: {tag: Tag}, idx: number) => {
@@ -50,7 +50,9 @@ const FileRow = ({ data }: FileRowProps) => {
 				)
 				})}
 			</View>
+			</View>
 		</View>
+		</>
 	);
 };
 

diff --git a/apps/mobile/src/components/explorer/sections/InfoTagPills.tsx b/apps/mobile/src/components/explorer/sections/InfoTagPills.tsx
@@ -53,7 +53,7 @@ const InfoTagPills = ({ data, style, contentContainerStyle, columnCount = 3 }: P
 			<Pressable style={tw`relative z-10`} onPress={() => ref.current?.present()}>
 				<PlaceholderPill
 				icon={<Plus size={12} color={tw.color('ink-dull')}/>}
-				 text={'Add Tag'}
+				 text={'Tags'}
 				 />
 			</Pressable>
 					{/* Kind */}

diff --git a/apps/mobile/src/stores/explorerStore.ts b/apps/mobile/src/stores/explorerStore.ts
@@ -1,6 +1,6 @@
+import { resetStore } from '@sd/client';
 import { proxy, useSnapshot } from 'valtio';
 import { proxySet } from 'valtio/utils';
-import { resetStore, type Ordering } from '@sd/client';
 
 export type ExplorerLayoutMode = 'list' | 'grid' | 'media';
 
@@ -17,7 +17,7 @@ const state = {
 	toggleMenu: false as boolean,
 	// Using gridNumColumns instead of fixed size. We dynamically calculate the item size.
 	gridNumColumns: 3,
-	listItemSize: 65,
+	listItemSize: 60,
 	newThumbnails: proxySet() as Set<string>,
 	// sorting
 	// we will display different sorting options based on the kind of explorer we are in