feat: what's new page

Author: HarshKhandeparkar

src/App.jsx

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
+import { HashRouter, Route } from 'react-router-dom';
 import Main from './components/Main.jsx';
 import Pages from './components/Pages/Pages.jsx';
-import { HashRouter, Route } from 'react-router-dom';
 import Credits from './components/Credits/Credits';
+import WhatsNew from './components/WhatsNew/WhatsNew';
 
 class App extends Component {
   whiteTheme = {
@@ -76,6 +77,7 @@ class App extends Component {
         <Route exact path="/" render={() => <Main getTheme={() => this.getTheme()} setTheme={(theme) => this.setTheme(theme)} toggleTheme={() => this.toggleTheme()} />} />
         <Route path="/pages" render={() => <Pages getTheme={() => this.getTheme()} />} />
         <Route path="/credits" component={Credits} />
+        <Route path="/new" component={WhatsNew} />
       </HashRouter>
     )
   }

src/components/Main.jsx

@@ -25,8 +25,8 @@ function Main({toggleTheme, getTheme}) {
           </div>
 
           <div className="col s4">
-            <NavLink to="/" className="btn center disabled">
-              <i className="fa fa-folder-open left" /> Open Saved File
+            <NavLink to="/new" className="btn center brand-gradient gradient-text">
+              <i className="material-icons left">new_releases</i> What's New!
             </NavLink>
           </div>
         </div>

src/components/WhatsNew/WhatsNew.css

@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Finger Paint';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../../fonts/FingerPaint/FingerPaint-Regular.ttf) format('truetype');
+}
+
+.styled-text {
+  font-family: 'Finger Paint', cursive;
+}
+
+.card, .card-content, .card-action {
+  border-radius: 8px !important;
+}
+
+.card:hover {
+  transition: transform 0.1s;
+  transform: scale(1.05);
+}
+

src/components/WhatsNew/WhatsNew.jsx

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import { NavLink } from 'react-router-dom';
+import './WhatsNew.css';
+
+function New({title, desc, version}) {
+  return (
+    <div className="card">
+      <div className="card-content">
+        <span className="card-title brand-gradient gradient-text styled-text">{title}</span>
+        <p>{desc}</p>
+      </div>
+      <div className="card-action">
+        Added in <a href={`https://github.com/HarshKhandeparkar/rainbow-board/releases/${version}`}>v{version}</a>
+      </div>
+    </div>
+  )
+}
+
+export default class WhatsNew extends Component {
+  render() {
+    return (
+      <div>
+        <nav className="brand-gradient">
+          <div className="nav-wrapper header container">
+            <span className="logo-text brand-logo center styled-text">What's New</span>
+            <NavLink to="/" title="Home">
+              <i className="material-icons">home</i>
+            </NavLink>
+          </div>
+        </nav>
+
+        <div className="container">
+          <div className="row valign-wrapper">
+            <div className="col s6">
+              <New
+                title="Hotkeys"
+                desc={(<p><b>Ctrl+Z</b> or <b>Command+Z</b> to undo, <b>Ctrl+Shift+Z</b> or <b>Command+Shift+Z</b> to redo, and <b>Ctrl+S</b> or <b>Command+S</b> to save the slide!</p>)}
+                version="0.4.0"
+              />
+            </div>
+            <div className="col s6">
+              <New
+                title="Undo Redo"
+                desc={(<p>You can now <b>undo</b> and <b>redo</b>  using the shiny buttons or hotkeys.</p>)}
+                version="0.4.0"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}