Changes header

app.json

@@ -2,11 +2,9 @@
   "name": "Coding Pirates Members frontend",
   "description": "The frontend for coding pirates member systems",
   "website": "https://codingpirates.dk",
-  "buildpacks": [
-    { "url": "mars/create-react-app" }
-  ],
-  "env" : {
-    "REACT_APP_GRAPHQL_URL" : {
+  "buildpacks": [{ "url": "mars/create-react-app" }],
+  "env": {
+    "REACT_APP_GRAPHQL_URL": {
       "required": true,
       "description": "The hosts that are allowed to acces cros origin",
       "value": "medlemssystem-staging.herokuapp.com"
@@ -18,8 +16,8 @@
         "REACT_APP_GRAPHQL_URL": "medlemssystem-staging.herokuapp.com/graphql"
       },
       "scripts": {
-      "test": "npm test"
+        "test": "npm test"
+      }
     }
   }
-  }
 }

package.json

@@ -4,17 +4,18 @@
   "private": true,
   "dependencies": {
     "apollo-boost": "^0.3.1",
-    "apollo-link-context": "^1.0.17",
-    "bootstrap": "^4.3.1",
-    "graphql": "^14.2.1",
-    "js-cookie": "^2.2.0",
-    "react": "^16.8.6",
-    "react-apollo": "^2.5.5",
-    "react-dom": "^16.8.6",
-    "react-scripts": "3.0.0",
-    "react-select": "^2.4.3",
+    "apollo-link-context": "^1.0.20",
+    "bootstrap": "^4.4.1",
+    "graphql": "^14.6.0",
+    "js-cookie": "^2.2.1",
+    "react": "^16.13.1",
+    "react-apollo": "^2.5.8",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.1",
+    "react-select": "^2.4.4",
     "react-step-progress-bar": "^1.0.3",
-    "reactstrap": "^8.0.0"
+    "reactstrap": "^8.4.1",
+    "styled-components": "^4.4.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -36,5 +37,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "1.18.2"
   }
 }

src/App.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import Header from './components/header'
-import Main from './main'
+import React from "react";
+import Header from "./components/header";
+import Main from "./main";
 function App() {
   return (
     <div className="App">
-      <Header/>
-      <Main/>
+      <Header />
+      <Main />
     </div>
   );
 }

src/App.test.js

@@ -1,36 +1,38 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
 import { ApolloProvider } from "react-apollo";
-import { ApolloClient } from 'apollo-client';
-import { createHttpLink } from 'apollo-link-http';
-import { setContext } from 'apollo-link-context';
-import { InMemoryCache } from 'apollo-cache-inmemory';
+import { ApolloClient } from "apollo-client";
+import { createHttpLink } from "apollo-link-http";
+import { setContext } from "apollo-link-context";
+import { InMemoryCache } from "apollo-cache-inmemory";
 const httpLink = createHttpLink({
   uri: process.env.REACT_APP_GRAPHQL_URL,
-  credentials: 'include'
+  credentials: "include"
 });
 
 const authLink = setContext((a, { headers }) => {
   return {
     headers: {
       ...headers,
-      "X-CSRFToken": Cookies.get('csrftoken')
+      "X-CSRFToken": Cookies.get("csrftoken")
     }
-  }
+  };
 });
 
 const client = new ApolloClient({
-  credentials: 'include',
+  credentials: "include",
   link: authLink.concat(httpLink),
-  cache: new InMemoryCache(),
-
+  cache: new InMemoryCache()
 });
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(  <ApolloProvider client={client}>
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(
+    <ApolloProvider client={client}>
       <App />
-    </ApolloProvider>, div);
+    </ApolloProvider>,
+    div
+  );
   ReactDOM.unmountComponentAtNode(div);
 });

src/__tests__/__snapshots__/header_snap_test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header Test it matches the snapshot 1`] = `
+<div
+  className="sc-bdVaJa zZxdL"
+>
+  <div
+    className="sc-bwzfXH dSjrNB"
+  />
+  <h5
+    className="sc-htpNat hqQPgY"
+  >
+    Medlemssystem
+  </h5>
+  <img
+    alt="Logo"
+    className="sc-bxivhb leKRDg"
+    src="logo.png"
+  />
+</div>
+`;

src/__tests__/header_snap_test.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { create } from "react-test-renderer";
+import Header from "../components/header.js";
+describe("Header Test", () => {
+  test("it matches the snapshot", () => {
+    const component = create(<Header />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});

src/components/header.js

@@ -1,55 +1,56 @@
-import React from 'react';
-import logo from '../assets/logo.png'
-import pixel from '../assets/pixel.png'
-import {
-  Collapse,
-  Navbar,
-  NavbarToggler,
-  NavbarBrand,
-  Nav,
-  NavItem,
-  NavLink } from 'reactstrap';
-import '../style/header.css';
+import React from "react";
+import logo_png from "../assets/logo.png";
+import pixel from "../assets/pixel.png";
+import styled from "styled-components";
 
-export default class Header extends React.Component {
-  constructor(props) {
-    super(props);
+const phoneSize = "600px";
+
+const Container = styled.div`
+  background-color: #fcf23d;
+  display: grid;
+  grid-template-areas:
+    "pixel pixel pixel"
+    "title space image";
 
-    this.toggle = this.toggle.bind(this);
-    this.state = {
-      isOpen: false
-    };
+  grid-template-columns: 25% 50% 25%;
+  grid-template-rows: [pixel] 70px [nav] 50px;
+  @media (max-width: ${phoneSize}) {
+    grid-template-rows: [pixel] 40px [nav] 40px;
+    grid-template-columns: 50% 20% 30%;
   }
-  toggle() {
-    this.setState({
-      isOpen: !this.state.isOpen
-    });
+`;
+
+const PixelRow = styled.div`
+  grid-area: pixel;
+  background-image: url(${pixel});
+  background-size: 120px;
+  @media (max-width: ${phoneSize}) {
+    background-size: 70px;
   }
+`;
+
+const Title = styled.h5`
+  text-align: center;
+  width: 100%;
+  grid-area: title;
+  margin: auto;
+  align-self: center;
+`;
+
+const Logo = styled.img`
+  grid-column: 3 / span 1;
+  grid-row: 1 / span 2;
+  height: 100%;
+`;
+
+export default class Header extends React.Component {
   render() {
     return (
-      <div>
-        <div style={{backgroundImage: `url(${pixel})`, backgroundSize: "64px"}} className="header-pixels">
-          <img style={{height:"64px"}} src={logo} alt="Logo" className="header-logo"/>
-        </div>
-        <Navbar
-          color="warning"
-          dark
-          expand="sm"
-        >
-          <NavbarBrand href="/" className="navbar-brand-dark">MEDLEMSSYSTEM</NavbarBrand>
-          <NavbarToggler onClick={this.toggle} />
-          <Collapse isOpen={this.state.isOpen} navbar>
-            <Nav className="ml-auto" navbar>
-              <NavItem>
-                <NavLink href="/overview/" className="navbar-link-dark">Oversigt</NavLink>
-              </NavItem>
-              <NavItem>
-                <NavLink href="/logout" className="navbar-link-style">Log Ud</NavLink>
-              </NavItem>
-            </Nav>
-          </Collapse>
-        </Navbar>
-      </div>
+      <Container>
+        <PixelRow />
+        <Title>Medlemssystem</Title>
+        <Logo src={logo_png} alt="Logo" />
+      </Container>
     );
   }
 }

src/components/progressbar.js

@@ -1,40 +1,48 @@
-import React from 'react';
-import '../style/progessbar.css'
+import React from "react";
+import "../style/progessbar.css";
 import "react-step-progress-bar/styles.css";
 import { ProgressBar, Step } from "react-step-progress-bar";
-import {Container} from 'reactstrap'
+import { Container } from "reactstrap";
 export default class Progressbar extends React.Component {
   render() {
-    return (<Container>
-      <ProgressBar percent={this.props.percent}>
-        <Step>
-          {({ accomplished, index }) => (
-            <div
-              className={`indexedStep ${accomplished ? "accomplished" : null}`}
-            >
-              {index + 1}
-            </div>
-          )}
-        </Step>
-        <Step>
-          {({ accomplished, index }) => (
-            <div
-              className={`indexedStep ${accomplished ? "accomplished" : null}`}
-            >
-              {index + 1}
-            </div>
-          )}
-        </Step>
-        <Step>
-          {({ accomplished, index }) => (
-          <div
-            className={`indexedStep ${accomplished ? "accomplished" : null}`}
-          >
-          {index + 1}
-        </div>
-      )}
-      </Step>
-    </ProgressBar>
-  </Container>);
+    return (
+      <Container>
+        <ProgressBar percent={this.props.percent}>
+          <Step>
+            {({ accomplished, index }) => (
+              <div
+                className={`indexedStep ${
+                  accomplished ? "accomplished" : null
+                }`}
+              >
+                {index + 1}
+              </div>
+            )}
+          </Step>
+          <Step>
+            {({ accomplished, index }) => (
+              <div
+                className={`indexedStep ${
+                  accomplished ? "accomplished" : null
+                }`}
+              >
+                {index + 1}
+              </div>
+            )}
+          </Step>
+          <Step>
+            {({ accomplished, index }) => (
+              <div
+                className={`indexedStep ${
+                  accomplished ? "accomplished" : null
+                }`}
+              >
+                {index + 1}
+              </div>
+            )}
+          </Step>
+        </ProgressBar>
+      </Container>
+    );
   }
 }