From 969fd4451cee4220bddf619b66bf44a7e7568a3a Mon Sep 17 00:00:00 2001
From: Ben Hejkal <ben@softwareforgood.com>
Date: Tue, 12 Nov 2024 11:59:43 -0500
Subject: [PATCH] dedication link: more styling in css, fix wrapping

---
 .../stylesheets/nonprofits/donation_form/form.scss       | 9 +++++++++
 client/js/nonprofits/donate/info-step.js                 | 6 ++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/nonprofits/donation_form/form.scss b/app/assets/stylesheets/nonprofits/donation_form/form.scss
index 5c036c473..fa02f4e89 100644
--- a/app/assets/stylesheets/nonprofits/donation_form/form.scss
+++ b/app/assets/stylesheets/nonprofits/donation_form/form.scss
@@ -127,6 +127,15 @@ $mint-milk : #E7F3ED;
 	}
 }
 
+.info-step .dedication-link {
+	border-width: thin;
+	border-style: solid;
+	padding: 2px;
+	border-radius: 2px;
+	display: block;
+	text-wrap: balance;
+}
+
 // dedication form
 .info-step .dedication-form {
 	display: flex;
diff --git a/client/js/nonprofits/donate/info-step.js b/client/js/nonprofits/donate/info-step.js
index d80e5b3f1..4eed73d40 100644
--- a/client/js/nonprofits/donate/info-step.js
+++ b/client/js/nonprofits/donate/info-step.js
@@ -168,9 +168,11 @@ const dedicationLink = state => {
   if(state.params$().hide_dedication) return ''
   return h('label.u-centered.u-marginTop--10', [
     h('small', [
-      h('a', {
+      h('a.dedication-link', {
         on: { click: [state.showDedicationForm$, true] },
-        style: {'border-width': 'thin', 'border-style': 'solid', padding: '2px', 'border-color': `${app.nonprofit.brand_color || '#4DAE7F'}`, 'border-radius': '2px', 'box-shadow': `3px 3px ${app.nonprofit.brand_color || '#4DAE7F'}7F`}
+        style: {
+          'border-color': `${app.nonprofit.brand_color || '#4DAE7F'}`
+        , 'box-shadow': `3px 3px ${app.nonprofit.brand_color || '#4DAE7F'}7F`}
       }, state.dedicationData$() && state.dedicationData$().first_name
       ? [h('i.fa.fa-check'), I18n.t('nonprofits.donate.info.dedication_saved') + `${state.dedicationData$().first_name || ''} ${state.dedicationData$().last_name || ''}`]
       : [I18n.t('nonprofits.donate.info.dedication_link')]