Merge pull request #949 from CommitChange/dedication-link-wrap-fix

dedication link: more styling in css, fix wrapping
CommitChange · Nov 13, 2024 · 17176b4 · 17176b4
2 parents 99f223d + 969fd44
commit 17176b4
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git 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
@@ -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')]