# HG changeset patch
# User Oscar Cortez <oscar@netlandish.com>
# Date 1609304549 21600
#      Tue Dec 29 23:02:29 2020 -0600
# Node ID 63a647e3d1c9e93f9fb98397bcefd7527b972461
# Parent  51817f99c53e5809776f09e7a7f0ab1b9e806a32
Add support for show actions on result screen

diff --git a/src/lib/dom.js b/src/lib/dom.js
--- a/src/lib/dom.js
+++ b/src/lib/dom.js
@@ -32,7 +32,7 @@
             <h2 class="answer__title">${question}</h2>
             <div class="answer__options">
                 ${answers.map(answer => `
-                <div class="${answer['selected'] ? 'answer__option--selected' : 'answer__option'} ${answer['key']}" style="background-color: ${answer['background']}">
+                <div class="${answer['selected'] ? 'answer__option--selected' : 'answer__option'} answer__option--${answer['key']}" style="background-color: ${answer['background']}">
                     <img class="answer__option__logo" src="${answer['logo']}" />
                     <p class="answer__option__content" style="color: ${answer['color']}">${answer['title']}</p>
                 </div>
@@ -47,11 +47,11 @@
 const ResultTemplate = (questions, selected_answers, options) => `
     <table class="result">
         <tbody>
-            <tr class="logos">
+            <tr class="result__logos">
                 <td></td>
                 ${options.map(option => `
                 <td>
-                    <img src="${option['logo']}" />
+                    <img src="${option['logo']}" class="result__logo--${option['key']}" />
                 </td>
                 `).join('')}
             </tr>
@@ -76,6 +76,14 @@
                     return `<td>${icon}</td>`;
                 }).join('')}
             </tr>`).join('')}
+            <tr class="result__actions">
+                <td></td>
+                ${options.map(option => `
+                <td>
+                    <a href="${option['result_action']}" class="result__action result__action--${option['key']}">${option['result_text']}</a>
+                </td>
+                `).join('')}
+            </tr>
         </tbody>
     </table>
 `;
diff --git a/src/styles.css b/src/styles.css
--- a/src/styles.css
+++ b/src/styles.css
@@ -24,18 +24,32 @@
 }
 
 .question__action,
+.answer__action,
+.result__action {
+  border: none;
+  border-radius: 25px;
+  color: #fff;
+  white-space: nowrap;
+  background-color: #3c689b;
+  cursor: pointer;
+}
+.question__action,
 .answer__action {
   margin-top: 2rem;
-  border: none;
   height: 50px;
-  border-radius: 25px;
   font-size: 20px;
   padding: 0 2rem;
-  color: #fff;
-  background-color: #3c689b;
-  border: 1px solid #3c689b;
-  cursor: pointer;
+
 }
+.result__action {
+  height: 40px;
+  font-size: 16px;
+  padding: 0 1rem;
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+}
+
 .question__action:first-child {
   margin-right: 0.5rem;
 }
@@ -118,7 +132,7 @@
   width: 100%;
   border-collapse: collapse;
 }
-.result img {
+.result__logos img {
   max-width: 130px;
   padding-left: 0.3rem;
   padding-right: 0.3rem;