From 86484eb13f1c5a81a21cf3668ee0c273cbbce67d Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Wed, 8 Jul 2020 15:38:16 +0800
Subject: [PATCH] TipModal: Move "Buy More" next to price selection.

Having the "Buy More LBC" at the bottom seems out of place, since the context of LBC/amount is in the middle of the modal.
---
 static/app-strings.json             |  2 ++
 ui/component/walletSendTip/view.jsx | 14 +++++++++-----
 ui/scss/component/_button.scss      |  9 +++++++++
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index 1aecac7a8..e13887ac2 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -1268,6 +1268,8 @@
   "Uncheck your email below if you want to stop receiving messages.": "Uncheck your email below if you want to stop receiving messages.",
   "Remove from Blocked List": "Remove from Blocked List",
   "Are you sure you want to remove this from the list?": "Are you sure you want to remove this from the list?",
+  "Send A Tip": "Send A Tip",
+  "Send a chunk of change to this creator to let them know you appreciate their content.": "Send a chunk of change to this creator to let them know you appreciate their content.",
   "CableTube Escape Artists": "CableTube Escape Artists",
   "Unlink YouTube Channel": "Unlink YouTube Channel",
   "Sign In With YouTube": "Sign In With YouTube",
diff --git a/ui/component/walletSendTip/view.jsx b/ui/component/walletSendTip/view.jsx
index ab7d2e608..c41a10860 100644
--- a/ui/component/walletSendTip/view.jsx
+++ b/ui/component/walletSendTip/view.jsx
@@ -228,6 +228,15 @@ function WalletSendTip(props: Props) {
                     label={__('Custom')}
                     onClick={() => setUseCustomTip(true)}
                   />
+                  {DEFAULT_TIP_AMOUNTS.some(val => val > balance) && (
+                    <Button
+                      button="secondary"
+                      className="button-toggle-group-action"
+                      icon={ICONS.BUY}
+                      title={__('Buy More LBC')}
+                      navigate={`/$/${PAGES.BUY}`}
+                    />
+                  )}
                 </div>
 
                 {useCustomTip && (
@@ -281,11 +290,6 @@ function WalletSendTip(props: Props) {
                     />
                   )}
                 </div>
-                {DEFAULT_TIP_AMOUNTS.some(val => val > balance) && (
-                  <div className="section">
-                    <Button button="link" label={__('Buy More LBC')} navigate={`/$/${PAGES.BUY}`} />
-                  </div>
-                )}
               </>
             )
           }
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index ef7162c9b..9ac42dc2d 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -176,3 +176,12 @@ svg + .button__label,
     border-bottom-left-radius: 0;
   }
 }
+
+.button-toggle-group-action {
+  position: absolute; // Centers the button along toggle buttons
+
+  @media (max-width: $breakpoint-small) {
+    position: relative;
+    top: var(--spacing-s);
+  }
+}