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 ( -