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

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@types/classnames": "^2.2.3",
+    "classnames": "^2.2.5",
     "linq": "^3.0.9",
     "moment": "^2.21.0",
     "react": "^16.2.0",

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';
 
@@ -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">
+                        <span>
                             {answerBoolean ? "Yes" : "No"}
+                        </span>
                     </div>
 
                     {!this.answer.open ? <ClosedReason holiday={this.answer.holiday as Holiday} /> : undefined}

yarn.lock

@@ -2,6 +2,10 @@
 # yarn lockfile v1
 
 
+"@types/classnames@^2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.3.tgz#3f0ff6873da793870e20a260cada55982f38a9e5"
+
 "@types/jest@^22.2.0":
   version "22.2.0"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-22.2.0.tgz#55ce83139f7ad1b48b414c3927746614c6963c0f"
@@ -919,6 +923,10 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 clean-css@4.1.x:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a"