improve tip support functionality

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 })}
+        className={classnames('support-claim-button', { 'button--file-action': fileAction })}
-        icon={ICONS.LBC}
+        icon={ICONS.FINANCE}
         iconSize={fileAction ? 22 : undefined}
         label={isRepost ? __('Support Repost') : __('Support --[button to support a claim]--')}
         requiresAuth

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
+  // if it's your content, we show boost, otherwise default is LBC
-  const defaultTabToShow = claimIsMine ? TAB_BOOST : TAB_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} />

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')))}
     </>
   );

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';

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;
+  }
+}

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;
+  }
+}