Update styling of Github and Google Buttons, updating styling of Account Settings

Author: catarak

client/modules/User/pages/AccountView.jsx

@@ -9,12 +9,27 @@ import { updateSettings, initiateVerification, createApiKey, removeApiKey } from
 import AccountForm from '../components/AccountForm';
 import { validateSettings } from '../../../utils/reduxFormUtils';
 import GithubButton from '../components/GithubButton';
+import GoogleButton from '../components/GoogleButton';
 import APIKeyForm from '../components/APIKeyForm';
 import Nav from '../../../components/Nav';
 
 const __process = (typeof global !== 'undefined' ? global : window).process;
 const ROOT_URL = __process.env.API_URL;
 
+function SocialLoginPanel(props) {
+  return (
+    <React.Fragment>
+      <AccountForm {...props} />
+      <h2 className="form-container__divider">Social Login</h2>
+      <p className="account__social-text">
+        Use your GitHub or Google account to log into the p5.js Web Editor.
+      </p>
+      <GithubButton buttonText="Login with GitHub" />
+      <GoogleButton buttonText="Login with Google" />
+    </React.Fragment>
+  );
+}
+
 class AccountView extends React.Component {
   componentDidMount() {
     document.body.className = this.props.theme;
@@ -44,28 +59,14 @@ class AccountView extends React.Component {
                 </div>
               </TabList>
               <TabPanel>
-                <AccountForm {...this.props} />
-                <h2 className="form-container__divider">Social Login</h2>
-                <p className="account__social-text">
-                  Link this account with your GitHub account to allow login from both.
-                </p>
-                <GithubButton buttonText="Login with GitHub" />
+                <SocialLoginPanel {...this.props} />
               </TabPanel>
               <TabPanel>
                 <APIKeyForm {...this.props} />
               </TabPanel>
             </Tabs>
           }
-          {!accessTokensUIEnabled &&
-            <div>
-              <AccountForm {...this.props} />
-              <h2 className="form-container__divider">Social Login</h2>
-              <p className="account__social-text">
-                Link this account with your GitHub account to allow login from both.
-              </p>
-              <GithubButton buttonText="Login with GitHub" />
-            </div>
-          }
+          { !accessTokensUIEnabled && <SocialLoginPanel {...this.props} /> }
         </section>
       </div>
     );

client/styles/components/_account.scss

@@ -3,6 +3,7 @@
     color: getThemifyVariable('primary-text-color');
     background-color: getThemifyVariable('background-color');
   }
+  height: 100%;
 }
 
 .account-settings {

client/styles/components/_github-button.scss

@@ -1,4 +1,5 @@
-.github-button {
+.github-button,
+.google-button {
   @include themify() {
     @extend %button;
     & path {
@@ -8,43 +9,25 @@
       fill: $white;
     }
     &:hover, &:active {
-      background-color: getThemifyVariable('secondary-text-color');
-      border-color: getThemifyVariable('secondary-text-color');
+      color: getThemifyVariable('button-hover-color');
+      background-color: getThemifyVariable('button-background-hover-color');
+      border-color: getThemifyVariable('button-background-hover-color');
     }
   }
   width: #{300 / $base-font-size}rem;
   display: flex;
   justify-content: center;
   align-items: center;
+
+  & + & {
+    margin-top: #{10 / $base-font-size}rem;
+  }
 }
 
 .github-icon {
   margin-right: #{10 / $base-font-size}rem;
 }
 
-
-.google-button {
-  @include themify() {
-    @extend %button;
-    & path {
-      color: getThemifyVariable('primary-text-color');
-    }
-    &:hover path, &:active path {
-      fill: $white;
-    }
-    &:hover, &:active {
-      background-color: getThemifyVariable('secondary-text-color');
-      border-color: getThemifyVariable('secondary-text-color');
-    }
-  }
-  margin-top: #{4 / $base-font-size}rem;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  width: #{300 / $base-font-size}rem;
-}
-
 .google-icon {
   width: #{32 / $base-font-size}rem;
   height: #{32 / $base-font-size}rem;