From 9fa715e40358fbe31cef372e5f3519f9877524d2 Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Wed, 23 Aug 2023 14:40:16 +0200
Subject: [PATCH] [footer] re-add main CTA with better design

---
 .../src/app/components/menu/menu.component.html     |  2 +-
 .../global-footer/global-footer.component.html      | 12 ++++++++++--
 .../global-footer/global-footer.component.scss      | 13 ++++++++-----
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/components/menu/menu.component.html b/frontend/src/app/components/menu/menu.component.html
index 927d6212f..e89ace64a 100644
--- a/frontend/src/app/components/menu/menu.component.html
+++ b/frontend/src/app/components/menu/menu.component.html
@@ -5,7 +5,7 @@
       <span *ngIf="userAuth" class="menu-click">
         <strong class="menu-click">@ {{ userAuth.user.username }}</strong>
       </span>
-      <a *ngIf="!userAuth" class="d-flex justify-content-center align-items-center nav-link m-0  menu-click" routerLink="/login" role="tab">
+      <a *ngIf="!userAuth" class="d-flex justify-content-center align-items-center nav-link m-0  menu-click" routerLink="/login" role="tab" (click)="onLinkClick('/login')">
         <fa-icon class="menu-click" [icon]="['fas', 'user-circle']" [fixedWidth]="true" style="font-size: 25px;margin-right: 15px;"></fa-icon>
         <span class="menu-click" style="font-size: 20px;">Sign in</span>
       </a>
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 e48e8b5a8..e8844bdb7 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
@@ -7,7 +7,7 @@
           <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
           <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126"></app-svg-images>
         </div>
-        <div class="site-options">
+        <div class="site-options d-flex justify-content-center align-items-center">
           <div class="selector">
             <app-language-selector></app-language-selector>
           </div>
@@ -17,8 +17,16 @@
           <div class="selector">
             <app-rate-unit-selector></app-rate-unit-selector>
           </div>
+          <a 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 / Sign Up</span>
+          </a>
         </div>
-      </div>
+        <a class="btn btn-purple sponsor d-flex d-sm-none justify-content-center ml-auto mr-auto mt-3 mb-2" [routerLink]="['/login' | relativeUrl]">
+          <span *ngIf="loggedIn" i18n="shared.my-account">My Account</span>
+          <span *ngIf="!loggedIn" i18n="shared.sign-in">Sign In / Sign Up</span>
+        </a>
+    </div>
     </div>
     <div class="row col-md-12 link-tree">
         <div class="links">
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 5c4a45d98..9e7d17b13 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
@@ -110,6 +110,13 @@ footer .row.version p a {
   display: inline-block;
 }
 
+footer .sponsor {
+  height: 31px;
+  align-items: center;
+  margin-left: 5px;
+  max-width: 160px;
+}
+
 @media (max-width: 1200px) {
 
   .main-logo {
@@ -167,17 +174,13 @@ footer .row.version p a {
 
   footer .site-options {
     float: none;
-    margin-top: 30px;
+    margin-top: 20px;
   }
 
   footer .row.social-links {
     margin: 48px 0 24px 0;
   }
 
-  footer .selector {
-    margin: 10px 0 0 0;
-  }
-
   footer .selector:not(:last-child) {
     margin-right: 10px;
   }