Convert user account pages to use Button

Author: andrewn

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'),
 };
 
 /*

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>
 
           {

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>
   );
 }

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>
   );
 }

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;
+}

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;