diff --git a/auspice_client_customisation/splash.js b/auspice_client_customisation/splash.js index 4d773ef..32558e2 100644 --- a/auspice_client_customisation/splash.js +++ b/auspice_client_customisation/splash.js @@ -1,6 +1,6 @@ import React from "react"; import { handleDroppedFiles } from "./handleDroppedFiles"; -import { P, Bold, Title, CenterContent, Line, NextstrainTitle, GitHub } from './styles'; +import { P, Bold, Title, UploadBox, UploadButton, CenterContent, Line, NextstrainTitle, GitHub } from './styles'; import pkg from "../package.json"; @@ -25,6 +25,11 @@ const SplashContent = (props) => { handleDroppedFiles(props.dispatch, event.dataTransfer.files); } + function handlePicked(event) { + event.preventDefault(); + handleDroppedFiles(props.dispatch, event.target.files); + } + return (
@@ -45,7 +50,12 @@ const SplashContent = (props) => { -

{`Drag & Drop a dataset on here to view`}

+ + +

{`Drag & Drop a dataset on here to view`}

+
+ Select files +
diff --git a/auspice_client_customisation/styles.js b/auspice_client_customisation/styles.js index 1dace1b..1112824 100644 --- a/auspice_client_customisation/styles.js +++ b/auspice_client_customisation/styles.js @@ -33,6 +33,19 @@ export const Bold = styled.span` font-weight: 500; `; +export const UploadBox = styled.label` + cursor: pointer; + text-align: center; +`; + +export const UploadButton = styled.span` + display: inline-block; + border-radius: 4px; + padding: 10px 20px; + color: white; + background-color: #63AC9A; +`; + export const CenterContent = (props) => (