Skip to content

Fix mobile spacing scale #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GuilhermeAlbert merged 1 commit into from
Sep 17, 2026
Merged

Fix mobile spacing scale #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app/authors/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,9 @@ export function AuthorsScreen(): React.ReactNode {
}

const header = (
<View className="gap-3 pb-4">
<View className="gap-3 pb-16">
<ScreenHeader title={messages.authors.title} description={messages.authors.description} />
<View className="gap-3 px-4">
<View className="gap-3 px-16">
<SearchField
label={messages.common.search}
onChangeText={(query) => setFilters({ ...filters, query })}
Expand Down
4 changes: 2 additions & 2 deletions src/app/authors/profile/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,12 @@ export function AuthorProfileScreen({ handle }: AuthorProfileScreenProps): React
subtitle={`@${profile.handle}`}
title={profile.name}
/>
<View className="mx-4 gap-3">
<View className="mx-16 gap-3">
<ActionButton primary icon="github" label={messages.authors.github} onPress={() => void openHttpsUrl(githubUrl)} />
<ActionButton icon="share-2" label={messages.authors.share} onPress={() => void shareUrl(profile.name, canonical)} />
</View>
<View className="gap-3">
<Text className="mx-4 font-display text-card-title font-semibold text-foreground">{messages.jobs.title}</Text>
<Text className="mx-16 font-display text-card-title font-semibold text-foreground">{messages.jobs.title}</Text>
{jobs.map((item) => (
<OpportunityCard
hideAuthorIdentity
Expand Down
4 changes: 2 additions & 2 deletions src/app/communities/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,9 @@ export function CommunitiesScreen(): React.ReactNode {
}

const header = (
<View className="gap-3 pb-4">
<View className="gap-3 pb-16">
<ScreenHeader title={messages.communities.title} description={messages.communities.description} />
<View className="gap-3 px-4">
<View className="gap-3 px-16">
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerClassName="gap-2">
<FilterChip label={`${messages.communities.active} · ${activityCounts.healthy}`} selected={activity === "healthy"} onPress={() => setActivity("healthy")} />
<FilterChip label={`${messages.communities.noOpenings} · ${activityCounts["no-openings"]}`} selected={activity === "no-openings"} onPress={() => setActivity("no-openings")} />
Expand Down
4 changes: 2 additions & 2 deletions src/app/communities/profile/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,12 @@ export function CommunityProfileScreen({ repository }: CommunityProfileScreenPro
subtitle={profile.repository}
title={profile.name}
/>
<View className="mx-4 gap-3">
<View className="mx-16 gap-3">
<ActionButton primary icon="github" label={messages.communities.github} onPress={() => void openHttpsUrl(profile.repositoryUrl)} />
<ActionButton icon="share-2" label={messages.communities.share} onPress={() => void shareUrl(profile.name, canonical)} />
</View>
<View className="gap-3">
<Text className="mx-4 font-display text-card-title font-semibold text-foreground">{messages.jobs.title}</Text>
<Text className="mx-16 font-display text-card-title font-semibold text-foreground">{messages.jobs.title}</Text>
{jobs.length === 0 ? (
<CatalogState message={messages.common.noResults} />
) : jobs.map((item) => (
Expand Down
6 changes: 3 additions & 3 deletions src/app/home/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function HomeScreen(): React.ReactNode {
>
<StatusBar style={name === "dark" ? "light" : "dark"} />
<View className="flex-1 justify-between px-6 py-8">
<View className="flex-row items-center justify-between border-b border-line pb-4">
<View className="flex-row items-center justify-between border-b border-line pb-16">
<Text className="font-display text-card-title font-semibold text-foreground">
openings.dev
</Text>
Expand All @@ -32,13 +32,13 @@ export function HomeScreen(): React.ReactNode {
</View>

<View className="gap-6">
<View className="self-start rounded-pill bg-primary-soft px-4 py-2">
<View className="self-start rounded-pill bg-primary-soft px-16 py-2">
<Text className="font-body text-label font-semibold text-primary-deep">
{messages.eyebrow}
</Text>
</View>

<View className="gap-4">
<View className="gap-16">
<Text className="font-display text-section-title font-semibold text-foreground">
{messages.title}
</Text>
Expand Down
8 changes: 4 additions & 4 deletions src/app/jobs/components/jobs-filter-modal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function MultiSection({
if (options.length === 0) return null;

return (
<View className="gap-3 rounded-card border border-line bg-paper p-4">
<View className="gap-3 rounded-card border border-line bg-paper p-16">
<Text className="font-display text-card-title font-semibold text-foreground">
{label}
</Text>
Expand Down Expand Up @@ -151,7 +151,7 @@ export function JobsFilterModal({
visible={open}
>
<SafeAreaView className="flex-1 bg-canvas" edges={["top", "bottom"]}>
<View className="min-h-16 flex-row items-center justify-between border-b border-line bg-paper px-4 py-3">
<View className="min-h-16 flex-row items-center justify-between border-b border-line bg-paper px-16 py-3">
<View className="min-w-0 flex-1 gap-1">
<Text className="font-mono text-metadata font-semibold uppercase tracking-widest text-primary-deep">
{messages.jobs.title}
Expand Down Expand Up @@ -184,10 +184,10 @@ export function JobsFilterModal({

<ScrollView
className="flex-1"
contentContainerClassName="gap-4 p-5"
contentContainerClassName="gap-16 p-5"
keyboardShouldPersistTaps="handled"
>
<View className="gap-3 rounded-card border border-primary-deep bg-primary-soft p-4">
<View className="gap-3 rounded-card border border-primary-deep bg-primary-soft p-16">
<View className="flex-row items-center gap-2">
<Sparkles
accessibilityElementsHidden
Expand Down
2 changes: 1 addition & 1 deletion src/app/jobs/components/jobs-result-toolbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export function JobsResultToolbar({
.replace("{count}", formatCount(resultCount, locale));

return (
<View className="gap-3 border-y border-line px-4 py-3">
<View className="gap-3 border-y border-line px-16 py-3">
<View className="flex-row items-center justify-between gap-3">
<View className="gap-1">
<Text className="font-mono text-label font-semibold text-foreground">
Expand Down
6 changes: 3 additions & 3 deletions src/app/jobs/components/jobs-workspace-header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export function JobsWorkspaceHeader({
);

return (
<View className="gap-3 px-4 pb-4 pt-3">
<View className="gap-3 px-16 pb-16 pt-3">
<SearchField
label={messages.jobs.workspace.searchLabel}
onChangeText={(query) => onChange({ ...filters, query })}
Expand All @@ -174,7 +174,7 @@ export function JobsWorkspaceHeader({
<Pressable
accessibilityRole="button"
accessibilityState={{ expanded: filtersOpen }}
className="min-h-11 flex-row items-center justify-center gap-2 rounded-control border border-control bg-paper px-4"
className="min-h-11 flex-row items-center justify-center gap-2 rounded-control border border-control bg-paper px-16"
onPress={onOpenFilters}
>
<SlidersHorizontal
Expand All @@ -195,7 +195,7 @@ export function JobsWorkspaceHeader({
) : null}
</Pressable>
{activeFilters.length > 0 ? (
<View className="gap-3 border-t border-line pt-4">
<View className="gap-3 border-t border-line pt-16">
<View className="flex-row flex-wrap gap-2">
{activeFilters.map((filter) => {
const label = activeLabel(filter, messages);
Expand Down
10 changes: 5 additions & 5 deletions src/app/jobs/details/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ export function JobDetailsScreen({ id }: JobDetailsScreenProps): React.ReactNode
contentContainerClassName="gap-8 py-6"
contentContainerStyle={{ paddingBottom: dockHeight + 24 }}
>
<View className="mx-4 gap-5">
<View className="mx-16 gap-5">
<Text className="font-body text-label font-semibold text-primary-deep">
{messages.jobs.detailsTitle}
</Text>
Expand Down Expand Up @@ -213,7 +213,7 @@ export function JobDetailsScreen({ id }: JobDetailsScreenProps): React.ReactNode
>
{item.title}
</Text>
<View className="flex-row flex-wrap items-center gap-3 border-y border-line py-4">
<View className="flex-row flex-wrap items-center gap-3 border-y border-line py-16">
{salary ? (
<View className="flex-row items-center gap-2">
<WalletCards
Expand Down Expand Up @@ -251,7 +251,7 @@ export function JobDetailsScreen({ id }: JobDetailsScreenProps): React.ReactNode
</View>

<Text
className="mx-4 font-body text-product-body leading-7 text-foreground"
className="mx-16 font-body text-product-body leading-7 text-foreground"
selectable
>
{description}
Expand All @@ -266,7 +266,7 @@ export function JobDetailsScreen({ id }: JobDetailsScreenProps): React.ReactNode
/>

{presentation.supportingTags.length > 0 ? (
<View className="mx-4 flex-row flex-wrap gap-2 border-t border-line pt-6">
<View className="mx-16 flex-row flex-wrap gap-2 border-t border-line pt-6">
{presentation.supportingTags.map((tag) => (
<View
className={detailTagClasses(tag.category)}
Expand All @@ -282,7 +282,7 @@ export function JobDetailsScreen({ id }: JobDetailsScreenProps): React.ReactNode

{similar.length > 0 ? (
<View className="gap-3 border-t border-line pt-6">
<Text className="mx-4 font-display text-card-title font-semibold text-foreground">
<Text className="mx-16 font-display text-card-title font-semibold text-foreground">
{messages.jobs.similar}
</Text>
{similar.map((opportunity) => (
Expand Down
4 changes: 2 additions & 2 deletions src/app/jobs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export function JobsScreen(): React.ReactNode {
? messages.common.offline
: messages.common.sourceError;
const header = (
<View className="pb-4">
<View className="pb-16">
<JobsWorkspaceHeader
activeFilters={activeFilters}
filters={filters}
Expand Down Expand Up @@ -169,7 +169,7 @@ export function JobsScreen(): React.ReactNode {
keyExtractor={(item) => item.id}
ListHeaderComponent={header}
ListEmptyComponent={emptyState}
ListFooterComponent={visibleCount < filtered.length ? <Pressable accessibilityRole="button" className="mx-4 min-h-12 items-center justify-center rounded-control border border-line bg-paper" onPress={() => setVisibleCount((count) => count + PAGE_SIZE)}><Text className="font-body text-label font-semibold text-primary-deep">{messages.common.loadMore}</Text></Pressable> : <View className="h-5" />}
ListFooterComponent={visibleCount < filtered.length ? <Pressable accessibilityRole="button" className="mx-16 min-h-12 items-center justify-center rounded-control border border-line bg-paper" onPress={() => setVisibleCount((count) => count + PAGE_SIZE)}><Text className="font-body text-label font-semibold text-primary-deep">{messages.common.loadMore}</Text></Pressable> : <View className="h-5" />}
maxToRenderPerBatch={8}
refreshControl={<RefreshControl refreshing={catalog.isRefreshing} onRefresh={() => void catalog.refresh()} tintColor={theme.colors["primary-deep"]} />}
renderItem={({ item }) => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/action-button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function ActionButton({ icon, label, onPress, primary }: ActionButtonProp
const { theme } = useAppTheme();
const Icon = ACTION_ICONS[icon];
return (
<Pressable accessibilityRole="button" className={primary ? "min-h-11 flex-row items-center justify-center gap-2 rounded-pill bg-primary px-4" : "min-h-11 flex-row items-center justify-center gap-2 rounded-control border border-line bg-paper px-4"} onPress={onPress}>
<Pressable accessibilityRole="button" className={primary ? "min-h-11 flex-row items-center justify-center gap-2 rounded-pill bg-primary px-16" : "min-h-11 flex-row items-center justify-center gap-2 rounded-control border border-line bg-paper px-16"} onPress={onPress}>
<Icon accessibilityElementsHidden size={18} strokeWidth={1.8} color={primary ? theme.colors["primary-foreground"] : theme.colors["primary-deep"]} />
<Text className={primary ? "font-body text-label font-semibold text-primary-foreground" : "font-body text-label font-semibold text-primary-deep"}>{label}</Text>
</Pressable>
Expand Down
6 changes: 3 additions & 3 deletions src/components/analytics-consent-banner/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,11 @@ export function AnalyticsConsentBanner(): React.ReactNode {
<View className="absolute inset-x-0 bottom-0 z-50 border-t border-line bg-paper px-5 pt-5" style={{ paddingBottom: Math.max(insets.bottom, 20) }}>
<Text className="font-display text-product-title font-semibold text-foreground">{copy.title}</Text>
<Text className="mt-2 font-body text-product-body text-muted-foreground">{copy.purpose}</Text>
<View className="mt-4 flex-row gap-3">
<Pressable accessibilityRole="button" accessibilityLabel={copy.accept} className="min-h-touch flex-1 items-center justify-center rounded-control bg-primary px-4 disabled:opacity-50" disabled={pending} onPress={() => void decide("granted")}>
<View className="mt-16 flex-row gap-3">
<Pressable accessibilityRole="button" accessibilityLabel={copy.accept} className="min-h-touch flex-1 items-center justify-center rounded-control bg-primary px-16 disabled:opacity-50" disabled={pending} onPress={() => void decide("granted")}>
<Text className="font-body text-product-body font-semibold text-primary-foreground">{copy.accept}</Text>
</Pressable>
<Pressable accessibilityRole="button" accessibilityLabel={copy.decline} className="min-h-touch flex-1 items-center justify-center rounded-control border border-line bg-canvas px-4 disabled:opacity-50" disabled={pending} onPress={() => void decide("denied")}>
<Pressable accessibilityRole="button" accessibilityLabel={copy.decline} className="min-h-touch flex-1 items-center justify-center rounded-control border border-line bg-canvas px-16 disabled:opacity-50" disabled={pending} onPress={() => void decide("denied")}>
<Text className="font-body text-product-body font-semibold text-foreground">{copy.decline}</Text>
</Pressable>
</View>
Expand Down
6 changes: 3 additions & 3 deletions src/components/app-drawer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export function AppDrawer({ onClose, visible }: AppDrawerProps): React.ReactNode
className="flex-1"
style={{ paddingRight: insets.right, paddingTop: insets.top }}
>
<View className="min-h-[72px] flex-row items-center justify-between border-b border-line px-4">
<View className="min-h-[72px] flex-row items-center justify-between border-b border-line px-16">
<BrandWordmark height={32} width={176} />
<Pressable
accessibilityLabel={messages.header.closeMenu}
Expand All @@ -115,7 +115,7 @@ export function AppDrawer({ onClose, visible }: AppDrawerProps): React.ReactNode
contentContainerClassName="grow"
testID="app-drawer-scroll"
>
<View className="gap-1 p-4">
<View className="gap-1 p-16">
{navigationItems.map((item) => {
const Icon = item.icon;

Expand All @@ -139,7 +139,7 @@ export function AppDrawer({ onClose, visible }: AppDrawerProps): React.ReactNode
</View>

<View
className="mt-auto gap-3 border-t border-line bg-surface px-4 pt-4"
className="mt-auto gap-3 border-t border-line bg-surface px-16 pt-16"
style={{ paddingBottom: insets.bottom + DRAWER_FOOTER_PADDING }}
testID="app-drawer-footer"
>
Expand Down
2 changes: 1 addition & 1 deletion src/components/app-error-boundary/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export class AppErrorBoundary extends Component<

return (
<View className="flex-1 items-center justify-center bg-canvas px-6">
<View className="w-full max-w-xl items-start gap-4 rounded-panel border border-line bg-paper p-6">
<View className="w-full max-w-xl items-start gap-16 rounded-panel border border-line bg-paper p-6">
<Text className="font-display text-product-title font-semibold text-foreground">
{fallback.title}
</Text>
Expand Down
2 changes: 1 addition & 1 deletion src/components/app-header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export function AppHeader(): React.ReactNode {
return (
<>
<SafeAreaView className="bg-paper" edges={["top", "left", "right"]}>
<View className="h-[72px] flex-row items-center justify-between gap-3 border-b border-line px-4">
<View className="h-[72px] flex-row items-center justify-between gap-3 border-b border-line px-16">
<Pressable
accessibilityLabel={messages.header.brandLabel}
accessibilityRole="button"
Expand Down
2 changes: 1 addition & 1 deletion src/components/catalog-state/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ interface CatalogStateProps {
export function CatalogState({ actionLabel, message, onAction, pending }: CatalogStateProps): React.ReactNode {
const { theme } = useAppTheme();
return (
<View className="flex-1 items-center justify-center gap-4 px-8 py-16">
<View className="flex-1 items-center justify-center gap-16 px-8 py-16">
{pending ? <ActivityIndicator color={theme.colors["primary-deep"]} /> : null}
<Text className="text-center font-body text-product-body text-muted-foreground">{message}</Text>
{actionLabel && onAction ? (
Expand Down
8 changes: 4 additions & 4 deletions src/components/data-confidence-card/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export function DataConfidenceCard({
: [{ id: item.id, repository: item.repository, url: item.url }];

return (
<View className="mx-4 gap-5 rounded-card border border-line bg-paper p-5">
<View className="mx-16 gap-5 rounded-card border border-line bg-paper p-5">
<View className="gap-2">
<Text className="font-display text-card-title font-semibold text-foreground">
{copy.title}
Expand All @@ -70,17 +70,17 @@ export function DataConfidenceCard({
</View>

{summary.stale ? (
<Text className="rounded-control border border-warning-foreground/25 bg-warning px-4 py-3 font-body text-label leading-5 text-warning-foreground">
<Text className="rounded-control border border-warning-foreground/25 bg-warning px-16 py-3 font-body text-label leading-5 text-warning-foreground">
{copy.staleWarning}
</Text>
) : null}
{summary.incomplete ? (
<Text className="rounded-control border border-line bg-surface-muted px-4 py-3 font-body text-label leading-5 text-muted-foreground">
<Text className="rounded-control border border-line bg-surface-muted px-16 py-3 font-body text-label leading-5 text-muted-foreground">
{copy.incompleteWarning}
</Text>
) : null}

<View className="gap-4">
<View className="gap-16">
<View className="gap-1">
<Text className="font-body text-metadata text-muted-foreground">
{copy.lastVerified}
Expand Down
2 changes: 1 addition & 1 deletion src/components/detail-header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ interface DetailHeaderProps {
export function DetailHeader(props: DetailHeaderProps): React.ReactNode {
const { theme } = useAppTheme();
return (
<View className="min-h-16 flex-row items-center justify-between gap-3 border-b border-line bg-paper px-4">
<View className="min-h-16 flex-row items-center justify-between gap-3 border-b border-line bg-paper px-16">
<BrandWordmark height={28} width={154} />
<Pressable accessibilityHint={props.title} accessibilityLabel={props.backLabel} accessibilityRole="button" className="h-11 w-11 items-center justify-center rounded-control border border-line bg-paper" onPress={props.onBack}>
<X accessibilityElementsHidden size={20} strokeWidth={1.8} color={theme.colors.foreground} />
Expand Down
2 changes: 1 addition & 1 deletion src/components/directory-card/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export function DirectoryCard(props: DirectoryCardProps): React.ReactNode {
<Pressable
accessibilityLabel={`${props.actionLabel}: ${props.title}`}
accessibilityRole="button"
className="mx-4 mb-3 gap-4 rounded-card border border-line bg-paper p-4 active:bg-primary-soft"
className="mx-16 mb-3 gap-16 rounded-card border border-line bg-paper p-16 active:bg-primary-soft"
onPress={props.onPress}
>
<View className="flex-row items-center gap-3">
Expand Down
Loading