diff --git a/app/styles/components/donations/donation-progress.scss b/app/styles/components/donations/donation-progress.scss index 81a06bf42..ac911d144 100644 --- a/app/styles/components/donations/donation-progress.scss +++ b/app/styles/components/donations/donation-progress.scss @@ -15,20 +15,30 @@ } .value { - font-size: $header-font-size-small; - font-weight: 600; + font-size: $header-font-size-large; + font-weight: 700; } } .progress-bar-container { height: 10px; - margin-top: 20px; + margin: 20px 0; } - p { + &__description-header { + color: $light-text; + font-size: $body-font-size-small; + font-weight: 600; + text-transform: uppercase; + } + + &__description { + border: 1px solid $border-light; + border-radius: 4px; color: $light-text; font-size: $body-font-size-normal; line-height: 22px; - margin: 20px 0; + margin: 10px 0; + padding: 10px; } } diff --git a/app/templates/components/donations/donation-progress.hbs b/app/templates/components/donations/donation-progress.hbs index ccb91389c..661e64793 100644 --- a/app/templates/components/donations/donation-progress.hbs +++ b/app/templates/components/donations/donation-progress.hbs @@ -9,4 +9,9 @@ {{progress-bar-container percentage=percentage}} -
{{description}}
++ Current Goal +
++ {{description}} +
diff --git a/tests/pages/components/donations/donation-progress.js b/tests/pages/components/donations/donation-progress.js index 5c991e8f0..d0372bb4b 100644 --- a/tests/pages/components/donations/donation-progress.js +++ b/tests/pages/components/donations/donation-progress.js @@ -4,7 +4,7 @@ export default { scope: '.donation-progress', amountValue: text('.amount .value'), - goalDescription: text('p'), + goalDescription: text('.donation-progress__description'), percentageDescription: text('.percentage .description'), percentageValue: text('.percentage .value'), rendersProgressBar: isVisible('.progress-bar')