From 1fc23f424f5b9c00071f1e4bc6c6a7d636745dc1 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Fri, 13 Sep 2019 13:23:06 +1000
Subject: [PATCH] border radius buttons

---
 client/assets/styles/account.less        |  3 +--
 client/assets/styles/styles.less         |  4 +++-
 client/src/components/account.top.jsx    |  2 +-
 client/src/components/play.jsx           |  6 +++---
 client/src/components/stripe.buttons.jsx | 12 ++++++------
 5 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/client/assets/styles/account.less b/client/assets/styles/account.less
index 44b1c2dd..adb879fe 100644
--- a/client/assets/styles/account.less
+++ b/client/assets/styles/account.less
@@ -36,10 +36,9 @@
     }
 }
 
-.stripe-btn {
+.yellow-btn {
     background: @yellow;
     color: black;
-    border-radius: 2px;
     border-width: 0;
 
     &:active, &:focus, &:hover {
diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less
index 63ea5367..c2119868 100644
--- a/client/assets/styles/styles.less
+++ b/client/assets/styles/styles.less
@@ -105,11 +105,11 @@ button, input {
     height: auto;
     border-width: 2px;
     border-color: @gray-exists;
-    border-radius: 0;
     letter-spacing: 0.25em;
     box-sizing: border-box;
     font-size: 100%;
     flex: 1;
+    border-radius: 0.5em;
 
     /*the transitions */
     transition-property: border-color, color, background;
@@ -241,6 +241,8 @@ header {
 
     button {
         height: 2em;
+        // border-radius: 0.1em;
+        border-radius: 0;
     }
 }
 
diff --git a/client/src/components/account.top.jsx b/client/src/components/account.top.jsx
index 2589f662..351918b4 100644
--- a/client/src/components/account.top.jsx
+++ b/client/src/components/account.top.jsx
@@ -120,7 +120,7 @@ class AccountStatus extends Component {
 
                 // resub button
                 if (subscription.cancel_at_period_end) {
-                    return <button class='stripe-btn' onClick={() => sendSubscriptionEnding(false)}>Resubscribe</button>
+                    return <button class='yellow-btn' onClick={() => sendSubscriptionEnding(false)}>Resubscribe</button>
                 }
 
                 const classes = `unsub ${unsubState ? 'confirming' : ''}`;
diff --git a/client/src/components/play.jsx b/client/src/components/play.jsx
index 737cedbe..b76feb0c 100644
--- a/client/src/components/play.jsx
+++ b/client/src/components/play.jsx
@@ -76,13 +76,13 @@ function Play(args) {
 
     const subscription = account.subscribed
         ? <button
-            class="stripe-btn"
+            class="yellow-btn"
             disabled>
             Subscribed
         </button>
         : <button
             onClick={() => setNav('shop')}
-            class="stripe-btn"
+            class="yellow-btn"
             role="link">
             Subscribe
         </button>;
@@ -109,7 +109,7 @@ function Play(args) {
                     {subscription}
                     <button
                         onClick={() => setNav('shop')}
-                        class="stripe-btn"
+                        class="yellow-btn"
                         role="link">
                         Get Credits
                     </button>
diff --git a/client/src/components/stripe.buttons.jsx b/client/src/components/stripe.buttons.jsx
index 15b3411a..03d3e6b3 100644
--- a/client/src/components/stripe.buttons.jsx
+++ b/client/src/components/stripe.buttons.jsx
@@ -45,13 +45,13 @@ function BitsBtn(args) {
 
     const subscription = account.subscribed
         ? <button
-            class="stripe-btn"
+            class="yellow-btn"
             disabled>
             Subscribed
         </button>
         : <button
             onClick={subscribeClick}
-            class="stripe-btn"
+            class="yellow-btn"
             role="link">
             Subscribe
         </button>;
@@ -64,19 +64,19 @@ function BitsBtn(args) {
             <div class='list'>
                 <figure onClick={() => bitsClick(5)} >
                     <figcaption>$5 AUD</figcaption>
-                    <button class="stripe-btn">¤50</button>
+                    <button class="yellow-btn">¤50</button>
                 </figure>
                 <figure onClick={() => bitsClick(10)} >
                     <figcaption>$10 AUD</figcaption>
-                    <button class="stripe-btn">¤110</button>
+                    <button class="yellow-btn">¤110</button>
                 </figure>
                 <figure onClick={() => bitsClick(20)} >
                     <figcaption>$20 AUD</figcaption>
-                    <button class="stripe-btn">¤250</button>
+                    <button class="yellow-btn">¤250</button>
                 </figure>
                 <figure onClick={() => bitsClick(50)} >
                     <figcaption>$50 AUD</figcaption>
-                    <button class="stripe-btn">¤660</button>
+                    <button class="yellow-btn">¤660</button>
                 </figure>
                 <div id="error-message"></div>
             </div>