Fix new user flow

package.json

@@ -67,7 +67,7 @@
     "eslint-config-prettier": "^6.3.0",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^2.0.1",
+    "eslint-plugin-react-hooks": "^2.3.0",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^24.9.0",
     "json-loader": "^0.5.7",

src/components/App.tsx

@@ -16,6 +16,7 @@ import '../lib/i18n'
 import '../lib/analytics'
 import CodeMirrorStyle from './CodeMirrorStyle'
 import { useGeneralStatus } from '../lib/generalStatus'
+import Modal from './Modal'
 
 const App = () => {
   const { initialize, initialized } = useDb()
@@ -67,6 +68,7 @@ const App = () => {
         <ContextMenu />
         <Dialog />
         <PreferencesModal />
+        <Modal />
         <CodeMirrorStyle />
       </StyledAppContainer>
     </ThemeProvider>

src/components/Modal/contents/DownloadOurAppModal.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import {
+  ModalContainer,
+  ModalHeader,
+  ModalSubtitle,
+  ModalBody,
+  ModalFlex
+} from './styled'
+
+const DownloadOurAppModal = () => {
+  return (
+    <ModalContainer>
+      <ModalHeader>Download our apps</ModalHeader>
+      <ModalSubtitle>
+        Use Boostnote on your local and focus on your work!
+      </ModalSubtitle>
+      <ModalBody>
+        <ModalFlex>
+          <div className='center'>
+            <img src='../../../../resources/Desktop.svg' />
+            <button className='button'>Download for Mac</button>
+          </div>
+          <div className='center'>
+            <img src='../../../../resources/Mobile.svg' />
+            <button className='button darker' disabled={true}>
+              Launching Soon
+            </button>
+            <span className='subtext'>
+              We are planning for a launch by the end of the year.
+            </span>
+          </div>
+        </ModalFlex>
+      </ModalBody>
+    </ModalContainer>
+  )
+}
+
+export default DownloadOurAppModal

src/components/Modal/contents/styled.ts

@@ -0,0 +1,79 @@
+import styled from '../../../lib/styled'
+import { textColor } from '../../../lib/styled/styleFunctions'
+
+export const ModalContainer = styled.div`
+  width: 100%;
+  ${textColor}
+  padding: 3px;
+`
+
+export const ModalHeader = styled.h1`
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+`
+
+export const ModalSubtitle = styled.h4`
+  text-align: center;
+  margin-bottom: 8vh;
+`
+
+export const ModalBody = styled.div`
+  margin-top: 20px;
+  padding: 0 2%;
+
+  .button {
+    display: block;
+    background-color: rgb(3, 197, 136);
+    font-size: 16px;
+    line-height: 1;
+    text-transform: uppercase;
+    color: rgb(255, 255, 255);
+    padding: 16px 32px;
+    border-width: initial;
+    border-style: none;
+    border-color: initial;
+    border-image: initial;
+    border-radius: 4px;
+    margin: auto;
+    margin-bottom: 10px;
+
+    &:not(:disabled):hover {
+      cursor: pointer;
+      opacity: 0.8;
+    }
+
+    &.darker {
+      background-color: #d7d7d7;
+      color: #000;
+    }
+
+    .subtext {
+      font-size: 12px;
+    }
+  }
+`
+
+export const ModalFlex = styled.div`
+  width: 100%;
+  display: flex;
+  flex-wrap: no-wrap;
+  justify-content: space-between;
+  align-items: top;
+
+  div {
+    flex: 1 1 0;
+  }
+
+  img {
+    max-width: 100%;
+    width: auto;
+    height: 30vh;
+    display: block;
+    margin: auto;
+  }
+
+  .center {
+    text-align: center;
+  }
+`