ui improvised

src/App.js

@@ -1,19 +1,23 @@
-import React, { Component } from 'react';
-import axios from 'axios';
+import React, { Component } from "react";
+import axios from "axios";
 // import custom components
-import Profile from './Components/Profile/Profile';
-import Footer from './Components/Footer/Footer';
+import Profile from "./Components/Profile/Profile";
+import Footer from "./Components/Footer/Footer";
 // import material-ui components
-import { TextField, Button, CircularProgress as Loader } from '@material-ui/core';
+import {
+  TextField,
+  Button,
+  CircularProgress as Loader
+} from "@material-ui/core";
 
 class App extends Component {
   state = {
-    username: '',
-    image: '',
+    username: "",
+    image: "",
     searched: false,
     repos: [],
     loading: false
-  }
+  };
 
   onFormSubmit = (e) => {
     e.preventDefault();
@@ -24,38 +28,39 @@ class App extends Component {
 
     var avatar_url;
 
-    axios.get(`https://api.github.com/users/${this.state.username}`)
-    .then(res => {
-      avatar_url = res.data.avatar_url;
-      return axios.get(res.data.repos_url);
-    })
-    .then(res => {
-      this.setState({
-        loading: false,
-        repos: res.data,
-        image: avatar_url,
-        searched: true
-      });
-    })
-    .catch(() => {
-      this.setState({
-        loading: false
+    axios
+      .get(`https://api.github.com/users/${this.state.username}`)
+      .then((res) => {
+        avatar_url = res.data.avatar_url;
+        return axios.get(res.data.repos_url);
+      })
+      .then((res) => {
+        this.setState({
+          loading: false,
+          repos: res.data,
+          image: avatar_url,
+          searched: true
+        });
+      })
+      .catch(() => {
+        this.setState({
+          loading: false
+        });
       });
-    });
-  }
+  };
 
-  onUsernameChange = e => {
+  onUsernameChange = (e) => {
     this.setState({
       searched: false,
       username: e.target.value
     });
-  }
+  };
 
   render() {
     return (
       <div className="App">
         <div className="formContainer">
-          <h1 style={{ marginTop: 0 }}>{ process.env.REACT_APP_NAME }</h1>
+          <h1>Github Search Engine</h1>
           <form
             style={{ alignItems: "flex-end", display: "flex" }}
             onSubmit={this.onFormSubmit}
@@ -69,26 +74,21 @@ class App extends Component {
             <Button type="submit">Search</Button>
           </form>
 
-          {
-            this.state.loading
-              ? <Loader style={{ display: "block", margin: "15px auto" }} />
-              : null
-          }
+          {this.state.loading ? (
+            <Loader style={{ display: "block", margin: "15px auto" }} />
+          ) : null}
 
-          {
-            this.state.searched
-              && (
-                <Profile
-                  username={this.state.username}
-                  image={this.state.image}
-                  repos={this.state.repos}
-                />
-              )
-          }
+          {this.state.searched && (
+            <Profile
+              username={this.state.username}
+              image={this.state.image}
+              repos={this.state.repos}
+            />
+          )}
         </div>
         <Footer />
       </div>
-    )
+    );
   }
 }
 

src/Components/Footer/Footer.css

@@ -1,3 +1,8 @@
 .footer {
   text-align: center;
-}
+  color: #dddddd;
+}
+.footer a {
+  text-decoration: none;
+  color: #333;
+}

src/Components/Profile/Profile.js

@@ -1,29 +1,27 @@
-import React from 'react';
+import React from "react";
 // import material-ui components
-import { List, ListItem, ListItemText } from '@material-ui/core';
+import { List, ListItem, ListItemText } from "@material-ui/core";
 
 export default function Profile(props) {
   return (
     <div className="profile">
       <img src={props.image} alt={`Profile of ${props.username}`} />
       <h2>{props.username}</h2>
-      <List>
-        {
-          props.repos.map((repo, key) => {
-            return (
-              <ListItem
-                button
-                component="a"
-                href={repo.html_url}
-                target="__blank"
-                key={key}
-              >
-                <ListItemText primary={repo.name} />
-              </ListItem>
-            )
-          })
-        }
+      <List style={{ overflow: "scroll", maxHeight: "" }}>
+        {props.repos.map((repo, key) => {
+          return (
+            <ListItem
+              button
+              component="a"
+              href={repo.html_url}
+              target="__blank"
+              key={key}
+            >
+              <ListItemText primary={repo.name} />
+            </ListItem>
+          );
+        })}
       </List>
     </div>
-  )
+  );
 }

src/index.css

@@ -1,33 +1,52 @@
-html, body {
+html,
+body {
   margin: 0;
   padding: 0;
 }
 
 html {
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
 }
 
 .App {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background-color: #78909C;
+  background-color: #78c4d4;
   align-items: center;
   justify-content: center;
 }
 
 .App .formContainer {
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   padding: 15px;
+  max-height: 90vh;
+  border-radius: 5px;
+  overflow: auto;
+}
+.formContainer h1 {
+  color: #333;
+  margin-top: 0;
+}
+::-webkit-scrollbar {
+  width: 10px;
+}
+::-webkit-scrollbar-thumb {
+  background: #333;
+}
+.profileContainer {
+  height: 10px;
 }
-
 .profile {
   text-align: center;
   margin-top: 15px;
 }
+.profile h2 {
+  color: #333;
+}
 
 .profile img {
   max-width: 150px;
   border-radius: 100%;
   border: 1px solid #838383;
-}
+}