From 0d8aeedd4a9ff916927ab1ac3abf731178385de4 Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Sun, 26 Apr 2020 11:40:00 +0200
Subject: [PATCH] Convert user account pages to use Button

---
 client/common/Icon.jsx                         |  1 +
 client/modules/User/components/APIKeyForm.jsx  | 15 ++++++++-------
 client/modules/User/components/AccountForm.jsx | 13 ++++++-------
 client/modules/User/pages/AccountView.jsx      |  6 ++++--
 client/styles/components/_account.scss         |  9 +++++++++
 client/styles/components/_api-key.scss         | 15 ---------------
 6 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/client/common/Icon.jsx b/client/common/Icon.jsx
index 6b8bacb2..4a78e2be 100644
--- a/client/common/Icon.jsx
+++ b/client/common/Icon.jsx
@@ -7,6 +7,7 @@ import lodash from 'lodash';
 const icons = {
   github: require('../images/github.svg'),
   google: require('../images/google.svg'),
+  plusIcon: require('../images/plus-icon.svg'),
 };
 
 /*
diff --git a/client/modules/User/components/APIKeyForm.jsx b/client/modules/User/components/APIKeyForm.jsx
index dc2f87fa..76dd6297 100644
--- a/client/modules/User/components/APIKeyForm.jsx
+++ b/client/modules/User/components/APIKeyForm.jsx
@@ -2,12 +2,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import InlineSVG from 'react-inlinesvg';
 
+import Button from '../../../common/Button';
+import Icon from '../../../common/Icon';
 import CopyableInput from '../../IDE/components/CopyableInput';
 
 import APIKeyList from './APIKeyList';
 
-const plusIcon = require('../../../images/plus-icon.svg');
-
 export const APIKeyPropType = PropTypes.shape({
   id: PropTypes.object.isRequired,
   token: PropTypes.object,
@@ -81,14 +81,15 @@ class APIKeyForm extends React.Component {
               type="text"
               value={this.state.keyLabel}
             />
-            <button
-              className="api-key-form__create-button"
+            <Button
+
               disabled={this.state.keyLabel === ''}
               type="submit"
+              label="Create new key"
             >
-              <InlineSVG src={plusIcon} className="api-key-form__create-icon" />
-              Create
-            </button>
+              <Icon name={Icon.names.plusIcon} />
+              <span>Create</span>
+            </Button>
           </form>
 
           {
diff --git a/client/modules/User/components/AccountForm.jsx b/client/modules/User/components/AccountForm.jsx
index c52b8d28..e032448b 100644
--- a/client/modules/User/components/AccountForm.jsx
+++ b/client/modules/User/components/AccountForm.jsx
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
+import Button from '../../../common/Button';
 
 function AccountForm(props) {
   const {
@@ -44,11 +45,10 @@ function AccountForm(props) {
                     <span className="form__status"> Confirmation sent, check your email.</span>
                   ) :
                   (
-                    <button
-                      className="form__action"
+                    <Button
                       onClick={handleInitiateVerification}
                     >Resend confirmation email
-                    </button>
+                    </Button>
                   )
               }
             </p>
@@ -92,12 +92,11 @@ function AccountForm(props) {
         />
         {newPassword.touched && newPassword.error && <span className="form-error">{newPassword.error}</span>}
       </p>
-      <input
+      <Button
         type="submit"
         disabled={submitting || invalid || pristine}
-        value="Save All Settings"
-        aria-label="updateSettings"
-      />
+      >Save All Settings
+      </Button>
     </form>
   );
 }
diff --git a/client/modules/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.jsx
index ed1c3a30..67f4415a 100644
--- a/client/modules/User/pages/AccountView.jsx
+++ b/client/modules/User/pages/AccountView.jsx
@@ -23,8 +23,10 @@ function SocialLoginPanel(props) {
       <p className="account__social-text">
         Use your GitHub or Google account to log into the p5.js Web Editor.
       </p>
-      <SocialAuthButton service={SocialAuthButton.services.github} />
-      <SocialAuthButton service={SocialAuthButton.services.google} />
+      <div className="account__social-stack">
+        <SocialAuthButton service={SocialAuthButton.services.github} />
+        <SocialAuthButton service={SocialAuthButton.services.google} />
+      </div>
     </React.Fragment>
   );
 }
diff --git a/client/styles/components/_account.scss b/client/styles/components/_account.scss
index e4a0f837..1f9c8dfc 100644
--- a/client/styles/components/_account.scss
+++ b/client/styles/components/_account.scss
@@ -20,3 +20,12 @@
 .account__social-text {
   padding-bottom: #{15 / $base-font-size}rem;
 }
+
+
+.account__social-stack {
+  display: flex;
+}
+
+.account__social-stack > * {
+  margin-right: #{15 / $base-font-size}rem;
+}
diff --git a/client/styles/components/_api-key.scss b/client/styles/components/_api-key.scss
index a0986d4e..419abf50 100644
--- a/client/styles/components/_api-key.scss
+++ b/client/styles/components/_api-key.scss
@@ -17,21 +17,6 @@
     color: getThemifyVariable('heading-text-color');
   }
 }
-
-.api-key-form__create-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.api-key-form__create-icon {
-  display: flex;
-}
-
-.api-key-form__create-button .isvg {
-  padding-right: 10px;
-}
-
 .api-key-list {
   display: block;
   max-width: 900px;