subs

client/assets/styles/styles.css

@@ -293,7 +293,7 @@ button[disabled] {
 }
 
 /*
-    HEADER
+    account
 */
 
 header {
@@ -303,23 +303,26 @@ header {
     margin-bottom: 1.5em;
 }
 
-.header-title {
+.account {
+    margin: 1em 0;
+}
+
+.account-title {
     flex: 1;
     letter-spacing: 0.05em;
 }
 
-.header-status {
-    margin: 1em 0;
+.account-status {
     display: flex;
 }
 
-.header-username {
+.account-header {
     letter-spacing: 0.05em;
     flex: 1;
     display: inline;
 }
 
-.header-status svg {
+.account-status svg {
     margin: 0.5em 0 0 1em;
     height: 1em;
     background-color: black;

client/src/components/account.status.jsx

@@ -32,15 +32,20 @@ function BitsBtn(args) {
             clientReferenceId: account.id
         });
     }
+
+    const subscription = account.subscribed
+        ? <h3 class="account-header">Subscribed</h3>
+        : <button
+            onClick={subscribeClick}
+            class="stripe-btn"
+            role="link">
+            Subscribe
+        </button>;
+
     return (
         <div>
             <div id="error-message"></div>
-            <button
-                onClick={subscribeClick}
-                class="stripe-btn"
-                role="link">
-                Subscribe
-            </button>
+            {subscription}
             <button
                 onClick={bitsClick}
                 class="stripe-btn"
@@ -84,12 +89,13 @@ function AccountStatus(args) {
     if (!account) return null;
 
     return (
-        <div>
-            <div class="header-status">
-                <h2 class="header-username">{account.name}</h2>
+        <div class="account">
+            <div class="account-status">
+                <h2 class="account-header">{account.name}</h2>
                 {saw(pingColour(ping))}
                 <div class="ping-text">{ping}ms</div>
             </div>
+            <h3 class="account-header">{`¤${account.credits}`}</h3>
             <Elements>
                 <StripeBitsBtn account={account} />
             </Elements>

client/src/components/login.jsx

@@ -78,6 +78,7 @@ class Login extends Component {
                         class="login-input"
                         type="email"
                         placeholder="username"
+                        tabIndex={1}
                         value={this.state.name}
                         onInput={this.nameInput}
                     />
@@ -85,6 +86,7 @@ class Login extends Component {
                         class="login-input"
                         type="password"
                         placeholder="password"
+                        tabIndex={2}
                         value={this.state.password}
                         onInput={this.passwordInput}
                     />
@@ -92,16 +94,19 @@ class Login extends Component {
                         class="login-input"
                         type="text"
                         placeholder="code"
+                        tabIndex={3}
                         value={this.state.code}
                         onInput={this.codeInput}
                     />
                     <button
                         class="login-btn"
+                        tabIndex={4}
                         onClick={this.loginSubmit}>
                         Login
                     </button>
                     <button
                         class="login-btn"
+                        tabIndex={5}
                         onClick={this.registerSubmit}>
                         Register
                     </button>