From d787a691954b01ae34398568c6d6d23e1aa457b8 Mon Sep 17 00:00:00 2001 From: Alireza Hassani Date: Fri, 18 Sep 2026 18:06:54 +0330 Subject: [PATCH] Improve contact submissions UI and compact cropper actions. Co-authored-by: Cursor --- .../ContactSubmissionDetailModal.module.css | 45 ++++++++++++------- .../ContactSubmissionDetailModal.tsx | 38 +++++++++------- .../src/components/ImageCropper.module.css | 33 +++++++++++--- apps/business/src/i18n/messages.ts | 6 ++- .../src/pages/WebsiteContactPage.module.css | 2 +- .../business/src/pages/WebsiteContactPage.tsx | 2 +- 6 files changed, 83 insertions(+), 43 deletions(-) diff --git a/apps/business/src/components/ContactSubmissionDetailModal.module.css b/apps/business/src/components/ContactSubmissionDetailModal.module.css index 9c63470..4eb6f79 100644 --- a/apps/business/src/components/ContactSubmissionDetailModal.module.css +++ b/apps/business/src/components/ContactSubmissionDetailModal.module.css @@ -1,16 +1,16 @@ .modal { - width: min(560px, calc(100vw - 32px)); + width: min(720px, calc(100vw - 32px)); } .body { - padding: 0 20px 20px; + padding: 4px 24px 24px; } .metaGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 12px 16px; - margin: 0 0 18px; + gap: 16px 24px; + margin: 0 0 20px; } .metaItem { @@ -18,44 +18,55 @@ } .metaItem dt { - margin: 0 0 4px; - font-size: 11px; + margin: 0 0 6px; + font-size: 12px; font-weight: 600; - letter-spacing: 0.02em; - text-transform: uppercase; color: var(--text-muted); } .metaItem dd { margin: 0; - font-size: 14px; + font-size: 15px; font-weight: 500; color: var(--text-primary); word-break: break-word; } +.ltrValue { + direction: ltr; + unicode-bidi: isolate; + text-align: start; +} + +.sentAt { + display: inline-block; + direction: ltr; + unicode-bidi: isolate; +} + .messageBlock { - padding-top: 16px; + padding: 18px 0 0; border-top: 1px solid rgba(148, 163, 184, 0.2); } -.messageLabel { +.messageTitle { margin: 0 0 10px; - font-size: 13px; - font-weight: 600; - color: var(--text-secondary); + font-size: 16px; + font-weight: 700; + line-height: 1.4; + color: var(--text-primary); } .messageText { margin: 0; font-size: 14px; - line-height: 1.65; - color: var(--text-primary); + line-height: 1.75; + color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; } -@media (max-width: 520px) { +@media (max-width: 560px) { .metaGrid { grid-template-columns: 1fr; } diff --git a/apps/business/src/components/ContactSubmissionDetailModal.tsx b/apps/business/src/components/ContactSubmissionDetailModal.tsx index 58468b4..733acc5 100644 --- a/apps/business/src/components/ContactSubmissionDetailModal.tsx +++ b/apps/business/src/components/ContactSubmissionDetailModal.tsx @@ -21,8 +21,15 @@ function formatDateTime(value: string, locale: 'en' | 'fa') { if (Number.isNaN(d.getTime())) return { date: value, time: '' } const intlLocale = locale === 'fa' ? 'fa-IR' : 'en-US' return { - date: d.toLocaleDateString(intlLocale, { year: 'numeric', month: 'short', day: '2-digit' }), - time: d.toLocaleTimeString(intlLocale, { hour: '2-digit', minute: '2-digit' }), + date: d.toLocaleDateString(intlLocale, { + year: 'numeric', + month: 'short', + day: '2-digit', + }), + time: d.toLocaleTimeString(intlLocale, { + hour: '2-digit', + minute: '2-digit', + }), } } @@ -76,12 +83,9 @@ export function ContactSubmissionDetailModal({ aria-labelledby="contact-submission-title" >
-
-

- {t('website.contact.detailTitle')} -

-

{submission.title}

-
+

+ {t('website.contact.detailTitle')} +

diff --git a/apps/business/src/components/ImageCropper.module.css b/apps/business/src/components/ImageCropper.module.css index 6293e22..d06463f 100644 --- a/apps/business/src/components/ImageCropper.module.css +++ b/apps/business/src/components/ImageCropper.module.css @@ -186,11 +186,6 @@ align-self: stretch; } -.compact .changeBtn { - align-self: stretch; - justify-content: center; -} - .compact .uploadZone { gap: 4px; font-size: 11px; @@ -202,8 +197,36 @@ line-height: 1.3; } +.compact .cropControls { + padding: 10px; + gap: 10px; +} + +.compact .zoomLabel { + gap: 8px; + font-size: 11px; +} + +.compact .cropActions { + flex-direction: column; + align-items: stretch; + gap: 6px; +} + +.compact .cancelBtn, +.compact .applyBtn { + width: 100%; + justify-content: center; + text-align: center; + box-sizing: border-box; + padding: 8px 10px; + font-size: 12px; +} + .compact .changeBtn { display: flex; + align-self: stretch; + justify-content: center; padding: 6px 10px; font-size: 11px; } diff --git a/apps/business/src/i18n/messages.ts b/apps/business/src/i18n/messages.ts index 0597118..35304db 100644 --- a/apps/business/src/i18n/messages.ts +++ b/apps/business/src/i18n/messages.ts @@ -2096,7 +2096,8 @@ const en = { 'website.contact.col.date': 'Date', 'website.contact.col.time': 'Time', 'website.contact.viewSubmission': 'View submission from {name}', - 'website.contact.detailTitle': 'Contact submission', + 'website.contact.detailTitle': 'Contact form details', + 'website.contact.detailSentAt': 'Sent at', 'website.contact.detailMessage': 'Message', 'website.subscriptions.subtitle': 'Manage newsletter and subscription sign-ups on your website.', @@ -4637,7 +4638,8 @@ const fa: Record = { 'website.contact.col.date': 'تاریخ', 'website.contact.col.time': 'ساعت', 'website.contact.viewSubmission': 'مشاهده ارسال از {name}', - 'website.contact.detailTitle': 'ارسال تماس', + 'website.contact.detailTitle': 'جزئیات فرم تماس با ما', + 'website.contact.detailSentAt': 'زمان ارسال', 'website.contact.detailMessage': 'پیام', 'website.subscriptions.subtitle': 'عضویت خبرنامه و اشتراک‌ها در وب‌سایت را مدیریت کنید.', diff --git a/apps/business/src/pages/WebsiteContactPage.module.css b/apps/business/src/pages/WebsiteContactPage.module.css index 98515cd..767021f 100644 --- a/apps/business/src/pages/WebsiteContactPage.module.css +++ b/apps/business/src/pages/WebsiteContactPage.module.css @@ -47,7 +47,7 @@ .th, .td { padding: 10px 14px; - text-align: left; + text-align: start; border-bottom: 1px solid rgba(148, 163, 184, 0.16); vertical-align: middle; } diff --git a/apps/business/src/pages/WebsiteContactPage.tsx b/apps/business/src/pages/WebsiteContactPage.tsx index 6083c16..a013a35 100644 --- a/apps/business/src/pages/WebsiteContactPage.tsx +++ b/apps/business/src/pages/WebsiteContactPage.tsx @@ -183,7 +183,7 @@ export function WebsiteContactPage() { {error &&
{error}
}
- +
{t('website.contact.col.title')}