Increased clarity for claimed payment

Author: “Gabriel

src/App.css

@@ -95,12 +95,33 @@ pre.list {
   }
 }
 
-.inactive-border {
-  border: 5px solid white;
+.ready-label,
+.claimed-label {
+  color: white;
+  display: block;
+  width: 7em;
+  text-align: center;
+  border-radius: 4px 4px 0 0;
+  height: 18px;
+  line-height: 22px;
+  font-weight: bold;
+}
+
+
+.ready-label {
+  background: #96b696;
+ }
+
+ .claimed-label {
+  background: #ff4f43;
+  }  
+
+.ready-border {
+  border: 5px solid #96b696;
 }
 
-.active-border {
-  border: 5px solid red;
+.claimed-border {
+  border: 5px solid #ff4f43;
 }
 
 .technical {

src/demo/sections/CustomerViewSection.jsx

@@ -37,14 +37,17 @@ const MerchantViewSection = ({
                 <pre>{acceptanceUrl}</pre>
               </div>
               <div>
-                <label>Scanned:</label>
+                <label>Claimed:</label>
                 <pre>{isClaimed ? 'Yes' : 'No'}</pre>
               </div>
               <pre>
+                <div
+                  className={isClaimed ? 'claimed-label' : 'ready-label'}
+                >{isClaimed ? 'Claimed' : 'Ready'}</div>
                 {acceptanceUrl && (
                   <QRCode
                     size={200}
-                    className={isClaimed ? 'active-border' : 'inactive-border'}
+                    className={isClaimed ? 'claimed-border' : 'ready-border'}
                     value={acceptanceUrl}
                   />
                 )}