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;