refactor(frontend/controller): correctly name CSS classes and remove …

…inline handlers (#608)
shabados · Oct 23, 2020 · f18c13a · f18c13a
1 parent 707495b
commit f18c13a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 18 deletions.
diff --git a/app/frontend/src/Controller/ShabadInfo.css b/app/frontend/src/Controller/ShabadInfo.css
@@ -5,22 +5,22 @@
     background-color: var(--controller-background-color);
 }
 
-.popver-buttons {
+.popover-buttons {
   margin-top: 10px;
   display: flex;
   justify-content: space-evenly;
 }
 
-.popver-buttons .copy-shabad.Mui-disabled {
+.popover-buttons .copy-shabad.Mui-disabled {
   background-color: #6e6b6b44;
 }
 
-.popver-buttons .button {
+.popover-buttons .button {
   color: var(--settings-text-color) !important;
   background-color: var(--settings-setting-off-color);
 }
 
-.popver-buttons .button:hover {
+.popover-buttons .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
@@ -37,19 +37,21 @@ const ShabadInfo = () => {
   // Icon changes when open
   const barIcon = isPopoverOpen ? faTimesCircle : faInfoCircle
 
-  const onCopyClick = () => {
-    const gurmukhi = lines.map( ( { gurmukhi } ) => gurmukhi ).join( ' ' )
-
-    copyToClipboard( stripVishraams( toUnicode( gurmukhi ) ) )
-  }
-
   const { sourceId, writerId, section } = shabad || line.shabad
   const { nameEnglish: sectionName } = bani || section
   const { id: lineId, sourcePage } = line
 
   const { nameEnglish: writerName } = writers[ writerId ]
   const { nameEnglish: sourceName, pageNameEnglish: pageName } = recommendedSources[ sourceId ]
 
+  const onCopyClick = () => {
+    const gurmukhi = lines.map( ( { gurmukhi } ) => gurmukhi ).join( ' ' )
+
+    copyToClipboard( stripVishraams( toUnicode( gurmukhi ) ) )
+  }
+
+  const openViewer = () => controller.openExternalUrl( getDbViewerUrl( lineId ) )
+
   return (
     <span>
 
@@ -76,21 +78,17 @@ const ShabadInfo = () => {
           <span className="writer-name">{writerName}</span>
           <br />
 
-          <div className="popver-buttons">
+          <div className="popover-buttons">
 
             <Tooltip title="Report a mistake">
-              <Button
-                className="db-viewer button"
-                size="small"
-                onClick={() => controller.openExternalUrl( getDbViewerUrl( lineId ) )}
-              >
-              Open Online
+              <Button className="db-viewer button" size="small" onClick={openViewer}>
+                Open Online
               </Button>
             </Tooltip>
 
             <Tooltip title="Click to copy this shabad">
               <Button className="copy-shabad button" size="small" disabled={!shabad} onClick={onCopyClick}>
-                  Copy
+                Copy
               </Button>
             </Tooltip>