pull

github-user-breakdown/src/auth/LoginPage.js

@@ -10,22 +10,36 @@ const Wrapper = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  border: 2px solid black;
   max-width: 300px;
-  margin: 20px auto;
+  margin: 100px auto;
   padding: 30px;
+  background-color: #f8f8f8;
   form {
     display: flex;
     flex-direction: column;
     input {
       margin: 10px 0;
       font-size: 18px;
+      border-radius: 5px;
+      border: 2px solid #9f86ff;
     }
     button {
-      margin: 10px 0;
-      border: none;
-      background-color: #9f86ff;
+      border: 0;
+      padding: 5px 0;
+      font-size: 20px;
+      font-weight: bold;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      background: #9f86ff;
+      color: white;
+      transition: all.5s ease;
+      margin-top: 20px;
+      border-radius: 5px;
       cursor: pointer;
+
+      &:hover {
+        background: #5933f0;
+      }
     }
   }
 `;
@@ -56,10 +70,8 @@ class LoginPage extends React.Component {
 
   login = e => {
     e.preventDefault();
-    this.props
-    .login(this.state.credentials);
-    setTimeout(() => this.props.history.push('/github-users'), 1000);
-
+    this.props.login(this.state.credentials);
+    setTimeout(() => this.props.history.push("/github-users"), 1000);
   };
 
   register = e => {
@@ -70,7 +82,7 @@ class LoginPage extends React.Component {
   render() {
     return (
       <Wrapper>
-        <h1>Login To GitHub Users</h1>
+        <h1>GitHub User Breakdown</h1>
         <form>
           <input
             type="text"
@@ -100,16 +112,20 @@ class LoginPage extends React.Component {
               "Sign Up"
             )}
           </button>
+          <p>No account? Enter an email and password then click the sign up button</p>
         </form>
+
+        {this.props.registerSuccess ? alert('Successfully registered... go ahead and log in') : <div></div> }
       </Wrapper>
     );
   }
 }
 
-const mapStateToProps = ({ error, loggingIn, registering }) => ({
+const mapStateToProps = ({ error, loggingIn, registering, registerSuccess }) => ({
   error,
   loggingIn,
-  registering
+  registering,
+  registerSuccess
 });
 
 export default connect(

github-user-breakdown/src/components/Days.js

@@ -7,13 +7,37 @@ const Days = props => {
 
   return (
     <div className="Hour">
-      Commits per day
-      <VictoryChart domainPadding={20}>
-        <VictoryBar data={results} />
+      <h2>Commits per day</h2>
+      <hr />
+      <VictoryChart
+        style={{
+          axis: {
+            fill: "transparent",
+            stroke: "#f8f8f8",
+            strokeWidth: 1
+          }
+        }}
+        domainPadding={10}
+        animate={{ duration: 2000 }}
+      >
+        <VictoryBar
+          style={{ data: { fill: "#9f86ff", stroke: "black", strokeWidth: 2 } }}
+          data={results}
+          animate={{
+            onExit: {
+              duration: 500,
+              before: () => ({ opacity: 0.3, _y: 0 })
+            },
+            onEnter: {
+              duration: 500,
+              before: () => ({ opacity: 0.3, _y: 0 }),
+              after: datum => ({ opacity: 1, _y: datum._y })
+            }
+          }}
+        />
       </VictoryChart>
     </div>
   );
 };
 
 export default Days;
-

github-user-breakdown/src/components/GithubUsers.js

@@ -3,16 +3,40 @@ import { connect } from "react-redux";
 import styled from "styled-components";
 import { getUserData, deleteUser } from "../actions";
 import { Link } from "react-router-dom";
+import Loader from "react-loader-spinner";
 
 const PageWrapper = styled.div``;
 
+const Nav = styled.div`
+  background-color: #dedfe0;
+  height: 50px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  a {
+    font-size: 20px;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: #2f323a;
+    transition: all .1s ease;
+    cursor: pointer;
+    margin-left: 40px;
+    text-decoration: none;
+
+    &:hover {
+      color: #9f86ff;
+    }
+  }
+`;
+
 const FormWrapper = styled.div`
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  border: 2px solid black;
   max-width: 300px;
   margin: 20px auto;
   padding: 30px;
@@ -25,12 +49,26 @@ const FormWrapper = styled.div`
     input {
       margin: 10px 0;
       font-size: 18px;
+      border-radius: 5px;
+      border: 2px solid #9f86ff;
     }
     button {
-      margin: 10px 0;
-      border: none;
-      background-color: #9f86ff;
+      border: 0;
+      padding: 5px 0;
+      font-size: 20px;
+      font-weight: bold;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      background: #9f86ff;
+      color: white;
+      transition: all.5s ease;
+      margin-top: 20px;
+      border-radius: 5px;
       cursor: pointer;
+
+      &:hover {
+        background: #5933f0;
+      }
     }
   }
 `;
@@ -42,6 +80,8 @@ const UserCard = styled.div`
   justify-content: center;
   align-items: center;
   padding: 10px;
+  background-color: #f8f8f8;
+  border-radius: 20px;
   button {
     border: none;
     background-color: #5933f0;
@@ -70,19 +110,19 @@ const UserCardsContainer = styled.div`
   flex-wrap: wrap;
   a {
     width: 180px;
-    border: 2px solid black;
     border-radius: 10px;
-    margin: 10px;
+    margin: 18px;
     font-size: 18px;
     text-decoration: none;
     color: black;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    transition: all 0.3s ease;
 
     &:hover {
-      box-shadow: 0 2px 10px black;
+      box-shadow: 0px 0px 50px 10px #9f86ff;
     }
   }
 `;
@@ -109,6 +149,9 @@ class GithubUsers extends React.Component {
   render() {
     return (
       <PageWrapper>
+        <Nav>
+          <Link to="/">Logout</Link>
+        </Nav>
         <FormWrapper>
           <form onSubmit={this.handleSubmit}>
             <input
@@ -118,18 +161,28 @@ class GithubUsers extends React.Component {
               onChange={this.handleChange}
               placeholder="search for user..."
             />
-            <button> search </button>
+            <button>
+              {this.props.fetching ? (
+                <Loader
+                  type="ThreeDots"
+                  color="#1f2a38"
+                  height="12"
+                  width="26"
+                />
+              ) : (
+                "search "
+              )}
+            </button>
           </form>
         </FormWrapper>
+
         <UserCardsContainer>
           {this.props.users.map(user => (
             <Link to={`/github-users/${user.user}`} key={user.user}>
               <UserCard>
-                <button onClick={e => this.deleteUser(e, user.user)}>
-                  X
-                </button>
-                <div> {user.user} </div>
+                <button onClick={e => this.deleteUser(e, user.user)}>X</button>
                 <img src={user.avatar} alt="" />
+                <div> {user.user} </div>
                 <div>Repo Count: {user.repo_count} </div>
               </UserCard>
             </Link>
@@ -142,7 +195,8 @@ class GithubUsers extends React.Component {
 
 const mapStateToProps = state => ({
   users: state.users,
-  summary: state.userSummary
+  summary: state.userSummary,
+  fetching: state.fetching
 });
 
 export default connect(
@@ -161,5 +215,3 @@ export default connect(
 //     </Link>
 //   ))
 // )}
-
-

github-user-breakdown/src/components/Hours.js

@@ -1,24 +1,47 @@
 import React from "react";
-import {
-    VictoryChart,
-    VictoryBar
-} from "victory";
+import { VictoryChart, VictoryBar } from "victory";
 
 const Hours = props => {
+  let results = [];
+  Object.entries(props.hours).map(arr =>
+    results.push({ x: arr[0], y: arr[1] })
+  );
 
-    let results = [];
-    Object.entries(props.hours).map(arr => results.push({x: arr[0], y: arr[1]}))
+  return (
+    <div className="Hour">
+      <h2>
+        Commits per hour
+      </h2>
+      <hr/>
+      <VictoryChart
+        style={{
+          axis: {
+            fill: "transparent",
+            stroke: "#f8f8f8",
+            strokeWidth: 1
+          }
+        }}
+        domainPadding={10}
+        animate={{ duration: 2000 }}
+      >
+        <VictoryBar
+          style={{ data: { fill: "#9f86ff", stroke: "black", strokeWidth: 2 } }}
+          data={results}
+          animate={{
+            onExit: {
+              duration: 500,
+              before: () => ({ opacity: 0.3, _y: 0 })
+            },
+            onEnter: {
+              duration: 500,
+              before: () => ({ opacity: 0.3, _y: 0 }),
+              after: datum => ({ opacity: 1, _y: datum._y })
+            }
+          }}
+        />
+      </VictoryChart>
+    </div>
+  );
+};
 
-    return (
-        <div className="Hour">
-            Commits per hour
-            <VictoryChart>
-                <VictoryBar
-                    data={results}
-                />
-            </VictoryChart>
-        </div>
-    );
-}
-
-export default Hours;
+export default Hours;