merge tryout

package-lock.json

@@ -6248,7 +6248,7 @@
         },
         "string-width": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "requires": {
             "code-point-at": "1.1.0",
@@ -13634,7 +13634,7 @@
         },
         "string-width": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "requires": {
             "code-point-at": "1.1.0",

src/index.js

@@ -5,8 +5,8 @@ import ReactDOM from "react-dom";
 import * as serviceWorker from "./serviceWorker";
 
 import Router from "./router";
-import reduxStore from './state'
-import firebase from "./firebase_config";
+import reduxStore from './state';
+import './style/index.scss';
 
 ReactDOM.render(
 	<BrowserRouter>

src/router.js

@@ -1,9 +1,14 @@
 import React from "react";
 import { Switch, Route } from "react-router-dom";
 import AuthPage from './containers/AuthPage'
+import Header from "./components/header"
+
 
 export default () => (
-    <Switch>
-        <Route path="/" exact component={AuthPage} />
-    </Switch>
-)
+	<div className="container">
+		<Header />
+		<Switch>
+            <Route path="/" exact component={AuthPage} />
+		</Switch>
+	</div>
+);

src/styles/abstracts/_variables.sass

@@ -1,5 +1,3 @@
-// COLORS
-$color-black: #000;
 $color-white: #fff;
 $color-red: #f00;
 $color-red-dark: #b40000;
@@ -15,3 +13,6 @@ $color-grey-light: #999999;
 $color-grey-lighter: #d8d8d8;
 $color-grey-the-lightest: #f9fbfd;
 $color-grey-transparent: rgba(247, 249, 251, 0.7);
+$color_lightsteelblue: #B0C4DE;
+
+

src/styles/base/_base.sass

@@ -1,85 +0,0 @@
-*,
-*:after,
-*:before
-	margin: 0
-	padding: 0
-	-webkit-box-sizing: inherit
-	box-sizing: inherit
-
-html
-	font-size: 62.5%
-
-body,
-div,
-dl,
-dt,
-dd,
-ul,
-ol,
-li,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-pre,
-form,
-fieldset,
-input,
-textarea,
-p,
-blockquote,
-th,
-td
-	padding: 0
-	margin: 0
-table
-	border-collapse: collapse
-	border-spacing: 0
-fieldset,
-img
-	border: 0
-address,
-caption,
-cite,
-code,
-dfn,
-em,
-strong,
-th,
-var
-	font-weight: normal
-	font-style: normal
-ol,
-ul
-	list-style: none
-caption,
-th
-	text-align: left
-h1,
-h2,
-h3,
-h4,
-h5,
-h6
-	font-weight: normal
-	font-size: 100%
-
-
-abbr,
-acronym 
-	border: 0
-
-body
-	font-family: "roboto", sans-serif
-	line-height: 1.7
-	box-sizing: border-box
-	background: $color-backgtound
-	min-width: 320px
-
-a:hover
-	text-decoration: none
-
-button
-	cursor: pointer

src/styles/base/_base.scss

@@ -0,0 +1,6 @@
+a:hover {
+	text-decoration: none;
+}
+a{
+    text-decoration: none;
+}

src/styles/components/_header.scss

@@ -0,0 +1,32 @@
+.header {
+	background-color: $color_lightsteelblue;
+	padding: 2rem;
+
+	display: flex;
+	
+	align-items: center;
+
+	&__nav {
+		margin-right: 1rem;
+	}
+	&__nav-item {
+		padding: 2rem 2rem;
+		margin: 1rem;
+		transition: all 2s;
+		color: aliceblue;
+		&:hover {
+			background-color: $color-blue;
+			z-index: 1;
+			border-radius: 70px;
+		}
+	}
+	&__input_s{
+		margin: 0  15px 0 auto;
+	}
+	&__profile{
+		height: 50px;
+		border-radius: 50%;
+	}
+}
+
+

src/styles/index.sass

@@ -1,5 +0,0 @@
-@import "./abstracts/_mixins.sass"
-@import "./abstracts/_variables.sass"
-
-@import "./base/_base.sass"
-@import "./base/_typography.sass"

src/styles/index.scss

@@ -0,0 +1,3 @@
+@import "abstracts/variables";
+@import "components/header";
+@import "base/base";