Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-02 11:13:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

[MOB-62] Spacing & padding tweaks (#2117)

Browse source 
Spacing & padding tweaks
This commit is contained in:
ameer2468 2024-02-22 15:20:31 +03:00 committed by GitHub
parent 6a32752243
commit a17fb910ed
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 26 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/mobile/src/components/browse/BrowseLocations.tsx
View file

@ -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`}>

8
apps/mobile/src/components/browse/BrowseTags.tsx
View file

@ -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>

6
apps/mobile/src/components/browse/Categories.tsx
View file

@ -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} />;
})}

6
apps/mobile/src/components/browse/Jobs.tsx
View file

@ -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

3
apps/mobile/src/components/header/Header.tsx
View file

@ -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 && (

4
apps/mobile/src/components/layout/ScreenContainer.tsx
View file

@ -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
})}
>

4
apps/mobile/src/components/overview/Categories.tsx
View file

@ -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}

4
apps/mobile/src/components/overview/Devices.tsx
View file

@ -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>
);
};

7
apps/mobile/src/components/overview/OverviewSection.tsx
View file

@ -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>
);
};

4
apps/mobile/src/components/overview/OverviewStats.tsx
View file

@ -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()}

4
apps/mobile/src/screens/settings/Settings.tsx
View file

@ -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`}