typeforslack · aravind289 · Jul 24, 2020 · Jul 24, 2020 · digi0ps · Aug 1, 2020
diff --git a/src/components/arena/controllers/word-arena.jsx b/src/components/arena/controllers/word-arena.jsx
@@ -28,7 +28,6 @@ export default class TypingArena extends React.Component {
       letter,
       state: 'untyped',
     }))
-
     // When userInput string is empty this is skipped resulting in default values
     userInput.split('').forEach((letter, idx) => {
       if (idx >= letters.length) {

diff --git a/src/components/common/ui/googeButton.jsx b/src/components/common/ui/googeButton.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './ui.module.css'
+import GoogleLogo from '../../../images/g.png'
+export default function GoogleButton({ onClick, textLabel }) {
+  return (
+    <div className={styles.customBtn} onClick={onClick}>
+      <span className={styles.icon}>
+        <img className={styles.googleLogo} src={GoogleLogo} alt="glogo"></img>
+      </span>
+      <span className={styles.buttonText}>{textLabel}</span>
+    </div>
+  )
+}
diff --git a/src/components/common/ui/ui.module.css b/src/components/common/ui/ui.module.css
@@ -71,3 +71,41 @@
     transform: translate(24px, 0);
   }
 }
+
+/* googlebutton */
+.customBtn {
+  margin: 10px auto;
+  background: white;
+  color: #444;
+  width: 190px;
+  border-radius: 5px;
+  border: thin solid #888;
+  box-shadow: 1px 1px 1px grey;
+  white-space: nowrap;
+}
+.customBtn:hover {
+  cursor: pointer;
+}
+span.icon {
+  /* background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat; */
+  display: inline-block;
+  vertical-align: middle;
+  width: 42px;
+  height: 42px;
+}
+
+.googleLogo {
+  width: 80%;
+  position: relative;
+  top: 9%;
+}
+
+span.buttonText {
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 7px;
+  padding-right: 42px;
+  font-size: 14px;
+  font-weight: bold;
+  /* Use the Roboto font that is loaded in the <head> */
+}
diff --git a/src/components/dashboard/components/card.module.css b/src/components/dashboard/components/card.module.css
@@ -20,14 +20,18 @@
 }
 
 .card h2 {
-  margin-left: 40px;
-  padding-top: 25px;
+  padding-top: 5px;
+  margin: 20px auto 10px 40px;
   font-weight: lighter;
+  /* color: #8c8c8c; */
+  font-size: 1.4vw;
+  word-break: break-all;
 }
 
 .card p {
-  margin-left: 40px;
+  margin: 0 auto 0 30px;
   font-weight: lighter;
   color: #8c8c8c;
-  font-size: 24px;
+  font-size: 1.4vw;
+  word-break: break-all;
 }
diff --git a/src/components/dashboard/components/labels.jsx b/src/components/dashboard/components/labels.jsx
@@ -1,21 +1,44 @@
 import React from 'react'
 import styles from './labels.module.css'
 
-export default function Labels({ data, orientation }) {
-  return (
-    <div
-      className={styles.labels}
-      style={{
-        flexDirection: orientation === 'horizontal' ? 'row' : 'column',
-        justifyContent:
-          orientation === 'horizontal' ? 'flex-start' : 'space-evenly',
-      }}>
-      {data.map((label, i) => (
-        <div key={i} className={styles.labelContainer}>
-          <div className={styles.label} style={{ background: label.color }} />
-          <p className={styles.labelText}>{label.title}</p>
+export default class Labels extends React.Component {
+  state = {
+    selectedOption: 'Wpm',
+  }
+
+  toggleRadioCheck = (e) => {
+    var option = e.target.value
+    this.setState({
+      selectedOption: option,
+    })
+  }
+  render() {
+    return (
+      <div
+        className={styles.labels}
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'flex-start',
+        }}>
+        <div className={styles.labelContainer}>
+          <label>
+            Wpm
+            <input
+              type="radio"
+              value="Wpm"
+              checked={this.state.selectedOption === 'Wpm'}
+              onChange={this.toggleRadioCheck}></input>
+          </label>
+          <label>
+            Accuracy
+            <input
+              type="radio"
+              value="Accuracy"
+              checked={this.state.selectedOption === 'Accuracy'}
+              onChange={this.toggleRadioCheck}></input>
+          </label>
         </div>
-      ))}
-    </div>
-  )
+      </div>
+    )
+  }
 }
diff --git a/src/components/dashboard/components/paragraphsCard.jsx b/src/components/dashboard/components/paragraphsCard.jsx
@@ -1,11 +1,9 @@
 import React from 'react'
 import NestedDonutChart from '../../common/charts/nestedDonutChart'
-import Labels from './labels'
 import Dropdown from './dropdown'
 import styles from './paragraphsCard.module.css'
 
-const labelOrientation = 'vertical',
-  dropdownData = ['All Time', 'Weekly', 'Monthly'],
+const dropdownData = ['All Time', 'Weekly', 'Monthly'],
   labelData = [
     {
       title: 'Total',
@@ -30,7 +28,21 @@ export default function ParagraphsCard() {
       </div>
       <div className={styles.chartSection}>
         <NestedDonutChart />
-        <Labels data={labelData} orientation={labelOrientation} />
+        <div
+          style={{
+            flexDirection: 'column',
+            justifyContent: 'flex-end',
+          }}>
+          {labelData.map((label, i) => (
+            <div key={i} className={styles.labelContainer}>
+              <div
+                className={styles.label}
+                style={{ background: label.color }}
+              />
+              <p className={styles.labelText}>{label.title}</p>
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   )

diff --git a/src/components/dashboard/components/paragraphsCard.module.css b/src/components/dashboard/components/paragraphsCard.module.css
@@ -29,3 +29,24 @@
   flex-direction: row;
   margin: 1.5rem 0;
 }
+.labels {
+  display: flex;
+  flex-direction: row;
+}
+
+.labelContainer {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+}
+
+.label {
+  width: 10px;
+  height: 10px;
+  background: #ffab00;
+  border-radius: 50%;
+}
+
+.labelText {
+  margin-left: 10px;
+}
diff --git a/src/components/dashboard/components/progressCard.jsx b/src/components/dashboard/components/progressCard.jsx
@@ -5,18 +5,17 @@ import Button from './button'
 import Dropdown from './dropdown'
 import Labels from './labels'
 
-const labelOrientation = 'horizontal',
-  dropdownOptions = ['All', 'Practise', 'Arena'],
-  labelData = [
-    {
-      title: 'WPM',
-      color: '#F0A500',
-    },
-    {
-      title: 'Accuracy',
-      color: '#EC486F',
-    },
-  ]
+const dropdownOptions = ['All', 'Practise', 'Arena']
+// labelData = [
+//   {
+//     title: 'WPM',
+//     color: '#F0A500',
+//   },
+//   {
+//     title: 'Accuracy',
+//     color: '#EC486F',
+//   },
+// ]
 
 export default class ProgressCard extends Component {
   state = {
@@ -61,7 +60,7 @@ export default class ProgressCard extends Component {
       <div className={styles.card}>
         <div className={styles.header}>
           <Dropdown data={dropdownOptions} size="medium" />
-          <Labels data={labelData} orientation={labelOrientation} />
+          <Labels />
         </div>
         <div className={styles.chartContainer}>
           <LineChart width={870} height={300} />

diff --git a/src/components/loginSignup/login.jsx b/src/components/loginSignup/login.jsx
@@ -4,10 +4,10 @@ import { navigate } from '@reach/router'
 import { setAuthToken } from '../../helpers/storage'
 import Para from './bgpara'
 import Logo from '../../images/Keyboard.png'
+import GoogleButton from '../common/ui/googeButton'
 import ButtonWithLoader from '../common/ui/button-with-loader'
 import './loginsignup.css'
 import { gapi } from 'gapi-script'
-// import authenticate from './gapi'
 
 export default class Login extends Component {
   state = {
@@ -21,10 +21,6 @@ export default class Login extends Component {
     userId: '',
   }
 
-  // componentDidMount() {
-  //   this.onSignIn()
-  // }
-
   handleInput = (stateName) => (e) => {
     e.preventDefault()
     this.setState({
@@ -119,24 +115,23 @@ export default class Login extends Component {
 
       // Sign the user in, and then retrieve their ID.
       auth2.signIn().then((googleUser) => {
-        console.log('chcek')
-        console.log(googleUser)
         this.displayGoogelUser(googleUser)
       })
     })
   }
 
   displayGoogelUser = async (googleUser) => {
     if (googleUser) {
-      var profile = googleUser.getBasicProfile()
-      console.log('ID: ' + profile.getId()) // Don't send this directly to your server!
-      console.log('Full Name: ' + profile.getName())
-      console.log('Given Name: ' + profile.getGivenName())
-      console.log('Family Name: ' + profile.getFamilyName())
-      console.log('Image URL: ' + profile.getImageUrl())
-      console.log('Email: ' + profile.getEmail())
+      // var profile = googleUser.getBasicProfile()
+      //do not remove this comment will use it for ref
+      // console.log('ID: ' + profile.getId()) // Don't send this directly to your server!
+      // console.log('Full Name: ' + profile.getName())
+      // console.log('Given Name: ' + profile.getGivenName())
+      // console.log('Family Name: ' + profile.getFamilyName())
+      // console.log('Image URL: ' + profile.getImageUrl())
+      // console.log('Email: ' + profile.getEmail())
       var id_token = googleUser.getAuthResponse().id_token
-      console.log(id_token)
+
       let obj = {
         token: id_token,
       }
@@ -207,19 +202,18 @@ export default class Login extends Component {
                 onClick={this.submitForm}>
                 Login
               </ButtonWithLoader>
-              <div className="googleBtn">
-                <button onClick={this.onSignIn} data-theme="dark">
-                  Sign in with google
-                </button>
-              </div>
+
+              <div style={{ margin: '10px auto' }}>Or </div>
+              <GoogleButton
+                onClick={this.onSignIn}
+                textLabel="Sign In With Google"></GoogleButton>
             </div>
             <div className="signupdiv">
               New Here? &nbsp;
               <span className="signup" onClick={this.navigateToSignup}>
                 Signup
               </span>
             </div>
-
           </div>
         </div>
       </div>

diff --git a/src/components/loginSignup/loginsignup.css b/src/components/loginSignup/loginsignup.css
@@ -108,7 +108,7 @@
   border-color: red;
   border-style: dashed;
 }
-.txtboxRed { 
+.txtboxRed {
   border-color: red;
   border-style: dashed;
 }
@@ -168,6 +168,43 @@
   text-decoration-color: '#f0a500';
 }
 
+#customBtn {
+  margin: 10px auto;
+  background: white;
+  color: #444;
+  width: 190px;
+  border-radius: 5px;
+  border: thin solid #888;
+  box-shadow: 1px 1px 1px grey;
+  white-space: nowrap;
+}
+#customBtn:hover {
+  cursor: pointer;
+}
+span.icon {
+  /* background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat; */
+  display: inline-block;
+  vertical-align: middle;
+  width: 42px;
+  height: 42px;
+}
+
+.googleLogo {
+  width: 80%;
+  position: relative;
+  top: 9%;
+}
+
+span.buttonText {
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 7px;
+  padding-right: 42px;
+  font-size: 14px;
+  font-weight: bold;
+  /* Use the Roboto font that is loaded in the <head> */
+}
+
 /* .signupBtn {
   font-family: 'DM Sans', sans-serif !important;
   font-style: normal;