Basic structure of payment screen

src/app/app.component.css

@@ -0,0 +1,26 @@
+.bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: #F7A12F;
+    z-index: -999;
+}
+
+.content {
+    margin: 0 auto;
+    transform: translateY(20vh);
+    transform-origin: center;
+    min-width: 900px;
+    width: 50vw;
+    
+    /* Shadow */
+    box-shadow:
+        0 -0.5px 2.8px -9px rgba(0, 0, 0, 0.39)
+    ;
+}
+
+.content * {
+    width: 100%;
+}

src/app/app.component.html

@@ -1,4 +1,5 @@
-<div class="bg">
-  <app-header></app-header>
-  <app-payment></app-payment>
+<div class="bg"></div>
+<div class="content">
+    <app-header></app-header>
+    <app-payment></app-payment>
 </div>

src/app/app.module.ts

@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
 import { PaymentComponent } from './payment/payment.component';
+import { QRCodeModule } from 'angularx-qrcode';
 
 @NgModule({
   declarations: [
@@ -12,7 +13,8 @@ import { PaymentComponent } from './payment/payment.component';
     PaymentComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    QRCodeModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/header/header.component.css

@@ -0,0 +1,32 @@
+.header {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    margin: 0;
+    padding: 0;
+    background-color: #fff;
+    padding: 1rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    border-radius: 22px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.header h2 {
+    font-weight: bolder;
+    width: fit-content;
+    grid-column: 1;
+}
+
+.header a {
+    color: red;
+    border: 1px solid red;
+    border-block-end-width: 1px;
+    border-radius: 5px;
+    padding: 0.8rem;
+    margin: auto 0;
+    height: fit-content;
+    float: right;
+    cursor: pointer;
+    grid-column: 2;
+}

src/app/header/header.component.html

@@ -1 +1,4 @@
-<p>header works!</p>
+<div class="header">
+    <h2>LibrePay</h2>
+    <a>Cancel payment</a>
+</div>

src/app/payment/payment.component.css

@@ -0,0 +1,57 @@
+.payment {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 400px;
+    background-color: hsl(0, 0%, 11%);
+    border-radius: 8px;
+    transform: translateY(-8px);
+}
+
+.qr {
+    position: relative;
+    transform: translateY(25%);
+    margin: 0 auto;
+    grid-row-start: 1;
+    grid-row-end: 5;
+    width: 256px;
+    height: 256px;
+    border-radius: 8px;
+    overflow: hidden;
+}
+.qr > img {
+    position: absolute;
+    height: 64px;
+    width: 64px;
+    transform: translate(96px, 96px);
+    z-index: 2;
+}
+
+.qrWrapper {
+}
+
+.payment * {
+    color: #fff;
+}
+
+/* Data */
+.data {
+    display: grid;
+    grid-template-columns: 1fr 50px;
+    grid-template-rows: 1fr 4rem 4rem 4rem 1fr;
+}
+#target {
+    grid-row: 2;
+}
+#amount {
+    grid-row: 3;
+}
+#status {
+    grid-row: 4;
+}
+
+h3 {
+    line-height: 0;
+}

src/app/payment/payment.component.html

@@ -0,0 +1,27 @@
+<div class="payment">
+    <div class="qrWrapper">
+        <div class="qr">
+            <img src="assets/Bitcoin.svg">
+            <qrcode
+                [qrdata]="'bitcoin:1QFrbboisCYgeBdowGAuCTK3r2YnZuApYd'"
+                [width]="256"
+                [errorCorrectionLevel]="'M'"
+                [elementType]="'svg'"
+                [margin]="1">
+            </qrcode>
+        </div>
+    </div>
+
+    <div class="data">
+        <!-- Payment data -->
+        <span id="target">Send to
+            <h3>1QFrbboisCYgeBdowGAuCTK3r2YnZuApYd</h3>
+        </span>
+        <span id="amount">Amount
+            <h3>0.00133700 BTC</h3>
+        </span>
+        <span id="status">Status
+            <h3>Pending</h3>
+        </span>
+    </div>
+</div>