feat(ui): added social button component (#17033)

feat(ui): added social button component
influxdata · Feb 28, 2020 · 87a78a4 · 87a78a4
1 parent 7c43ffd
commit 87a78a4
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 12 deletions.
diff --git a/ui/src/clientLibraries/graphics/GithubLogo.tsx b/ui/src/clientLibraries/graphics/GithubLogo.tsx
@@ -0,0 +1,18 @@
+// Libraries
+import React, {FC} from 'react'
+import classnames from 'classnames'
+
+interface Props {
+  className?: string
+}
+
+export const GithubLogo: FC<Props> = ({className}) => (
+  <svg
+    className={classnames('github-logo', className)}
+    role="img"
+    viewBox="0 0 24 24"
+  >
+    <title>GitHub icon</title>
+    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+  </svg>
+)
diff --git a/ui/src/clientLibraries/graphics/GoogleLogo.tsx b/ui/src/clientLibraries/graphics/GoogleLogo.tsx
@@ -0,0 +1,33 @@
+// Libraries
+import React, {FC} from 'react'
+import classnames from 'classnames'
+
+interface Props {
+  className?: string
+}
+
+export const GoogleLogo: FC<Props> = ({className}) => (
+  <svg
+    className={classnames('google-logo', className)}
+    x="0"
+    y="0"
+    viewBox="0 0 17.6 18"
+  >
+    <path
+      d="M15 15.8h-3v-2.3c1-.6 1.6-1.6 1.8-2.7H9V7.4h8.5c.1.6.2 1.2.2 1.8-.1 2.7-1 5.1-2.7 6.6z"
+      className="google-logo--blue"
+    />
+    <path
+      d="M9 18c-3.5 0-6.6-2-8-5v-2.3h3c.7 2.1 2.7 3.7 5 3.7 1.2 0 2.2-.3 3-.9l2.9 2.3C13.5 17.2 11.4 18 9 18z"
+      className="google-logo--green"
+    />
+    <path
+      d="M4 7.3c-.2.5-.3 1.1-.3 1.7 0 .6.1 1.2.3 1.7L1 13c-.6-1.2-1-2.6-1-4s.3-2.8 1-4h3v2.3z"
+      className="google-logo--yellow"
+    />
+    <path
+      d="M12.4 4.9C11.5 4 10.3 3.6 9 3.6c-2.3 0-4.3 1.6-5 3.7L1 5c1.4-3 4.5-5 8-5 2.4 0 4.5.9 6 2.3l-2.6 2.6z"
+      className="google-logo--red"
+    />
+  </svg>
+)
diff --git a/ui/src/clientLibraries/graphics/index.ts b/ui/src/clientLibraries/graphics/index.ts
@@ -0,0 +1,19 @@
+import CSharpLogo from 'src/clientLibraries/graphics/CSharpLogo'
+import {GithubLogo} from 'src/clientLibraries/graphics/GithubLogo'
+import GoLogo from 'src/clientLibraries/graphics/GoLogo'
+import {GoogleLogo} from 'src/clientLibraries/graphics/GoogleLogo'
+import JavaLogo from 'src/clientLibraries/graphics/JavaLogo'
+import JSLogo from 'src/clientLibraries/graphics/JSLogo'
+import PythonLogo from 'src/clientLibraries/graphics/PythonLogo'
+import RubyLogo from 'src/clientLibraries/graphics/RubyLogo'
+
+export {
+  CSharpLogo,
+  GithubLogo,
+  GoLogo,
+  GoogleLogo,
+  JavaLogo,
+  JSLogo,
+  PythonLogo,
+  RubyLogo,
+}
diff --git a/ui/src/onboarding/containers/LoginPage.scss b/ui/src/onboarding/containers/LoginPage.scss
@@ -148,19 +148,19 @@
   height: $icon-size-md;
   width: $icon-size-md;
 
-  .google-blue {
+  .google-logo--blue {
     fill: #3e82f1;
   }
 
-  .google-green {
+  .google-logo--green {
     fill: #32a753;
   }
 
-  .google-red {
+  .google-logo--red {
     fill: #e74133;
   }
 
-  .google-yellow {
+  .google-logo--yellow {
     fill: #f9bb00;
   }
 }
diff --git a/ui/src/onboarding/containers/LoginPageContents.tsx b/ui/src/onboarding/containers/LoginPageContents.tsx
@@ -19,6 +19,8 @@ import auth0js from 'auth0-js'
 // Components
 import {LoginForm} from 'src/onboarding/components/LoginForm'
 import {SignUpForm} from 'src/onboarding/components/SignUpForm'
+import {SocialButton} from 'src/shared/components/SocialButton'
+import {GoogleLogo, GithubLogo} from 'src/clientLibraries/graphics'
 
 // Types
 import {Auth0Connection, FormFieldValidation} from 'src/types'
@@ -117,20 +119,22 @@ class LoginPageContents extends PureComponent<DispatchProps> {
                   alignItems={AlignItems.Center}
                   margin={ComponentSize.Large}
                 >
-                  <button
-                    onClick={() => {
+                  <SocialButton
+                    handleClick={() => {
                       this.handleSocialClick(Auth0Connection.Google)
                     }}
+                    buttonText="Google"
                   >
-                    Google
-                  </button>
-                  <button
-                    onClick={() => {
+                    <GoogleLogo className="signup-icon" />
+                  </SocialButton>
+                  <SocialButton
+                    buttonText="Github"
+                    handleClick={() => {
                       this.handleSocialClick(Auth0Connection.Github)
                     }}
                   >
-                    Github
-                  </button>
+                    <GithubLogo className="signup-icon" />
+                  </SocialButton>
                 </FlexBox>
               </Grid.Row>
             </Grid>

diff --git a/ui/src/shared/components/SocialButton.tsx b/ui/src/shared/components/SocialButton.tsx
@@ -0,0 +1,26 @@
+// Libraries
+import React, {FC} from 'react'
+import {ButtonBase, ButtonShape, ComponentSize} from '@influxdata/clockface'
+
+interface Props {
+  buttonText: string
+  children: JSX.Element
+  handleClick?: () => void
+}
+
+export const SocialButton: FC<Props> = ({
+  buttonText,
+  children,
+  handleClick,
+}) => {
+  return (
+    <ButtonBase
+      onClick={handleClick}
+      size={ComponentSize.Large}
+      shape={ButtonShape.StretchToFit}
+    >
+      {children}
+      <span className="signup-text">{buttonText}</span>
+    </ButtonBase>
+  )
+}