diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index c4a919f..d9813d1 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -2147,6 +2147,72 @@ hr { .embassy-appointment-card--pending { border-top-color: #C41C1C; border-top-style: dashed; } .embassy-appointment-card--expired { border-top-color: #7a8189; border-top-style: dashed; opacity: 0.9; } +/* Notary callout ------------------------------------------------------- */ + +.embassy-notary-callout { + margin: 0; + padding: 0.875rem 1.125rem; + background: #fffbeb; + border-left: 3px solid #C41C1C; + border-radius: 0 0.375rem 0.375rem 0; +} + +.embassy-notary-callout__eyebrow { + display: flex; + align-items: baseline; + gap: 0.5rem; + font-size: 0.6875rem; + text-transform: uppercase; + letter-spacing: 0.18em; + color: #C41C1C; + font-weight: 600; + margin: 0 0 0.5rem; +} + +.embassy-notary-callout__id { + font-size: 0.75rem; + letter-spacing: 0.08em; + color: #6B4220; + text-transform: none; + font-weight: 500; +} + +.embassy-notary-callout__dl { + display: grid; + grid-template-columns: minmax(6.5rem, 8rem) 1fr; + gap: 0.375rem 0.875rem; + margin: 0; +} + +.embassy-notary-callout__dl dt { + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.06em; + color: #7a8189; + align-self: start; + padding-top: 0.125rem; +} + +.embassy-notary-callout__dl dd { + font-size: 0.9375rem; + color: #0C2866; + margin: 0; + line-height: 1.45; +} + +@media (max-width: 480px) { + .embassy-notary-callout__dl { + grid-template-columns: 1fr; + gap: 0.125rem 0; + } + .embassy-notary-callout__dl dt { + padding-top: 0.5rem; + } + .embassy-notary-callout__dl dt:first-child { + padding-top: 0; + } +} + /* Countdown pill ------------------------------------------------------- */ .embassy-countdown { diff --git a/app/views/embassy_applications/_notary_callout.html.erb b/app/views/embassy_applications/_notary_callout.html.erb new file mode 100644 index 0000000..c99d7e7 --- /dev/null +++ b/app/views/embassy_applications/_notary_callout.html.erb @@ -0,0 +1,15 @@ +<%# locals: (notary:) -%> + diff --git a/app/views/embassy_applications/show.html.erb b/app/views/embassy_applications/show.html.erb index 5f2ee45..9dc398c 100644 --- a/app/views/embassy_applications/show.html.erb +++ b/app/views/embassy_applications/show.html.erb @@ -13,6 +13,10 @@ schedule_item: @schedule_item, state: "submitted" %> + <% if @notary.present? %> + <%= render "notary_callout", notary: @notary %> + <% end %> +

OFFICIAL SERIAL

<%= @application.serial %>

diff --git a/app/views/plan/_plan_item.html.erb b/app/views/plan/_plan_item.html.erb index 4dd3a3a..96b7423 100644 --- a/app/views/plan/_plan_item.html.erb +++ b/app/views/plan/_plan_item.html.erb @@ -63,6 +63,9 @@

Application filed ยท Serial <%= application.serial %>

+ <% if application.notary_profile.present? %> + <%= render "embassy_applications/notary_callout", notary: application.notary_profile %> + <% end %> <%= link_to "View / Download PDF", embassy_application_path(application), class: "btn btn-navy",