Opdatering af header (design) (#7)

* Created file

* Added Imported CSS "header.css"

* Test

* Added Jetbrains .idea directory

* fixed untracked files

* Added ".idea/"

* Updated header

* Updated logo size

.gitignore

@@ -21,3 +21,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+
+# PHP-Storm 
+.idea/

src/components/header.js

@@ -9,6 +9,7 @@ import {
   Nav,
   NavItem,
   NavLink } from 'reactstrap';
+import '../style/header.css';
 
 export default class Header extends React.Component {
   constructor(props) {
@@ -27,23 +28,23 @@ export default class Header extends React.Component {
   render() {
     return (
       <div>
-        <div style={{backgroundImage: `url(${pixel})`, backgroundSize: "64px"}}>
-          <img style={{height:"64px"}} src={logo} alt="Logo"/>
+        <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="/">Medlemssystem</NavbarBrand>
+          <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/">Oversigt</NavLink>
+                <NavLink href="/overview/" className="navbar-link-dark">Oversigt</NavLink>
               </NavItem>
               <NavItem>
-                <NavLink href="/logout">Log Ud</NavLink>
+                <NavLink href="/logout" className="navbar-link-style">Log Ud</NavLink>
               </NavItem>
             </Nav>
           </Collapse>

src/style/header.css

@@ -0,0 +1,44 @@
+.navbar.bg-warning {
+    background-color: #fef200 !important;
+}
+
+.navbar-brand-dark {
+    color: rgba(0,0,0,1) !important;
+    font-weight: bold;
+    font-size: large;
+}
+
+.nav-link:link {
+    color: rgba(0,0,0,.5) !important;
+    font-weight: bold;
+    font-size: large;
+}
+
+.nav-link:visited {
+    color: rgba(0,0,0,.5) !important;
+    font-weight: bold;
+    font-size: large;
+}
+
+.nav-link:hover {
+    color: rgba(0,0,0,1) !important;
+    font-weight: bold;
+    font-size: large;
+}
+
+.nav-link:active {
+    color: rgba(0,0,0,.5) !important;
+    font-weight: bold;
+    font-size: large;
+}
+
+
+
+.header-pixels {
+    min-height: 64px;
+}
+
+.header-logo {
+    float: right;
+    height: 123px !important;
+}

src/views/kids-step.js

@@ -14,7 +14,7 @@ class KidsStep extends Component {
   render() {
     return (<div>
       <h3 className="text-center">
-        Har du nogle børn?
+        Har du nogen børn?
       </h3>
         <Button outline size="lg" block color="primary" onClick={this.toggle}>
         Ja