Rework ascribe-powered-by styling in nav bar

js/components/header.js

@@ -67,21 +67,19 @@ let Header = React.createClass({
             );
         } else {
             return (
-                <span>
+                <Link to="/collection">
-                    <Link className="icon-ascribe-logo" to="/collection"/>
+                    <span className="icon-ascribe-logo" />
-                </span>
+                </Link>
             );
         }
     },
 
     getPoweredBy() {
         return (
-            <li>
+            <a className="pull-left ascribe-powered-by" href="https://www.ascribe.io/" target="_blank">
-                <a className="pull-right ascribe-powered-by" href="https://www.ascribe.io/" target="_blank">
+                <span>{getLangText('powered by')} </span>
-                    <span id="powered">{getLangText('powered by')} </span>
+                <span className="icon-ascribe-logo"></span>
-                    <span className="icon-ascribe-logo"></span>
+            </a>
-                </a>
-            </li>
         );
     },
 
@@ -192,17 +190,15 @@ let Header = React.createClass({
                         <Navbar.Brand>
                             {this.getLogo()}
                         </Navbar.Brand>
+                        <AclProxy
+                            aclName="acl_view_powered_by"
+                            aclObject={whitelabel}>
+                            {this.getPoweredBy()}
+                        </AclProxy>
                         <Navbar.Toggle />
                     </Navbar.Header>
                     <Navbar.Collapse
                         eventKey={0}>
-                        <Nav navbar pullLeft>
-                            <AclProxy
-                                aclObject={whitelabel}
-                                aclName="acl_view_powered_by">
-                                {this.getPoweredBy()}
-                            </AclProxy>
-                        </Nav>
                         <Nav navbar pullRight>
                             <HeaderNotificationDebug show={false}/>
                             {account}

sass/ascribe_navbar.scss

@@ -76,10 +76,27 @@
         }
     }
 
+    .navbar-header {
+        .ascribe-powered-by {
+            color: $ascribe--nav-fg-prim-color;
+            line-height: 20px;
+            padding: 15px;
+
+            &:focus,
+            &:hover {
+                color: $ascribe--nav-fg-sec-color;
+            }
+        }
+    }
+
     .navbar-brand {
         font-size: 23px;
         padding: 12px 15px;
 
+        .img-brand {
+            height: 100%;
+        }
+
         .icon-ascribe-logo {
             color: $ascribe--nav-fg-prim-color;
 
@@ -88,13 +105,6 @@
                 color: $ascribe--nav-fg-sec-color;
                 text-decoration: none;
             }
-            &:focus {
-                text-decoration: none;
-            }
-        }
-
-        .img-brand {
-            height: 100%;
         }
     }
 

sass/main.scss

@@ -88,6 +88,11 @@ hr {
 .ascribe-powered-by {
     font-size: 11px;
     font-weight: 300;
+
+    &:focus,
+    &:hover {
+        text-decoration: none;
+    }
 }
 
 .clear-paddings {

sass/whitelabel/wallet/artcity/artcity_custom_style.scss

@@ -59,6 +59,7 @@ $artcity--ter-highlight-color: #EDEDF0;
             height: 115%;
         }
 
+        .navbar-header .ascribe-powered-by,
         .navbar-brand .icon-ascribe-logo {
             color: $artcity--nav-fg-prim-color;
 

sass/whitelabel/wallet/market/market_custom_style.scss

@@ -56,6 +56,7 @@ $market--highlight-color: #2882fa;
             height: 115%;
         }
 
+        .navbar-header .ascribe-powered-by,
         .navbar-brand .icon-ascribe-logo {
             color: $market--nav-fg-prim-color;
 

sass/whitelabel/wallet/market/market_footer.scss

@@ -8,8 +8,4 @@
         //border: 0;
         margin-bottom: 1.5em;
     }
-
-    .ascribe-powered-by {
-        font-weight: 300 !important;
-    }
 }

sass/whitelabel/wallet/polline/polline_custom_style.scss

@@ -55,18 +55,15 @@ $polline--highlight-color: #2882fa;
 
         .navbar-brand {
             padding: 0 5px 0 15px;
+        }
 
-            .img-brand {
+        .navbar-header .ascribe-powered-by,
-                height: 100%;
+        .navbar-brand .icon-ascribe-logo {
-            }
+            color: $polline--nav-fg-prim-color;
 
-            .icon-ascribe-logo {
+            &:focus,
-                color: $polline--nav-fg-prim-color;
+            &:hover {
-
+                color: darken($polline--nav-fg-prim-color, 20%);
-                &:focus,
-                &:hover {
-                    color: darken($polline--nav-fg-prim-color, 20%);
-                }
             }
         }
     }