fix(frontend/controller): show dsiabled copy button

Also refactors CSS for popover panel buttons. Fixes shabados#497
saihaj · May 8, 2020 · 869a0f9 · 869a0f9
1 parent 891826a
commit 869a0f9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 17 deletions.
diff --git 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;
-}
+}
+
diff --git a/app/frontend/src/Controller/ShabadInfo.js b/app/frontend/src/Controller/ShabadInfo.js
@@ -81,21 +81,19 @@ const ShabadInfo = () => {
 
             <Tooltip title="Report a mistake">
               <Button
-                className="db-viewer-button"
+                className="db-viewer button"
                 size="small"
                 onClick={() => controller.openExternalUrl( getDbViewerUrl( lineId ) )}
               >
               Open Online
               </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>