Change avatar size Relates #4

tloth · May 31, 2019 · bdb3c9e · bdb3c9e
1 parent d86e977
commit bdb3c9e
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 28 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,10 +1,11 @@
 .App {
   text-align: center;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  width: 100vw;
-  height: 100vh;
+  width: calc(100vw-3em);
+  height: calc(100vh-3em);
+  padding: 3em;
 }
 
 .App-logo {
@@ -37,13 +38,29 @@
   }
 }
 
+.searchForm {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 10px;
+}
 .avatar {
+  height: 15em;
+}
+
+.avatarContainer {
   display: flex;
   flex-direction: column;
   height: 60vh;
+  width: 10vw;
+
   align-items: center;
 }
 
+.flower {
+  width: 3em;
+  height: 3em;
+}
 .left {
   height: 5em;
   width: 5em;

diff --git a/src/App.js b/src/App.js
@@ -17,10 +17,6 @@ function App() {
 
   return (
     <div className="App">
-       <SearchBar 
-        setUserData={setUserData1}
-        position='left'
-      />
       <FlowerPile
         flowerCount={flowerCount1}
         setFlowerCount={setFlowerCount1}
@@ -32,19 +28,15 @@ function App() {
         time={time1}
         setTime={setTime1}
         />
-      <Avatar 
-        userData={userData1}
-        position='left'
-      />
+
+      { !userData1 ? <SearchBar setUserData={setUserData1} position='left'/> 
+        : <Avatar userData={userData1} position='left'/>
+      }
 
-     <SearchBar 
-        setUserData={setUserData2}
-        position='right'
-      />
-      <Avatar 
-        userData={userData2}
-        position='right'
-      />
+     { !userData2 ? <SearchBar setUserData={setUserData2} position='right'/> 
+        : <Avatar userData={userData2} position='right'/>
+      }
+
       <TimeBar
         userData={userData2}
         time={time2}

diff --git a/src/components/Avatar.js b/src/components/Avatar.js
@@ -12,11 +12,11 @@ const Avatar = ({ userData, position }) => {
     const { avatar_url, login } = userData;
 
     return (
-        <div className="avatar">
+        <div className="avatarContainer">
             {/* <SearchBar /> */}
             <img className={position} src={avatar_url} alt="Flower Friend" />
             <div className="bodyAndFlower">
-            { position === 'left' ? <AvatarLeft /> : <AvatarRight /> }
+            { position === 'left' ? <AvatarLeft className="avatar"/> : <AvatarRight className="avatar"/> }
             {/* { position === 'left' ? <Flower1 className="handFlower1" /> : <Flower2 className="handFlower2" /> } */}
             </div>
             <h1>{login}</h1>

diff --git a/src/components/FlowerPile.js b/src/components/FlowerPile.js
@@ -19,8 +19,8 @@ const FlowerPile = ({ flowerCount, setFlowerCount, position, time}) => {
     }, [time, position, setFlowerCount]);
     return (
     <div>
-        {position === 'left' ? <Flower1 /> : <Flower2 />}
-        <h2>Flower count: {
+        {position === 'left' ? <Flower1 className='flower' /> : <Flower2 className='flower'/>}
+        <h2>FLOWER COUNT: {
             flowerCount
         }</h2>
     </div>

diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
@@ -14,8 +14,8 @@ const SearchBar = ({position, setUserData}) => {
     }
 
     return (
-    <form onSubmit={handleSubmit}>
-        <label htmlFor="username">Choose your flower friend</label>
+    <form className='searchForm' onSubmit={handleSubmit}>
+        <label htmlFor="username">CHOOSE YOUR FLOWER FRIEND, USER {position === 'left' ? 1 : 2}</label>
         <input
         id="username"
         className="searchbar_input"

diff --git a/src/components/TimeBar.js b/src/components/TimeBar.js
@@ -35,7 +35,7 @@ const TimeBar = ({ userData, time, setTime }) => {
     return (
     <div className='timeContainer'> 
         <button onClick={decrement}>CLICK ME</button> 
-        <p>Time: {time}</p>
+        <p>TIME: {time}</p>
         <InnerBar style={barStyle} className='innerBar' />
     </div>
          );

diff --git a/src/utils/getUser.js b/src/utils/getUser.js
@@ -1,4 +1,4 @@
-// import { token } from '../token';
+import { token } from '../token';
 
 const checkResponse = response => {
     if (response.status !== 200) {
@@ -10,7 +10,7 @@ const checkResponse = response => {
 
 export const getUserData = username => {
     let url = `https://api.github.com/users/${username}`;
-    // if (token) url = url.concat(`?access_token=${token}`);
+    if (token) url = url.concat(`?access_token=${token}`);
     console.log(url);
     return fetch(url)
             .then(checkResponse)