fix(UI and screenshots)

Author: Ajit Kumar

client/main.scss

@@ -258,7 +258,6 @@ table {
   margin: 10px auto;
   width: 100%;
   max-width: 600px;
-  box-shadow: 0 0 4px 0.5px rgba(0, 0, 0, 0.5);
   border-radius: 4px;
   overflow: hidden;
   border-collapse: collapse;
@@ -274,9 +273,12 @@ table {
   }
 
   tbody:only-child {
+    tr:nth-child(even):not(:last-child) {
+      border-bottom: solid 1px rgba(255, 255, 255, 0.5);
+    }
+
     tr:nth-child(even) {
       background-color: transparent;
-      border-bottom: solid 1px rgba(255, 255, 255, 0.5);
       border-top: solid 1px rgba(255, 255, 255, 0.5);
     }
   }
@@ -314,7 +316,7 @@ form {
 select,
 input,
 button {
-  height: 40px;
+  height: 30px;
   border: none;
   border-radius: 4px;
 }
@@ -328,6 +330,7 @@ button {
   background-color: var(--button-color);
   color: var(--button-text-color);
   height: 40px;
+  border-radius: 20px;
   margin: auto;
   max-width: 200px;
   margin-top: 10px;

client/pages/addPaymentMethod/index.js

@@ -19,7 +19,9 @@ export default async function AddPaymentMethod({ mode }) {
         <span className='error'>{errorText}</span>
         <span className='success'>{successText}</span>
         <div className='buttons-container'>
-          <button type='submit'>Save</button>
+          <button type='submit' style={{ width: '120px' }}>
+            Save
+          </button>
         </div>
       </div>,
     );
@@ -33,20 +35,22 @@ export default async function AddPaymentMethod({ mode }) {
         <Input type='text' name='bank_swift_code' placeholder='e.g. ICICINBBNRI' label='Bank Swift Code' />
 
         <fieldset>
-          <legend>Account type</legend>
+          <legend style={{ marginBottom: '10px' }}>Account type</legend>
           <Input type='radio' name='bank_account_type' value='savings' label='Savings' checked={true} />
           <Input type='radio' name='bank_account_type' value='current' label='Current' />
         </fieldset>
 
         <span className='error'>{errorText}</span>
         <span className='success'>{successText}</span>
 
-        <div style={{ marginTop: '20px' }}>
+        <small style={{ marginTop: '20px', display: 'block' }}>
           <sup>*</sup> are required.
-        </div>
+        </small>
         <div className='buttons-container'>
-          <button type='submit'>{buttonText}</button>
-          <button type='reset' className='danger'>
+          <button type='submit' style={{ width: '120px' }}>
+            {buttonText}
+          </button>
+          <button type='reset' className='danger' style={{ width: '120px' }}>
             Reset
           </button>
         </div>
@@ -61,15 +65,17 @@ export default async function AddPaymentMethod({ mode }) {
         <span className='error'>{errorText}</span>
         <span className='success'>{successText}</span>
         <div className='buttons-container'>
-          <button type='submit'>{buttonText}</button>
+          <button type='submit' style={{ width: '120px' }}>
+            {buttonText}
+          </button>
         </div>
       </div>,
     );
   }
 
   return (
     <section id='add-payment-method'>
-      <h1>{title}</h1>
+      <h1 style={{ textAlign: 'center' }}>{title}</h1>
       <AjaxForm
         ref={form}
         action='/api/user/payment-method'

client/pages/earnings/index.js

@@ -37,7 +37,7 @@ export default async function Earnings({ user, threshold }) {
 
   return (
     <section id='earnings'>
-      <h2>Earnings</h2>
+      <h2 style={{ textAlign: 'center' }}>Earnings</h2>
       <div className='table-wrapper'>
         <table className='info'>
           <tbody>

client/pages/loginUser/index.js

@@ -26,7 +26,7 @@ export default function LoginUser({ redirect }) {
 
         <span className='success'>{successText}</span>
         <span className='error'>{errorText}</span>
-        <button ref={button} type='submit'>
+        <button ref={button} type='submit' style={{ width: '120px' }}>
           Login
         </button>
         <div style={{ margin: 'auto' }}>

client/pages/publishPlugin/index.js

@@ -44,7 +44,7 @@ export default async function PublishPlugin({ mode = 'publish', id }) {
 
   return (
     <section id='publish-plugin'>
-      <h1>{capitalize(mode)} plugin</h1>
+      <h1 style={{ textAlign: 'center' }}>{capitalize(mode)} plugin</h1>
       <AjaxForm
         action='/api/plugin'
         method={method}