fix: minor color and spacing issues

src/renderer/component/inviteList/view.jsx

@@ -66,9 +66,7 @@ class InviteList extends React.PureComponent<Props> {
               </tbody>
             </table>
           )}
-        </div>
 
-        <div className="card__content">
           <div className="help">
             {__(
               'The maximum number of invite rewards is currently limited. Invite reward can only be claimed if the invitee passes the humanness test.'

src/renderer/component/inviteNew/view.jsx

@@ -33,7 +33,7 @@ class FormInviteNew extends React.PureComponent {
 
     return (
       <Form onSubmit={this.handleSubmit}>
-        <FormRow stretch>
+        <FormRow padded>
           <FormField
             stretch
             type="text"
@@ -48,10 +48,8 @@ class FormInviteNew extends React.PureComponent {
           />
         </FormRow>
 
-        <div className="card__content">
-          <div className="card__actions">
-            <Submit label="Invite" disabled={isPending} />
-          </div>
+        <div className="card__actions">
+          <Submit label="Invite" disabled={isPending} />
         </div>
       </Form>
     );
@@ -94,9 +92,7 @@ class InviteNew extends React.PureComponent {
             isPending={isPending}
             rewardAmount={rewardAmount}
           />
-        </div>
 
-        <div className="card__content">
           <p className="help">
             {__('Read our')}{' '}
             <Button button="link" label={__('FAQ')} href="https://lbry.io/faq/referrals" />{' '}

src/renderer/component/userEmailNew/view.jsx

@@ -41,7 +41,7 @@ class UserEmailNew extends React.PureComponent<Props, State> {
     const { cancelButton, errorMessage, isPending } = this.props;
 
     return (
-      <span>
+      <React.Fragment>
         <p>
           {__("We'll let you know about LBRY updates, security issues, and great new content.")}
         </p>
@@ -71,7 +71,7 @@ class UserEmailNew extends React.PureComponent<Props, State> {
             {cancelButton}
           </div>
         </Form>
-      </span>
+      </React.Fragment>
     );
   }
 }

src/renderer/component/userVerify/view.jsx

@@ -31,29 +31,25 @@ class UserVerify extends React.PureComponent<Props> {
         <section className="card card--section">
           <header className="card__header">
             <h1 className="card__title">{__('Final Human Proof')}</h1>
-          </header>
-
-          <div className="card__content">
-            <p>
+            <p className="card__subtitle">
               Finally, please complete <strong>one and only one</strong> of the options below.
             </p>
-          </div>
+          </header>
         </section>
 
         <section className="card card--section">
           <header className="card__header">
             <h2 className="card__title">{__('1) Proof via Credit')}</h2>
-          </header>
-
-          <div className="card__content">
-            <p>
+            <p className="card__subtitle">
               {`${__(
                 'If you have a valid credit or debit card, you can use it to instantly prove your humanity.'
               )} ${__(
                 'LBRY does not store your credit card information. There is no charge at all for this, now or in the future.'
               )} `}
             </p>
+          </header>
 
+          <div className="card__content">
             <div className="card__actions">
               {errorMessage && <p className="form-field__error">{errorMessage}</p>}
               <CardVerify
@@ -63,10 +59,8 @@ class UserVerify extends React.PureComponent<Props> {
                 stripeKey={Lbryio.getStripeToken()}
               />
             </div>
-          </div>
 
-          <div className="card__content">
-            <div className="meta">
+            <div className="help">
               {__('A $1 authorization may temporarily appear with your provider.')}{' '}
               <Button
                 button="link"
@@ -80,15 +74,14 @@ class UserVerify extends React.PureComponent<Props> {
         <section className="card card--section">
           <header className="card__header">
             <h2 className="card__title">{__('2) Proof via Phone')}</h2>
-          </header>
-
-          <div className="card__content">
-            <p>
+            <p className="card__subtitle">
               {`${__(
                 'You will receive an SMS text message confirming that your phone number is correct.'
               )}`}
             </p>
+          </header>
 
+          <div className="card__content">
             <div className="card__actions">
               <Button
                 onClick={() => {
@@ -99,10 +92,8 @@ class UserVerify extends React.PureComponent<Props> {
                 label={__('Submit Phone Number')}
               />
             </div>
-          </div>
 
-          <div className="card__content">
-            <div className="meta">
+            <div className="help">
               {__('Standard messaging rates apply. Having trouble?')}{' '}
               <Button button="link" href="https://lbry.io/faq/phone" label={__('Read more.')} />
             </div>
@@ -112,21 +103,17 @@ class UserVerify extends React.PureComponent<Props> {
         <section className="card card--section">
           <header className="card__header">
             <h2 className="card__title">{__('3) Proof via Chat')}</h2>
-          </header>
-
-          <div className="card__content">
-            <p>
+            <p className="card__subtitle">
               {__(
                 'A moderator capable of approving you is typically available in the #verification channel of our chat room.'
-              )}
-            </p>
-
-            <p>
+              )}{' '}
               {__(
                 'This process will likely involve providing proof of a stable and established online or real-life identity.'
               )}
             </p>
+          </header>
 
+          <div className="card__content">
             <div className="card__actions">
               <Button
                 href="https://chat.lbry.io"
@@ -141,14 +128,14 @@ class UserVerify extends React.PureComponent<Props> {
         <section className="card card--section">
           <header className="card__header">
             <h2 className="card__title">{__('Or, Skip It Entirely')}</h2>
-          </header>
-
-          <div className="card__content">
-            <p>
+            <p className="card__subtitle">
               {__(
                 'You can continue without this step, but you will not be eligible to earn rewards.'
               )}
             </p>
+          </header>
+
+          <div className="card__content">
             <div className="card__actions">
               <Button
                 onClick={() => navigate('/discover')}

src/renderer/modal/modalAutoUpdateDownloaded/view.jsx

@@ -50,7 +50,7 @@ class ModalAutoUpdateDownloaded extends React.PureComponent<Props, State> {
               'A new version of LBRY has been released, downloaded, and is ready for you to use pending a restart.'
             )}
           </p>
-          <p className="meta text-center">
+          <p className="help">
             {__('Want to know what has changed?')} See the{' '}
             <Button
               button="link"

src/renderer/modal/modalUpgrade/view.jsx

@@ -28,7 +28,7 @@ class ModalUpgrade extends React.PureComponent<Props> {
             {__('An updated version of LBRY is now available.')}{' '}
             {__('Your version is out of date and may be unreliable or insecure.')}
           </p>
-          <p className="meta">
+          <p className="help">
             {__('Want to know what has changed?')} See the{' '}
             <Button
               button="link"

src/renderer/scss/component/_item-list.scss

@@ -28,4 +28,8 @@
 
 .item-list__item--selected {
   background-color: $lbry-gray-1;
+
+  html[data-theme='dark'] & {
+    background-color: rgba($lbry-black, 0.5);
+  }
 }