pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-08 05:56:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

make approvals placeholder more mobile friendly

Browse Source
This commit is contained in:
miloschwartz
2026-01-19 22:02:02 -08:00
parent fb15f8cde6
commit 9f7c162107
1 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/ApprovalsEmptyState.tsx
View File

@@ -23,32 +23,32 @@ export function ApprovalsEmptyState({ orgId }: ApprovalsEmptyStateProps) {
return (
<div className="flex flex-col gap-6">
<Card>
<CardContent className="p-12">
<div className="flex flex-col items-center text-center gap-6 max-w-2xl mx-auto">
<div className="rounded-full bg-primary/10 p-4">
<ShieldCheck className="w-12 h-12 text-primary" />
<CardContent className="p-6 md:p-12">
<div className="flex flex-col items-center text-center gap-4 md:gap-6 max-w-2xl mx-auto">
<div className="rounded-full bg-primary/10 p-3 md:p-4">
<ShieldCheck className="w-8 h-8 md:w-12 md:h-12 text-primary" />
</div>
<div className="space-y-2">
<h3 className="text-2xl font-semibold">
<h3 className="text-xl md:text-2xl font-semibold">
{t("approvalsEmptyStateTitle")}
</h3>
<p className="text-muted-foreground text-lg">
<p className="text-muted-foreground text-sm md:text-lg">
{t("approvalsEmptyStateDescription")}
</p>
</div>
<div className="w-full space-y-4 mt-4">
<div className="bg-muted/50 rounded-lg p-6 space-y-4 border">
<div className="flex items-start gap-4">
<div className="rounded-lg bg-background p-3 border">
<Settings className="w-5 h-5 text-primary" />
<div className="w-full space-y-3 md:space-y-4 mt-2 md:mt-4">
<div className="bg-muted/50 rounded-lg p-4 md:p-6 space-y-3 md:space-y-4 border">
<div className="flex items-start gap-3 md:gap-4">
<div className="rounded-lg bg-background p-2 md:p-3 border shrink-0">
<Settings className="w-4 h-4 md:w-5 md:h-5 text-primary" />
</div>
<div className="flex-1 text-left">
<h4 className="font-semibold mb-1">
<div className="flex-1 text-left min-w-0">
<h4 className="font-semibold mb-1 text-sm md:text-base">
{t("approvalsEmptyStateStep1Title")}
</h4>
<p className="text-sm text-muted-foreground">
<p className="text-xs md:text-sm text-muted-foreground">
{t(
"approvalsEmptyStateStep1Description"
)}
@@ -56,15 +56,15 @@ export function ApprovalsEmptyState({ orgId }: ApprovalsEmptyStateProps) {
</div>
</div>
<div className="flex items-start gap-4">
<div className="rounded-lg bg-background p-3 border">
<User className="w-5 h-5 text-primary" />
<div className="flex items-start gap-3 md:gap-4">
<div className="rounded-lg bg-background p-2 md:p-3 border shrink-0">
<User className="w-4 h-4 md:w-5 md:h-5 text-primary" />
</div>
<div className="flex-1 text-left">
<h4 className="font-semibold mb-1">
<div className="flex-1 text-left min-w-0">
<h4 className="font-semibold mb-1 text-sm md:text-base">
{t("approvalsEmptyStateStep2Title")}
</h4>
<p className="text-sm text-muted-foreground">
<p className="text-xs md:text-sm text-muted-foreground">
{t(
"approvalsEmptyStateStep2Description"
)}
@@ -73,8 +73,8 @@ export function ApprovalsEmptyState({ orgId }: ApprovalsEmptyStateProps) {
</div>
</div>
{/* Abstract UI Preview */}
<div className="bg-muted/50 rounded-lg p-6 border">
{/* Abstract UI Preview - Hidden on mobile */}
<div className="hidden md:block bg-muted/50 rounded-lg p-6 border">
<div className="space-y-3">
<div className="flex items-center justify-between p-3 bg-background rounded border">
<div className="flex items-center gap-3">
@@ -112,8 +112,8 @@ export function ApprovalsEmptyState({ orgId }: ApprovalsEmptyStateProps) {
</div>
</div>
<Link href={`/${orgId}/settings/access/roles`}>
<Button className="gap-2 mt-2">
<Link href={`/${orgId}/settings/access/roles`} className="w-full md:w-auto">
<Button className="gap-2 mt-2 w-full md:w-auto">
{t("approvalsEmptyStateButtonText")}
<ArrowRight className="w-4 h-4" />
</Button>