Add HeaderBar.Style

2 files changed, 22 insertions, 2 deletions

diff --git a/app/components/HeaderBar.css b/app/components/HeaderBar.css
index 0c2677d0e5..f6b289284b 100644
--- a/app/components/HeaderBar.css
+++ b/app/components/HeaderBar.css
@@ -2,6 +2,10 @@
   padding: 12px;
 }
 
+.header--style-error {
+  background-color: #D0021B;
+}
+
 .headerbar__title {
   font-family: DINPro;
   font-size: 24px;
diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js
index ead97877ff..a8bf99229d 100644
--- a/app/components/HeaderBar.js
+++ b/app/components/HeaderBar.js
@@ -1,9 +1,25 @@
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
+import Enum from '../lib/enum';
 
 export default class HeaderBar extends Component {
+
+  /** Bar style */
+  static Style = Enum('default', 'error');
+
+  static propTypes = {
+    style: PropTypes.string
+  };
+
   render() {
+    const style = this.props.style;
+    let containerClass = ['headerbar'];
+
+    if(HeaderBar.Style.isValid(style)) {
+      containerClass.push(`header--style-${style}`);
+    }
+
     return (
-      <div className="headerbar">
+      <div className={ containerClass.join(' ') }>
         <img className="headerbar__logo" src="./assets/images/logo-icon.svg" />
         <h2 className="headerbar__title">MULLVAD VPN</h2>
       </div>