From eec863f146b00b7e37ac710aba549663c7adf345 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Wed, 30 Dec 2020 12:21:43 -0500
Subject: [PATCH] Updated ProgressPanel to be more compact
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Updated:
- ProgressPanel to be more compact and have the "donate" button not blend into the progress meter
- Updated wording on both ProgressPanel, ProgressInjection
---
 .../components/panel/progress_panel.js        | 51 ++++++++++---------
 .../timeline_injections/progress_injection.js |  2 +-
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/app/javascript/gabsocial/components/panel/progress_panel.js b/app/javascript/gabsocial/components/panel/progress_panel.js
index e8410d8f..96a59f8b 100644
--- a/app/javascript/gabsocial/components/panel/progress_panel.js
+++ b/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
-          progress={monthlyExpensesComplete}
-          title={intl.formatMessage(messages.progressTitle, { value })}
-          href={URL_DISSENTER_SHOP}
-        />
-        <Button
-          isOutline
-          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>
+        <div className={[_s.d, _s.px15, _s.pb15, _s.pt5].join(' ')}>
+          <ProgressBar
+            progress={monthlyExpensesComplete}
+            title={intl.formatMessage(messages.progressTitle, { value })}
+            href={URL_DISSENTER_SHOP}
+          />
+        </div>
       </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' },
 })
 
diff --git a/app/javascript/gabsocial/components/timeline_injections/progress_injection.js b/app/javascript/gabsocial/components/timeline_injections/progress_injection.js
index e697a6a3..ae86bfd5 100644
--- a/app/javascript/gabsocial/components/timeline_injections/progress_injection.js
+++ b/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' },
 })