Delete cover image

src/components/Views/Edit.module.scss

@@ -11,6 +11,11 @@
   align-items: flex-start;
   box-sizing: border-box;
 
+  .actions {
+    display: flex;
+    gap: 16px;
+  }
+
   .shoutCardCoverContainer {
     position: relative;
     width: 100%;

src/components/Views/Edit.tsx

@@ -85,6 +85,10 @@ export const EditView = (props: EditViewProps) => {
     setCoverImage(imageProxy(imgUrl))
     setForm('coverImageUrl', imgUrl)
   }
+  const handleDeleteCoverImage = () => {
+    setForm('coverImageUrl', '')
+    setCoverImage(null)
+  }
 
   return (
     <>
@@ -219,11 +223,16 @@ export const EditView = (props: EditViewProps) => {
                     )}
                   </p>
                   <div class={styles.articlePreview}>
-                    <Button
+                    <div class={styles.actions}>
-                      variant="primary"
+                      <Button
-                      onClick={() => showModal('uploadImage')}
+                        variant="primary"
-                      value={coverImage() ? t('Add another image') : t('Add image')}
+                        onClick={() => showModal('uploadImage')}
-                    />
+                        value={coverImage() || form.coverImageUrl ? t('Add another image') : t('Add image')}
+                      />
+                      <Show when={coverImage() ?? form.coverImageUrl}>
+                        <Button variant="secondary" onClick={handleDeleteCoverImage} value={t('Delete')} />
+                      </Show>
+                    </div>
                     <Show when={coverImage() ?? form.coverImageUrl}>
                       <div class={styles.shoutCardCoverContainer}>
                         <div class={styles.shoutCardCover}>