From 869a0f91fecbfc8da82f8a37890d8b9c1f0972da Mon Sep 17 00:00:00 2001
From: saihaj <44710980+saihaj@users.noreply.github.com>
Date: Fri, 8 May 2020 16:04:18 -0500
Subject: [PATCH] fix(frontend/controller): show dsiabled copy button

Also refactors CSS for popover panel buttons.

Fixes #497
---
 app/frontend/src/Controller/ShabadInfo.css | 20 +++++++-------------
 app/frontend/src/Controller/ShabadInfo.js  |  6 ++----
 2 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/app/frontend/src/Controller/ShabadInfo.css b/app/frontend/src/Controller/ShabadInfo.css
index 3d286855..0830b072 100644
--- a/app/frontend/src/Controller/ShabadInfo.css
+++ b/app/frontend/src/Controller/ShabadInfo.css
@@ -11,23 +11,17 @@
     justify-content: space-evenly;
 }
 
-.db-viewer-button{
-    padding-right: 10px;
-    color: var(--settings-text-color) !important;
-    background-color: var(--settings-setting-off-color) !important;
+.copy-shabad.Mui-disabled{
+    background-color: #6e6b6b44;
 }
 
-.db-viewer-button:hover {
-    color: var(--settings-background-color) !important;
-    background-color: var(--settings-setting-on-color) !important;
-}
-
-.copy-shabad-button{
+.button {
     color: var(--settings-text-color) !important;
-    background-color: var(--settings-setting-off-color) !important;
+    background-color: var(--settings-setting-off-color);
 }
 
-.copy-shabad-button:hover{
+.button:hover {
     color: var(--settings-background-color) !important;
     background-color: var(--settings-setting-on-color) !important;
-}
\ No newline at end of file
+}
+
diff --git a/app/frontend/src/Controller/ShabadInfo.js b/app/frontend/src/Controller/ShabadInfo.js
index cde93752..3a198296 100644
--- a/app/frontend/src/Controller/ShabadInfo.js
+++ b/app/frontend/src/Controller/ShabadInfo.js
@@ -81,7 +81,7 @@ const ShabadInfo = () => {
 
             <Tooltip title="Report a mistake">
               <Button
-                className="db-viewer-button"
+                className="db-viewer button"
                 size="small"
                 onClick={() => controller.openExternalUrl( getDbViewerUrl( lineId ) )}
               >
@@ -89,13 +89,11 @@ const ShabadInfo = () => {
               </Button>
             </Tooltip>
 
-            {shabad && (
             <Tooltip title="Click to copy this shabad">
-              <Button className="copy-shabad-button" size="small" onClick={onCopyClick}>
+              <Button className="copy-shabad button" size="small" disabled={!shabad} onClick={onCopyClick}>
                   Copy
               </Button>
             </Tooltip>
-            )}
 
           </div>