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

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"
   },

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,7 +87,11 @@
 }
 
 .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 {
@@ -87,3 +99,11 @@
   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';

yarn.lock

@@ -4911,6 +4911,10 @@ react-error-overlay@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655"
 
+react-github-corner@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-github-corner/-/react-github-corner-2.1.0.tgz#559363f5407e932db47e942f639d165e81827be4"
+
 react-router-dom@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d"