Merge pull request #1505 from mempool/simon/sponsor-page-ux

Sponsor page revamped

frontend/src/app/app-routing.module.ts

@@ -170,10 +170,6 @@ let routes: Routes = [
         children: [],
         component: AddressComponent
       },
-      {
-        path: 'sponsor',
-        component: SponsorComponent,
-      },
     ],
   },
   {
@@ -456,6 +452,10 @@ let routes: Routes = [
     path: 'status',
     component: StatusViewComponent
   },
+  {
+    path: 'sponsor',
+    component: SponsorComponent,
+  },
   {
     path: '**',
     redirectTo: ''
@@ -586,10 +586,6 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
         path: 'trademark-policy',
         component: TrademarkPolicyComponent
       },
-      {
-        path: 'sponsor',
-        component: SponsorComponent,
-      },
     ],
   },
   {
@@ -702,10 +698,6 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
             path: 'trademark-policy',
             component: TrademarkPolicyComponent
           },
-          {
-            path: 'sponsor',
-            component: SponsorComponent,
-          },
         ],
       },
       {

frontend/src/app/components/sponsor/sponsor.component.html

@@ -1,4 +1,8 @@
-<div class="container-xl sponsor-page">
+<div class="container-xl">
+
+   <img [src]="'./resources/mempool-space-logo.png'" height="35" width="140" class="logo">
+
+   <div class="sponsor-page">
 
    <h1 i18n="sponsor.title">Sponsor</h1>
 
@@ -21,7 +25,7 @@
                   </div>
                </div>
 
-               <div class="card" (click)="setSelection(0.01)" [class.shiny-border]="donationForm.get('selection').value === 0.01">
+               <div class="card middle-card" (click)="setSelection(0.01)" [class.shiny-border]="donationForm.get('selection').value === 0.01">
                   <div class="card-header">Community Sponsor</div>
                   <div class="card-body">
                   <h5 class="card-title">1M <span class="symbol">sats</span></h5>
@@ -149,5 +153,5 @@
          Order ID <span>{{ donationObj.id }}</span>
       </div>
    </div>
-
+</div>
 </div>

frontend/src/app/components/sponsor/sponsor.component.scss

@@ -15,8 +15,8 @@
 }
 
 .card {
-  width: 220px;
+  width: 240px;
-  height: 200px;
+  height: 220px;
   background-color: #1d1f31;
   border: 2px solid #1d1f31;
   cursor: pointer;
@@ -46,7 +46,9 @@
   &:hover {
     background-color: #5058926b;
     border: 2px solid #505892;
-    transform: scale(1.11) translateY(-10px);
+    transform: scale(1.1) translateY(-10px);
+    margin-top: 70px;
+
     .card-header {
       background-color: #505892;
     }
@@ -54,7 +56,7 @@
 }
 
 .donation-form {
-  max-width: 240px;
+  max-width: 280px;
   margin: auto;
   button {
     width: 100%;
@@ -72,14 +74,28 @@
   justify-content: center;
 }
 
+.middle-card {
+  width: 280px;
+  height: 260px;
+  margin-top: 40px;
+  &:hover {
+    margin-top: 50px;
+  }
+}
+
 .shiny-border {
   background-color: #5058926b;
   border: 2px solid #505892;
-  transform: scale(1.11) translateY(-10px);            
+  transform: scale(1.1) translateY(-10px);
+  margin-top: 70px;
   box-shadow: 0px 0px 100px #9858ff52;
   .card-header {
     background-color: #505892;
   }
+
+  &.middle-card {
+    margin-top: 50px;
+  }
 }
 
 .input-group {
@@ -107,3 +123,15 @@
     }
   }
 }
+
+.logo {
+  margin: 30px;
+}
+
+.card-body {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  height: 100%;
+}