From 773e43e0cf5b00c170c8b961fa336f9f85400194 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Fri, 22 Jul 2022 13:04:29 +0200
Subject: [PATCH] Navbar logos fix

---
 .../master-page/master-page.component.html    |  2 +-
 .../master-page/master-page.component.scss    | 26 +++++++++++--------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html
index 7b742a5ad..7be41f233 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -1,12 +1,12 @@
 <ng-container *ngIf="{ val: network$ | async } as network">
 <header>
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+  <a class="navbar-brand" [routerLink]="['/' | relativeUrl]">
   <ng-template [ngIf]="subdomain">
     <div class="subdomain_container">
       <img [src]="'/api/v1/enterprise/images/' + subdomain + '/logo'" class="subdomain_logo">
     </div>
   </ng-template>
-  <a class="navbar-brand" [routerLink]="['/' | relativeUrl]" style="position: relative;">
     <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
       <img *ngIf="!officialMempoolSpace" src="/resources/mempool-logo.png" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }" alt="The Mempool Open Source Project logo">
       <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 140px; height: 35px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss
index 00de2cd4c..f251215fb 100644
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -68,10 +68,6 @@ li.nav-item {
   }
 }
 
-.navbar-brand {
-  width: 60%;
-}
-
 .navbar {
   .dropdown {
     .dropdown-toggle {
@@ -80,10 +76,8 @@ li.nav-item {
   }
 }
 
-@media (min-width: 576px) {
-  .navbar-brand {
-    width: 140px;
-  }
+.navbar-brand {
+  position: relative;
 }
 
 nav {
@@ -93,8 +87,7 @@ nav {
 .connection-badge {
   position: absolute;
   top: 13px;
-  left: 0px;
-  width: 140px;
+  width: 100%;
 }
 
 .badge {
@@ -150,10 +143,21 @@ nav {
   max-height: 45px;
   max-width: 140px;
   margin: auto;
+  align-self: center;
 }
 
 .subdomain_container {
   width: 140px;
   margin-right: 15px;
   text-align: center;
-}
\ No newline at end of file
+}
+
+.logo-holder {
+  display: flex;
+  flex-direction: row;
+}
+
+.navbar-brand {
+  flex-direction: row;
+  display: flex;
+}