From 03634179cf1f2f7d31fd98fe6fffec7a4305ba00 Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Tue, 19 Mar 2024 11:00:06 -0700
Subject: [PATCH 1/5] Remove custom css in favour of bootstrap classes

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 .../api/templates/verified_credentials.html   | 195 ++++++------------
 1 file changed, 67 insertions(+), 128 deletions(-)

diff --git a/oidc-controller/api/templates/verified_credentials.html b/oidc-controller/api/templates/verified_credentials.html
index 61d37c0f..1f1b16e5 100644
--- a/oidc-controller/api/templates/verified_credentials.html
+++ b/oidc-controller/api/templates/verified_credentials.html
@@ -11,20 +11,21 @@
     />
     <!-- Latest compiled and minified CSS -->
     <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
-      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
       crossorigin="anonymous"
-    />
+    >
 
     <style>
       :root {
         --big-font-size: 1.5rem;
         --small-font-size: 1.8rem;
         --font-family-sans-serif: Arial, Helvetica, sans-serif;
-        --primary: #003366;
-        --secondary: #6c757d;
-        --bs-primary: #000;
+        --bs-primary: #003366;
+        --bs-secondary: #335c85;
+        --bs-btn-disabled-color: #b2c1d1;
+        --bs-blue: #003366
       }
       body {
         color: #313132;
@@ -33,12 +34,9 @@
         border: none;
         font-family: var(--font-family-sans-serif);
       }
-      .navbar {
-        border-radius: 0;
-      }
       .header-branding {
-        background-color: var(--primary);
-        height: 7rem;
+        background-color: var(--bs-primary);
+        height: 5rem;
         width: 100%;
         border-style: none none solid none;
         border-color: #fcba19;
@@ -46,14 +44,9 @@
       }
       .navbar-brand svg {
         position: relative;
-        height: 5rem;
-      }
-      .header {
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        height: 4rem;
       }
-      .header-desc {
+     .header-desc {
         display: grid;
         grid-template-columns: 5rem 1fr;
         width: 22rem;
@@ -70,34 +63,12 @@
         margin-top: 1.5rem;
         margin-bottom: 1.75rem;
       }
-      .qr-code-desc {
-        text-align: left;
-      }
       .qr-code {
         display: flex;
         justify-content: center;
         position: relative;
         margin-bottom: 1rem;
       }
-      .qr-code-image {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        margin-right: 10px;
-      }
-      .qr-code .border svg {
-        position: absolute;
-        left: 48px;
-        width: 330px;
-        height: 330px;
-        transform: scale(1.05) translate(6px, 8px);
-        margin-left: -10px;
-        margin-top: -10px;
-      }
-      .qr-code.pending svg rect {
-        animation: dash 20s linear infinite;
-      }
       .qr-code img {
         border-radius: 25px;
         border: 5px dashed #003366;
@@ -135,29 +106,20 @@
 
       #refresh-button {
         background: rgba(256, 256, 256, 0.5);
-        width: 100%;
         transition-property: opacity;
         transition-duration: 0.2s;
         transition-timing-function: ease-in-out;
         display: none;
+        width: 100%;
       }
-      #refresh-button:hover,
-      #refresh-button:focus,
-      #refresh-button:active {
+     #refresh-button:hover,
+     #refresh-button:focus,
+     #refresh-button:active {
         opacity: 0.9;
       }
       #refresh-button .message {
-        font-size: var(--small-font-size);
-        font-weight: bold;
         margin-bottom: 0.8rem;
       }
-      .fake-button {
-        font-size: var(--big-font-size);
-        font-weight: 700;
-        letter-spacing: 1px;
-        background: white;
-        border-color: var(--primary);
-      }
       .header-desc.success,
       .header-desc.pending,
       .header-desc.expired,
@@ -168,10 +130,6 @@
         align-items: center;
         padding: 1rem 2rem 1rem 0.5rem;
       }
-      .header-desc.expired.expired-deep-link {
-        margin-left: 0;
-        width: 100%;
-      }
       .header-desc.pending svg {
         width: 2rem;
         height: 2rem;
@@ -181,60 +139,40 @@
         height: 2rem;
         opacity: 0.7;
       }
-      .header-desc.expired {
+      .expired {
         background-color: #f0f0f0;
       }
-      .header-desc.expired-deep-link {
-        margin-bottom: 1.5rem;
-      }
-      .header-desc.failed {
+      .failed {
         background-color: #f2dede;
       }
-      .header-desc.pending {
+      .pending {
         background-color: #cbe8ff;
       }
-      .header-desc.success {
+      .success {
         background-color: #dff0d8;
       }
-      .header-desc.abandoned {
+      .abandoned {
         background-color: #f2dede;
       }
       .header-desc a {
         line-height: 1rem;
       }
-      .text-link {
-        display: none;
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-      }
-      .text-link textarea {
-        border-radius: 5px;
-        display: block;
-        max-width: 100%;
-        resize: none;
-        width: 100%;
-      }
-      .text-link label {
-        display: block;
+      .disabled {
+        --bs-btn-disabled-bg: #b2c1d1;
+        --bs-btn-disabled-border-color: #b2c1d1
       }
-
-      /* BC Gov style buttons */
-      .btn-primary,
-      .btn-outline-primary {
-        font-size: var(--big-font-size);
-        font-weight: 700;
-        letter-spacing: 1px;
-        cursor: pointer;
-        margin-top: 1rem;
-        margin-bottom: 1.5rem;
-      }
-
+     .btn {
+       --bs-btn-hover-bg: #335c85;
+       --bs-btn-hover-border-color: #335c85;
+     }
       .btn-primary {
-        background-color: var(--primary);
+        border-color: var(--bs-primary);
+        background-color: var(--bs-primary);
       }
       .btn-outline-primary {
-        color: var(--primary);
-        border-color: var(--primary);
+        color: var(--bs-primary);
+        border-color: var(--bs-primary);
+        --bs-btn-active-bg: #335c85;
       }
       /* Mobile device */
       .mobile-device {
@@ -252,77 +190,77 @@ <h1 class="desktop-device desktop-header">
           Scan with a Digital Wallet
         </h1>
         <h1 class="mobile-device">Continue with:</h1>
-        <div class="header">
-          <div class="header-desc success">
+        <div class="d-flex flex-row justify-content-center">
+          <div class="header-desc success my-2">
             <div class="qr-code-image mw-90">
               {{add_asset("circle-check.svg")}}
             </div>
-            <div class="qr-code-desc">
+            <div class="text-start">
               <b>Success!</b> You will be redirected shortly.
             </div>
           </div>
 
           <div class="header-desc failed">
             <div class="qr-code-image">{{add_asset("circle-x.svg")}}</div>
-            <div class="qr-code-desc">
+            <div class="text-start">
               <b>Proof not accepted.</b>
               <br/>
               <a
                 href="javascript:window.location.reload(true)"
                 title="Please try again."
-                >Please try again.</a
-              >
+              >Please try again.</a
+                                >
             </div>
           </div>
 
           <div class="header-desc expired">
             <div class="qr-code-image">{{add_asset("expired.svg")}}</div>
-            <div class="qr-code-desc">
+            <div class="text-start">
               <b>Proof has expired.</b>
               <br/>
               <a
                 href="javascript:window.location.reload(true)"
                 title="Refresh Proof."
-                >Refresh Proof.</a
-              >
+              >Refresh Proof.</a
+                             >
             </div>
           </div>
 
           <div class="header-desc abandoned">
             <div class="qr-code-image">{{add_asset("circle-x.svg")}}</div>
-            <div class="qr-code-desc">
+            <div class="text-start">
               <b>Proof declined</b>
               <br/>
               <a
                 href="javascript:window.location.reload(true)"
                 title="Refresh QR code."
-                >Try again.</a
-              >
+              >Try again.</a
+                         >
             </div>
           </div>
 
           <div class="header-desc pending">
             <div class="qr-code-image">{{add_asset("hourglass.svg")}}</div>
-            <div class="qr-code-desc">
+            <div class="text-start">
               <b>Proof is pending.</b>
             </div>
           </div>
         </div>
         <!-- BC Wallet deep link if the user agent is a mobile device -->
         <div class="mobile-device">
-            <a
-              id="deep-link-button"
-	      href="{{wallet_deep_link}}"
-              type="submit"
-              class="btn btn-lg btn-block btn-primary"
-              title="Open BC Wallet"
-              target="_blank"
-            >
-              BC Wallet
-            </a>
+          <a
+            id="deep-link-button"
+	    href="{{wallet_deep_link}}"
+            type="submit"
+            class="btn btn-lg btn-block btn-primary w-100"
+            title="Open BC Wallet"
+            target="_blank"
+          >
+            BC Wallet
+          </a>
           <a
             id="other-device-button"
-            class="btn btn-lg btn-default btn-block btn-outline-secondary btn-secondary"
+            class="btn btn-lg btn-default btn-block-secondary btn-outline-primary w-100 border-2"
             title="Open BC Wallet"
           >
             BC Wallet on other device
@@ -331,7 +269,7 @@ <h1 class="mobile-device">Continue with:</h1>
           <div class="centered-header">
             <div class="header-share">
               <div class="qr-code-image">{{add_asset("hand-qrcode.svg")}}</div>
-              <div class="qr-code-desc">
+              <div class="text-start">
                 A request to share your information will be sent to your BC
                 Wallet
               </div>
@@ -342,10 +280,10 @@ <h1 class="mobile-device">Continue with:</h1>
 
         <!-- QR Code for desktop/other -->
         <div class="desktop-device">
-          <div class="header">
-            <div class="header-desc intro">
+          <div class="d-flex flex-row justify-content-center">
+            <div class="header-desc intro my-2">
               <div class="qr-code-image">{{add_asset("hand-qrcode.svg")}}</div>
-              <div class="qr-code-desc">
+              <div class="text-start">
                 Scanning this QR code will send you a request to share your
                 information
               </div>
@@ -354,11 +292,11 @@ <h1 class="mobile-device">Continue with:</h1>
           <div class="media qr-code">
             <button
               id="refresh-button"
-              class="btn btn-default qr-button secondary"
+              class="qr-button"
               title="Refresh QR Code"
             >
               <div class="button-content">
-                <div class="btn btn-block btn-outline-primary fake-button">
+                <div class="btn fw-bolder btn-outline-primary bg-white fs-6">
                   <div class="icon">{{add_asset("refresh.svg")}}</div>
                   <div class="description">Refresh QR code</div>
                 </div>
@@ -378,13 +316,14 @@ <h1 class="mobile-device">Continue with:</h1>
         </div>
 
         <!-- Add a input box with the url_to_message data -->
-        <div class="text-link">
+        <div id="text-link" style="display: none;">
           <label for="url_to_message">Presentation Exchange URL:</label>
           <textarea
             id="url_to_message"
             rows="3"
             disabed
             value="{{url_to_message}}"
+            class="w-100"
           >
             {{url_to_message}}
           </textarea>
@@ -397,7 +336,7 @@ <h1 class="mobile-device">Continue with:</h1>
           <a
             title="Download BC Wallet"
             href="https://www2.gov.bc.ca/gov/content/governments/government-id/bc-wallet"
-            >Download the BC Wallet app
+          >Download the BC Wallet app
           </a>
         </p>
       </div>
@@ -414,7 +353,7 @@ <h1 class="mobile-device">Continue with:</h1>
         return "Android";
       }
 
-      if (/iPad|iPhone|iPod/.test(userAgent) || 
+      if (/iPad|iPhone|iPod/.test(userAgent) ||
           /Macintosh/.test(userAgent) && 'ontouchend' in document ||
           (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) ||
           navigator.vendor && navigator.vendor.indexOf('Apple') > -1) {
@@ -576,7 +515,7 @@ <h1 class="mobile-device">Continue with:</h1>
      * If the BC_ID is clicked on 10 times in a row, display the link textbox
      */
     let counter = 0;
-    const textLinkDiv = document.querySelector(".text-link");
+    const textLinkDiv = document.querySelector("#text-link");
     document.querySelector("#BC_ID").addEventListener("click", () => {
       counter++;
       if (counter === 10) {

From 5cb5b3553c2fd857ebd5abb8d8c1d065808c032b Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Tue, 19 Mar 2024 11:49:30 -0700
Subject: [PATCH 2/5] Introduced margins to properly space the HTML elements

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 .../api/templates/verified_credentials.html   | 80 +++++++++----------
 1 file changed, 38 insertions(+), 42 deletions(-)

diff --git a/oidc-controller/api/templates/verified_credentials.html b/oidc-controller/api/templates/verified_credentials.html
index 1f1b16e5..28bc89aa 100644
--- a/oidc-controller/api/templates/verified_credentials.html
+++ b/oidc-controller/api/templates/verified_credentials.html
@@ -15,7 +15,7 @@
       rel="stylesheet"
       integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
       crossorigin="anonymous"
-    >
+    />
 
     <style>
       :root {
@@ -25,7 +25,7 @@
         --bs-primary: #003366;
         --bs-secondary: #335c85;
         --bs-btn-disabled-color: #b2c1d1;
-        --bs-blue: #003366
+        --bs-blue: #003366;
       }
       body {
         color: #313132;
@@ -46,15 +46,12 @@
         position: relative;
         height: 4rem;
       }
-     .header-desc {
+      .header-desc {
         display: grid;
         grid-template-columns: 5rem 1fr;
-        width: 22rem;
-      }
-      .centered-header {
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        max-width: 22rem;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
       }
       .header-share {
         display: grid;
@@ -112,9 +109,9 @@
         display: none;
         width: 100%;
       }
-     #refresh-button:hover,
-     #refresh-button:focus,
-     #refresh-button:active {
+      #refresh-button:hover,
+      #refresh-button:focus,
+      #refresh-button:active {
         opacity: 0.9;
       }
       #refresh-button .message {
@@ -154,17 +151,14 @@
       .abandoned {
         background-color: #f2dede;
       }
-      .header-desc a {
-        line-height: 1rem;
-      }
       .disabled {
         --bs-btn-disabled-bg: #b2c1d1;
-        --bs-btn-disabled-border-color: #b2c1d1
+        --bs-btn-disabled-border-color: #b2c1d1;
+      }
+      .btn {
+        --bs-btn-hover-bg: #335c85;
+        --bs-btn-hover-border-color: #335c85;
       }
-     .btn {
-       --bs-btn-hover-bg: #335c85;
-       --bs-btn-hover-border-color: #335c85;
-     }
       .btn-primary {
         border-color: var(--bs-primary);
         background-color: var(--bs-primary);
@@ -186,12 +180,12 @@
         <div class="navbar-brand">{{add_asset("BCID_H_rgb_rev.svg")}}</div>
       </nav>
       <div class="container">
-        <h1 class="desktop-device desktop-header">
+        <h1 class="desktop-device desktop-header my-2">
           Scan with a Digital Wallet
         </h1>
-        <h1 class="mobile-device">Continue with:</h1>
+        <h1 class="mobile-device my-1">Continue with:</h1>
         <div class="d-flex flex-row justify-content-center">
-          <div class="header-desc success my-2">
+          <div class="header-desc success">
             <div class="qr-code-image mw-90">
               {{add_asset("circle-check.svg")}}
             </div>
@@ -204,12 +198,12 @@ <h1 class="mobile-device">Continue with:</h1>
             <div class="qr-code-image">{{add_asset("circle-x.svg")}}</div>
             <div class="text-start">
               <b>Proof not accepted.</b>
-              <br/>
+              <br />
               <a
                 href="javascript:window.location.reload(true)"
                 title="Please try again."
-              >Please try again.</a
-                                >
+                >Please try again.</a
+              >
             </div>
           </div>
 
@@ -217,12 +211,12 @@ <h1 class="mobile-device">Continue with:</h1>
             <div class="qr-code-image">{{add_asset("expired.svg")}}</div>
             <div class="text-start">
               <b>Proof has expired.</b>
-              <br/>
+              <br />
               <a
                 href="javascript:window.location.reload(true)"
                 title="Refresh Proof."
-              >Refresh Proof.</a
-                             >
+                >Refresh Proof.</a
+              >
             </div>
           </div>
 
@@ -230,12 +224,12 @@ <h1 class="mobile-device">Continue with:</h1>
             <div class="qr-code-image">{{add_asset("circle-x.svg")}}</div>
             <div class="text-start">
               <b>Proof declined</b>
-              <br/>
+              <br />
               <a
                 href="javascript:window.location.reload(true)"
                 title="Refresh QR code."
-              >Try again.</a
-                         >
+                >Try again.</a
+              >
             </div>
           </div>
 
@@ -250,9 +244,9 @@ <h1 class="mobile-device">Continue with:</h1>
         <div class="mobile-device">
           <a
             id="deep-link-button"
-	    href="{{wallet_deep_link}}"
+            href="{{wallet_deep_link}}"
             type="submit"
-            class="btn btn-lg btn-block btn-primary w-100"
+            class="btn btn-lg btn-block btn-primary w-100 my-2"
             title="Open BC Wallet"
             target="_blank"
           >
@@ -260,13 +254,13 @@ <h1 class="mobile-device">Continue with:</h1>
           </a>
           <a
             id="other-device-button"
-            class="btn btn-lg btn-default btn-block-secondary btn-outline-primary w-100 border-2"
+            class="btn btn-lg btn-default btn-block-secondary btn-outline-primary w-100 border-2 my-2"
             title="Open BC Wallet"
           >
             BC Wallet on other device
           </a>
 
-          <div class="centered-header">
+          <div class="d-flex flex-row justify-content-center">
             <div class="header-share">
               <div class="qr-code-image">{{add_asset("hand-qrcode.svg")}}</div>
               <div class="text-start">
@@ -316,7 +310,7 @@ <h1 class="mobile-device">Continue with:</h1>
         </div>
 
         <!-- Add a input box with the url_to_message data -->
-        <div id="text-link" style="display: none;">
+        <div id="text-link" style="display: none">
           <label for="url_to_message">Presentation Exchange URL:</label>
           <textarea
             id="url_to_message"
@@ -336,7 +330,7 @@ <h1 class="mobile-device">Continue with:</h1>
           <a
             title="Download BC Wallet"
             href="https://www2.gov.bc.ca/gov/content/governments/government-id/bc-wallet"
-          >Download the BC Wallet app
+            >Download the BC Wallet app
           </a>
         </p>
       </div>
@@ -353,10 +347,12 @@ <h1 class="mobile-device">Continue with:</h1>
         return "Android";
       }
 
-      if (/iPad|iPhone|iPod/.test(userAgent) ||
-          /Macintosh/.test(userAgent) && 'ontouchend' in document ||
-          (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) ||
-          navigator.vendor && navigator.vendor.indexOf('Apple') > -1) {
+      if (
+        /iPad|iPhone|iPod/.test(userAgent) ||
+        (/Macintosh/.test(userAgent) && "ontouchend" in document) ||
+        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) ||
+        (navigator.vendor && navigator.vendor.indexOf("Apple") > -1)
+      ) {
         return "iOS";
       }
 

From 576aa9025f4dddba5ff8f3191d546c2ad2a87515 Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Tue, 19 Mar 2024 12:23:14 -0700
Subject: [PATCH 3/5] moved back to the use of header-branding

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 oidc-controller/api/templates/verified_credentials.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/oidc-controller/api/templates/verified_credentials.html b/oidc-controller/api/templates/verified_credentials.html
index 28bc89aa..5e86f432 100644
--- a/oidc-controller/api/templates/verified_credentials.html
+++ b/oidc-controller/api/templates/verified_credentials.html
@@ -42,7 +42,7 @@
         border-color: #fcba19;
         box-shadow: 0px 3px 3px 0px #dedede;
       }
-      .navbar-brand svg {
+      .header-branding svg {
         position: relative;
         height: 4rem;
       }

From e923a44b7f92c82d2ad4ac67dd196a6f5657c51a Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Wed, 20 Mar 2024 16:31:36 -0700
Subject: [PATCH 4/5] Ensure refresh button is visable on hover and
 horizontally aligned

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 .../api/templates/verified_credentials.html       | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/oidc-controller/api/templates/verified_credentials.html b/oidc-controller/api/templates/verified_credentials.html
index 5e86f432..bc7a24dc 100644
--- a/oidc-controller/api/templates/verified_credentials.html
+++ b/oidc-controller/api/templates/verified_credentials.html
@@ -100,7 +100,10 @@
         font-size: var(--small-font-size);
         font-weight: bold;
       }
-
+     .description {
+       --bs-btn-hover-color: var(--bs-primary);
+       color: var(--bs-primary);
+      }
       #refresh-button {
         background: rgba(256, 256, 256, 0.5);
         transition-property: opacity;
@@ -289,11 +292,11 @@ <h1 class="mobile-device my-1">Continue with:</h1>
               class="qr-button"
               title="Refresh QR Code"
             >
-              <div class="button-content">
-                <div class="btn fw-bolder btn-outline-primary bg-white fs-6">
-                  <div class="icon">{{add_asset("refresh.svg")}}</div>
-                  <div class="description">Refresh QR code</div>
-                </div>
+              <div
+                class="button-content btn fw-bolder btn-outline-primary bg-white fs-6 d-flex flex-row"
+              >
+                <div class="icon mx-1">{{add_asset("refresh.svg")}}</div>
+                <div class="description mx-1">Refresh QR code</div>
               </div>
             </button>
             <div class="scanned-mask">

From 7d32461eb2d6edc37d515151b894118aee9a3254 Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Wed, 20 Mar 2024 16:32:41 -0700
Subject: [PATCH 5/5] Restrict state to effects only header-desc background
 color

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 .../api/templates/verified_credentials.html            | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/oidc-controller/api/templates/verified_credentials.html b/oidc-controller/api/templates/verified_credentials.html
index bc7a24dc..19b57eb4 100644
--- a/oidc-controller/api/templates/verified_credentials.html
+++ b/oidc-controller/api/templates/verified_credentials.html
@@ -139,19 +139,19 @@
         height: 2rem;
         opacity: 0.7;
       }
-      .expired {
+      .header-desc.expired {
         background-color: #f0f0f0;
       }
-      .failed {
+      .header-desc.failed {
         background-color: #f2dede;
       }
-      .pending {
+      .header-desc.pending {
         background-color: #cbe8ff;
       }
-      .success {
+      .header-desc.success {
         background-color: #dff0d8;
       }
-      .abandoned {
+      .header-desc.abandoned {
         background-color: #f2dede;
       }
       .disabled {