akashraj9828 · akashraj9828 · Apr 19, 2020 · Apr 19, 2020 · Apr 19, 2020 · Apr 19, 2020
diff --git a/.env b/.env
@@ -0,0 +1,2 @@
+#.env
+GENERATE_SOURCEMAP=false
diff --git a/.gitignore b/.gitignore
@@ -23,6 +23,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-*.env
 
 /graphql_payload
diff --git a/package.json b/package.json
@@ -1,23 +1,25 @@
 {
-  "name": "git-stats",
-  "version": "1.0.0",
+  "name": "git-status",
+  "version": "0.1.0",
   "private": true,
+  "engines": {
+    "node": "10.16.x",
+    "npm": "6.x"
+  },
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "bootstrap": "^4.4.1",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
+    "express": "^4.17.1",
+    "node-sass": "^4.13.1",
+    "path": "^0.12.7",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1",
-    "source-map-explorer": "^2.4.2"
-    "node-sass":"^0.0.1"
+    "react-scripts": "3.4.1"
   },
   "scripts": {
-    "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "start": "react-scripts start",
+    "start": "node server.js",
+    "dev": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

diff --git a/public/cat-logo.png b/public/cat-logo.png
diff --git a/public/img/member.png b/public/img/member.png
diff --git a/public/img/moon.png b/public/img/moon.png
diff --git a/public/img/octocat.png b/public/img/octocat.png
diff --git a/public/img/sun.png b/public/img/sun.png
diff --git a/public/index.html b/public/index.html
@@ -1,20 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="GitStats - A github contribution analyzer" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"/>
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>GitStats</title>
-  </head>
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
 
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Git Analyzer Tool</title>
+  </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-  </body>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
 
-</html>
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "GitStats",
-  "name": "GitStats - A github contribution analyzer",
+  "short_name": "React App",
+  "name": "Create React App Sample",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/server.js b/server.js
@@ -0,0 +1,17 @@
+
+// Using express: http://expressjs.com/
+var express = require('express');
+// Create the app
+var app = express();
+var server = app.listen(process.env.PORT || 4000, listen);
+
+
+
+app.use(express.static('./build/'));
+
+// // This call back just tells us that the server has started
+function listen() {
+    var host = server.address().address;
+    var port = server.address().port;
+    console.log('React app live at http://' + host + ':' + port);
+}
diff --git a/src/App.js b/src/App.js
@@ -1,17 +1,13 @@
 import React from 'react';
-import logo from './logo.svg';
+import Home from './Components/Home/Home';
+import  Header from './Components/Header/Header'
 import './App.scss';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          <code>Git<strong>Stats</strong> - An opensource github contribution analyzer</code>
-        </p>       
-        <button className="btn btn-danger">Let's begin</button>
-      </header>
+     <Header/>
+     <Home/>
     </div>
   );
 }

diff --git a/src/App.scss b/src/App.scss
@@ -1,38 +1,192 @@
-.App {
-  text-align: center;
+@import url('https://fonts.googleapis.com/css?family=Comfortaa|Montserrat:400,500|Sen&display=swap');
+body {
+	font-family: 'Sen', sans-serif;
+	background-color: #F5F5F5;
 }
+h1,h2,h3,h4,h5 {
+	font-family: 'Montserrat', sans-serif;
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+/* Global color decleartion */
+$blueheader: #24292E;
+$buttonPrimary: #54A3FF;
+
+.night-mode {
+	background: #1a1a1b;
+	color: #fff !important;
+	.card {
+		background: #24292E;
+		border-color: #171a1d;
+	}
+}
+
+.font-size-11 {
+	font-size: 11px;
+}
+
+.font-size-12 {
+	font-size: 12px;
+}
+
+.font-size-13 {
+	font-size: 13px;
+}
+
+.font-size-14 {
+	font-size: 14px;
+}
+
+.font-size-15 {
+	font-size: 15px;
+}
+
+.font-size-16 {
+	font-size: 16px;
+}
+
+.font-size-17 {
+	font-size: 17px;
+}
+
+.font-size-18 {
+	font-size: 18px;
+}
+
+.font-size-19 {
+	font-size: 19px;
+}
+
+.font-size-20 {
+	font-size: 20px;
+}
+
+.font-size-21 {
+	font-size: 21px;
+}
+
+header {
+	background: $blueheader;
+}
+
+button {
+	&:focus {
+		outline: none;
+	}
+}
+
+.text-light-gray {
+	color: #BEBFC1;
+}
+
+.search {
+	border: none;
+	font-size: 14px;
+	background: transparent;
+	& {
+		outline: none;
+		color: #BEBFC1;
+	}
+}
+
+.logo {
+	font-size: 14px;
+	font-family: 'Comfortaa', cursive;
+	img {
+		width: 27px;
+		margin-right: 10px;
+	}
+}
+
+.card {
+	border-radius: 0;
+	border-color: whitesmoke;
+}
+
+.member-image img {
+	width: 110px;
+	border-radius: 4px;
+}
+
+.left-image-avtar {
+	width: 135px;
+	padding-left: 24px;
+}
+
+.email {
+	width: 14px;
+	margin-right: 4px;
+}
+
+.git-icon {
+	width: 18px;
+}
+
+.btn {
+	position: relative;
+	min-width: 121px;
+	border-radius: 3px;
+	font-size: 14px;
+	line-height: initial;
+	padding: 9px 0;
+	&:focus,
+	&:active {
+		outline: none !important;
+		box-shadow: 0 0 0 !important;
+	}
+}
+
+.btn-primary {
+	background-color: $buttonPrimary;
+	border-color: $buttonPrimary;
+	&:hover {
+		background-color: $buttonPrimary;
+		border-color: $buttonPrimary;
+	}
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.follow-details {
+	.btn {
+		img {
+			width: 22px;
+			margin-left: 7px;
+		}
+	}
 }
 
-.App-link {
-  color: #61dafb;
+.btn-primary.outline {
+	background: transparent;
+	color: $buttonPrimary;
+	&:after {
+		position: absolute;
+		width: 0%;
+		height: 100%;
+		background: $buttonPrimary;
+		content: '';
+		left: 0;
+		top: 0;
+		transition: all 0.2s;
+	}
+	&:hover:after {
+		width: 100%;
+	}
+	&:hover span,
+	&:hover img {
+		color: #fff;
+		z-index: 9;
+		position: relative;
+	}
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.change-theme {
+	min-width: 110px;
+	button {
+		border: none;
+		background: transparent;
+		color: #fff;
+		cursor: pointer;
+	}
+	img {
+		width: 15px;
+	}
 }