fix(frontend/overlay): widen scope of esc class so background can be …

…cleared also add span tags to allow for text only background close #359
shabados · Jan 12, 2020 · ad46804 · ad46804
1 parent 7c76dbd
commit ad46804
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/app/frontend/src/Overlay/Line.js b/app/frontend/src/Overlay/Line.js
@@ -51,24 +51,31 @@ const Line = ( {
 
   return (
     <div className={classNames( className, {
-      empty: !gurmukhi,
       larivaar,
       assist: larivaar && larivaarAssist,
     }, 'overlay-line' )}
     >
-      <p className="gurmukhi">{line}</p>
+      <p className="gurmukhi">
+        <span className="text">
+          {line}
+        </span>
+      </p>
 
       {translations.filter( isNonEmptyString ).map( ( [ name, translation ] ) => (
         <p key={`${name}-${translation}`} className={classNames( name, 'translation' )}>
-          {translation}
+          <span className="text">
+            {translation}
+          </span>
         </p>
       ) )}
 
       {transliterations.filter( isNonEmptyString ).map( ( [ name, transliteration ] ) => (
         <p key={`${name}-${transliteration}`} className={classNames( name, 'transliteration' )}>
-          {classifyWords( transliteration, true ).map(
-            ( { word, type }, i ) => <span key={`${word}-${type}-${i}`} className={classNames( type, 'word' )}>{word}</span>,
-          )}
+          <span className="text">
+            {classifyWords( transliteration, true ).map(
+              ( { word, type }, i ) => <span key={`${word}-${type}-${i}`} className={classNames( type, 'word' )}>{word}</span>,
+            )}
+          </span>
         </p>
       ) )}
 

diff --git a/app/frontend/src/Overlay/index.js b/app/frontend/src/Overlay/index.js
@@ -1,4 +1,5 @@
 import React, { useContext } from 'react'
+import classNames from 'classnames'
 
 import Line from './Line'
 import ThemeLoader from './ThemeLoader'
@@ -41,7 +42,10 @@ const Overlay = () => {
   const getTransliterationFor = languageId => getTransliteration( line, languageId )
 
   return (
-    <div className="overlay">
+    <div className={classNames( {
+      empty: !line,
+    }, 'overlay' )}
+    >
       <ThemeLoader connected={connected} name={overlayName} />
       <Line
         simpleGraphics