table alignment fixes

static/app-strings.json

@@ -741,7 +741,7 @@
   "Official YouTube Creator - Last checked %time_ago%": "Official YouTube Creator - Last checked %time_ago%",
   "Install Now": "Install Now",
   "Invite Link": "Invite Link",
-  "Earn LBRY Credits for inviting subscribers, followers, fans, friends, etc. to join and follow you on %SITE_NAME%. You can use invites just like affiliate links.": "Earn LBRY Credits for inviting subscribers, followers, fans, friends, etc. to join and follow you on %SITE_NAME%. You can use invites just like affiliate links.",
+  "Earn %lbc% for inviting subscribers, followers, fans, friends, etc. to join and follow you on %SITE_NAME%. You can use invites just like affiliate links.": "Earn %lbc% for inviting subscribers, followers, fans, friends, etc. to join and follow you on %SITE_NAME%. You can use invites just like affiliate links.",
   "Your invite link": "Your invite link",
   "Customize link": "Customize link",
   "rewards": "rewards",

ui/component/inviteList/view.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import RewardLink from 'component/rewardLink';
 import Icon from 'component/common/icon';
 import * as ICONS from 'constants/icons';
+import Card from 'component/common/card';
 
 type Props = {
   invitees: ?Array<{
@@ -30,62 +31,62 @@ class InviteList extends React.PureComponent<Props> {
 
     if (referralReward) {
       rewardAmount = referralReward.reward_amount;
-      rewardHelp = referralReward.reward_description;
+      rewardHelp = referralReward.reward_description.replace('LBC', 'LBRY Credits');
     }
     const showClaimable = invitees.some(invite => invite.invite_reward_claimable && !invite.invite_reward_claimed);
 
     return (
-      <section className="card">
-        <div className="table__header">
-          <div className="table__header-text--between">
-            <div>
-              <h2 className="card__title">{__('Invite History')}</h2>
-              <p className="section__subtitle">{rewardHelp}</p>
-            </div>
-
-            {referralReward && showClaimable && (
+      <Card
+        title={<div className="table__header-text">{__('Invite History')}</div>}
+        subtitle={<div className="table__header-text">{rewardHelp}</div>}
+        titleActions={
+          referralReward &&
+          showClaimable && (
+            <div className="card__actions--inline">
               <RewardLink
                 button
                 label={__(`Claim Your ${rewardAmount} Credit Invite Reward`)}
                 claim_code={referralReward.claim_code}
               />
-            )}
-          </div>
-        </div>
-
-        <div className="table__wrapper">
-          <table className="table section">
-            <thead>
-              <tr>
-                <th>{__('Invitee Email')}</th>
-                <th>{__('Invite Status')}</th>
-                <th>{__('Reward')}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {invitees.map(invitee => (
-                <tr key={invitee.email}>
-                  <td>{invitee.email}</td>
-                  <td>
-                    <span>{invitee.invite_accepted ? __('Accepted') : __('Not Accepted')}</span>
-                  </td>
-                  <td>
-                    {invitee.invite_reward_claimed && (
-                      <React.Fragment>
-                        <span>{__('Claimed')}</span>
-                        <Icon icon={ICONS.COMPLETE} />
-                      </React.Fragment>
-                    )}
-
-                    {!invitee.invite_reward_claimed &&
-                      (invitee.invite_reward_claimable ? <span>{__('Claimable')}</span> : __('Unclaimable'))}
-                  </td>
+            </div>
+          )
+        }
+        isBodyList
+        body={
+          <div className="table__wrapper">
+            <table className="table section">
+              <thead>
+                <tr>
+                  <th>{__('Invitee Email')}</th>
+                  <th>{__('Invite Status')}</th>
+                  <th>{__('Reward')}</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </section>
+              </thead>
+              <tbody>
+                {invitees.map(invitee => (
+                  <tr key={invitee.email}>
+                    <td>{invitee.email}</td>
+                    <td>
+                      <span>{invitee.invite_accepted ? __('Accepted') : __('Not Accepted')}</span>
+                    </td>
+                    <td>
+                      {invitee.invite_reward_claimed && (
+                        <React.Fragment>
+                          <span>{__('Claimed')}</span>
+                          <Icon icon={ICONS.COMPLETE} />
+                        </React.Fragment>
+                      )}
+
+                      {!invitee.invite_reward_claimed &&
+                        (invitee.invite_reward_claimable ? <span>{__('Claimable')}</span> : __('Unclaimable'))}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        }
+      />
     );
   }
 }

ui/component/inviteNew/view.jsx

@@ -8,6 +8,7 @@ import Card from 'component/common/card';
 import SelectChannel from 'component/selectChannel';
 import analytics from 'analytics';
 import I18nMessage from 'component/i18nMessage';
+import LbcSymbol from 'component/common/lbc-symbol';
 
 type Props = {
   errorMessage: ?string,
@@ -74,10 +75,12 @@ function InviteNew(props: Props) {
     <div className={'columns'}>
       <Card
         title={__('Invites')}
-        subtitle={__(
-          'Earn LBRY Credits for inviting subscribers, followers, fans, friends, etc. to join and follow you on %SITE_NAME%. You can use invites just like affiliate links.',
-          { SITE_NAME }
-        )}
+        subtitle={
+          <I18nMessage tokens={{ SITE_NAME, lbc: <LbcSymbol /> }}>
+            Earn %lbc% for inviting subscribers, followers, fans, friends, etc. to join and follow you on %SITE_NAME%.
+            You can use invites just like affiliate links.
+          </I18nMessage>
+        }
         actions={
           <React.Fragment>
             <CopyableText label={__('Your invite link')} copyable={referral} />
@@ -107,9 +110,11 @@ function InviteNew(props: Props) {
 
       <Card
         title={__('Invite by email')}
-        subtitle={__('Invite someone you know by email and earn LBRY Credits when they join %SITE_NAME%.', {
-          SITE_NAME,
-        })}
+        subtitle={
+          <I18nMessage tokens={{ SITE_NAME, lbc: <LbcSymbol /> }}>
+            Invite someone you know by email and earn %lbc% when they join %SITE_NAME%.
+          </I18nMessage>
+        }
         actions={
           <React.Fragment>
             <Form onSubmit={handleSubmit}>

ui/component/rewardListClaimed/view.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import ButtonTransaction from 'component/common/transaction-link';
 import moment from 'moment';
 import LbcSymbol from 'component/common/lbc-symbol';
+import Card from 'component/common/card';
 
 type Reward = {
   id: string,
@@ -24,45 +25,43 @@ const RewardListClaimed = (props: Props) => {
   }
 
   return (
-    <section className="card">
-      <header className="table__header">
+    <Card
+      title={<div className="table__header-text">{__('Claimed Rewards')}</div>}
+      subtitle={
         <div className="table__header-text">
-          <h2 className="card__title card__title--deprecated">{__('Claimed Rewards')}</h2>
-
-          <p className="section__subtitle">
-            {__(
-              'Reward history is tied to your email. In case of lost or multiple wallets, your balance may differ from the amounts claimed'
-            )}
-            .
-          </p>
+          {__(
+            'Reward history is tied to your email. In case of lost or multiple wallets, your balance may differ from the amounts claimed'
+          )}
         </div>
-      </header>
-
-      <div className="table__wrapper">
-        <table className="table table--rewards">
-          <thead>
-            <tr>
-              <th>{__('Title')}</th>
-              <th>
-                <LbcSymbol size={20} />
-              </th>
-              <th>{__('Transaction')}</th>
-              <th>{__('Date')}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {rewards.reverse().map(reward => (
-              <tr key={reward.id}>
-                <td>{reward.reward_title}</td>
-                <td>{reward.reward_amount}</td>
-                <td>{reward.transaction_id && <ButtonTransaction id={reward.transaction_id} />}</td>
-                <td>{moment(reward.created_at).format('LLL')}</td>
+      }
+      isBodyList
+      body={
+        <div className="table__wrapper">
+          <table className="table table--rewards">
+            <thead>
+              <tr>
+                <th>{__('Title')}</th>
+                <th>
+                  <LbcSymbol size={20} />
+                </th>
+                <th>{__('Transaction')}</th>
+                <th>{__('Date')}</th>
               </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </section>
+            </thead>
+            <tbody>
+              {rewards.reverse().map(reward => (
+                <tr key={reward.id}>
+                  <td>{reward.reward_title}</td>
+                  <td>{reward.reward_amount}</td>
+                  <td>{reward.transaction_id && <ButtonTransaction id={reward.transaction_id} />}</td>
+                  <td>{moment(reward.created_at).format('LLL')}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      }
+    />
   );
 };
 

ui/component/txoList/view.jsx

@@ -173,7 +173,7 @@ function TxoList(props: Props) {
 
   return (
     <Card
-      title={__(`Transactions`)}
+      title={<div className="table__header-text">{__(`Transactions`)}</div>}
       titleActions={
         <div className="card__actions--inline">
           <Button button="alt" icon={ICONS.REFRESH} label={__('Refresh')} onClick={() => fetchTxoPage()} />

ui/scss/component/_card.scss

@@ -281,6 +281,7 @@
 
 .card__body-actions {
   padding: var(--spacing-l);
+
   @media (max-width: $breakpoint-small) {
     padding: var(--spacing-s);
   }

ui/scss/component/_table.scss

@@ -102,7 +102,7 @@ th {
 
 .table__header-text {
   width: 100%;
-  margin: var(--spacing-m) var(--spacing-l);
+  margin: 0 var(--spacing-s);
 }
 
 .table__header-text--between {