Onboarding and UI improvements

package.json

@@ -4,13 +4,16 @@
 	"private": true,
 	"dependencies": {
 		"clipboard-polyfill": "^2.8.1",
+		"js-cookie": "^2.2.0",
 		"react": "^16.8.6",
 		"react-dom": "^16.8.6",
+		"react-hot-keys": "^1.3.1",
 		"react-redux": "^7.0.3",
 		"react-scripts": "3.0.1",
 		"rebass": "^3.1.1",
 		"redux": "^4.0.1",
-		"styled-components": "^4.2.0"
+		"styled-components": "^4.2.0",
+		"styled-icons": "^8.1.0"
 	},
 	"scripts": {
 		"start": "react-scripts start",

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2d89ef</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/index.html

@@ -17,7 +17,33 @@
 		</script>
 
 		<meta charset="utf-8" />
-		<link rel="shortcut icon" href="%PUBLIC_URL%/circle.svg" />
+
+		<link
+			rel="apple-touch-icon"
+			sizes="180x180"
+			href="%PUBLIC_URL%/apple-touch-icon.png"
+		/>
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="32x32"
+			href="%PUBLIC_URL%/favicon-32x32.png"
+		/>
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="16x16"
+			href="%PUBLIC_URL%/favicon-16x16.png"
+		/>
+		<link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
+		<link
+			rel="mask-icon"
+			href="%PUBLIC_URL%/safari-pinned-tab.svg"
+			color="#5bbad5"
+		/>
+		<meta name="msapplication-TileColor" content="#2d89ef" />
+		<meta name="theme-color" content="#ffffff" />
+
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="theme-color" content="#000000" />
 		<!--

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

src/App.js

@@ -4,6 +4,8 @@ import { Provider } from "react-redux";
 
 import Menu from "./components/Menu";
 import TextEditor from "./components/TextEditor";
+import Onboarding from "./components/Onboarding";
+
 import reducer from "./store/reducer";
 
 import "./App.css";
@@ -15,6 +17,7 @@ function App() {
 		<Provider store={store}>
 			<Menu />
 			<TextEditor />
+			<Onboarding />
 		</Provider>
 	);
 }

src/components/AutosizeInput.js

@@ -216,7 +216,7 @@ class AutosizeInput extends Component {
 		return (
 			<span className={this.props.className} style={wrapperStyle}>
 				{this.renderStyles()}
-				<input {...inputProps} ref={this.inputRef} />
+				<input {...inputProps} ref={this.inputRef} id="currentInput" />
 				<span ref={this.sizerRef} style={sizerStyle}>
 					{sizerValue}
 				</span>

src/components/CopyToClipboard.js

@@ -1,8 +1,10 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
-import clipboard from "clipboard-polyfill";
 import styled from "styled-components";
-import { Box, Flex } from "rebass";
+import { Button } from "rebass";
+import Hotkeys from "react-hot-keys";
+
+import Clipboard from "../includes/Clipboard";
 
 const Image = styled.img`
 	height: 2rem;
@@ -13,12 +15,6 @@ const Image = styled.img`
 	}
 `;
 
-const Span = styled(Box)`
-	&:hover {
-		cursor: pointer;
-	}
-`;
-
 function mapStateToProps(state) {
 	return {
 		text: state.text,
@@ -28,33 +24,34 @@ function mapStateToProps(state) {
 
 class CopyToClipboard extends Component {
 	handleClick = () => {
-		clipboard.writeText(this.props.text + this.props.latestText).then(res => {
-			alert(
-				"Your text is copied to clipboard. \nPaste it to your favorite editor."
-			);
-		});
+		Clipboard(
+			this.props.text + this.props.latestText,
+			"Your text is copied to clipboard. \nPaste it to your favorite editor."
+		);
 	};
 
 	render() {
 		return (
-			<Flex>
-				{this.props.image ? (
-					<Box>
+			<Hotkeys
+				keyName="ctrl+c"
+				onKeyUp={this.handleClick}
+				filter={event => {
+					return true;
+				}}
+			>
+				<Button onClick={this.handleClick} bg="white" color="black" border="2">
+					{this.props.image ? (
 						<Image
 							src={this.props.image}
 							alt={this.props.alt}
 							onClick={this.handleClick}
 						/>
-					</Box>
-				) : (
-					""
-				)}
-				{this.props.message ? (
-					<Span onClick={this.handleClick}>{this.props.message}</Span>
-				) : (
-					""
-				)}
-			</Flex>
+					) : (
+						""
+					)}
+					{this.props.message ? this.props.message : ""}
+				</Button>
+			</Hotkeys>
 		);
 	}
 }

src/components/Menu.js

@@ -1,59 +1,38 @@
 import React, { Component } from "react";
 import styled from "styled-components";
-import CopyToClipboard from "./CopyToClipboard";
-import NewFile from "./NewFile";
 
 const MenuWrapper = styled.div`
 	display: flex;
 	flex-direction: row;
-	justify-content: flex-end;
+	justify-content: space-between;
 	width: 100%;
 `;
 
-// const MenuWrapper = styled.div`
-// 	position: absolute;
-// 	left: 10px;
-// 	float: right;
-// 	width: 150px;
-// 	height: 100%;
-// 	z-index: 1;
-// 	background: white;
-// 	filter: opacity(0%);
-// 	&:hover {
-// 		filter: opacity(100%);
-// 	}
-// `;
-
-const MenuItems = styled.div`
+const Logo = styled.div`
+	align-self: flex-start;
 	margin: 25px;
 	padding: 10px;
-	height: 90px;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-around;
-
-	background: #eee;
 	font-size: 1.5rem;
-	filter: opacity(30%);
+	width: 32px;
+	height: 32px;
+	filter: opacity(20%);
 	&:hover {
-		filter: opacity(60%);
+		filter: opacity(100%);
 	}
 `;
 
 export default class Menu extends Component {
 	render() {
 		return (
 			<MenuWrapper>
-				<MenuItems>
-					{/* <HeadingOne title="Distraction-free writing app">Flow</HeadingOne> */}
-					<NewFile image="new.svg" alt="New text" message="New" />
-
-					<CopyToClipboard
-						image="copy.svg"
-						alt="Copy text to clipboard"
-						message="Copy"
+				<Logo>
+					<img
+						width="32"
+						src="/flow-icon.svg"
+						alt="Flow Writer App"
+						title="Flow Writer App | CTRL+C to copy text | CRTL+N to start new text"
 					/>
-				</MenuItems>
+				</Logo>
 			</MenuWrapper>
 		);
 	}

src/components/NewFile.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import styled from "styled-components";
-import { Box, Flex } from "rebass";
+import { Button } from "rebass";
+import Hotkeys from "react-hot-keys";
 
 const Image = styled.img`
 	margin: 0px 10px 0px 10px;
@@ -10,33 +11,28 @@ const Image = styled.img`
 	}
 `;
 
-const Span = styled(Box)`
-	&:hover {
-		cursor: pointer;
-	}
-`;
-
 class NewFile extends Component {
 	handleClick = () => {
 		window.open("/", "_blank");
 	};
 	render() {
 		return (
-			<Flex justifyContent="left" flexDirection="row" alignItems="center">
-				<Box>
-					<Image
-						src={this.props.image}
-						alt={this.props.alt}
-						onClick={this.andleClick}
-					/>
-				</Box>
-
-				{this.props.message ? (
-					<Span onClick={this.handleClick}>{this.props.message}</Span>
-				) : (
-					""
-				)}
-			</Flex>
+			<Hotkeys
+				keyName="ctrl+n"
+				onKeyUp={this.handleClick}
+				filter={event => {
+					return true;
+				}}
+			>
+				<Button onClick={this.handleClick} bg="white" color="black" border="2">
+					{this.props.image ? (
+						<Image src={this.props.image} alt={this.props.alt} />
+					) : (
+						""
+					)}
+					{this.props.message ? this.props.message : ""}
+				</Button>
+			</Hotkeys>
 		);
 	}
 }