OpenToday - Add partial css for question, put strings in span and package classnames used

src/Components/OpenToday/Component.css

@@ -0,0 +1,54 @@
+.OpenToday {
+    width: 100%;
+    height: 100%;
+
+    font-size: 4em;
+}
+
+.OpenToday.green {
+    background-color: #2ECC40;
+}
+
+.OpenToday.red {
+    background-color: #FF4136;
+}
+
+.OpenToday .question, .OpenToday .answerComposite {
+    padding-top: 5%;
+    padding-bottom: 5%;
+
+    color: whitesmoke;
+}
+
+.OpenToday .question {
+    float: left;
+
+    width: 40%;
+    height: 100%;
+
+    padding-left: 4%;
+    padding-right: 4%;
+
+    position: relative;
+
+    border-right: 5px solid white;
+}
+
+.OpenToday .question span {
+  display: block;
+  position: absolute;
+
+  text-align: right;
+
+  top: 40%;
+  right: 1em;
+  transform: translate(0%, -50%);
+}
+
+
+.OpenToday .answerComposite {
+    float: right;
+
+    width: 60%;
+    height: 100%;
+}

src/Components/OpenToday/Component.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import * as Moment from 'moment';
 import * as Linq from 'linq';
+import * as classnames from 'classnames';
+import "./Component.css";
 import { Holiday, HolidayList, getWeekendHoliday } from '../../Data/index';
 import { ClosedReason } from '../ClosedReason';
 
@@ -29,7 +31,7 @@ export class OpenToday extends React.Component<{
                 .firstOrDefault(
                     (eachHoliday, _tmp) => todayDateTime.isSame(eachHoliday.Date, 'day')
                 );
-    
+
             if (matchingHoliday === null) {
                 this.answer = { open: true, holiday: undefined };
             } else {
@@ -48,13 +50,20 @@ export class OpenToday extends React.Component<{
 
     render() {
         const answerBoolean = (this.question === OpenToday.OpenOrClose.Open ? this.answer.open : !this.answer.open);
+        const bgColorClass = (this.answer.open ? "green" : "red");
 
         return (
-            <div className="OpenToday">
-                <div className="question">Is Nifty50 (NSE) {this.question} today?</div>
+            <div className={classnames([bgColorClass, "OpenToday"])} >
+                <div className="question">
+                    <span>
+                        Is Nifty50 (NSE) {this.question} today?
+                    </span>
+                </div>
                 <div className="answerComposite">
                     <div className="answerBoolean">
-                        {answerBoolean ? "Yes" : "No"}
+                        <span>
+                            {answerBoolean ? "Yes" : "No"}
+                        </span>
                     </div>
 
                     {!this.answer.open ? <ClosedReason holiday={this.answer.holiday as Holiday} /> : undefined}