Header responsive layout fixes

src/cljs/commiteth/core.cljs

@@ -72,7 +72,8 @@
            [[:update-address "My Payment Details" {}]
             ["/logout" "Sign Out" {:class "logout-link"}]]
            mobile?]]]
-        [:a.ui.button.small.login-button {:href js/authorizeUrl} "LOG IN \u2192"]))))
+        [:a.ui.button.small.login-button {:href js/authorizeUrl} (str "LOG IN"
+                                                                      (when-not mobile? " \u2192"))]))))
 
 (defn tabs []
   (let [user (rf/subscribe [:user])
@@ -94,13 +95,11 @@
 
 
 (defn header-logo []
-  [:div.ui.grid
-   [:div.ui.four.wide.column.header-logo-left
-    [:div.ui.circular.image.status-logo
-     [svg/status-logo]]]
-   [:div.ui.twelve.wide.column.left.aligned.header-logo-right
-    [:div.logo-header "Status"]
-    [:div.logo-subheader "Open Bounty"]]])
+  [:div.status-header-logo
+   [:div.ui.circular.image.status-logo
+    [svg/status-logo]]
+   [:div.logo-header "Status"]
+   [:div.logo-subheader "Open Bounty"]])
 
 (defn page-header []
   (let [user (rf/subscribe [:user])
@@ -110,7 +109,7 @@
        [:div.ui.grid.container.computer.only
         [:div.four.wide.column
          [header-logo]]
-        [:div.eight.wide.column.middle.aligned.computer.only
+        [:div.eight.wide.column.middle.aligned.computer.only.computer-tabs-container
          [tabs]]
         [:div.four.wide.column.right.aligned.computer.only
          [user-component @user false]]]

src/less/style.less

@@ -63,18 +63,27 @@
 }
 
 
+.status-header-logo {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
 .status-logo {
     width: 42px !important;
 	height: 42px !important;
-	box-shadow: 0 2px 4px 0 rgba(22, 51, 81, 0.14);
 }
 
+
 .logo-header {
     color: #fff;
     font-family: "PostGrotesk-Medium";
 	font-size: 21px;
 	font-weight: 500;
 	text-align: left;
+    position: relative;
+    top: -37px;
+    left: 50px;
 }
 
 .logo-subheader {
@@ -84,8 +93,16 @@
 	font-size: 15px;
 	line-height: 1.0;
 	text-align: left;
+    position: relative;
+    top: -37px;
+    left: 50px;
 }
 
+.computer-tabs-container {
+    padding-top: 0 !important;
+}
+
+
 .top-hunters-header {
     margin-bottom: 0;
 }
@@ -129,8 +146,10 @@
 }
 
 .ui.mini.circular.image {
-    height: 32px;
+    height: 32px !important;
     width: 32px!important;
+    //min-width: 32px;
+    box-shadow: none;
 }
 
 .ui.header {
@@ -144,7 +163,7 @@
 
 
 .user-component {
-    margin-top: 0px!important;
+//     margin-top: 0px!important;
 }
 
 .ui.text.menu {