From cf718b951057a8f6114a53c179dae6db5361a6bd Mon Sep 17 00:00:00 2001
From: dislersd <dislersd@gmail.com>
Date: Thu, 14 Mar 2019 15:16:24 -0700
Subject: [PATCH 1/4] added alerts to let users know they are registered

---
 github-user-breakdown/src/auth/LoginPage.js  | 36 ++++++++++++++------
 github-user-breakdown/src/components/User.js |  7 +---
 github-user-breakdown/src/reducers/index.js  |  7 ++--
 3 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/github-user-breakdown/src/auth/LoginPage.js b/github-user-breakdown/src/auth/LoginPage.js
index ed58f67..4efc80d 100644
--- a/github-user-breakdown/src/auth/LoginPage.js
+++ b/github-user-breakdown/src/auth/LoginPage.js
@@ -22,13 +22,27 @@ const Wrapper = 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;
+      }
     }
   }
 `;
@@ -59,10 +73,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 => {
@@ -73,7 +85,7 @@ class LoginPage extends React.Component {
   render() {
     return (
       <Wrapper>
-        <h1>Login To GitHub Users</h1>
+        <h1>GitHub User Breakdown</h1>
         <form>
           <input
             type="text"
@@ -103,16 +115,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(
diff --git a/github-user-breakdown/src/components/User.js b/github-user-breakdown/src/components/User.js
index de23492..5db3ff8 100644
--- a/github-user-breakdown/src/components/User.js
+++ b/github-user-breakdown/src/components/User.js
@@ -2,15 +2,10 @@ import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { getUserSummary, getUserDetailed } from "../actions";
 import styled from "styled-components";
-import { VictoryPie, VictoryChart, VictoryBar } from "victory";
+import { VictoryPie } from "victory";
 import Hours from "./Hours";
 import Days from "./Days";
 
-const DaysBarGraph = styled.div`
-  width: 500px;
-  height: auto;
-`;
-
 const UserWrapper = styled.div`
   max-width: 400px;
   margin: 20px auto;
diff --git a/github-user-breakdown/src/reducers/index.js b/github-user-breakdown/src/reducers/index.js
index 9f5d47a..62e34ad 100644
--- a/github-user-breakdown/src/reducers/index.js
+++ b/github-user-breakdown/src/reducers/index.js
@@ -23,6 +23,7 @@ export const initialState = {
   userDetailed: [],
   fetching: false,
   registering: false,
+  registerSuccess: false,
   loggingIn: false,
   token: localStorage.getItem("token"),
   error: null
@@ -41,7 +42,8 @@ const reducer = (state = initialState, action) => {
         ...state,
         error: null,
         token: action.payload,
-        registering: false
+        registering: false,
+        registerSuccess: true
       };
     case REGISTER_FAIL:
       return {
@@ -53,7 +55,8 @@ const reducer = (state = initialState, action) => {
       return {
         ...state,
         error: null,
-        loggingIn: true
+        loggingIn: true,
+        registerSuccess: false
       };
     case LOGIN_SUCCESS:
       return {

From 7b8938a2c52cbee79493ff498d776b62f8a51065 Mon Sep 17 00:00:00 2001
From: dislersd <dislersd@gmail.com>
Date: Thu, 14 Mar 2019 15:58:32 -0700
Subject: [PATCH 2/4] adding style

---
 .../src/components/GithubUsers.js             | 37 +++++++++++++------
 github-user-breakdown/src/components/User.js  | 36 ++++++++++--------
 2 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/github-user-breakdown/src/components/GithubUsers.js b/github-user-breakdown/src/components/GithubUsers.js
index 84daa77..ec6dde1 100644
--- a/github-user-breakdown/src/components/GithubUsers.js
+++ b/github-user-breakdown/src/components/GithubUsers.js
@@ -3,6 +3,7 @@ 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``;
 
@@ -25,12 +26,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;
+      }
     }
   }
 `;
@@ -121,20 +136,21 @@ class GithubUsers extends React.Component {
             <button> search </button>
           </form>
         </FormWrapper>
-        <UserCardsContainer>
+
+        {this.props.fetching ? (<Loader type="TailSpin" color="black" height={80} width={80} />) :
+        (<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>
+                <button onClick={e => this.deleteUser(e, user.user)}>X</button>
                 <div> {user.user} </div>
                 <img src={user.avatar} alt="" />
                 <div>Repo Count: {user.repo_count} </div>
               </UserCard>
             </Link>
           ))}
-        </UserCardsContainer>
+        </UserCardsContainer>)
+        }
       </PageWrapper>
     );
   }
@@ -142,7 +158,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 +178,3 @@ export default connect(
 //     </Link>
 //   ))
 // )}
-
-
diff --git a/github-user-breakdown/src/components/User.js b/github-user-breakdown/src/components/User.js
index 8183e36..354e998 100644
--- a/github-user-breakdown/src/components/User.js
+++ b/github-user-breakdown/src/components/User.js
@@ -5,32 +5,34 @@ import styled from "styled-components";
 import { VictoryPie } from "victory";
 import Hours from "./Hours";
 import Days from "./Days";
+import Loader from "react-loader-spinner";
 
 const UserWrapper = styled.div`
-  max-width: 400px;
+  width: 100%;
   margin: 20px auto;
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 2px solid black;
   img {
     max-width: 200px;
+    max-height: 200px;
+    border-radius: 50%;
+  }
+
+  h2 {
+    font-size: 30px
+    color: #2f323a;
   }
 `;
 const Languages = styled.div`
   border: 2px solid black;
-  max-width: 80%;
+  max-width: 50%;
   margin: 20px auto;
   padding: 50px;
 `;
 
-// const barData = [
-//   {weekDay: 'Mon', commits: 16},
-//   {weekDay: 'Tue', commits: 5},
-//   {weekDay: 'Wed', commits: 7},
-//   {weekDay: 'Thu', commits: 8},
-//   {weekDay: 'Fri', commits: 19},
-//   {weekDay: 'Sat', commits: 0},
-//   {weekDay: 'Sun', commits: 19},
-// ];
 
 const User = props => {
   const username = props.match.params.user;
@@ -55,19 +57,21 @@ const User = props => {
   return (
     <>
       <UserWrapper>
-        {user.user}
         <img src={user.avatar} alt="" />
+        <h2>{user.user}</h2>
+
       </UserWrapper>
 
       {props.summary.length === 0 ? (
-        <div> Loading.. </div>
+        <Loader type="TailSpin" color="black" height={80} width={80} />
       ) : (
         <Languages>
           Languages Used
           <hr />
           <VictoryPie
+            innerRadius={100}
             width={500}
-            colorScale={["#9f86ff", "#9ca4b6", "#5933f0", "purple", "navy"]}
+            colorScale={["#9f86ff", "#9ca4b6", "#5933f0", "purple", "navy", "coral", "#fae"]}
             data={data}
           />
         </Languages>
@@ -75,7 +79,7 @@ const User = props => {
       {/*  */}
       <div>
         {props.detailed.length === 0 ? (
-          <div> Loading.. </div>
+          <Loader type="TailSpin" color="black" height={80} width={80} />
         ) : (
           <Hours hours={props.detailed.hour} />
         )}
@@ -83,7 +87,7 @@ const User = props => {
       {/*  */}
       <div>
         {props.detailed.length === 0 ? (
-          <div> Loading.. </div>
+          <Loader type="TailSpin" color="black" height={80} width={80} />
         ) : (
           <Days days={props.detailed.day} />
         )}

From 479a17f84cecf161b7c2ada0e124e418533085c0 Mon Sep 17 00:00:00 2001
From: dislersd <dislersd@gmail.com>
Date: Thu, 14 Mar 2019 20:07:18 -0700
Subject: [PATCH 3/4] changed body background color - box shadow on user cards
 - animated bar graph

---
 github-user-breakdown/src/auth/LoginPage.js   |  4 +-
 github-user-breakdown/src/components/Days.js  |  2 +-
 .../src/components/GithubUsers.js             | 11 ++--
 github-user-breakdown/src/components/Hours.js | 54 ++++++++++++-------
 github-user-breakdown/src/components/User.js  |  8 ++-
 github-user-breakdown/src/css/index.css       |  1 +
 6 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/github-user-breakdown/src/auth/LoginPage.js b/github-user-breakdown/src/auth/LoginPage.js
index 46f0a61..0764148 100644
--- a/github-user-breakdown/src/auth/LoginPage.js
+++ b/github-user-breakdown/src/auth/LoginPage.js
@@ -10,10 +10,10 @@ 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;
diff --git a/github-user-breakdown/src/components/Days.js b/github-user-breakdown/src/components/Days.js
index 19fb03d..105b2fb 100644
--- a/github-user-breakdown/src/components/Days.js
+++ b/github-user-breakdown/src/components/Days.js
@@ -8,7 +8,7 @@ const Days = props => {
   return (
     <div className="Hour">
       Commits per day
-      <VictoryChart domainPadding={20}>
+      <VictoryChart domainPadding={10}>
         <VictoryBar data={results} />
       </VictoryChart>
     </div>
diff --git a/github-user-breakdown/src/components/GithubUsers.js b/github-user-breakdown/src/components/GithubUsers.js
index ec6dde1..be26013 100644
--- a/github-user-breakdown/src/components/GithubUsers.js
+++ b/github-user-breakdown/src/components/GithubUsers.js
@@ -13,7 +13,6 @@ const FormWrapper = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  border: 2px solid black;
   max-width: 300px;
   margin: 20px auto;
   padding: 30px;
@@ -57,6 +56,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;
@@ -85,9 +86,8 @@ 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;
@@ -95,9 +95,10 @@ const UserCardsContainer = styled.div`
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    transition: all .3s ease;
 
     &:hover {
-      box-shadow: 0 2px 10px black;
+      box-shadow: 0px 0px 50px 10px #9f86ff;
     }
   }
 `;
@@ -143,8 +144,8 @@ class GithubUsers extends React.Component {
             <Link to={`/github-users/${user.user}`} key={user.user}>
               <UserCard>
                 <button onClick={e => this.deleteUser(e, user.user)}>X</button>
-                <div> {user.user} </div>
                 <img src={user.avatar} alt="" />
+                <div> {user.user} </div>
                 <div>Repo Count: {user.repo_count} </div>
               </UserCard>
             </Link>
diff --git a/github-user-breakdown/src/components/Hours.js b/github-user-breakdown/src/components/Hours.js
index d52fe82..9937a96 100644
--- a/github-user-breakdown/src/components/Hours.js
+++ b/github-user-breakdown/src/components/Hours.js
@@ -1,24 +1,40 @@
 import React from "react";
-import {
-    VictoryChart,
-    VictoryBar
-} from "victory";
+import { VictoryChart, VictoryBar, VictoryTheme } 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">
+      Commits per hour
+      <VictoryChart 
+      domainPadding={10}
+      	animate={{ duration: 2000 }}
+          >
+      
+        <VictoryBar 
+        style={{
+            data: { fill: "#f8f8f8", width: 12 }
+          }}
+        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;
\ No newline at end of file
+export default Hours;
diff --git a/github-user-breakdown/src/components/User.js b/github-user-breakdown/src/components/User.js
index 354e998..0c8efaa 100644
--- a/github-user-breakdown/src/components/User.js
+++ b/github-user-breakdown/src/components/User.js
@@ -23,7 +23,7 @@ const UserWrapper = styled.div`
 
   h2 {
     font-size: 30px
-    color: #2f323a;
+    color: #f8f8f8;
   }
 `;
 const Languages = styled.div`
@@ -31,6 +31,8 @@ const Languages = styled.div`
   max-width: 50%;
   margin: 20px auto;
   padding: 50px;
+  background-color: #f8f8f8;
+  tex-align: center;
 `;
 
 
@@ -66,7 +68,9 @@ const User = props => {
         <Loader type="TailSpin" color="black" height={80} width={80} />
       ) : (
         <Languages>
-          Languages Used
+          <h2>
+            Languages Used
+          </h2>
           <hr />
           <VictoryPie
             innerRadius={100}
diff --git a/github-user-breakdown/src/css/index.css b/github-user-breakdown/src/css/index.css
index cee5f34..91b387a 100644
--- a/github-user-breakdown/src/css/index.css
+++ b/github-user-breakdown/src/css/index.css
@@ -6,6 +6,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #2f323a;
 }
 
 code {

From 548ed03b36c2e0bfc8155b9daaced093c367fce6 Mon Sep 17 00:00:00 2001
From: dislersd <dislersd@gmail.com>
Date: Fri, 15 Mar 2019 07:47:01 -0700
Subject: [PATCH 4/4] added navbar and more style

---
 github-user-breakdown/src/components/Days.js  |  32 ++++-
 .../src/components/GithubUsers.js             |  48 ++++++-
 github-user-breakdown/src/components/Hours.js |  35 +++--
 github-user-breakdown/src/components/User.js  | 125 ++++++++++++------
 4 files changed, 177 insertions(+), 63 deletions(-)

diff --git a/github-user-breakdown/src/components/Days.js b/github-user-breakdown/src/components/Days.js
index 105b2fb..75e64c9 100644
--- a/github-user-breakdown/src/components/Days.js
+++ b/github-user-breakdown/src/components/Days.js
@@ -7,13 +7,37 @@ const Days = props => {
 
   return (
     <div className="Hour">
-      Commits per day
-      <VictoryChart domainPadding={10}>
-        <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;
-
diff --git a/github-user-breakdown/src/components/GithubUsers.js b/github-user-breakdown/src/components/GithubUsers.js
index be26013..460bda9 100644
--- a/github-user-breakdown/src/components/GithubUsers.js
+++ b/github-user-breakdown/src/components/GithubUsers.js
@@ -7,6 +7,30 @@ 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;
@@ -95,7 +119,7 @@ const UserCardsContainer = styled.div`
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    transition: all .3s ease;
+    transition: all 0.3s ease;
 
     &:hover {
       box-shadow: 0px 0px 50px 10px #9f86ff;
@@ -125,6 +149,9 @@ class GithubUsers extends React.Component {
   render() {
     return (
       <PageWrapper>
+        <Nav>
+          <Link to="/">Logout</Link>
+        </Nav>
         <FormWrapper>
           <form onSubmit={this.handleSubmit}>
             <input
@@ -134,12 +161,22 @@ 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>
 
-        {this.props.fetching ? (<Loader type="TailSpin" color="black" height={80} width={80} />) :
-        (<UserCardsContainer>
+        <UserCardsContainer>
           {this.props.users.map(user => (
             <Link to={`/github-users/${user.user}`} key={user.user}>
               <UserCard>
@@ -150,8 +187,7 @@ class GithubUsers extends React.Component {
               </UserCard>
             </Link>
           ))}
-        </UserCardsContainer>)
-        }
+        </UserCardsContainer>
       </PageWrapper>
     );
   }
diff --git a/github-user-breakdown/src/components/Hours.js b/github-user-breakdown/src/components/Hours.js
index 9937a96..db80951 100644
--- a/github-user-breakdown/src/components/Hours.js
+++ b/github-user-breakdown/src/components/Hours.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { VictoryChart, VictoryBar, VictoryTheme } from "victory";
+import { VictoryChart, VictoryBar } from "victory";
 
 const Hours = props => {
   let results = [];
@@ -9,18 +9,25 @@ const Hours = props => {
 
   return (
     <div className="Hour">
-      Commits per hour
-      <VictoryChart 
-      domainPadding={10}
-      	animate={{ duration: 2000 }}
-          >
-      
-        <VictoryBar 
+      <h2>
+        Commits per hour
+      </h2>
+      <hr/>
+      <VictoryChart
         style={{
-            data: { fill: "#f8f8f8", width: 12 }
-          }}
-        data={results}
-        animate={{
+          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 })
@@ -28,10 +35,10 @@ const Hours = props => {
             onEnter: {
               duration: 500,
               before: () => ({ opacity: 0.3, _y: 0 }),
-              after: (datum) => ({ opacity: 1, _y: datum._y })
+              after: datum => ({ opacity: 1, _y: datum._y })
             }
           }}
-         />
+        />
       </VictoryChart>
     </div>
   );
diff --git a/github-user-breakdown/src/components/User.js b/github-user-breakdown/src/components/User.js
index 0c8efaa..b89e0dd 100644
--- a/github-user-breakdown/src/components/User.js
+++ b/github-user-breakdown/src/components/User.js
@@ -6,36 +6,72 @@ import { VictoryPie } from "victory";
 import Hours from "./Hours";
 import Days from "./Days";
 import Loader from "react-loader-spinner";
+import { Link } from "react-router-dom";
+
+const Nav = styled.div`
+  background-color: #dedfe0;
+  height: 50px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+
+  a {
+    font-size: 20px;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: #2f323a;
+    transition: all 0.1s ease;
+    cursor: pointer;
+    margin-left: 40px;
+    text-decoration: none;
+
+    &:hover {
+      color: #9f86ff;
+    }
+  }
+`;
+
+const PageWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+const Stats = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #f8f8f8;
+`;
 
 const UserWrapper = styled.div`
   width: 100%;
-  margin: 20px auto;
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   border-bottom: 2px solid black;
+  background-color: #dedfe0;
   img {
-    max-width: 200px;
-    max-height: 200px;
+    margin-top: 20px;
+    max-width:100px;
+    max-height:100px;
     border-radius: 50%;
   }
 
   h2 {
     font-size: 30px
-    color: #f8f8f8;
+    color: black;
   }
 `;
 const Languages = styled.div`
-  border: 2px solid black;
   max-width: 50%;
   margin: 20px auto;
   padding: 50px;
-  background-color: #f8f8f8;
   tex-align: center;
 `;
 
-
 const User = props => {
   const username = props.match.params.user;
   let user = props.users.filter(user => user.user === username)[0];
@@ -57,46 +93,57 @@ const User = props => {
   }
 
   return (
-    <>
+    <PageWrapper>
       <UserWrapper>
+        <Nav>
+          <Link to="/">Logout</Link>
+          <Link to="/github-users"> User Search </Link>
+        </Nav>
         <img src={user.avatar} alt="" />
         <h2>{user.user}</h2>
-
       </UserWrapper>
 
-      {props.summary.length === 0 ? (
-        <Loader type="TailSpin" color="black" height={80} width={80} />
-      ) : (
-        <Languages>
-          <h2>
-            Languages Used
-          </h2>
-          <hr />
-          <VictoryPie
-            innerRadius={100}
-            width={500}
-            colorScale={["#9f86ff", "#9ca4b6", "#5933f0", "purple", "navy", "coral", "#fae"]}
-            data={data}
-          />
-        </Languages>
-      )}
-      {/*  */}
-      <div>
-        {props.detailed.length === 0 ? (
+      <Stats>
+        {props.summary.length === 0 ? (
           <Loader type="TailSpin" color="black" height={80} width={80} />
         ) : (
-          <Hours hours={props.detailed.hour} />
+          <Languages>
+            <h2>Languages Used</h2>
+            <hr />
+            <VictoryPie
+              innerRadius={100}
+              width={500}
+              colorScale={[
+                "#9f86ff",
+                "#9ca4b6",
+                "#5933f0",
+                "purple",
+                "navy",
+                "coral",
+                "#fae"
+              ]}
+              data={data}
+            />
+          </Languages>
         )}
-      </div>
-      {/*  */}
-      <div>
-        {props.detailed.length === 0 ? (
-          <Loader type="TailSpin" color="black" height={80} width={80} />
-        ) : (
-          <Days days={props.detailed.day} />
-        )}
-      </div>
-    </>
+        {/*  */}
+        <Languages>
+          {props.detailed.length === 0 ? (
+            <Loader type="TailSpin" color="black" height={80} width={80} />
+          ) : (
+            <Hours hours={props.detailed.hour} />
+          )}
+        </Languages>
+        {/*  */}
+        <Languages>
+          {props.detailed.length === 0 ? (
+            <Loader type="TailSpin" color="black" height={80} width={80} />
+          ) : (
+            <Days days={props.detailed.day} />
+          )}
+        </Languages>
+      </Stats>
+    </PageWrapper>
   );
 };