Alerts added

Better status handling

src/app/payment/payment.component.css

@@ -3,15 +3,41 @@
     padding: 0;
     width: 100%;
     height: 500px;
-    background-color: hsl(0, 0%, 11%);
+    background-color: #1c1c1c;
     border-radius: 8px;
     transform: translateY(-8px);
 }
 
+/* Apply effect when invoice expired */
+.invalid {
+    filter: grayscale(1);
+}
+.invalid .qrWrapper, .invalid .data {
+    filter: blur(10px);
+    animation: blurFade 0.2s ease;
+    cursor: not-allowed;
+    user-select: none;
+}
+.invalid svg, .invalid img {
+    display: none;
+}
+
+@keyframes blurFade {
+    from { filter: blur(0) }
+    to { filter: blur(10px) }
+}
+
 .request {
     transform: translateY(-40px);
 }
 
+.loader {
+    position: absolute;
+    display: inline;
+    transform: translateY(-24px) translateX(32px);
+}
+
+/* Styles for payment screen (not for payment choosing) */
 .main {
     display: grid;
     height: 400px;
@@ -38,6 +64,18 @@
     z-index: 2;
 }
 
+.alert {
+    text-align: center;
+    background-color: #C03A08;
+    color: #fff;
+    padding: 1rem;
+    border-radius: 8px;
+    border: 3px solid #a93206;
+}
+.alert p {
+    margin: 0;
+}
+
 @keyframes coinRoll {
     0% {
         transform: translateY(96px) rotate(-45deg) scale(0.5);
@@ -65,6 +103,11 @@
     grid-row: 4;
 }
 
+.price {
+    font-size: 10pt;
+    font-weight: light;
+}
+
 .main h3 {
     line-height: 0;
 }