Move disclaimer to company name hover

src/Components/IsNiftyOpenApp/App.css

@@ -53,7 +53,7 @@
   height: 100%;
 }
 
-.App .top-bar {
+.App .top-bar>*, .App .top-bar svg {
   z-index: 1;
 }
 
@@ -61,17 +61,15 @@
   width: 100%;
   height: 80vh;
   position: relative;
-  z-index: -1;
 }
 
 .App .lower-half {
   width: 100%;
   height: 20vh;
-  
-  z-index: -1;
 }
 
-.App .OpenXDayMini, .App .NextOpenCloseMini {
+.App .OpenXDayMini,
+.App .NextOpenCloseMini {
   border-top: 5px solid rgba(255, 255, 255, 0.6);
 }
 
@@ -107,16 +105,3 @@
   width: 100%;
   transform: translate(-50%, 0);
 }
-
-.disclaimer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: 0 1em;
-  padding: 0.5em;
-  font-size: .6em;
-  background-color: rgba(255,255,255,0.75);
-  border-radius: .5em;
-  text-align: center;
-}

src/Components/IsNiftyOpenApp/App.tsx

@@ -115,11 +115,6 @@ class IsNiftyOpenApp extends React.Component {
             />
           </div>
         </div>
-        <div className="disclaimer">
-          {`This data is taken from Karanataka ETV Flipkart holidays list,
-            but doesn't include optional holidays.
-            There is no gurantee that this data is correct or will be kept updated.`}
-        </div>
       </div>
     );
   }

src/Components/OpenXDay/Component.css

@@ -1,64 +1,81 @@
 @import "../../Utils/utils.css";
 
 .OpenXDay {
-    width: 100%;
-    height: 100%;
-    font-size: 4em;
-    background-color: rgba(0, 0, 0, 0.75);
+  width: 100%;
+  height: 100%;
+  font-size: 4em;
+  background-color: rgba(0, 0, 0, 0.75);
 }
 
 .OpenXDay.green {
-    background-color: #2ECC40;
+  background-color: #2ecc40;
 }
 
 .OpenXDay.red {
-    background-color: #FF4136;
+  background-color: #ff4136;
 }
 
-.OpenXDay .question, .OpenXDay .answerComposite {
-    padding-top: 5%;
-    padding-bottom: 5%;
-    color: rgba(255, 255, 255, 0.75);
+.OpenXDay .question,
+.OpenXDay .answerComposite {
+  padding-top: 5%;
+  padding-bottom: 5%;
+  color: rgba(255, 255, 255, 0.75);
 }
 
 .OpenXDay .question {
-    float: left;
-    width: 50%;
-    height: 100%;
-    position: relative;
-    /* border-right: 5px solid rgba(255, 255, 255, 0.5); */
+  float: left;
+  width: 50%;
+  height: 100%;
+  position: relative;
+  /* border-right: 5px solid rgba(255, 255, 255, 0.5); */
 }
 
-.OpenXDay .question span {
-    display: block;
-    position: absolute;
-    text-align: center;
-    top: 50%;
-    left: 0.5em;
-    transform: translate(0%, -50%);
+.OpenXDay .question .question-text {
+  display: block;
+  position: absolute;
+  text-align: center;
+  top: 50%;
+  left: 0.5em;
+  transform: translate(0%, -50%);
+}
+
+.OpenXDay .disclaimer {
+  visibility: hidden;
+  position: absolute;
+  bottom: 100%;
+  width: 90vw;
+  padding: 0.5em;
+  font-size: 0.25em;
+  background-color: rgb(64, 64, 64);
+  border-radius: 0.2em;
+  text-align: left;
+}
+
+.OpenXDay .company-name:hover .disclaimer {
+    visibility: visible;
 }
 
 .OpenXDay .answerComposite {
-    float: right;
-    width: 50%;
-    height: 100%;
-    position: relative;
+  float: right;
+  width: 50%;
+  height: 100%;
+  position: relative;
 }
 
 .OpenXDay .answerComposite-inner {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
 }
 
 .OpenXDay .answerComposite .answerBoolean {
-    color: rgba(255, 255, 255, 0.85);
+  color: rgba(255, 255, 255, 0.85);
 }
 
 .OpenXDay .answerComposite .answerReason {
-    opacity: 0.85;
+  opacity: 0.85;
 
-    font-size: 0.85em;
-}
+  font-size: 0.85em;
+}

src/Components/OpenXDay/Component.tsx

@@ -43,8 +43,17 @@ export class OpenXDay extends React.Component<OpenXDayProps, {}> {
         return (
             <div className={classnames([bgColorClass, "OpenXDay"])} >
                 <div className="question">
-                    <span>
-                        Is Flipkart {this.question} today?
+                    <span className="question-text">
+                        Is&nbsp;
+                        <span className="company-name">
+                            Flipkart
+                            <div className="disclaimer">
+                                {`This data is taken from Karanataka ETV Flipkart holidays list,
+                                but doesn't include optional holidays.
+                                There is no gurantee that this data is correct or will be kept updated.`}
+                            </div>
+                        </span>
+                        &nbsp;{this.question} today?
                     </span>
                 </div>
                 <div className="answerComposite">