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