Change dashboard menu logo (#166)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

dashboard/client/components/layout/sidebar.scss

@@ -28,11 +28,27 @@
     padding: $padding / 2;
     height: var(--main-layout-header);
 
+    a {
+      font-size: 18.5px;
+      text-decoration: none;
+    }
+
+    div.logo-text {
+      position: absolute;
+      left: 42px;
+      top: 11.5px;
+    }
+
     .logo-icon {
-      width: 100px;
-      height: 100%;
-      margin-left: $padding / 1.5;
-      margin-top: $padding / 1.5;
+      width: 28px;
+      height: 28px;
+      margin-left: 2px;
+      margin-top: 3px;
+      margin-right: 10px;
+
+      svg {
+        --size: 28px;
+      }
     }
 
     .pin-icon {
@@ -52,11 +68,6 @@
       box-sizing: content-box;
       padding: floor($padding / 2.6);
       border-radius: 50%;
-
-      &.logout {
-        width: ceil($iconSize * .9);
-        padding: $padding / 2;
-      }
     }
 
     .link-text {
@@ -76,10 +87,6 @@
       padding: $itemSpacing;
     }
 
-    > .logout {
-      margin-top: auto;
-    }
-
     hr {
       background-color: transparent;
     }
@@ -161,4 +168,4 @@
     padding: $padding;
     text-align: center;
   }
-}
+}

dashboard/client/components/layout/sidebar.tsx

@@ -74,7 +74,7 @@ export class Sidebar extends React.Component<Props> {
         <div className={cssNames("Sidebar flex column", className, { pinned: isPinned })}>
           <div className="header flex align-center">
             <NavLink exact to="/" className="box grow">
-              <Icon svg="logo-full" className="logo-icon"/>
+              <Icon svg="logo-full" className="logo-icon"/> <div className="logo-text">Lens</div>
             </NavLink>
             <Icon
               className="pin-icon"