diff --git a/package.json b/package.json
index 4d17d52..3174649 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"moment-timezone": "^0.5.14",
"react": "^16.2.0",
"react-dom": "^16.2.0",
+ "react-github-corner": "^2.1.0",
"react-router-dom": "^4.2.2",
"react-scripts-ts": "2.13.0"
},
diff --git a/src/Components/DateSwitchBar/Component.css b/src/Components/DateSwitchBar/Component.css
new file mode 100644
index 0000000..fc67ff0
--- /dev/null
+++ b/src/Components/DateSwitchBar/Component.css
@@ -0,0 +1,22 @@
+.DateSwitchBar {
+ width: 100%;
+ height: 3.5vh;
+ position: relative;
+}
+
+.icon {
+ position: absolute;
+ left: 50%;
+ top: 0;
+ transform: translate(-50%, 0);
+ width: 3.5vh;
+ height: 3.5vh;
+ border: .15em solid rgba(255, 255, 255, 0.75);
+ background-color: rgba(255, 255, 255, 0.25);
+
+ transition: transform .75s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.icon-rotated {
+ transform: translate(-50%, 0) rotate(-135deg);
+}
\ No newline at end of file
diff --git a/src/Components/DateSwitchBar/Component.tsx b/src/Components/DateSwitchBar/Component.tsx
new file mode 100644
index 0000000..9ef33cb
--- /dev/null
+++ b/src/Components/DateSwitchBar/Component.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import * as classNames from 'classnames';
+import './Component.css';
+
+export class DateSwitchBar extends React.Component<{}, { rotated: boolean }> {
+
+ constructor(props: {}) {
+ super(props);
+ this.updateFromProps(props);
+
+ this.state = { rotated: false };
+ }
+
+ componentDidMount() {
+ setTimeout(() => { this.setState({ rotated: true }); }, 1000);
+ }
+
+ componentWillUpdate(nextProps: {}, nextState: {}) {
+ this.updateFromProps(nextProps);
+ }
+
+ updateFromProps(props: {}) {
+ // do nothing for now
+ }
+
+ render() {
+ const iconClasses = ["icon"];
+ if (this.state.rotated) {
+ iconClasses.push("icon-rotated");
+ }
+
+ return (
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/Components/DateSwitchBar/index.tsx b/src/Components/DateSwitchBar/index.tsx
new file mode 100644
index 0000000..d191540
--- /dev/null
+++ b/src/Components/DateSwitchBar/index.tsx
@@ -0,0 +1 @@
+export { DateSwitchBar } from './Component';
\ No newline at end of file
diff --git a/src/Components/IsNiftyOpenApp/App.css b/src/Components/IsNiftyOpenApp/App.css
index d2254f7..d2eb93c 100644
--- a/src/Components/IsNiftyOpenApp/App.css
+++ b/src/Components/IsNiftyOpenApp/App.css
@@ -53,14 +53,22 @@
height: 100%;
}
+.App .top-bar {
+ z-index: 1;
+}
+
.App .upper-half {
width: 100%;
height: 80vh;
+ position: relative;
+ z-index: -1;
}
.App .lower-half {
width: 100%;
height: 20vh;
+
+ z-index: -1;
}
.App .OpenXDayMini, .App .NextOpenCloseMini {
@@ -79,11 +87,23 @@
}
.App .OpenXPlusOneDay-container .OpenXDayMini {
- border-right: 5px solid rgba(255, 255, 255, 0.6);
+ border-right: 2.5px solid rgba(255, 255, 255, 0.6);
+}
+
+.App .NextOpenClose-container .NextOpenCloseMini {
+ border-left: 2.5px solid rgba(255, 255, 255, 0.6);
}
.App .NextOpenClose-container {
float: right;
width: 50%;
height: 100%;
+}
+
+.App .DateSwitchBar-container {
+ position: absolute;
+ top: 4vh;
+ left: 50%;
+ width: 75%;
+ transform: translate(-50%, 0);
}
\ No newline at end of file
diff --git a/src/Components/IsNiftyOpenApp/App.tsx b/src/Components/IsNiftyOpenApp/App.tsx
index 50a793b..4edba3a 100644
--- a/src/Components/IsNiftyOpenApp/App.tsx
+++ b/src/Components/IsNiftyOpenApp/App.tsx
@@ -1,7 +1,9 @@
import * as React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import * as moment from 'moment-timezone';
+import GithubCorner from 'react-github-corner';
import './App.css';
+import { DateSwitchBar } from '../DateSwitchBar';
import { OpenXDay } from '../OpenXDay';
import { OpenXDayMini } from '../OpenXDayMini';
import { NextOpenCloseMini } from '../NextOpenCloseMini';
@@ -76,6 +78,18 @@ class IsNiftyOpenApp extends React.Component {
return (