patch column cards

ui/component/inviteNew/view.jsx

@@ -11,7 +11,7 @@ import LbcSymbol from 'component/common/lbc-symbol';
 
 type Props = {
   errorMessage: ?string,
-  inviteNew: string => void,
+  inviteNew: (string) => void,
   isPending: boolean,
   referralLink: string,
   referralCode: string,
@@ -35,10 +35,10 @@ function InviteNew(props: Props) {
   const [referralSource, setReferralSource] = useState(referralCode);
 
   const handleReferralChange = React.useCallback(
-    code => {
+    (code) => {
       setReferralSource(code);
       // TODO: keep track of this in an array?
-      const matchingChannel = channels && channels.find(ch => ch.name === code);
+      const matchingChannel = channels && channels.find((ch) => ch.name === code);
       if (matchingChannel) {
         analytics.apiLogPublish(matchingChannel);
       }
@@ -68,12 +68,13 @@ function InviteNew(props: Props) {
   }, [topChannel, handleReferralChange]);
 
   function lookupUrlByClaimName(name, channels) {
-    const claim = channels.find(channel => channel.name === name);
+    const claim = channels.find((channel) => channel.name === name);
     return claim && claim.canonical_url ? claim.canonical_url.replace('lbry://', '') : name;
   }
 
   return (
     <div className={'columns'}>
+      <div className="column">
         <Card
           title={__('Invites')}
           subtitle={
@@ -90,9 +91,9 @@ function InviteNew(props: Props) {
                   type="select"
                   label={__('Customize link')}
                   value={referralSource}
-                onChange={e => handleReferralChange(e.target.value)}
+                  onChange={(e) => handleReferralChange(e.target.value)}
                 >
-                {channels.map(channel => (
+                  {channels.map((channel) => (
                     <option key={channel.claim_id} value={channel.name}>
                       {channel.name}
                     </option>
@@ -103,7 +104,8 @@ function InviteNew(props: Props) {
             </React.Fragment>
           }
         />
-
+      </div>
+      <div className="column">
         <Card
           title={__('Invite by email')}
           subtitle={
@@ -124,7 +126,7 @@ function InviteNew(props: Props) {
                   inputButton={
                     <Button button="secondary" type="submit" label={__('Invite')} disabled={isPending || !email} />
                   }
-                onChange={event => {
+                  onChange={(event) => {
                     handleEmailChanged(event);
                   }}
                 />
@@ -132,7 +134,9 @@ function InviteNew(props: Props) {
                   <I18nMessage
                     tokens={{
                       rewards_link: <Button button="link" navigate="/$/rewards" label={__('rewards')} />,
-                    referral_faq_link: <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />,
+                      referral_faq_link: (
+                        <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />
+                      ),
                     }}
                   >
                     Read our %referral_faq_link% to learn more about rewards.
@@ -143,6 +147,7 @@ function InviteNew(props: Props) {
           }
         />
       </div>
+    </div>
   );
 }
 

ui/component/walletBalance/view.jsx

@@ -65,6 +65,7 @@ const WalletBalance = (props: Props) => {
 
   return (
     <div className={'columns'}>
+      <div className="column">
         <Card
           title={<LbcSymbol postfix={formatNumberWithCommas(totalBalance)} isTitle />}
           subtitle={
@@ -148,14 +149,21 @@ const WalletBalance = (props: Props) => {
                 </p>
               ) : (
                 <p className="help--warning">
-              {__('Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.')}
+                  {__(
+                    'Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.'
+                  )}
                   <HelpLink navigate={`/$/${PAGES.BACKUP}`} />
                 </p>
               )}
               {/* @endif */}
               <div className="section__actions">
                 <Button button="primary" label={__('Buy')} icon={ICONS.BUY} navigate={`/$/${PAGES.BUY}`} />
-            <Button button="secondary" label={__('Receive')} icon={ICONS.RECEIVE} navigate={`/$/${PAGES.RECEIVE}`} />
+                <Button
+                  button="secondary"
+                  label={__('Receive')}
+                  icon={ICONS.RECEIVE}
+                  navigate={`/$/${PAGES.RECEIVE}`}
+                />
                 <Button button="secondary" label={__('Send')} icon={ICONS.SEND} navigate={`/$/${PAGES.SEND}`} />
               </div>
               {(otherCount > WALLET_CONSOLIDATE_UTXOS || consolidateIsPending || consolidatingUtxos) && (
@@ -175,18 +183,20 @@ const WalletBalance = (props: Props) => {
                       help: <HelpLink href="https://lbry.com/faq/transaction-types" />,
                     }}
                   >
-                Your wallet has a lot of change lying around. Consolidating will speed up your transactions. This could
+                    Your wallet has a lot of change lying around. Consolidating will speed up your transactions. This
-                take some time. %now%%help%
+                    could take some time. %now%%help%
                   </I18nMessage>
                 </p>
               )}
             </>
           }
         />
-
+      </div>
+      <div className="column">
         {/* fiat balance card */}
         <WalletFiatBalance />
       </div>
+    </div>
   );
 };