update

src/App.tsx

@@ -8,8 +8,8 @@ import AppRouter from './Router';
 const App: React.FC = () => (
   <GithubProvider username="morten-olsen">
     <EncryptionProvider>
-      <Layout>
-        <Layout.Content style={{ padding: '25px' }}>
+      <Layout style={{minHeight:"100vh"}}>
+        <Layout.Content style={{ padding: '25px', flex: 1 }}>
           <AppRouter/>
         </Layout.Content>
       </Layout>

src/Router.tsx

@@ -6,6 +6,7 @@ import {
 } from 'react-router-dom';
 
 import Encrypt from './screens/Encrypt';
+import Welcome from './screens/Welcome';
 import Debug from './screens/Debug';
 
 const AppRouter: React.FC = () => (
@@ -14,6 +15,9 @@ const AppRouter: React.FC = () => (
       <Route path="/debug">
         <Debug />
       </Route>
+      <Route path="/welcome">
+        <Welcome />
+      </Route>
       <Route path="/">
         <Encrypt />
       </Route>

src/components/Add.tsx

@@ -1,46 +1,22 @@
-import React, { Fragment, useState } from 'react';
-import { Menu, Dropdown, Form } from 'antd';
-import { DownOutlined, FileOutlined, FileTextOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
+import { Radio, Divider } from 'antd';
+import { FileOutlined, FileTextOutlined } from '@ant-design/icons';
 import AddText from './AddText';
 import AddFile from './AddFile';
 
-const layout = {
-  labelCol: { span: 2 },
-};
+const DEFAULT_VALUE = 'text';
 
 const Add: React.FC = () => {
-  const [type, setType] = useState<'file' | 'text'>('text');
-
-  const menu = (
-    <Menu>
-      <Menu.Item
-        onClick={() => setType('file')}
-        active={type === 'file'}
-        icon={<FileOutlined />}
-      >
-        File
-      </Menu.Item>
-      <Menu.Item
-        onClick={() => setType('text')}
-        active={type === 'text'}
-        icon={<FileTextOutlined />}
-      >
-        Text
-      </Menu.Item>
-    </Menu>
-  );
+  const [type, setType] = useState<'file' | 'text'>(DEFAULT_VALUE);
 
   return (
     <>
-      <Form {...layout}>
-        <Form.Item
-          label="I want to encrypt a"
-        >
-          <Dropdown overlay={menu}>
-            <a>{type} <DownOutlined /></a>
-          </Dropdown>
-      </Form.Item>
-      </Form>
+      <Divider>
+        <Radio.Group onChange={evt => setType(evt.target.value)} defaultValue={DEFAULT_VALUE}>
+          <Radio.Button value="text"><FileTextOutlined /> Text</Radio.Button>
+          <Radio.Button value="file"><FileOutlined /> File</Radio.Button>
+        </Radio.Group>
+      </Divider>
       {type === 'text' && <AddText />}
       {type === 'file' && <AddFile />}
     </>

src/components/AddFile.tsx

@@ -1,12 +1,13 @@
 import React, { useContext, useCallback } from 'react';
 import styled from 'styled-components';
 import { Layout } from 'antd';
-import { UploadOutlined } from '@ant-design/icons';
+import { FileAddTwoTone } from '@ant-design/icons';
 import { useDropzone } from 'react-dropzone';
 import EncryptionContext from '../contexts/Encryption';
 
-const Icon = styled(UploadOutlined)`
+const Icon = styled(FileAddTwoTone)`
   font-size: 100px;
+  margin-bottom: 20px;
 `;
 
 const DropWrapper = styled(Layout)`

src/components/AddText.tsx

@@ -3,14 +3,6 @@ import { Input, Form, Button } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import EncryptionContext from '../contexts/Encryption';
 
-const layout = {
-  labelCol: { span: 2 },
-};
-
-const tailLayout = {
-  wrapperCol: { offset: 2 },
-};
-
 const AddText : React.FC = () => {
   const { addText } = useContext(EncryptionContext);
   const [name, setName] = useState('');
@@ -23,25 +15,23 @@ const AddText : React.FC = () => {
   }, [text, addText]);
 
   return (
-    <Form {...layout}>
-      <Form.Item
-        label="Name"
-      >
+    <Form>
+      <Form.Item>
         <Input
+          placeholder="Title"
           value={name}
           onChange={evt => setName(evt.target.value)}
         />
       </Form.Item>
-      <Form.Item
-        label="Message"
-      >
+      <Form.Item>
         <Input.TextArea
+          placeholder="Your message here..."
           value={text} 
-          rows={10}
+          rows={6}
           onChange={evt => setText(evt.target.value)} 
         />
       </Form.Item>
-      <Form.Item {...tailLayout}>
+      <Form.Item>
         <Button
           onClick={add}
           type="primary"

src/components/File.tsx

@@ -2,6 +2,8 @@ import React, {useMemo} from 'react';
 import {
   List,
   Button,
+  Tooltip,
+  Popconfirm,
 } from 'antd';
 import {
   DeleteOutlined,
@@ -46,12 +48,12 @@ const share = async (file: FileType, fileData: File[]) => {
 }
 
 const IconText = ({ icon, text, ...props }) => (
-  <Button
-    {...props}
-    icon={React.createElement(icon)}
-  >
-    {text}
-  </Button>
+  <Tooltip title={text}>
+    <Button
+      {...props}
+      icon={React.createElement(icon)}
+    />
+  </Tooltip>
 );
 
 const FileView: React.FC<Props> = ({
@@ -67,12 +69,18 @@ const FileView: React.FC<Props> = ({
 
   if (file.link) {
     actions.push(
-      <IconText
-        icon={DeleteOutlined}
-        danger
-        text="Delete"
-        onClick={remove}
-      />
+      <Popconfirm
+        title="Are you sure delete this file?"
+        onConfirm={remove}
+        okText="Yes"
+        cancelText="No"
+      >
+        <IconText
+          icon={DeleteOutlined}
+          danger
+          text="Delete"
+        />
+      </Popconfirm>
     );
   }
 

src/contexts/Encryption.tsx

@@ -58,7 +58,6 @@ const EncryptionProvider: React.FC = ({
 
   const add = (name: string) => {
     const id = nanoid();
-    message.info(`Beginning to encrypt ${name}`);
     const file: FileType = {
       name: `${name}.asc`,
       reciever: username,

src/index.tsx

@@ -4,5 +4,6 @@ import { render }  from 'react-dom';
 import App from './App';
 
 const root = document.createElement('div');
+root.style.height = '100%';
 document.body.appendChild(root);
 render(<App />, root);

src/screens/Encrypt.tsx

@@ -1,32 +1,28 @@
-import React, { useContext } from 'react';
-import { Collapse, Badge } from 'antd';
-import Profile from '../components/Profile';
+import React, { useContext, useEffect } from 'react';
+import { Divider, PageHeader } from 'antd';
+import { useHistory } from 'react-router';
 import Add from '../components/Add';
 import FileList from '../components/FileList';
 import EncryptionContext from '../contexts/Encryption';
 
 const Encrypt: React.FC = () => {
+  const history = useHistory();
   const { files } = useContext(EncryptionContext);
+  useEffect(() => {
+    if (localStorage.getItem('welcome') !== 'seen') {
+      history.replace('/welcome');
+    }
+  }, []);
+
   return (
     <>
-      <Collapse ghost defaultActiveKey={[2, 3]}>
-        <Collapse.Panel key={2} header="Encrypt">
-          <Add />
-        </Collapse.Panel>
-        <Collapse.Panel
-          key={3}
-          header={(
-            <Badge count={Object.keys(files).length} offset={[20, 7]}>
-              Files
-            </Badge>
-          )}
-        >
+      <Add />
+      {Object.keys(files).length > 0 && (
+        <>
+          <Divider>Files</Divider>
           <FileList />
-        </Collapse.Panel>
-        <Collapse.Panel key={1} header="Profile">
-          <Profile />
-        </Collapse.Panel>
-      </Collapse>
+        </>
+      )}
     </>
   );
 };

src/screens/Welcome.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import { Space, Layout, Button, Typography, notification } from 'antd';
+import { AlignLeftOutlined, EyeInvisibleTwoTone, ArrowRightOutlined } from '@ant-design/icons';
+import { useHistory } from 'react-router';
+
+const openNotification = () => {
+  notification.warn({
+    message: 'Slow down!',
+    description: 'I am still working on this, but thanks for the interrest.'
+  });
+};
+
+const Welcome: React.FC = () => {
+  const history = useHistory();
+  useEffect(() => {
+    localStorage.setItem('welcome', 'seen');
+  });
+
+  return (
+    <Layout style={{ maxWidth: 800, margin: 'auto', textAlign: 'center' }}>
+      <Space direction="vertical">
+        <EyeInvisibleTwoTone style={{ fontSize: 200 }} />
+        <Typography.Title level={1}>Protect before sending</Typography.Title>
+        <p>
+        The internet can seem like a scary place, especially if you want to send sensitiv information across it.
+        </p>
+        <p>
+            The truth is that a lot of systems, including e-mails, was not build for the internet that we have today.
+        </p>
+        <p>
+          This is why it is so important to make sure your documents are well protected before sharing.
+        </p>
+        <p>
+          This tool can be used to protect information before sharing them with me. The documents will be encrypted so that only I can ever unlock them, so no snoppy man in the middle...
+        </p>
+        <Button
+          type="primary"
+          icon={<ArrowRightOutlined />}
+          onClick={() => history.push('/')}
+        >
+          Start protecting!
+        </Button>
+        <Button
+          icon={<AlignLeftOutlined />}
+          onClick={openNotification}
+        >
+          Read all the technical stuff
+        </Button>
+      </Space>
+    </Layout>
+  );
+};
+
+export default Welcome;