From 8d0c50cff220ab2786494388424008b927b01f5c Mon Sep 17 00:00:00 2001
From: Philipp Wambach <philippwambach@googlemail.com>
Date: Thu, 19 Mar 2020 09:58:11 +0100
Subject: [PATCH 1/8] feat(download-button): add progress

---
 .../download-button/download-button.tsx       | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/scripts/components/download-button/download-button.tsx b/src/scripts/components/download-button/download-button.tsx
index a2d956608..d0e92f202 100644
--- a/src/scripts/components/download-button/download-button.tsx
+++ b/src/scripts/components/download-button/download-button.tsx
@@ -1,5 +1,9 @@
 import React, {FunctionComponent} from 'react';
+import {useSelector} from 'react-redux';
+
 import {isElectron, downloadUrl, deleteId} from '../../libs/electron/index';
+import {downloadedDataSelector} from '../../selectors/offline/downloaded';
+import {downloadProgressSelector} from '../../selectors/offline/progress';
 
 interface Props {
   url: string;
@@ -7,11 +11,19 @@ interface Props {
 }
 
 export const DownloadButton: FunctionComponent<Props> = ({url, id}) => {
+  const downloadedData = useSelector(downloadedDataSelector);
+  const downloadProgress = useSelector(downloadProgressSelector);
   const onDownload = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
     event.preventDefault();
     isElectron() && downloadUrl(url);
   };
+  const isDownloading = typeof downloadProgress[url] === 'number';
+  const progress = isDownloading ? Math.ceil(downloadProgress[url] * 100) : 0;
+  const isDownloaded = [
+    ...downloadedData.stories,
+    ...downloadedData.layers
+  ].includes(id);
 
   if (!isElectron()) {
     return null;
@@ -19,15 +31,18 @@ export const DownloadButton: FunctionComponent<Props> = ({url, id}) => {
 
   return (
     <div>
-      <button onClick={onDownload}>Download</button>
-      <button
-        onClick={event => {
-          event.stopPropagation();
-          event.preventDefault();
-          deleteId(id);
-        }}>
-        Delete
-      </button>
+      {!isDownloaded && <button onClick={onDownload}>Download</button>}
+      {isDownloaded && (
+        <button
+          onClick={event => {
+            event.stopPropagation();
+            event.preventDefault();
+            deleteId(id);
+          }}>
+          Delete
+        </button>
+      )}
+      {isDownloading && <span>{progress}</span>}
     </div>
   );
 };

From 591c31cf123cfe85316ecd9ebcfde8f5716f4cd3 Mon Sep 17 00:00:00 2001
From: Philipp Wambach <philippwambach@googlemail.com>
Date: Thu, 19 Mar 2020 11:11:53 +0100
Subject: [PATCH 2/8] refactor(download-button): move all download related
 stuff in the downloadButton component

---
 .../components/layer-list-item/layer-list-item.tsx | 14 ++++----------
 src/scripts/components/layer-list/layer-list.tsx   |  7 -------
 .../components/layer-selector/layer-selector.tsx   |  6 ------
 3 files changed, 4 insertions(+), 23 deletions(-)

diff --git a/src/scripts/components/layer-list-item/layer-list-item.tsx b/src/scripts/components/layer-list-item/layer-list-item.tsx
index 0ec2f7d9a..7a43abbeb 100644
--- a/src/scripts/components/layer-list-item/layer-list-item.tsx
+++ b/src/scripts/components/layer-list-item/layer-list-item.tsx
@@ -1,34 +1,27 @@
 import React, {FunctionComponent} from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {isElectron, downloadUrl, deleteId} from '../../libs/electron/index';
 import {replaceUrlPlaceholders} from '../../libs/replace-url-placeholders';
 import config from '../../config/main';
 
 import {LayerListItem as LayerListItemType} from '../../types/layer-list';
-import {DownloadProgress} from '../../types/download-progress';
+import {DownloadButton} from '../download-button/download-button';
 
 import styles from './layer-list-item.styl';
 
 interface Props {
   layer: LayerListItemType;
   isMainSelected: boolean;
-  isDownloaded: boolean;
-  downloadProgress: DownloadProgress;
   onSelect: (id: string, isMain: boolean) => void;
 }
 
 const LayerListItem: FunctionComponent<Props> = ({
   layer,
   isMainSelected,
-  isDownloaded,
-  downloadProgress,
   onSelect
 }) => {
   const packageUrl = config.api.layerOfflinePackage;
   const offlineUrl = replaceUrlPlaceholders(packageUrl, {id: layer.id});
-  const onDownload = () => isElectron() && downloadUrl(offlineUrl);
-  const progress = downloadProgress[offlineUrl];
 
   return (
     <div className={styles.layerItem} onClick={() => onSelect(layer.id, true)}>
@@ -44,7 +37,8 @@ const LayerListItem: FunctionComponent<Props> = ({
         </button>
       )}
 
-      {isElectron() && typeof progress === 'number' && (
+      <DownloadButton url={offlineUrl} id={layer.id} />
+      {/* {isElectron() && typeof progress === 'number' && (
         <span>{Math.ceil(progress * 100)}</span>
       )}
 
@@ -66,7 +60,7 @@ const LayerListItem: FunctionComponent<Props> = ({
           }}>
           Delete
         </button>
-      )}
+      )} */}
     </div>
   );
 };
diff --git a/src/scripts/components/layer-list/layer-list.tsx b/src/scripts/components/layer-list/layer-list.tsx
index 1302f673d..baa309ad3 100644
--- a/src/scripts/components/layer-list/layer-list.tsx
+++ b/src/scripts/components/layer-list/layer-list.tsx
@@ -4,7 +4,6 @@ import LayerListItem from '../layer-list-item/layer-list-item';
 
 import {SelectedLayerIdsState} from '../../reducers/layers/selected-ids';
 
-import {DownloadProgress} from '../../types/download-progress';
 import {LayerListItem as LayerListItemType} from '../../types/layer-list';
 
 import styles from './layer-list.styl';
@@ -12,16 +11,12 @@ import styles from './layer-list.styl';
 interface Props {
   selectedLayerIds: SelectedLayerIdsState;
   layers: LayerListItemType[];
-  downloadedLayerIds: string[];
-  downloadProgress: DownloadProgress;
   onSelect: (id: string, isMain: boolean) => void;
 }
 
 const LayerList: FunctionComponent<Props> = ({
   selectedLayerIds,
   layers,
-  downloadedLayerIds,
-  downloadProgress,
   onSelect
 }) => {
   const {mainId} = selectedLayerIds;
@@ -36,8 +31,6 @@ const LayerList: FunctionComponent<Props> = ({
             <LayerListItem
               onSelect={(id, isMain) => onSelect(id, isMain)}
               isMainSelected={isMainSelected}
-              isDownloaded={downloadedLayerIds.includes(layer.id)}
-              downloadProgress={downloadProgress}
               layer={layer}
             />
           </li>
diff --git a/src/scripts/components/layer-selector/layer-selector.tsx b/src/scripts/components/layer-selector/layer-selector.tsx
index fdfb059a7..4f2acb551 100644
--- a/src/scripts/components/layer-selector/layer-selector.tsx
+++ b/src/scripts/components/layer-selector/layer-selector.tsx
@@ -14,16 +14,12 @@ import {layersSelector} from '../../selectors/layers/list';
 import styles from './layer-selector.styl';
 import setSelectedLayerIdsAction from '../../actions/set-selected-layer-id';
 import {selectedLayerIdsSelector} from '../../selectors/layers/selected-ids';
-import {downloadedDataSelector} from '../../selectors/offline/downloaded';
-import {downloadProgressSelector} from '../../selectors/offline/progress';
 
 const LayerSelector: FunctionComponent = () => {
   const dispatch = useDispatch();
   const layers = useSelector(layersSelector);
   const selectedLayerIds = useSelector(selectedLayerIdsSelector);
   const showLayerSelector = useSelector(showLayerSelectorSelector);
-  const downloadedData = useSelector(downloadedDataSelector);
-  const downloadProgress = useSelector(downloadProgressSelector);
   const selectedMainLayer = layers.find(
     layer => layer.id === selectedLayerIds.mainId
   );
@@ -67,8 +63,6 @@ const LayerSelector: FunctionComponent = () => {
             <LayerList
               layers={layers}
               selectedLayerIds={selectedLayerIds}
-              downloadedLayerIds={downloadedData.layers}
-              downloadProgress={downloadProgress}
               onSelect={(layerId, isMain) =>
                 dispatch(setSelectedLayerIdsAction(layerId, isMain))
               }

From a0edb8bb2a77b82a88f10e839ca6f8367ed1712c Mon Sep 17 00:00:00 2001
From: Philipp Wambach <philippwambach@googlemail.com>
Date: Thu, 19 Mar 2020 17:33:39 +0100
Subject: [PATCH 3/8] chore(storage): remove old layer data

---
 storage/layers/analysed_sst/metadata.json |  56 --------
 storage/layers/clouds/metadata.json       | 107 ---------------
 storage/layers/sst/metadata.json          | 151 ----------------------
 3 files changed, 314 deletions(-)
 delete mode 100644 storage/layers/analysed_sst/metadata.json
 delete mode 100644 storage/layers/clouds/metadata.json
 delete mode 100644 storage/layers/sst/metadata.json

diff --git a/storage/layers/analysed_sst/metadata.json b/storage/layers/analysed_sst/metadata.json
deleted file mode 100644
index c6239d2e8..000000000
--- a/storage/layers/analysed_sst/metadata.json
+++ /dev/null
@@ -1,56 +0,0 @@
-{
-  "id": "analysed_sst",
-  "type": "tiles",
-  "timeFormat": {
-    "year": "2-digit",
-    "month": "numeric",
-    "day": "numeric"
-  },
-  "timestamps": [
-    "2009-01-05T00:00:00Z",
-    "2009-01-13T00:00:00Z",
-    "2009-01-21T00:00:00Z",
-    "2009-01-29T00:00:00Z",
-    "2009-02-06T00:00:00Z",
-    "2009-02-14T00:00:00Z",
-    "2009-02-22T00:00:00Z",
-    "2009-03-02T00:00:00Z",
-    "2009-03-10T00:00:00Z",
-    "2009-03-18T00:00:00Z",
-    "2009-03-26T00:00:00Z",
-    "2009-04-03T00:00:00Z",
-    "2009-04-11T00:00:00Z",
-    "2009-04-19T00:00:00Z",
-    "2009-04-27T00:00:00Z",
-    "2009-05-05T00:00:00Z",
-    "2009-05-13T00:00:00Z",
-    "2009-05-21T00:00:00Z",
-    "2009-05-29T00:00:00Z",
-    "2009-06-06T00:00:00Z",
-    "2009-06-14T00:00:00Z",
-    "2009-06-22T00:00:00Z",
-    "2009-06-30T00:00:00Z",
-    "2009-07-08T00:00:00Z",
-    "2009-07-16T00:00:00Z",
-    "2009-07-24T00:00:00Z",
-    "2009-08-01T00:00:00Z",
-    "2009-08-09T00:00:00Z",
-    "2009-08-17T00:00:00Z",
-    "2009-08-25T00:00:00Z",
-    "2009-09-02T00:00:00Z",
-    "2009-09-10T00:00:00Z",
-    "2009-09-18T00:00:00Z",
-    "2009-09-26T00:00:00Z",
-    "2009-10-04T00:00:00Z",
-    "2009-10-12T00:00:00Z",
-    "2009-10-20T00:00:00Z",
-    "2009-10-28T00:00:00Z",
-    "2009-11-05T00:00:00Z",
-    "2009-11-13T00:00:00Z",
-    "2009-11-21T00:00:00Z",
-    "2009-11-29T00:00:00Z",
-    "2009-12-07T00:00:00Z",
-    "2009-12-15T00:00:00Z",
-    "2009-12-23T00:00:00Z"
-  ]
-}
diff --git a/storage/layers/clouds/metadata.json b/storage/layers/clouds/metadata.json
deleted file mode 100644
index 2df1a4101..000000000
--- a/storage/layers/clouds/metadata.json
+++ /dev/null
@@ -1,107 +0,0 @@
-{
-  "id": "clouds",
-  "type": "image",
-  "timeFormat": {
-    "year": "2-digit",
-    "month": "numeric",
-    "day": "numeric"
-  },
-  "timestamps": [
-    "2007-01-01",
-    "2007-02-01",
-    "2007-03-01",
-    "2007-04-01",
-    "2007-05-01",
-    "2007-06-01",
-    "2007-07-01",
-    "2007-08-01",
-    "2007-09-01",
-    "2007-10-01",
-    "2007-11-01",
-    "2007-12-01",
-    "2008-01-01",
-    "2008-02-01",
-    "2008-03-01",
-    "2008-04-01",
-    "2008-05-01",
-    "2008-06-01",
-    "2008-07-01",
-    "2008-08-01",
-    "2008-09-01",
-    "2008-10-01",
-    "2008-11-01",
-    "2008-12-01",
-    "2009-01-01",
-    "2009-02-01",
-    "2009-03-01",
-    "2009-04-01",
-    "2009-05-01",
-    "2009-06-01",
-    "2009-07-01",
-    "2009-08-01",
-    "2009-09-01",
-    "2009-10-01",
-    "2009-11-01",
-    "2009-12-01",
-    "2010-01-01",
-    "2010-02-01",
-    "2010-03-01",
-    "2010-04-01",
-    "2010-05-01",
-    "2010-06-01",
-    "2010-07-01",
-    "2010-08-01",
-    "2010-09-01",
-    "2010-10-01",
-    "2010-11-01",
-    "2010-12-01",
-    "2011-01-01",
-    "2011-02-01",
-    "2011-03-01",
-    "2011-04-01",
-    "2011-05-01",
-    "2011-06-01",
-    "2011-07-01",
-    "2011-08-01",
-    "2011-09-01",
-    "2011-10-01",
-    "2011-11-01",
-    "2011-12-01",
-    "2012-01-01",
-    "2012-02-01",
-    "2012-03-01",
-    "2012-04-01",
-    "2012-05-01",
-    "2012-06-01",
-    "2012-07-01",
-    "2012-08-01",
-    "2012-09-01",
-    "2012-10-01",
-    "2012-11-01",
-    "2012-12-01",
-    "2013-01-01",
-    "2013-02-01",
-    "2013-03-01",
-    "2013-04-01",
-    "2013-05-01",
-    "2013-06-01",
-    "2013-07-01",
-    "2013-08-01",
-    "2013-09-01",
-    "2013-10-01",
-    "2013-11-01",
-    "2013-12-01",
-    "2014-01-01",
-    "2014-02-01",
-    "2014-03-01",
-    "2014-04-01",
-    "2014-05-01",
-    "2014-06-01",
-    "2014-07-01",
-    "2014-08-01",
-    "2014-09-01",
-    "2014-10-01",
-    "2014-11-01",
-    "2014-12-01"
-  ]
-}
diff --git a/storage/layers/sst/metadata.json b/storage/layers/sst/metadata.json
deleted file mode 100644
index 5d6750e6f..000000000
--- a/storage/layers/sst/metadata.json
+++ /dev/null
@@ -1,151 +0,0 @@
-{
-  "id": "sst",
-  "type": "image",
-  "timeFormat": {
-    "year": "numeric",
-    "month": "numeric",
-    "day": "numeric",
-    "hour": "numeric",
-    "minute": "numeric",
-    "second": "numeric"
-  },
-  "timestamps": [
-    "2008-01-03",
-    "2008-01-11",
-    "2008-01-19",
-    "2008-01-27",
-    "2008-02-04",
-    "2008-02-12",
-    "2008-02-20",
-    "2008-02-28",
-    "2008-03-07",
-    "2008-03-15",
-    "2008-03-23",
-    "2008-03-31",
-    "2008-04-08",
-    "2008-04-16",
-    "2008-04-24",
-    "2008-05-02",
-    "2008-05-10",
-    "2008-05-18",
-    "2008-05-26",
-    "2008-06-03",
-    "2008-06-11",
-    "2008-06-19",
-    "2008-06-27",
-    "2008-07-05",
-    "2008-07-13",
-    "2008-07-21",
-    "2008-07-29",
-    "2008-08-06",
-    "2008-08-14",
-    "2008-08-22",
-    "2008-08-30",
-    "2008-09-07",
-    "2008-09-15",
-    "2008-09-23",
-    "2008-10-01",
-    "2008-10-09",
-    "2008-10-17",
-    "2008-10-25",
-    "2008-11-02",
-    "2008-11-10",
-    "2008-11-18",
-    "2008-11-26",
-    "2008-12-04",
-    "2008-12-12",
-    "2008-12-20",
-    "2008-12-28",
-    "2009-01-05",
-    "2009-01-13",
-    "2009-01-21",
-    "2009-01-29",
-    "2009-02-06",
-    "2009-02-14",
-    "2009-02-22",
-    "2009-03-02",
-    "2009-03-10",
-    "2009-03-18",
-    "2009-03-26",
-    "2009-04-03",
-    "2009-04-11",
-    "2009-04-19",
-    "2009-04-27",
-    "2009-05-05",
-    "2009-05-13",
-    "2009-05-21",
-    "2009-05-29",
-    "2009-06-06",
-    "2009-06-14",
-    "2009-06-22",
-    "2009-06-30",
-    "2009-07-08",
-    "2009-07-16",
-    "2009-07-24",
-    "2009-08-01",
-    "2009-08-09",
-    "2009-08-17",
-    "2009-08-25",
-    "2009-09-02",
-    "2009-09-10",
-    "2009-09-18",
-    "2009-09-26",
-    "2009-10-04",
-    "2009-10-12",
-    "2009-10-20",
-    "2009-10-28",
-    "2009-11-05",
-    "2009-11-13",
-    "2009-11-21",
-    "2009-11-29",
-    "2009-12-07",
-    "2009-12-15",
-    "2009-12-23",
-    "2009-12-31",
-    "2010-01-08",
-    "2010-01-16",
-    "2010-01-24",
-    "2010-02-01",
-    "2010-02-09",
-    "2010-02-17",
-    "2010-02-25",
-    "2010-03-05",
-    "2010-03-13",
-    "2010-03-21",
-    "2010-03-29",
-    "2010-04-06",
-    "2010-04-14",
-    "2010-04-22",
-    "2010-04-30",
-    "2010-05-08",
-    "2010-05-16",
-    "2010-05-24",
-    "2010-06-01",
-    "2010-06-09",
-    "2010-06-17",
-    "2010-06-25",
-    "2010-07-03",
-    "2010-07-11",
-    "2010-07-19",
-    "2010-07-27",
-    "2010-08-04",
-    "2010-08-12",
-    "2010-08-20",
-    "2010-08-28",
-    "2010-09-05",
-    "2010-09-13",
-    "2010-09-21",
-    "2010-09-29",
-    "2010-10-07",
-    "2010-10-15",
-    "2010-10-23",
-    "2010-10-31",
-    "2010-11-08",
-    "2010-11-16",
-    "2010-11-24",
-    "2010-12-02",
-    "2010-12-10",
-    "2010-12-18",
-    "2010-12-26"
-  ]
-}

From 50f5e8c5cc3081b3f5fe0b7424c767fd2691215b Mon Sep 17 00:00:00 2001
From: Philipp Wambach <philippwambach@googlemail.com>
Date: Thu, 19 Mar 2020 17:34:34 +0100
Subject: [PATCH 4/8] feat(button): only add padding when icon and label are
 present

---
 src/scripts/components/button/button.styl |  5 ++++-
 src/scripts/components/button/button.tsx  | 15 ++++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/scripts/components/button/button.styl b/src/scripts/components/button/button.styl
index ee6334707..1c52e66ad 100644
--- a/src/scripts/components/button/button.styl
+++ b/src/scripts/components/button/button.styl
@@ -14,7 +14,10 @@
   fill: $textWhite
 
   svg
-    padding-right: emCalc(7px)
+    fill: $textWhite
+
+  svg + .label
+    padding-left: emCalc(7px)
 
   &:hover, &:focus
     color: $main
diff --git a/src/scripts/components/button/button.tsx b/src/scripts/components/button/button.tsx
index d75865ee1..de98d944f 100644
--- a/src/scripts/components/button/button.tsx
+++ b/src/scripts/components/button/button.tsx
@@ -9,7 +9,7 @@ interface Props {
   icon?: FunctionComponent;
   link?: string;
   className?: string;
-  onClick?: () => void;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 const Button: FunctionComponent<Props> = ({
@@ -23,12 +23,21 @@ const Button: FunctionComponent<Props> = ({
 
   return link ? (
     <Link className={classes} to={link}>
-      {Icon && <Icon />} {label && <FormattedMessage id={label} />}
+      {Icon && <Icon />}
+      {label && (
+        <span className={styles.label}>
+          <FormattedMessage id={label} />
+        </span>
+      )}
     </Link>
   ) : (
     <button className={classes} onClick={onClick}>
       {Icon && <Icon />}
-      {label && <FormattedMessage id={label} />}
+      {label && (
+        <span className={styles.label}>
+          <FormattedMessage id={label} />
+        </span>
+      )}
     </button>
   );
 };

From c52dc7f8edd04d47ad50853838da0777d34a547e Mon Sep 17 00:00:00 2001
From: Philipp Wambach <philippwambach@googlemail.com>
Date: Thu, 19 Mar 2020 17:47:01 +0100
Subject: [PATCH 5/8] feat(download-button): add progress

---
 .../download-button/download-button.styl      | 25 +++++++++++++
 .../download-button/download-button.tsx       | 36 ++++++++++++++-----
 .../icons/download-complete-icon.tsx          | 15 ++++++++
 .../components/icons/download-icon.jsx        | 15 ++++++++
 4 files changed, 83 insertions(+), 8 deletions(-)
 create mode 100644 src/scripts/components/download-button/download-button.styl
 create mode 100644 src/scripts/components/icons/download-complete-icon.tsx
 create mode 100644 src/scripts/components/icons/download-icon.jsx

diff --git a/src/scripts/components/download-button/download-button.styl b/src/scripts/components/download-button/download-button.styl
new file mode 100644
index 000000000..ade635afa
--- /dev/null
+++ b/src/scripts/components/download-button/download-button.styl
@@ -0,0 +1,25 @@
+@require '../../../variables.styl'
+
+.downloadButton
+  width: 22px
+  height: 22px
+
+  button, svg
+    width: 100%
+    height: 100%
+
+.complete svg
+  fill: $main
+
+.notDownloaded svg
+  fill: $textDefault
+
+.circle
+  color: red
+  transition: 0.1s all ease-out
+  transform: rotate(-90deg)
+  fill: none
+  stroke-width: 4px
+  stroke: $main
+  stroke-dasharray: 100
+  stroke-dashoffset: 100
diff --git a/src/scripts/components/download-button/download-button.tsx b/src/scripts/components/download-button/download-button.tsx
index d0e92f202..a90bfc9c3 100644
--- a/src/scripts/components/download-button/download-button.tsx
+++ b/src/scripts/components/download-button/download-button.tsx
@@ -4,10 +4,15 @@ import {useSelector} from 'react-redux';
 import {isElectron, downloadUrl, deleteId} from '../../libs/electron/index';
 import {downloadedDataSelector} from '../../selectors/offline/downloaded';
 import {downloadProgressSelector} from '../../selectors/offline/progress';
+import {DownloadIcon} from '../icons/download-icon';
+import {DownloadCompleteIcon} from '../icons/download-complete-icon';
+import Button from '../button/button';
+
+import styles from './download-button.styl';
 
 interface Props {
-  url: string;
   id: string;
+  url: string;
 }
 
 export const DownloadButton: FunctionComponent<Props> = ({url, id}) => {
@@ -30,19 +35,34 @@ export const DownloadButton: FunctionComponent<Props> = ({url, id}) => {
   }
 
   return (
-    <div>
-      {!isDownloaded && <button onClick={onDownload}>Download</button>}
+    <div className={styles.downloadButton}>
+      {!isDownloaded && !isDownloading && (
+        <Button
+          icon={DownloadIcon}
+          onClick={onDownload}
+          className={styles.notDownloaded}
+        />
+      )}
       {isDownloaded && (
-        <button
+        <Button
+          className={styles.complete}
+          icon={DownloadCompleteIcon}
           onClick={event => {
             event.stopPropagation();
             event.preventDefault();
             deleteId(id);
-          }}>
-          Delete
-        </button>
+          }}
+        />
+      )}
+      {isDownloading && (
+        <svg
+          className={styles.circle}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 40 40"
+          style={{strokeDashoffset: 100 - progress}}>
+          <circle cx="20" cy="20" r="16" />
+        </svg>
       )}
-      {isDownloading && <span>{progress}</span>}
     </div>
   );
 };
diff --git a/src/scripts/components/icons/download-complete-icon.tsx b/src/scripts/components/icons/download-complete-icon.tsx
new file mode 100644
index 000000000..9931d05aa
--- /dev/null
+++ b/src/scripts/components/icons/download-complete-icon.tsx
@@ -0,0 +1,15 @@
+import React, {FunctionComponent} from 'react';
+
+export const DownloadCompleteIcon: FunctionComponent = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.75 8.025L7.2 11.475L14.25 4.5L12.75 3L7.2 8.55L5.25 6.6L3.75 8.025ZM14.25 13.5H3.75V15H14.25V13.5Z"
+    />
+  </svg>
+);
diff --git a/src/scripts/components/icons/download-icon.jsx b/src/scripts/components/icons/download-icon.jsx
new file mode 100644
index 000000000..d4c82aeb5
--- /dev/null
+++ b/src/scripts/components/icons/download-icon.jsx
@@ -0,0 +1,15 @@
+import React, {FunctionComponent} from 'react';
+
+export const DownloadIcon: FunctionComponent = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15 9H19L12 16L5 9H9V3H15V9ZM5 20V18H19V20H5Z"
+    />
+  </svg>
+);

From b16456f45061cef1b3902b251e7c61954c40a2ce Mon Sep 17 00:00:00 2001
From: Philipp Wambach <philippwambach@googlemail.com>
Date: Thu, 19 Mar 2020 18:18:46 +0100
Subject: [PATCH 6/8] feat(download): add delete button

---
 .../download-button/download-button.styl      | 14 ++++++++++++
 .../download-button/download-button.tsx       | 22 +++++++++++--------
 src/scripts/components/icons/delete-icon.tsx  | 12 ++++++++++
 3 files changed, 39 insertions(+), 9 deletions(-)
 create mode 100644 src/scripts/components/icons/delete-icon.tsx

diff --git a/src/scripts/components/download-button/download-button.styl b/src/scripts/components/download-button/download-button.styl
index ade635afa..dfcfb2187 100644
--- a/src/scripts/components/download-button/download-button.styl
+++ b/src/scripts/components/download-button/download-button.styl
@@ -23,3 +23,17 @@
   stroke: $main
   stroke-dasharray: 100
   stroke-dashoffset: 100
+
+.delete
+  .trash
+    display: none
+
+  .complete
+    display: block
+
+  &:hover
+    .trash
+      display: block
+
+    .complete
+      display: none
diff --git a/src/scripts/components/download-button/download-button.tsx b/src/scripts/components/download-button/download-button.tsx
index a90bfc9c3..45858b950 100644
--- a/src/scripts/components/download-button/download-button.tsx
+++ b/src/scripts/components/download-button/download-button.tsx
@@ -6,6 +6,7 @@ import {downloadedDataSelector} from '../../selectors/offline/downloaded';
 import {downloadProgressSelector} from '../../selectors/offline/progress';
 import {DownloadIcon} from '../icons/download-icon';
 import {DownloadCompleteIcon} from '../icons/download-complete-icon';
+import {DeleteIcon} from '../icons/delete-icon';
 import Button from '../button/button';
 
 import styles from './download-button.styl';
@@ -44,15 +45,18 @@ export const DownloadButton: FunctionComponent<Props> = ({url, id}) => {
         />
       )}
       {isDownloaded && (
-        <Button
-          className={styles.complete}
-          icon={DownloadCompleteIcon}
-          onClick={event => {
-            event.stopPropagation();
-            event.preventDefault();
-            deleteId(id);
-          }}
-        />
+        <div className={styles.delete}>
+          <Button className={styles.complete} icon={DownloadCompleteIcon} />
+          <Button
+            className={styles.trash}
+            icon={DeleteIcon}
+            onClick={event => {
+              event.stopPropagation();
+              event.preventDefault();
+              deleteId(id);
+            }}
+          />
+        </div>
       )}
       {isDownloading && (
         <svg
diff --git a/src/scripts/components/icons/delete-icon.tsx b/src/scripts/components/icons/delete-icon.tsx
new file mode 100644
index 000000000..9b45423b7
--- /dev/null
+++ b/src/scripts/components/icons/delete-icon.tsx
@@ -0,0 +1,12 @@
+import React, {FunctionComponent} from 'react';
+
+export const DeleteIcon: FunctionComponent = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24">
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z" />
+  </svg>
+);

From 6d1f0ba52bc175ab7ba6c2298c1fc81856ae0842 Mon Sep 17 00:00:00 2001
From: Philipp Wambach <philippwambach@googlemail.com>
Date: Mon, 23 Mar 2020 09:37:45 +0100
Subject: [PATCH 7/8] fix(download-button): fix PR issues

---
 src/scripts/components/download-button/download-button.styl | 6 +++---
 src/scripts/components/layer-list-item/layer-list-item.tsx  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/scripts/components/download-button/download-button.styl b/src/scripts/components/download-button/download-button.styl
index ade635afa..e4fe7706d 100644
--- a/src/scripts/components/download-button/download-button.styl
+++ b/src/scripts/components/download-button/download-button.styl
@@ -1,8 +1,8 @@
 @require '../../../variables.styl'
 
 .downloadButton
-  width: 22px
-  height: 22px
+  width: emCalc(22px)
+  height: emCalc(22px)
 
   button, svg
     width: 100%
@@ -16,7 +16,7 @@
 
 .circle
   color: red
-  transition: 0.1s all ease-out
+  transition: 0.2s all ease-out
   transform: rotate(-90deg)
   fill: none
   stroke-width: 4px
diff --git a/src/scripts/components/layer-list-item/layer-list-item.tsx b/src/scripts/components/layer-list-item/layer-list-item.tsx
index 7a43abbeb..63159b61a 100644
--- a/src/scripts/components/layer-list-item/layer-list-item.tsx
+++ b/src/scripts/components/layer-list-item/layer-list-item.tsx
@@ -3,9 +3,9 @@ import {FormattedMessage} from 'react-intl';
 
 import {replaceUrlPlaceholders} from '../../libs/replace-url-placeholders';
 import config from '../../config/main';
+import {DownloadButton} from '../download-button/download-button';
 
 import {LayerListItem as LayerListItemType} from '../../types/layer-list';
-import {DownloadButton} from '../download-button/download-button';
 
 import styles from './layer-list-item.styl';
 

From 9c716d536f099091467d8c0d25c5bea51fdfacac Mon Sep 17 00:00:00 2001
From: Philipp Wambach <philippwambach@googlemail.com>
Date: Mon, 23 Mar 2020 14:15:47 +0100
Subject: [PATCH 8/8] feat(download-button): add to story

---
 .../download-button/download-button.styl      |  9 ++++----
 .../download-button/download-button.tsx       | 17 +++++++++++---
 .../layer-list-item/layer-list-item.tsx       | 23 -------------------
 .../story-list-item/story-list-item.styl      |  9 ++++++++
 .../story-list-item/story-list-item.tsx       |  4 +++-
 5 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/scripts/components/download-button/download-button.styl b/src/scripts/components/download-button/download-button.styl
index 63de97690..4709dc812 100644
--- a/src/scripts/components/download-button/download-button.styl
+++ b/src/scripts/components/download-button/download-button.styl
@@ -1,8 +1,8 @@
 @require '../../../variables.styl'
 
 .downloadButton
-  width: emCalc(22px)
-  height: emCalc(22px)
+  width: emCalc(20px)
+  height: emCalc(20px)
 
   button, svg
     width: 100%
@@ -16,13 +16,14 @@
 
 .circle
   color: red
-  transition: 0.2s all ease-out
   transform: rotate(-90deg)
   fill: none
   stroke-width: 4px
   stroke: $main
   stroke-dasharray: 100
-  stroke-dashoffset: 100
+
+  circle
+    transition: 0.5s all linear
 
 .delete
   .trash
diff --git a/src/scripts/components/download-button/download-button.tsx b/src/scripts/components/download-button/download-button.tsx
index 45858b950..866bb03a9 100644
--- a/src/scripts/components/download-button/download-button.tsx
+++ b/src/scripts/components/download-button/download-button.tsx
@@ -62,9 +62,20 @@ export const DownloadButton: FunctionComponent<Props> = ({url, id}) => {
         <svg
           className={styles.circle}
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 40 40"
-          style={{strokeDashoffset: 100 - progress}}>
-          <circle cx="20" cy="20" r="16" />
+          viewBox="0 0 40 40">
+          <circle
+            style={{strokeDashoffset: 0}}
+            stroke="rgba(255, 255, 255, 0.1)"
+            cx="20"
+            cy="20"
+            r="16"
+          />
+          <circle
+            style={{strokeDashoffset: 100 - progress}}
+            cx="20"
+            cy="20"
+            r="16"
+          />
         </svg>
       )}
     </div>
diff --git a/src/scripts/components/layer-list-item/layer-list-item.tsx b/src/scripts/components/layer-list-item/layer-list-item.tsx
index 63159b61a..7ac2317dc 100644
--- a/src/scripts/components/layer-list-item/layer-list-item.tsx
+++ b/src/scripts/components/layer-list-item/layer-list-item.tsx
@@ -38,29 +38,6 @@ const LayerListItem: FunctionComponent<Props> = ({
       )}
 
       <DownloadButton url={offlineUrl} id={layer.id} />
-      {/* {isElectron() && typeof progress === 'number' && (
-        <span>{Math.ceil(progress * 100)}</span>
-      )}
-
-      {isElectron() && !isDownloaded && (
-        <button
-          onClick={event => {
-            event.stopPropagation();
-            onDownload();
-          }}>
-          Download
-        </button>
-      )}
-
-      {isElectron() && isDownloaded && (
-        <button
-          onClick={event => {
-            event.stopPropagation();
-            deleteId(layer.id);
-          }}>
-          Delete
-        </button>
-      )} */}
     </div>
   );
 };
diff --git a/src/scripts/components/story-list-item/story-list-item.styl b/src/scripts/components/story-list-item/story-list-item.styl
index 8cf415e7a..e9921fc14 100644
--- a/src/scripts/components/story-list-item/story-list-item.styl
+++ b/src/scripts/components/story-list-item/story-list-item.styl
@@ -28,6 +28,8 @@
   line-height: 30px
 
 .imageInfo
+  display: flex
+  flex-direction: column
   padding: 16px
   height: 40%
   background-color: $darkGrey1
@@ -56,3 +58,10 @@ a
 
   .description
     font-size: 1.5em
+
+.downloadButton
+  display: flex
+  flex-grow: 1
+  flex-direction: column
+  justify-content: flex-end
+  align-self: flex-end
diff --git a/src/scripts/components/story-list-item/story-list-item.tsx b/src/scripts/components/story-list-item/story-list-item.tsx
index 2eefe719c..4a98665b0 100644
--- a/src/scripts/components/story-list-item/story-list-item.tsx
+++ b/src/scripts/components/story-list-item/story-list-item.tsx
@@ -46,7 +46,9 @@ const StoryListItemContent: FunctionComponent<Props> = ({
       <div className={styles.imageInfo}>
         <p className={styles.title}>{story.title}</p>
         <p className={styles.description}>{story.description}</p>
-        <DownloadButton url={downloadUrl} id={downloadId} />
+        <div className={styles.downloadButton}>
+          <DownloadButton url={downloadUrl} id={downloadId} />
+        </div>
       </div>
     </div>
   );