Delete audio cover in Editor (#285)

src/components/Views/Edit.module.scss

@@ -213,6 +213,24 @@
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
+    position: relative;
+
+    .delete {
+      position: absolute;
+      width: 32px;
+      height: 32px;
+      padding: 10px;
+      border-radius: 50%;
+      top: 4px;
+      right: 4px;
+      background-color: rgba(black, 0.5);
+      cursor: pointer;
+      display: none;
+    }
+
+    &:hover .delete {
+      display: block;
+    }
   }
 }
 

src/components/Views/Edit.tsx

@@ -24,6 +24,7 @@ import SimplifiedEditor from '../Editor/SimplifiedEditor'
 import { isDesktop } from '../../utils/media-query'
 import { TableOfContents } from '../TableOfContents'
 import { getImageUrl } from '../../utils/getImageUrl'
+import { Popover } from '../_shared/Popover'
 
 type Props = {
   shout: Shout
@@ -365,7 +366,19 @@ export const EditView = (props: Props) => {
                             style={{
                               'background-image': `url(${getImageUrl(form.coverImageUrl, { width: 1600 })})`
                             }}
-                          />
+                          >
+                            <Popover content={t('Delete cover')}>
+                              {(triggerRef: (el) => void) => (
+                                <div
+                                  ref={triggerRef}
+                                  class={styles.delete}
+                                  onClick={() => setForm('coverImageUrl', null)}
+                                >
+                                  <Icon name="close-white" />
+                                </div>
+                              )}
+                            </Popover>
+                          </div>
                         </Show>
                       </Show>
                     </div>

src/context/editor.tsx

@@ -26,7 +26,7 @@ export type ShoutForm = {
   selectedTopics: Topic[]
   mainTopic?: Topic
   body: string
-  coverImageUrl: string
+  coverImageUrl?: string
   media?: string
 }