mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-04 14:33:34 +00:00
parent
6a32752243
commit
a17fb910ed
|
@ -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`}>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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} />;
|
||||
})}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 && (
|
||||
|
|
|
@ -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
|
||||
})}
|
||||
>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -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()}
|
||||
|
|
|
@ -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`}
|
||||
|
|
Loading…
Reference in a new issue