From e9913127a197d5fc1ac5ad3f202b70868e6bcefa Mon Sep 17 00:00:00 2001
From: Gregory Eremin <g@erem.in>
Date: Tue, 10 Mar 2015 19:48:57 +0700
Subject: [PATCH] Make up a logo - check

---
 app/scripts/app.jsx |  8 ++++++--
 app/styles/app.css  | 46 +++++++++++++++++++++++++++++++++++++++------
 2 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/app/scripts/app.jsx b/app/scripts/app.jsx
index 4751a3a..4ffa42f 100644
--- a/app/scripts/app.jsx
+++ b/app/scripts/app.jsx
@@ -87,8 +87,12 @@ var Menu = React.createClass({
         return (
             <section className="menu">
                 <ul>
-                    <li key="empact" className="nav empact">
-                        <Link to="org" params={this.getParams()}>Empact</Link>
+                    <li key="empact" className="logo-button">
+                        <Link to="org" params={this.getParams()}>
+                            <div className="logo e">e</div>
+                            <div className="logo mp">mp</div>
+                            <div className="logo act">act</div>
+                        </Link>
                     </li>
                     <li key="orgs-header" className="nav header">Organizations:</li>
                     {this.props.orgs.map(renderOrg)}
diff --git a/app/styles/app.css b/app/styles/app.css
index 7f0d4ee..54fc683 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -2,6 +2,37 @@
     box-sizing: border-box;
 }
 
+.logo {
+    display: inline-block;
+    line-height: 32px;
+    letter-spacing: 5px;
+    padding: 0 5px;
+    color: #fff;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
+    font-weight: 600;
+}
+.logo.e {
+    float: left;
+    width: 30px;
+    padding-left: 10px;
+    background-color: #f5d059;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+}
+.logo.mp {
+    float: left;
+    margin-left: -5px;
+    background-color: #f39d41;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+}
+.logo.act {
+    background-color: #ef7126;
+    margin-left: -5px;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
 section {
     float: left;
 }
@@ -18,9 +49,11 @@ section {
     margin: 0;
     padding: 0;
 }
-li.nav {
+.menu li {
     display: block;
     cursor: pointer;
+}
+.nav {
     margin-bottom: 5px;
 }
 .nav.empact {
@@ -29,18 +62,19 @@ li.nav {
 .nav.header {
     color: #aaa;
     cursor: default;
+    margin-top: 20px;
 }
-.menu a:before {
+.menu .nav a:before {
     display: block;
     float: left;
     width: 3px;
     height: 32px;
     border-radius: 3px;
-    background-color: #218c8d;
+    background-color: #f39d41;
     content: '';
     margin-right: 10px;
 }
-.menu a {
+.menu .nav a {
     display: inline-block;
     line-height: 32px;
     width: 100%;
@@ -48,8 +82,8 @@ li.nav {
     text-decoration: underline;
     border-radius: 3px;
 }
-.menu a.active {
-    background-color: #bcdcdc;
+.menu .nav a.active {
+    background-color: #f9d4be;
 }
 
 .content {