Updated ProgressPanel to be more compact

• Updated:
- ProgressPanel to be more compact and have the "donate" button not blend into the progress meter
- Updated wording on both ProgressPanel, ProgressInjection

app/javascript/gabsocial/components/panel/progress_panel.js

@@ -10,6 +10,7 @@ import PanelLayout from './panel_layout';
 import ProgressBar from '../progress_bar'
 import Button from '../button'
 import Text from '../text'
+import Icon from '../icon'
 
 class ProgressPanel extends React.PureComponent {
 
@@ -19,33 +20,37 @@ class ProgressPanel extends React.PureComponent {
     if (!monthlyExpensesComplete) return null
 
     const value = Math.min(parseFloat(monthlyExpensesComplete), 100)
+    const subtitle = (
+      <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.jcCenter].join(' ')}>
+        <Text color='secondary' size='small' weight='bold' className={_s.mrAuto}>
+          {intl.formatMessage(messages.operationsSubtitle)}
+        </Text>
+        <Button
+          noClasses
+          href={URL_DISSENTER_SHOP_DONATIONS}
+          className={[_s.d, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.outlineNone, _s.bgTransparent, _s.noUnderline].join(' ')}
+        >
+          <Text align='center' color='brand' weight='medium' className={_s.mr5}>
+            Donate
+          </Text>
+          <Icon id='arrow-right' className={_s.cBrand} size='14px' />
+        </Button>
+      </div>
+    )
 
     return (
       <PanelLayout
+        noPadding
         title={intl.formatMessage(messages.operationsTitle)}
-        subtitle={intl.formatMessage(messages.operationsSubtitle)}
+        subtitle={subtitle}
       >
-        <ProgressBar
+        <div className={[_s.d, _s.px15, _s.pb15, _s.pt5].join(' ')}>
-          progress={monthlyExpensesComplete}
+          <ProgressBar
-          title={intl.formatMessage(messages.progressTitle, { value })}
+            progress={monthlyExpensesComplete}
-          href={URL_DISSENTER_SHOP}
+            title={intl.formatMessage(messages.progressTitle, { value })}
-        />
+            href={URL_DISSENTER_SHOP}
-        <Button
+          />
-          isOutline
+        </div>
-          isNarrow
-          color='brand'
-          backgroundColor='none'
-          className={[_s.mt10].join(' ')}
-          href={URL_DISSENTER_SHOP_DONATIONS}
-        >
-          <Text
-            align='center'
-            color='inherit'
-            weight='medium'
-          >
-            {intl.formatMessage(messages.donationTitle)}
-          </Text>
-        </Button>
       </PanelLayout>
     )
   }
@@ -55,7 +60,7 @@ class ProgressPanel extends React.PureComponent {
 const messages = defineMessages({
   progressTitle: { id: 'progress_title', defaultMessage: '{value}% covered this month' },
   operationsTitle: { id: 'operations_title', defaultMessage: "Gab's Operational Expenses" },
-  operationsSubtitle: { id: 'operations_subtitle', defaultMessage: 'We are 100% funded by you' },
+  operationsSubtitle: { id: 'operations_subtitle', defaultMessage: "We're 100% funded by you." },
   donationTitle: { id: 'make_donation', defaultMessage: 'Make a Donation' },
 })
 

app/javascript/gabsocial/components/timeline_injections/progress_injection.js

@@ -49,7 +49,7 @@ class ProgressInjection extends React.PureComponent {
 const messages = defineMessages({
   progressTitle: { id: 'progress_title', defaultMessage: '{value}% covered this month' },
   operationsTitle: { id: 'operations_title', defaultMessage: "Gab's Operational Expenses" },
-  operationsSubtitle: { id: 'operations_subtitle', defaultMessage: 'We are 100% funded by you' },
+  operationsSubtitle: { id: 'operations_subtitle', defaultMessage: "We're 100% funded by you." },
   donationTitle: { id: 'make_donation', defaultMessage: 'Make a Donation' },
 })