Adjust some hacktoberfest issues (#49)

globocom · Oct 11, 2019 · 9276d4a · 9276d4a
1 parent cf5e930
commit 9276d4a
Show file tree

Hide file tree

Showing 6 changed files with 240 additions and 101 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-<p align="center"><img src="src/logo.png"/></p>
+<p align="center"><img src="logo-README.png"/></p>
 
 <p align="center">
   <a href="https://github.com/globocom/huskyCI-dashboard/releases"><img src="https://img.shields.io/github/v/release/globocom/huskyCI-dashboard"/></a>

diff --git a/logo-README.png b/logo-README.png
diff --git a/src/components/TopBar.js b/src/components/TopBar.js
@@ -1,14 +1,14 @@
-import React, { Component } from 'react';
-import './TopBar.css';
-import logo from '../logo.png';
+import React, { Component } from "react";
+import "./TopBar.css";
+import logo from "../logo.png";
 
 class TopBar extends Component {
   constructor() {
     super();
     this.state = {
-      picture: 'https://avatars1.githubusercontent.com/u/83798?s=40&v=4',
-      name: 'huskyCI Dashboard',
-      username: 'huskyCI',
+      picture: "https://avatars1.githubusercontent.com/u/83798?s=40&v=4",
+      name: "huskyCI Dashboard",
+      username: "huskyCI",
     };
   }
 
@@ -23,20 +23,24 @@ class TopBar extends Component {
         <div className="menu-container" />
         <div className="user-container">
           <div className="user-info">
-            <div className="user-username">
-              {username}
-            </div>
-            <div className="user-name">
-              {name}
-            </div>
+            <div className="user-username">{username}</div>
+            <div className="user-name">{name}</div>
           </div>
           <div className="user-picture-container">
-            <img className="user-picture" src={picture} alt={`Profile of ${name}`} />
+            <img
+              className="user-picture"
+              src={picture}
+              alt={`Profile of ${name}`}
+            />
           </div>
-          <div class="user-menu">
+          <div className="user-menu">
             <ul>
-              <li><a href="#sign-out">Sign Out</a></li>
-              <li><a href="#profile">Profile</a></li>
+              <li>
+                <a href="#profile">Profile</a>
+              </li>
+              <li>
+                <a href="#sign-out">Sign Out</a>
+              </li>
             </ul>
           </div>
         </div>

diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
@@ -4,18 +4,17 @@ Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 */
 
-import React from 'react';
-import Dashboard from './../components/Dashboard';
-import logo from './../logo.png';
+import React from "react";
+import Dashboard from "../components/Dashboard";
+import TopBar from "../components/TopBar";
 
-const DashboardPage = () =>
+const DashboardPage = () => (
   <div className="App">
-    <header className="App-header">
-      <img src={logo} className="App-logo" alt="logo" />
-    </header>
+    <TopBar />
     <div>
       <Dashboard />
     </div>
   </div>
+);
 
-export default DashboardPage
+export default DashboardPage;
diff --git a/src/pages/Login.js b/src/pages/Login.js
@@ -4,82 +4,96 @@ Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 */
 
-import React, { Component } from 'react';
-import LoginButton from '../components/LoginButton';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faGitlab, faGithub } from '@fortawesome/free-brands-svg-icons';
-import logo from './../logo.png';
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGitlab, faGithub } from "@fortawesome/free-brands-svg-icons";
+import LoginButton from "../components/LoginButton";
+import logo from "../logo.png";
 
-const colorBackground = '#171515';
-const colorBackgroundBox = '#3d4572';
+const colorBackground = "black";
+const colorBackgroundBox = "gray";
 
 const boxSizeWidth = 400;
 const boxSizeHeight = 260;
 
-export default class Login extends Component {
-  render() {
-    return (
-      <div style={{ 
-        margin: 0, 
-        width: '100%', 
-        height: '100vh', 
-        background: colorBackground, 
-        position: 'relative' 
-      }}>
-        <div style={{ 
-          width: boxSizeWidth, 
-          height: boxSizeHeight, 
-          background: colorBackgroundBox, 
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%,-50%)',
-          borderRadius: '8px'
-        }}>
-          <div style={{
-            margin: '0 auto',
-            height: '75px',
-            width: '140px',
-            marginBottom: '15px'
-          }}>
-            <img src={logo} className="App-logo" alt="logo" style={{
-              width: '100%'
-            }} />
+export const Login = () => {
+  return (
+    <div
+      style={{
+        margin: 0,
+        width: "100%",
+        height: "100vh",
+        background: colorBackground,
+        position: "relative",
+      }}
+    >
+      <div
+        style={{
+          width: boxSizeWidth,
+          height: boxSizeHeight,
+          background: colorBackgroundBox,
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%,-50%)",
+          borderRadius: "8px",
+        }}
+      >
+        <div>
+          <img
+            src={logo}
+            className="App-logo"
+            alt="logo"
+            style={{
+              maxWidth: "20%",
+              height: "auto",
+              display: "block",
+              borderRadius: "50%",
+              margin: "3vh auto 3vh auto",
+            }}
+          />
+        </div>
+        <div
+          style={{
+            width: "100%",
+          }}
+        >
+          <div
+            style={{
+              display: "block",
+              width: "100%",
+              height: "100%",
+            }}
+          >
+            <LoginButton
+              backgroundColorIcon="#50c94b"
+              backgroundColorText="#45b356"
+              icon={<FontAwesomeIcon icon={faGithub} />}
+              text="GitHub"
+              link="#"
+            />
           </div>
-          <div style={{
-            width: '100%'
-          }}>
-            <div style={{
-              display: 'block',
-              width: '100%',
-              height: '100%'
-            }}>
-              <LoginButton 
-                backgroundColorIcon='#50c94b'
-                backgroundColorText='#45b356'
-                icon={<FontAwesomeIcon icon={faGithub} />}
-                text='GitHub'
-                link='#'
-              />
-            </div>
 
-            <div style={{
-              display: 'block',
-              width: '100%',
-              height: '100%',
-              padding: '15px 0 15px 0'
-            }}>
-              <LoginButton 
-                backgroundColorIcon='#2e62d2'
-                backgroundColorText='#265dca'
-                icon={<FontAwesomeIcon icon={faGitlab} />}
-                text='GitLab'
-                link='#'
-              />
-            </div>
+          <div
+            style={{
+              display: "block",
+              width: "100%",
+              height: "100%",
+              padding: "15px 0 15px 0",
+            }}
+          >
+            <LoginButton
+              backgroundColorIcon="#2e62d2"
+              backgroundColorText="#265dca"
+              icon={<FontAwesomeIcon icon={faGitlab} />}
+              text="GitLab"
+              link="#"
+            />
           </div>
         </div>
       </div>
-    )
-  }
-}
+    </div>
+  );
+};
+
+export default Login;