diff --git a/package.json b/package.json index 305ad49..f9184eb 100644 --- a/package.json +++ b/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", diff --git a/src/Components/OpenToday/Component.css b/src/Components/OpenToday/Component.css new file mode 100644 index 0000000..3848858 --- /dev/null +++ b/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%; +} \ No newline at end of file diff --git a/src/Components/OpenToday/Component.tsx b/src/Components/OpenToday/Component.tsx index 6a93e93..0c88bf2 100644 --- a/src/Components/OpenToday/Component.tsx +++ b/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 ( -
-
Is Nifty50 (NSE) {this.question} today?
+
+
+ + Is Nifty50 (NSE) {this.question} today? + +
- {answerBoolean ? "Yes" : "No"} + + {answerBoolean ? "Yes" : "No"} +
{!this.answer.open ? : undefined} diff --git a/yarn.lock b/yarn.lock index e95f7b4..0a26b06 100644 --- a/yarn.lock +++ b/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"