From f81bbb93a5f56c19aee30fabfaadb72abb6b4a62 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Tue, 9 Apr 2024 20:51:39 +0900
Subject: [PATCH] Polish global footer

---
 .../theme-selector/theme-selector.component.ts       | 12 ++++++++++++
 .../global-footer/global-footer.component.html       |  8 ++++----
 .../global-footer/global-footer.component.scss       | 10 +++++++---
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/components/theme-selector/theme-selector.component.ts b/frontend/src/app/components/theme-selector/theme-selector.component.ts
index e6e67dbca..57cbee865 100644
--- a/frontend/src/app/components/theme-selector/theme-selector.component.ts
+++ b/frontend/src/app/components/theme-selector/theme-selector.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { ThemeService } from '../../services/theme.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-theme-selector',
@@ -11,6 +12,7 @@ import { ThemeService } from '../../services/theme.service';
 export class ThemeSelectorComponent implements OnInit {
   themeForm: UntypedFormGroup;
   themes = ['default', 'contrast', 'wiz'];
+  themeSubscription: Subscription;
 
   constructor(
     private formBuilder: UntypedFormBuilder,
@@ -22,10 +24,20 @@ export class ThemeSelectorComponent implements OnInit {
       theme: ['default']
     });
     this.themeForm.get('theme')?.setValue(this.themeService.theme);
+    // Subscribe to theme changes because two instances of this component exist
+    this.themeSubscription = this.themeService.themeChanged$.subscribe(() => {
+      if (this.themeForm.get('theme')?.value !== this.themeService.theme){
+        this.themeForm.get('theme')?.setValue(this.themeService.theme);
+      }
+    });
   }
 
   changeTheme() {
     const newTheme = this.themeForm.get('theme')?.value;
     this.themeService.apply(newTheme);
   }
+
+  ngOnDestroy() {
+    this.themeSubscription.unsubscribe();
+  }
 }
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html
index 1a93729d7..74b5b1c6f 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@@ -25,16 +25,16 @@
             <app-theme-selector></app-theme-selector>
           </div>
           <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-none d-sm-flex justify-content-center" [routerLink]="['/login' | relativeUrl]">
-            <span *ngIf="loggedIn" i18n="shared.my-account">My Account</span>
-            <span *ngIf="!loggedIn" i18n="shared.sign-in">Sign In</span>
+            <span *ngIf="loggedIn" i18n="shared.my-account" class="nowrap">My Account</span>
+            <span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span>
           </a>
         </div>
         <div class="selector d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0">
           <app-theme-selector></app-theme-selector>
         </div>
         <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0 mb-2" [routerLink]="['/login' | relativeUrl]">
-          <span *ngIf="loggedIn" i18n="shared.my-account">My Account</span>
-          <span *ngIf="!loggedIn" i18n="shared.sign-in">Sign In</span>
+          <span *ngIf="loggedIn" i18n="shared.my-account" class="nowrap">My Account</span>
+          <span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span>
         </a>
         <p class="explore-tagline-desktop">
           <ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.scss b/frontend/src/app/shared/components/global-footer/global-footer.component.scss
index 2db64e976..880ab79b4 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.scss
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.scss
@@ -142,6 +142,10 @@ footer .sponsor {
   max-width: 160px;
 }
 
+footer .nowrap {
+  white-space: nowrap;
+}
+
 .explore-tagline-desktop {
   display: none;
 }
@@ -150,7 +154,7 @@ footer .sponsor {
   display: block;
 }
 
-@media (min-width: 901px) {
+@media (min-width: 951px) {
   :host-context(.ltr-layout) .language-selector {
     float: right !important;
   }
@@ -168,7 +172,7 @@ footer .sponsor {
 }
 
 .services {
-  @media (min-width: 901px) and (max-width: 1147px) {
+  @media (min-width: 951px) and (max-width: 1147px) {
     :host-context(.ltr-layout) .services .language-selector {
       float: none !important;
     }
@@ -244,7 +248,7 @@ footer .sponsor {
 
 }
 
-@media (max-width: 900px) {
+@media (max-width: 950px) {
 
   .main-logo {
     width: 220px;