layout changes

src/components/auth/signInPage/form/index.js

@@ -18,10 +18,10 @@ class Form extends React.Component {
                 <h2 className="sign-form__header">Sign In</h2>
                 <Field className="sign-form__input sign-form__input--text" placeholder="Login" name="login" component={formInput} type="text"/>
                 <Field className="sign-form__input sign-form__input--password" placeholder="Password" name="password" component={formInput} type="password" />
-                <button className="sign-form__submit-button">Sign In</button>
-                <p className="sign-form__link--forgot-password"><Link to={routes.PASSWORD_FORGET}>Forgot password ?</Link></p>
+                <button className="link--btn link--btn60">Sign In</button>
+                <p className="sign-form__link--forgot-password"><Link className="link--inline" to={routes.PASSWORD_FORGET}>Forgot password ?</Link></p>
                 <hr className="sign-form__divider"/>
-                <p className="sign-form__link--sign-up">Still ain't got an account? <Link to={routes.SIGN_UP}>Sign up</Link> first!</p>
+                <p className="sign-form__link--sign-up">Still ain't got an account? <Link className="link--inline" to={routes.SIGN_UP}>Sign up</Link> first!</p>
             </form>    
         )
     }

src/components/auth/signInPage/form/validate/index.js

@@ -1,3 +1,12 @@
 export default function validate(values) {
-    
+    // const { login, password } = this.values;
+    // const errors = {};
+
+    // if (!login) {
+    //     errors.login = "Required"
+    // }
+    // else if (login.match)
+    // if (!password) {
+    //     errors.password = "Required"
+    // }
 }

src/components/auth/signUpPage/form/index.js

@@ -25,7 +25,7 @@ class Form extends React.Component {
                 </div>
 
 
-                <button className="sign-form__submit-button">Create Account</button>
+                <button className="sign-form__link--with-margin link--btn link--btn6s0">Create Account</button>
                 <p className="sign-form__agreement">By clicking this button you actually would donate us your flat !</p>
             </form>
         )

src/components/landingPage/index.js

@@ -13,7 +13,7 @@ export default props => (
             <p className="description__main">
                 You can <span className="description__inline--pretty">share</span>
                 {" "}your test with anybody you'd like: no matter your friend or college or even subordinates
-                can easily pass them, get marks and <span className="description__inline--pretty">share</span> them!
+                can easily pass them, get marks and <span className="description__inline--pretty">share</span> ones!
             </p>
         </div>
         <div className="home-page__links-container">

src/components/notFound/index.js

@@ -7,6 +7,6 @@ export default props => (
         <img className="not-found__image" src="http://kiwanismiracleleague.org/wp-content/themes/chillibox/media/images/404.png" alt="404" />
         <hr className="not-found__divider"/>
         <h1 className="not-found__message">Sorry, but looks like nobody lives here...</h1>
-        <p><Link className="not-found__link--home" to={HOME}>Go home</Link></p>
+        <p><Link className="link--btn link--btn-big not-found__link--home" to={HOME}>Go home</Link></p>
     </div>
 )

src/containers/header/index.js

@@ -11,44 +11,39 @@ import * as routes from './../../constants/routes'
 import { auth } from '../../firebase_config'
 
 class Header extends Component {
-    
+
     render() {
         const { isFetching, error, user, fbValue } = this.props.auth;
-        const { signInRequest } = this.props; 
+        const { signInRequest } = this.props;
 
         return (
             <header className="header">
-                {
-                    !user
-                        ? <p>You need to sign in first...</p>
-                        : (
-                            <nav className="header__nav">
-                                <Link className="header__nav-item" to="/favorites">
-                                    Favorites
-                                </Link>
-                                <Link className="header__nav-item" to="/passed">
-                                    Passed
-                                </Link>
-                                <Link className="header__nav-item" to="/results">
-                                    Results
-                                </Link>
-                            </nav>
-                        )
-                }
-                <div className="header__input_s">
-                    <input />
-                    <button type="submit">Click</button>
-                </div>
-                <div>
-                    <Link to="/profile">
-                        <img className="header__profile" src="https://bit.ly/2LuGzwz" />
-                    </Link>
-                </div>
-                {
-                    user && user.displayName
-                        ? <p>{user.displayName}</p>
-                        : <Link to={routes.SIGN_IN}><button onClick={null & signInRequest}>Sign in</button></Link>
-                }
+                <nav className="header__nav">
+                    <ul className="header__nav--list">
+                        <li>
+                            <Link className="nav-list__item" to="/favorites">
+                                Favorites
+                            </Link>
+                        </li>
+                        <li>
+                            <Link className="nav-list__item" to="/passed">
+                                Passed
+                            </Link>
+                        </li>
+                        <li>
+                            <Link className="nav-list__item" to="/results">
+                                Results
+                            </Link>
+                        </li>
+                    </ul>
+                    <div className="header__nav--links">
+                        <Link to="/profile">
+                            <img className="header__nav--links nav-links--profile" src="https://bit.ly/2LuGzwz" />
+                        </Link>
+                        <Link className="header__nav--links nav-links--sign-in" to={routes.SIGN_IN}>Sign in</Link>
+                        <Link className="header__nav--links nav-links--sign-up" to={routes.SIGN_UP}>Sign up</Link>
+                    </div>
+                </nav>
             </header>
         )
     }

src/state/index.js

@@ -5,27 +5,17 @@ import createSagaMiddleware from "redux-saga";
 import combinedReducers from './../reducers';
 import initialState from './../reducers/initialState'
 import saga from './../saga'
-import { auth, database } from './../firebase_config'
+import { auth } from './../firebase_config'
 import { userIsNotSignedIn, userIsSignedIn } from './../actions/auth/signIn'
-import { actionChannel } from 'redux-saga/effects';
 
 const sagaMiddleware = createSagaMiddleware();
 
-const store = createStore(  
+const store = createStore(
     combinedReducers,
     initialState,
     applyMiddleware(sagaMiddleware, logger)
 );
 
-const action = payload =>({
-    type: 'TEST_FB_REQUEST',
-    payload
-})
-
-const usersRef = database.ref('/users')
-
-usersRef.on('child_added' , snapshot => store.dispatch(action(snapshot.val())))
-
 export default store;
 
 sagaMiddleware.run(saga);

src/styles/abstracts/_variables.scss

@@ -2,17 +2,15 @@ $color-white: #fff;
 $color-red: #f00;
 $color-red-dark: #b40000;
 $color-yellow: #f5a623;
-$color-green: #0ea500;
+$color-green: #008000;
 $color-blue: #008ff7;
 $color-blue-light-dark: #4a90e2;
 $color-blue-dark: #29336f;
 $color-blue-light: #eaf1f9;
 $color-brown: #4c4c4c;
-$color-grey: #51606a;
-$color-grey-light: #999999;
-$color-grey-lighter: #d8d8d8;
-$color-grey-the-lightest: #f9fbfd;
-$color-grey-transparent: rgba(247, 249, 251, 0.7);
+$color-lightgrey: #d3d3d3;
+$color-grey: #808080;
+$color-lightgrey-transparent: rgba(211,211,211, .9);
 $color_lightsteelblue: #B0C4DE;
 
 

src/styles/base/_base.scss

@@ -11,10 +11,11 @@ a, a:hover {
 //     margin: 0
 // }
 
-// ul {
-//     list-style-type: none;
-//     padding: 0;
-// }
+ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
 
 body {
     margin: 0;

src/styles/components/_button.scss

@@ -0,0 +1,31 @@
+.link {
+    &--btn {
+        text-transform: uppercase;
+        font-family: 'Poiret One', cursive;
+        font-weight: bold;
+        // word-break: break-all;
+        cursor: pointer;
+        padding: 1.5vh 3vh;
+        background: $color-lightgrey-transparent;
+        box-shadow: 0 0 10px $color-grey;
+        border: none;
+        &50 {
+            width: 50%;
+        }
+        &60 {
+            width: 60%;
+        }
+        &75 {
+            width: 75%;
+        }
+        &100 {
+            width: 100%;
+        }
+        &-big {
+            font-size: 30px;
+            padding: 3vh 6vh;
+            font-weight: 400;
+        }
+    }
+    
+}

src/styles/components/_header.scss

@@ -1,31 +1,41 @@
 .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;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		&--list {
+			display: flex;
+			justify-content: space-around;
+			flex-grow: 1;
+			margin-right: 25px;
+			.nav-list__item {
+				flex-grow: 1;
+			}
+			.__nav-item {
+				transition: all 2s;
+				color: aliceblue;
+				&:hover {
+					background-color: $color-blue;
+					z-index: 1;
+					border-radius: 70px;
+				}
+			}
+		}
+		&--links{
+			flex-grow: 1;
+			display: flex;
+			justify-content: right;
+			.nav-links {
+				&--profile {
+					height: 50px;
+					border-radius: 50%;
+				}
+				&--sign-in {}
+				&--sign-up {}
+			}
 		}
-	}
-	&__input_s{
-		margin: 0  15px 0 auto;
-	}
-	&__profile{
-		height: 50px;
-		border-radius: 50%;
 	}
 }
 

src/styles/components/_notFound.scss

@@ -6,6 +6,7 @@
     &__image {
         display: block;
         margin: auto;
+        width: 40%;
     }
     &__divider {
         margin: 25px auto;
@@ -18,10 +19,7 @@
         &--home {
             font-size: 30px;
             padding: 3vh 6vh;
-            background: rgba(211,211,211, .9);
             margin-top: 35px;
-            box-shadow: 0 0 10px grey;
-            text-transform: uppercase
         }
     }
 }

src/styles/components/_signPage.scss

@@ -1,19 +1,21 @@
 .sign {
     &-in {
-        height: 83.5vh;
+        // height: 83.5vh;
+        padding: 5vw 0;
     }
     &-form {
         font-size: 18px;
         font-family: 'Poiret One', cursive;
         font-weight: bold;
-        position: relative;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        border: 3px solid lightgrey;
-        outline: 1px solid grey;
+        display: block;
+        margin: auto;
+        border: 3px solid $color-lightgrey;
+        outline: 1px solid $color-grey;
         padding: 25px;
-        width: 45vw;
+        width: 45%;
+        @media screen and (max-width: 480px) {
+            width: 75%;
+        }
         text-align: center;
         &__input,
         &__submit-button {
@@ -29,9 +31,9 @@
             display: block;
             // text-align: center;
             margin: 25px auto;
-            border: 1px solid lightgray;
+            border: 1px solid $color-lightgrey;
             padding: 15px;
-            box-shadow: 0 0 3px grey;
+            box-shadow: 0 0 3px $color-grey;
 
             &--login {}
             &--password {}
@@ -40,21 +42,21 @@
             font-family: 'Poiret One', cursive;
             font-size: 18px;
             font-weight: bold;
-
         }
         &__submit-button {
-            text-transform: uppercase;
-            font-family: 'Poiret One', cursive;
-            font-weight: bold;
-            cursor: pointer;
-            padding: 1.5vh 3vh;
-            background: rgba(211,211,211, .9);
-            box-shadow: 0 0 10px grey;
+            
         }
         &__link {
+            &--with-margin {
+                margin-bottom: 20px;
+            }
             &--sign-up a{
-                color: green;
+                color: $color-green;
                 text-transform: uppercase;
+                transition: all 0.3s ease-in-out;
+            }
+            &--sign-up a:hover{
+                font-size: 23px;
             }
         }
         &__divider {

src/styles/index.scss

@@ -3,9 +3,10 @@
 @import "base/base";
 @import "base/typography";
 
+@import "components/button";
 @import "components/header";
 @import "components/signPage";
 @import "components/footer";
 @import "components/landingPage";
-@import "components/notFound"
+@import "components/notFound";