From 386480cd171e785e661534f363befe4ad9446093 Mon Sep 17 00:00:00 2001
From: Amy Yates <yateam@ohsu.edu>
Date: Thu, 16 May 2024 15:04:53 -0700
Subject: [PATCH] #208: Make the OMRON sync alert box clickable.

---
 src/main/resources/static/css/home.css     | 4 ++++
 src/main/resources/static/js/home.js       | 4 ++--
 src/main/resources/templates/home.mustache | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
index 1ee589c2..d3feb8da 100644
--- a/src/main/resources/static/css/home.css
+++ b/src/main/resources/static/css/home.css
@@ -140,3 +140,7 @@ img.bp-icon {
     background-color: #d5f8f4;
 }
 
+.alert-clickable:hover {
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
+  }
+
diff --git a/src/main/resources/static/js/home.js b/src/main/resources/static/js/home.js
index 33142d69..9c2bd878 100644
--- a/src/main/resources/static/js/home.js
+++ b/src/main/resources/static/js/home.js
@@ -113,8 +113,8 @@ function populateOmronStatus(data) {
 
         } else if (data.status === 'READY') {
             let omronAuthRequestUrl = $('#omronAuthRequestUrl').html();
-            html += '<div class="alert alert-warning" role="alert"><span id="omronAuthLink" class="link" data-target="' +
-                omronAuthRequestUrl + '">Click here</span> to authenticate and synchronize with Omron.</div>';
+            html += '<div id="omronAuthLink" class="alert alert-warning alert-clickable" role="alert" data-target="' + omronAuthRequestUrl + 
+                '"><span class="link" >Click here</span> to authenticate and synchronize with Omron.</div>';
             if (data.lastUpdated !== null) {
                 html += '<div class="alert alert-teal" role="alert">Omron data last synchronized <em>' + data.lastUpdatedString + '</em>.</div>';
             }
diff --git a/src/main/resources/templates/home.mustache b/src/main/resources/templates/home.mustache
index 8277c577..fd00090a 100644
--- a/src/main/resources/templates/home.mustache
+++ b/src/main/resources/templates/home.mustache
@@ -146,8 +146,8 @@
         </div>
         <div id="omron">
             {{#omronAuthRequestUrl}}
-                <div class="alert alert-warning" role="alert">
-                    <span id="omronAuthLink" class="link" data-target="{{omronAuthRequestUrl}}">Click here</span> to authenticate and synchronize with Omron.
+                <div id="omronAuthLink" class="alert alert-warning alert-clickable" data-target="{{omronAuthRequestUrl}}" role="alert">
+                    <span class="link">Click here</span> to authenticate and synchronize with Omron.
                 </div>
             {{/omronAuthRequestUrl}}
             {{#omronSynchronizing}}