Mobile view fixes (#188)
* fix: make new user checklist mobile responsive Adjust spacing, padding, typography, and indentation for small screens so the onboarding welcome screen works well on mobile devices. * fix: make expenses and bookkeeping verification views mobile responsive - Expenses/new: stack form grids on mobile, replace line items table with card layout, full-width action buttons - Expenses/[id]: stack header and actions, card layout for line items and payments, single-column info grid on mobile - JournalEntryList: unify verification lines into card layout for all screen sizes, hide redundant line descriptions that duplicate account name or entry description, stack filter bar and action buttons on mobile * fix: remove stray )); in provider_consents migration Syntax error on line 35 caused MIGRATIONS_FAILED on the Supabase staging branch. * fix: enhance mobile responsiveness for invoices page and update dialog styles
This commit is contained in:
Mattsson
@@ -24,10 +24,10 @@ export default function NewUserChecklist({
|
||||
const hasBanking = ENABLED_EXTENSION_IDS.has('enable-banking')
|
||||
|
||||
return (
|
||||
<div className={cn('min-h-[75vh] flex flex-col items-center justify-center stagger-enter', className)}>
|
||||
<div className={cn('min-h-[75vh] flex flex-col items-center justify-center px-4 sm:px-0 stagger-enter', className)}>
|
||||
<div className="w-full max-w-2xl">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-12">
|
||||
<div className="text-center mb-8 md:mb-12">
|
||||
<h1 className="font-display text-2xl md:text-3xl font-medium tracking-tight">
|
||||
Välkommen till gnubok
|
||||
</h1>
|
||||
@@ -38,7 +38,7 @@ export default function NewUserChecklist({
|
||||
</div>
|
||||
|
||||
{/* Step 1: Migrate bookkeeping */}
|
||||
<div className="mb-8">
|
||||
<div className="mb-6 md:mb-8">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<span className="h-7 w-7 rounded-full bg-foreground text-background flex items-center justify-center text-xs font-semibold flex-shrink-0 tabular-nums">
|
||||
1
|
||||
@@ -48,24 +48,24 @@ export default function NewUserChecklist({
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 ml-10">
|
||||
<div className="space-y-3 ml-0 sm:ml-10">
|
||||
{hasMigration && (
|
||||
<Link
|
||||
href="/import?mode=migration"
|
||||
className="group block p-5 rounded-xl border border-primary/20 bg-primary/[0.02] hover:bg-primary/[0.05] hover:border-primary/40 transition-all duration-150 active:scale-[0.99]"
|
||||
className="group block p-4 sm:p-5 rounded-xl border border-primary/20 bg-primary/[0.02] hover:bg-primary/[0.05] hover:border-primary/40 transition-all duration-150 active:scale-[0.99]"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-2.5 rounded-lg bg-primary/[0.08] group-hover:bg-primary/[0.12] transition-colors flex-shrink-0">
|
||||
<ArrowRightLeft className="h-5 w-5 text-primary" />
|
||||
<div className="flex items-start gap-3 sm:gap-4">
|
||||
<div className="p-2 sm:p-2.5 rounded-lg bg-primary/[0.08] group-hover:bg-primary/[0.12] transition-colors flex-shrink-0">
|
||||
<ArrowRightLeft className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium group-hover:text-primary transition-colors">
|
||||
<p className="font-medium group-hover:text-primary transition-colors text-sm sm:text-base">
|
||||
Hämta från annat system
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mt-1.5 leading-relaxed underline decoration-foreground/20 underline-offset-2">
|
||||
<p className="text-xs sm:text-sm text-muted-foreground mt-1 sm:mt-1.5 leading-relaxed underline decoration-foreground/20 underline-offset-2">
|
||||
Inget ändras i ditt befintliga system.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2 mt-3">
|
||||
<div className="flex flex-wrap gap-1.5 sm:gap-2 mt-2.5 sm:mt-3">
|
||||
{([
|
||||
{ name: 'Fortnox', logo: '/logos/fortnox.svg' },
|
||||
{ name: 'Visma', logo: '/logos/visma.jpeg' },
|
||||
@@ -73,9 +73,9 @@ export default function NewUserChecklist({
|
||||
{ name: 'Björn Lundén', logo: '/logos/bjornlunden.png' },
|
||||
{ name: 'Briox', logo: '/logos/Briox_logo.png' },
|
||||
] as const).map(provider => (
|
||||
<div key={provider.name} className="flex items-center gap-1.5 rounded border border-border/60 bg-muted/30 px-2 py-1">
|
||||
<img src={provider.logo} alt={provider.name} className="h-4 w-4 shrink-0 rounded-sm object-contain" />
|
||||
<span className="text-[11px] font-medium text-muted-foreground">{provider.name}</span>
|
||||
<div key={provider.name} className="flex items-center gap-1 sm:gap-1.5 rounded border border-border/60 bg-muted/30 px-1.5 sm:px-2 py-0.5 sm:py-1">
|
||||
<img src={provider.logo} alt={provider.name} className="h-3.5 w-3.5 sm:h-4 sm:w-4 shrink-0 rounded-sm object-contain" />
|
||||
<span className="text-[10px] sm:text-[11px] font-medium text-muted-foreground">{provider.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -87,17 +87,17 @@ export default function NewUserChecklist({
|
||||
|
||||
<Link
|
||||
href="/import?mode=sie"
|
||||
className="group block p-5 rounded-xl border border-border/60 hover:border-primary/40 hover:bg-primary/[0.02] transition-all duration-150 active:scale-[0.99]"
|
||||
className="group block p-4 sm:p-5 rounded-xl border border-border/60 hover:border-primary/40 hover:bg-primary/[0.02] transition-all duration-150 active:scale-[0.99]"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-2.5 rounded-lg bg-muted/60 group-hover:bg-primary/[0.08] transition-colors flex-shrink-0">
|
||||
<FileText className="h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
|
||||
<div className="flex items-start gap-3 sm:gap-4">
|
||||
<div className="p-2 sm:p-2.5 rounded-lg bg-muted/60 group-hover:bg-primary/[0.08] transition-colors flex-shrink-0">
|
||||
<FileText className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground group-hover:text-primary transition-colors" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium group-hover:text-primary transition-colors">
|
||||
<p className="font-medium group-hover:text-primary transition-colors text-sm sm:text-base">
|
||||
Importera SIE-fil
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mt-1.5 leading-relaxed">
|
||||
<p className="text-xs sm:text-sm text-muted-foreground mt-1 sm:mt-1.5 leading-relaxed">
|
||||
Exportera en SIE4-fil från ditt nuvarande bokföringsprogram och ladda upp den här.
|
||||
</p>
|
||||
</div>
|
||||
@@ -108,7 +108,7 @@ export default function NewUserChecklist({
|
||||
</div>
|
||||
|
||||
{/* Step 2: Connect bank */}
|
||||
<div className="mb-12">
|
||||
<div className="mb-8 md:mb-12">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<span className="h-7 w-7 rounded-full bg-foreground text-background flex items-center justify-center text-xs font-semibold flex-shrink-0 tabular-nums">
|
||||
2
|
||||
@@ -118,20 +118,20 @@ export default function NewUserChecklist({
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="ml-10">
|
||||
<div className="ml-0 sm:ml-10">
|
||||
<Link
|
||||
href={hasBanking ? '/import?mode=psd2' : '/import?mode=bank'}
|
||||
className="group block p-5 rounded-xl border border-border/60 hover:border-primary/40 hover:bg-primary/[0.02] transition-all duration-150 active:scale-[0.99]"
|
||||
className="group block p-4 sm:p-5 rounded-xl border border-border/60 hover:border-primary/40 hover:bg-primary/[0.02] transition-all duration-150 active:scale-[0.99]"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-2.5 rounded-lg bg-muted/60 group-hover:bg-primary/[0.08] transition-colors flex-shrink-0">
|
||||
<Landmark className="h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
|
||||
<div className="flex items-start gap-3 sm:gap-4">
|
||||
<div className="p-2 sm:p-2.5 rounded-lg bg-muted/60 group-hover:bg-primary/[0.08] transition-colors flex-shrink-0">
|
||||
<Landmark className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground group-hover:text-primary transition-colors" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium group-hover:text-primary transition-colors">
|
||||
<p className="font-medium group-hover:text-primary transition-colors text-sm sm:text-base">
|
||||
Anslut ditt bankkonto
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mt-1.5 leading-relaxed">
|
||||
<p className="text-xs sm:text-sm text-muted-foreground mt-1 sm:mt-1.5 leading-relaxed">
|
||||
{hasBanking
|
||||
? 'Koppla via PSD2 — transaktioner synkas automatiskt varje dag.'
|
||||
: 'Importera kontoutdrag från din bank — CSV, OFX och de flesta svenska banker.'}
|
||||
|
||||
Reference in New Issue
Block a user