Use react-github-corner module and start dateswitchbar component

Also
1. Add empty typedef for react-github-corner
2. Rotate square a+ animation for dateswitchbar component done

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);
+}

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 (
+            <div className="DateSwitchBar">
+                <div className={classNames(iconClasses)} />
+            </div>
+        );
+    }
+}

src/Components/DateSwitchBar/index.tsx

@@ -0,0 +1 @@
+export { DateSwitchBar } from './Component';

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);
 }

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 (
       <div className="IsNiftyOpenApp">
+        <div className="top-bar">
+          <GithubCorner
+            href="https://github.com/bendtherules/is-nifty-open"
+            bannerColor="rgb(64, 64, 64)"
+            octoColor="rgba(255, 255, 255, 0.9)"
+            size={80}
+            direction="right"
+          />
+          <div className="DateSwitchBar-container">
+            <DateSwitchBar />
+          </div>
+        </div>
         <div className="upper-half">
           <div className="OpenXDay-container">
             <OpenXDay

src/types/react-github-corner/index.d.ts

@@ -0,0 +1 @@
+declare module 'react-github-corner';