Merge branch 'material' into 'develop'

Luciano Nooijen · Luciano Nooijen · commit be58dc73b520 · 2019-01-20T14:59:56.000Z
Improve development with better looks

See merge request bytecode/bytecode-website!34
diff --git a/components/ContactForm.jsx b/components/ContactForm.jsx
@@ -9,6 +9,7 @@ const ContactFormContainer = styled.div`
 
 const InputField = styled.input`
     background: none;
+    outline: none;
     border: none;
     border-bottom: 2px solid ${theme.colors.lightgray};
     margin-bottom: 1.5rem;
@@ -34,6 +35,7 @@ const SendButton = styled.button`
 
 const InputTextArea = styled.textarea`
     background: none;
+    outline: none;
     border: none;
     border-bottom: 2px solid ${theme.colors.white};
     color: white;
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid, no-confusing-arrow */
 
 import React from 'react';
+import Link from 'next/link';
 import NavbarComponents from './NavbarComponents';
 
 const {
@@ -39,7 +40,11 @@ class Navbar extends React.Component {
         return (
             <NavbarContainer>
                 <InnerNavbarContainer>
-                    <MobileNavLogo src="/static/img/logo-min.svg" />
+                    <Link prefetch href="/">
+                        <a>
+                            <MobileNavLogo src="/static/img/logo-min.svg" />
+                        </a>
+                    </Link>
                     <BlackOverlay
                         menuIsOpen={menuIsOpen}
                         onClick={this.closeMenu}
@@ -52,8 +57,14 @@ class Navbar extends React.Component {
                         />
                     </MenuButton>
                     <NavbarContent menuIsOpen={menuIsOpen}>
-                        {/* TODO: Link Logo to homepage */}
-                        <Logo src="/static/img/logo.svg" alt="Bytecode logo" />
+                        <Link prefetch href="/">
+                            <a>
+                                <Logo
+                                    src="/static/img/logo.svg"
+                                    alt="Bytecode logo"
+                                />
+                            </a>
+                        </Link>
                         <NavbarItems>
                             <CloseMenuButton href="#" onClick={this.closeMenu}>
                                 <img
diff --git a/components/NavbarComponents.jsx b/components/NavbarComponents.jsx
@@ -23,8 +23,11 @@ const NavbarContainer = styled.nav`
         right: 0;
         background: ${transparentize(0.3, theme.colors.black)};
     }
-    @media (min-width: ${theme.breakpointMobileMenu}) {
-    margin: 0px 13.5rem;
+    @media (min-width: ${theme.breakpoints[2]}px) {
+        margin: 0 2rem;
+    }
+    @media (min-width: ${theme.breakpoints[3]}px) {
+        margin: 0 8.5rem;
     }
 `;
 
@@ -110,10 +113,7 @@ const NavbarItem = styled(NavbarItemBase)`
 `;
 
 const Logo = styled.img`
-    height: 55%;
-    margin-left: -4rem;
-    max-height: 6rem;
-    width: auto;
+    width: 60%;
     @media (max-width: ${theme.breakpointMobileMenu}) {
         display: none;
     }
diff --git a/pages/contact.jsx b/pages/contact.jsx
@@ -45,7 +45,7 @@ const HeaderImage = styled.img`
     right: -10rem;
     top: -75rem;
     overflow: hidden;
-    width: 100%
+    width: 100%;
     height: 100%;
 `;
 
