From 1eb66a6d66d982e1b90ed221b5713a84f6dba955 Mon Sep 17 00:00:00 2001
From: Anthony <contact@anthonymayfield.com>
Date: Thu, 24 Mar 2022 16:33:27 +0100
Subject: [PATCH] improve tip support functionality

---
 ui/component/claimSupportButton/view.jsx      |  4 ++--
 ui/component/walletSendTip/view.jsx           | 15 +++++++++------
 ui/component/walletTipAmountSelector/view.jsx | 11 ++++++++---
 ui/scss/all.scss                              |  1 +
 ui/scss/component/_claim_support_button.scss  |  8 ++++++++
 ui/scss/component/_wallet-tip-send.scss       | 16 ++++++++++++++++
 6 files changed, 44 insertions(+), 11 deletions(-)
 create mode 100644 ui/scss/component/_claim_support_button.scss

diff --git a/ui/component/claimSupportButton/view.jsx b/ui/component/claimSupportButton/view.jsx
index a146b25fd..db8c592e7 100644
--- a/ui/component/claimSupportButton/view.jsx
+++ b/ui/component/claimSupportButton/view.jsx
@@ -22,8 +22,8 @@ export default function ClaimSupportButton(props: Props) {
     <Tooltip title={__('Support this claim')} arrow={false}>
       <Button
         button={!fileAction ? 'alt' : undefined}
-        className={classnames({ 'button--file-action': fileAction })}
-        icon={ICONS.LBC}
+        className={classnames('support-claim-button', { 'button--file-action': fileAction })}
+        icon={ICONS.FINANCE}
         iconSize={fileAction ? 22 : undefined}
         label={isRepost ? __('Support Repost') : __('Support --[button to support a claim]--')}
         requiresAuth
diff --git a/ui/component/walletSendTip/view.jsx b/ui/component/walletSendTip/view.jsx
index 9f1de26ca..45755ce0b 100644
--- a/ui/component/walletSendTip/view.jsx
+++ b/ui/component/walletSendTip/view.jsx
@@ -78,8 +78,8 @@ export default function WalletSendTip(props: Props) {
   } = props;
 
   /** WHAT TAB TO SHOW **/
-  // set default tab to for new users based on if it's their claim or not
-  const defaultTabToShow = claimIsMine ? TAB_BOOST : TAB_LBC;
+  // if it's your content, we show boost, otherwise default is LBC
+  const defaultTabToShow = claimIsMine ? TAB_BOOST : TAB_FIAT;
 
   // loads the default tab if nothing else is there yet
   const [persistentTab, setPersistentTab] = usePersistedState('send-tip-modal', defaultTabToShow);
@@ -95,6 +95,8 @@ export default function WalletSendTip(props: Props) {
   /** CONSTS **/
   const claimTypeText = getClaimTypeText();
   const isSupport = claimIsMine || activeTab === TAB_BOOST;
+
+  // text for modal header
   const titleText = isSupport
     ? __(claimIsMine ? 'Boost Your %claimTypeText%' : 'Boost This %claimTypeText%', { claimTypeText })
     : __('Tip This %claimTypeText%', { claimTypeText });
@@ -250,19 +252,20 @@ export default function WalletSendTip(props: Props) {
       {/* if there is no LBC balance, show user frontend to get credits */}
       {/* if there is lbc, the main tip/boost gui with the 3 tabs at the top */}
       <Card
-        title={<LbcSymbol postfix={titleText} size={22} />}
+        title={titleText}
+        className={'wallet-send-tip-modal'}
         subtitle={
           <>
             {!claimIsMine && (
               <div className="section">
-                {/* tip LBC tab button */}
-                <TabSwitchButton icon={ICONS.LBC} label={__('Tip')} name={TAB_LBC} {...tabButtonProps} />
-
                 {/* tip fiat tab button */}
                 {stripeEnvironment && (
                   <TabSwitchButton icon={ICONS.FINANCE} label={__('Tip')} name={TAB_FIAT} {...tabButtonProps} />
                 )}
 
+                {/* tip LBC tab button */}
+                <TabSwitchButton icon={ICONS.LBC} label={__('Tip')} name={TAB_LBC} {...tabButtonProps} />
+
                 {/* support LBC tab button */}
                 {!isTipOnly && (
                   <TabSwitchButton icon={ICONS.TRENDING} label={__('Boost')} name={TAB_BOOST} {...tabButtonProps} />
diff --git a/ui/component/walletTipAmountSelector/view.jsx b/ui/component/walletTipAmountSelector/view.jsx
index 617e531b2..d59fa4069 100644
--- a/ui/component/walletTipAmountSelector/view.jsx
+++ b/ui/component/walletTipAmountSelector/view.jsx
@@ -225,7 +225,9 @@ function WalletTipAmountSelector(props: Props) {
 
   if (!claim) return null;
 
-  const getHelpMessage = (helpMessage: any) => <div className="help">{helpMessage}</div>;
+  const getHelpMessage = (helpMessage: any, customClassName) => (
+    <div className={classnames('help', customClassName)}>{helpMessage}</div>
+  );
 
   return (
     <>
@@ -304,16 +306,19 @@ function WalletTipAmountSelector(props: Props) {
 
       {/* lbc tab */}
       {activeTab === TAB_LBC && <WalletSpendableBalanceHelp />}
+
+      {/* help message */}
       {activeTab === TAB_FIAT &&
         (!hasCardSaved
           ? getHelpMessage(
               <>
                 <Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card')} button="link" />
                 {' ' + __('To Tip Creators')}
-              </>
+              </>,
+              'add-a-card-help-message'
             )
           : !canReceiveFiatTip
-          ? getHelpMessage(__('Only creators that verify cash accounts can receive tips'))
+          ? getHelpMessage(__('Only creators that have added a bank account can receive tips'))
           : getHelpMessage(__('Send a tip directly from your attached card')))}
     </>
   );
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index d87725450..919fc700b 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -16,6 +16,7 @@
 @import 'component/card';
 @import 'component/channel';
 @import 'component/_textarea-suggestions';
+@import 'component/claim_support_button';
 @import 'component/claim-list';
 @import 'component/collection';
 @import 'component/color-picker';
diff --git a/ui/scss/component/_claim_support_button.scss b/ui/scss/component/_claim_support_button.scss
new file mode 100644
index 000000000..7b67a2202
--- /dev/null
+++ b/ui/scss/component/_claim_support_button.scss
@@ -0,0 +1,8 @@
+.support-claim-button {
+  .icon--DollarSign {
+    height: 16px;
+    width: 16px;
+    margin-right: -5px;
+    margin-top: 4px;
+  }
+}
diff --git a/ui/scss/component/_wallet-tip-send.scss b/ui/scss/component/_wallet-tip-send.scss
index 825aba026..c15af29cd 100644
--- a/ui/scss/component/_wallet-tip-send.scss
+++ b/ui/scss/component/_wallet-tip-send.scss
@@ -2,3 +2,19 @@
   margin-top: -21px;
   margin-bottom: -21px;
 }
+
+.wallet-send-tip-modal {
+  .card__title {
+    margin-top: -16px;
+    margin-bottom: 16px;
+  }
+
+  .section__subtitle {
+    margin-top: 16px;
+    margin-bottom: -5px;
+  }
+
+  .add-a-card-help-message {
+    font-size: 16px;
+  }
+}