Header mobile + layout changes

src/components/footer/index.js

@@ -2,7 +2,10 @@ import React from 'react';
 
 export default props => (
     <div className="footer">
-        <p className="footer__us">ТОП-фирма "SuperTestServise"</p>
-        <p className="footer__copyright">&copy; "SuperTestServise", 2018</p>
+        <p className="footer__us">
+            TOP-company
+            "<span className="footer__us us__inline--red">T</span>est.<span className="footer__us us__inline--green">i</span>o"
+        </p>
+        <p className="footer__copyright">&copy; 2018, "Test.io", all right reserved</p>
     </div>
 )

src/containers/header/index.js

@@ -12,38 +12,51 @@ import { auth } from '../../firebase_config'
 
 class Header extends Component {
 
+    state = {
+        togglerClosed: true
+    }
+
+    handleToggle = (event) => {
+        this.setState((prevState) => ({togglerClosed: !prevState.togglerClosed}))
+    }
+
     render() {
-        const { isFetching, error, user, fbValue } = this.props.auth;
-        const { signInRequest } = this.props;
+        const {togglerClosed} = this.state;
+        const toggleStatus = togglerClosed ? "toggle-status--closed" : "toggle-status--opened"
 
         return (
             <header className="header">
-                <nav className="header__nav">
-                    <ul className="header__nav--list">
+                <h1 className="header__logo">Test.<span className="header__logo--i-letter">i</span>o</h1>
+                <hr className="header__logo--divider"/>
+                <span className="header__toggle-trigger" onClick={this.handleToggle} >
+                    <span />
+                </span>
+                <nav className={`header__nav ${toggleStatus}`}>
+                    <ul className="header__nav nav__list"  >
                         <li>
-                            <Link className="nav-list__item" to="/favorites">
+                            <Link className="header__nav nav__list-item" to="/favorites">
                                 Favorites
                             </Link>
                         </li>
                         <li>
-                            <Link className="nav-list__item" to="/passed">
+                            <Link className="header__nav nav__list-item" to="/passed">
                                 Passed
                             </Link>
                         </li>
                         <li>
-                            <Link className="nav-list__item" to="/results">
+                            <Link className="header__nav 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>
+                <div className="header__links">
+                    <Link to="/profile">
+                        {/* <img className="header__links--profile" src="https://bit.ly/2LuGzwz" /> */}
+                    </Link>
+                    <Link className="header__links--sign-in link--btn link--btn25" to={routes.SIGN_IN}>Sign in</Link>
+                    <Link className="header__links--sign-up link--btn link--btn25" to={routes.SIGN_UP}>Sign up</Link>
+                </div>
             </header>
         )
     }

src/styles/abstracts/_variables.scss

@@ -11,6 +11,8 @@ $color-brown: #4c4c4c;
 $color-lightgrey: #d3d3d3;
 $color-grey: #808080;
 $color-lightgrey-transparent: rgba(211,211,211, .9);
-$color_lightsteelblue: #B0C4DE;
+$color-lightsteelblue: #B0C4DE;
+$color-lightsteelblue-transparent: rgba(176, 196, 222, .9);
+
 
 

src/styles/components/_footer.scss

@@ -8,6 +8,14 @@
     outline: 1px solid grey;
     &__us {
         font-size: 18px;
+        .us__inline {
+            &--red {
+                color: $color-red;
+            }
+            &--green {
+                color: $color-green;
+            }
+        }
     }
     &__copyright {
         font-size: 14px;

src/styles/components/_header.scss

@@ -1,42 +1,103 @@
 .header {
-	background-color: $color_lightsteelblue;
-	&__nav {
-		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 {}
-			}
-		}
-	}
-}
-
+    position: fixed;
+    top: 0;
+    background: $color-lightsteelblue-transparent;
+    height: 130px;
+    width: 100%;
+    
+    &__logo {
+        padding-top: 10px; 
+        margin: 0;
+        text-align: center;
+        &::first-letter {
+            color: $color-red;
+        }
+        &--i-letter {
+            color: $color-green;
+        }
+        &--divider {
+            width: 30%;
+            margin: auto;
+            margin-top: 5px;
+            margin-bottom: 20px;
+        }
+    }
+    &__toggle-trigger {
+        position: absolute;
+        top: 70%;
+        cursor: pointer;
+        left: 0;
+        margin-left: 1em;
+        & span,
+        & span::after,
+        & span::before {
+            display: block;
+            height: 2px;
+            width: 2em;
+            border-radius: 2px;
+            background: white;
+        }
+        & span {
+            position: relative;
+        }
+        & span::after,
+        & span::before {
+            position: absolute;
+            content: "";
+        }
+        & span::after {
+            top: 7px;
+        }
+        & span::before {
+            bottom: 7px;
+        }
+    }
+    .toggle-status {
+        &--closed {
+            transform: scale(1, 0);
+            & a {
+                transition: opacity 150ms ease-in-out;
+                opacity: 0;
+            }
+        }
+        &--opened {
+            transform: scale(1, 1);
+            & a {
+                transition: opacity 250ms ease-in-out 250ms;
+                opacity: 1;
+            }
+        }
+    }
+    nav {
+        background: rgb(190, 195, 221);
+        position: absolute;
+        width: 100%;
+        top: 100%;
+        font-family: 'Poiret One', cursive;
+        font-weight: bold;
 
+        transition: transform 400ms ease-in-out;
+        transform-origin: top;
+        & a {
+            color: $color-white;
+            text-shadow: 1px 1px 2px black;
+        }
+        ul li {
+            padding: 1em;
+            border-bottom: 1px solid $color-lightgrey;
+        }
+        ul li:first-of-type {
+            border-top: 1px solid $color-lightgrey;
+        }
+    }
+    .header__links {
+        display: flex;
+        justify-content: center;
+        &--sign-in {
+            margin-right: 1.5vw;
+        }
+        &--sign-up {
+            margin-left: 1.5vw;
+        }
+    }
+}

src/styles/components/_landingPage.scss

@@ -3,8 +3,8 @@
     background-attachment: fixed;
     background-repeat: no-repeat;
     background-size: cover;
-    background-position: center center;
-    padding-top: 11.5vh;
+    background-position: top center;
+    padding-top: 200px;
     padding-bottom: 9vh;
     font-family: 'Cormorant Infant', serif;
     &__about,

src/styles/components/_notFound.scss

@@ -1,6 +1,6 @@
 .not-found {
     text-align: center;
-    padding: 10vh 0;
+    padding: 175px 0 10vh 0;
     font-family: 'Poiret One', cursive;
     
     &__image {

src/styles/components/_signPage.scss

@@ -1,7 +1,7 @@
 .sign {
     &-in {
         // height: 83.5vh;
-        padding: 5vw 0;
+        padding: 30vh 0 5vw 0;
     }
     &-form {
         font-size: 18px;
@@ -53,7 +53,7 @@
             &--sign-up a{
                 color: $color-green;
                 text-transform: uppercase;
-                transition: all 0.3s ease-in-out;
+                transition: all 100ms ease-in-out;
             }
             &--sign-up a:hover{
                 font-size: 23px;