diff --git a/src/components/Views/Edit.module.scss b/src/components/Views/Edit.module.scss index 6f77ab2d..e8f342b4 100644 --- a/src/components/Views/Edit.module.scss +++ b/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; + } } } diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx index 0ada4297..f24e6f26 100644 --- a/src/components/Views/Edit.tsx +++ b/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 })})` }} - /> + > + + {(triggerRef: (el) => void) => ( +
setForm('coverImageUrl', null)} + > + +
+ )} +
+ diff --git a/src/context/editor.tsx b/src/context/editor.tsx index 75812c53..a15d261c 100644 --- a/src/context/editor.tsx +++ b/src/context/editor.tsx @@ -26,7 +26,7 @@ export type ShoutForm = { selectedTopics: Topic[] mainTopic?: Topic body: string - coverImageUrl: string + coverImageUrl?: string media?: string }