From 4788381641917a8cc78086abbd7d44704643a9cc Mon Sep 17 00:00:00 2001
From: James Prado <james-prado@users.noreply.github.com>
Date: Sun, 11 Mar 2018 18:19:35 -0400
Subject: [PATCH] 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
---
 .../TokenBalances/AddCustomTokenForm.scss      | 17 +++++++----------
 .../TokenBalances/AddCustomTokenForm.tsx       | 18 +++++++++---------
 .../BalanceSidebar/TokenBalances/index.scss    |  8 +++++++-
 .../containers/Tabs/SendTransaction/index.tsx  | 10 ++++++++--
 4 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm.scss b/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm.scss
index d1da9de9..9c7271f5 100644
--- a/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm.scss
+++ b/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;
-
-      &.btn-primary {
-        width: 120px;
-      }
-
-      &.btn-default {
-        width: 110px;
-      }
+      padding: 0.5rem 1.5rem;
+      margin: 0.25rem 0.5rem;
     }
   }
 }
diff --git a/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm.tsx b/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm.tsx
index 294f12ea..afd2ac88 100644
--- a/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm.tsx
+++ b/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>
     );
diff --git a/common/components/BalanceSidebar/TokenBalances/index.scss b/common/components/BalanceSidebar/TokenBalances/index.scss
index 435e384f..5cfc44a8 100644
--- a/common/components/BalanceSidebar/TokenBalances/index.scss
+++ b/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;
diff --git a/common/containers/Tabs/SendTransaction/index.tsx b/common/containers/Tabs/SendTransaction/index.tsx
index 03d395eb..521896a1 100644
--- a/common/containers/Tabs/SendTransaction/index.tsx
+++ b/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}