feat(download-button): delete button

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,10 +16,25 @@
 
 .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
+    display: none
+
+  .complete
+    display: block
+
+  &:hover
+    .trash
+      display: block
+
+    .complete
+      display: none

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,23 +45,37 @@ 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
           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>

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>
+);

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>
   );
 };

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

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>
   );