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

@@ -8,14 +8,15 @@
 }
 
 .OpenXDay.green {
-    background-color: #2ECC40;
+  background-color: #2ecc40;
 }
 
 .OpenXDay.red {
-    background-color: #FF4136;
+  background-color: #ff4136;
 }
 
-.OpenXDay .question, .OpenXDay .answerComposite {
+.OpenXDay .question,
+.OpenXDay .answerComposite {
   padding-top: 5%;
   padding-bottom: 5%;
   color: rgba(255, 255, 255, 0.75);
@@ -29,7 +30,7 @@
   /* border-right: 5px solid rgba(255, 255, 255, 0.5); */
 }
 
-.OpenXDay .question span {
+.OpenXDay .question .question-text {
   display: block;
   position: absolute;
   text-align: center;
@@ -38,6 +39,22 @@
   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%;

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>
+                    <span className="question-text">
-                        Is Flipkart {this.question} today?
+                        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">