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>

src/assets/Bitcoin.svg

@@ -0,0 +1,7 @@
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="64" width="64" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+<g transform="translate(0.00630876,-0.00301984)">
+<path fill="#f7931a" d="m63.033,39.744c-4.274,17.143-21.637,27.576-38.782,23.301-17.138-4.274-27.571-21.638-23.295-38.78,4.272-17.145,21.635-27.579,38.775-23.305,17.144,4.274,27.576,21.64,23.302,38.784z"/>
+<path fill="#FFF" d="m46.103,27.444c0.637-4.258-2.605-6.547-7.038-8.074l1.438-5.768-3.511-0.875-1.4,5.616c-0.923-0.23-1.871-0.447-2.813-0.662l1.41-5.653-3.509-0.875-1.439,5.766c-0.764-0.174-1.514-0.346-2.242-0.527l0.004-0.018-4.842-1.209-0.934,3.75s2.605,0.597,2.55,0.634c1.422,0.355,1.679,1.296,1.636,2.042l-1.638,6.571c0.098,0.025,0.225,0.061,0.365,0.117-0.117-0.029-0.242-0.061-0.371-0.092l-2.296,9.205c-0.174,0.432-0.615,1.08-1.609,0.834,0.035,0.051-2.552-0.637-2.552-0.637l-1.743,4.019,4.569,1.139c0.85,0.213,1.683,0.436,2.503,0.646l-1.453,5.834,3.507,0.875,1.439-5.772c0.958,0.26,1.888,0.5,2.798,0.726l-1.434,5.745,3.511,0.875,1.453-5.823c5.987,1.133,10.489,0.676,12.384-4.739,1.527-4.36-0.076-6.875-3.226-8.515,2.294-0.529,4.022-2.038,4.483-5.155zm-8.022,11.249c-1.085,4.36-8.426,2.003-10.806,1.412l1.928-7.729c2.38,0.594,10.012,1.77,8.878,6.317zm1.086-11.312c-0.99,3.966-7.1,1.951-9.082,1.457l1.748-7.01c1.982,0.494,8.365,1.416,7.334,5.553z"/>
+</g>
+</svg>

src/index.html

@@ -7,8 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap" rel="stylesheet"> 
-  
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>