Update Account SubTab Routing / Token Scanner CSS Updates (#1276)

* Redirect user to subtab after logging in

* Update token balances styles

* Adjust routing for readOnly wallets

common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm.scss

@@ -1,4 +1,4 @@
-@import "common/sass/variables";
+@import 'common/sass/variables';
 
 .AddCustom {
   &-field {
@@ -11,23 +11,20 @@
 
   &-buttons {
     padding-top: 10px;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
 
     &-help {
+      text-align: center;
       display: block;
       font-size: 13px;
       margin-bottom: 10px;
     }
 
     &-btn {
-      margin-right: 10px;
+      padding: 0.5rem 1.5rem;
-
+      margin: 0.25rem 0.5rem;
-      &.btn-primary {
-        width: 120px;
-      }
-
-      &.btn-default {
-        width: 110px;
-      }
     }
   }
 }

common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm.tsx

@@ -83,22 +83,22 @@ export default class AddCustomTokenForm extends React.PureComponent<Props, State
           );
         })}
 
+        <HelpLink article={HELP_ARTICLE.ADDING_NEW_TOKENS} className="AddCustom-buttons-help">
+          {translate('Need help? Learn how to add custom tokens.')}
+        </HelpLink>
         <div className="AddCustom-buttons">
-          <HelpLink article={HELP_ARTICLE.ADDING_NEW_TOKENS} className="AddCustom-buttons-help">
-            {translate('Need help? Learn how to add custom tokens.')}
-          </HelpLink>
-          <button
-            className="AddCustom-buttons-btn btn btn-primary btn-sm"
-            disabled={!this.isValid()}
-          >
-            {translate('x_Save')}
-          </button>
           <button
             className="AddCustom-buttons-btn btn btn-sm btn-default"
             onClick={this.props.toggleForm}
           >
             {translate('x_Cancel')}
           </button>
+          <button
+            className="AddCustom-buttons-btn btn btn-primary btn-sm"
+            disabled={!this.isValid()}
+          >
+            {translate('x_Save')}
+          </button>
         </div>
       </form>
     );

common/components/BalanceSidebar/TokenBalances/index.scss

@@ -1,4 +1,4 @@
-@import "common/sass/variables";
+@import 'common/sass/variables';
 
 .TokenBalances {
   &-title {
@@ -34,6 +34,12 @@
   }
 
   &-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    & > &-btn {
+      margin: 0.25rem 0.5rem;
+    }
     &-help {
       padding-top: 10px;
       text-align: center;

common/containers/Tabs/SendTransaction/index.tsx

@@ -6,7 +6,7 @@ import { UnlockHeader } from 'components/ui';
 import { SideBar } from './components/index';
 import { getWalletInst } from 'selectors/wallet';
 import { AppState } from 'reducers';
-import { RouteComponentProps, Route, Switch } from 'react-router';
+import { RouteComponentProps, Route, Switch, Redirect } from 'react-router';
 import { RedirectWithQuery } from 'components/RedirectWithQuery';
 import {
   WalletInfo,
@@ -74,7 +74,13 @@ class SendTransaction extends React.Component<Props> {
                       />
                     )}
                   />
-                  <Route exact={true} path={`${currentPath}/send`} component={Send} />
+                  <Route
+                    exact={true}
+                    path={`${currentPath}/send`}
+                    render={() => {
+                      return wallet.isReadOnly ? <Redirect to={`${currentPath}/info`} /> : <Send />;
+                    }}
+                  />
                   <Route
                     path={`${currentPath}/info`}
                     exact={true}