From 2ffdc401f1c432871d7229ac84df0ad238a18585 Mon Sep 17 00:00:00 2001
From: Katja Lutz <mail@katjalutz.ch>
Date: Tue, 26 Jul 2022 16:34:57 +0200
Subject: [PATCH] feat: implement logo delete button

---
 src/components/Settings/Overlay.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/components/Settings/Overlay.tsx b/src/components/Settings/Overlay.tsx
index 596792c..8e07d78 100644
--- a/src/components/Settings/Overlay.tsx
+++ b/src/components/Settings/Overlay.tsx
@@ -62,6 +62,7 @@ import SuccessIcon from "~icons/carbon/checkmark-filled";
 import CustomerIcon from "~icons/carbon/friendship";
 import WarningIcon from "~icons/carbon/warning-alt-filled";
 import GenerateIcon from "~icons/carbon/chemistry";
+import DeleteIcon from "~icons/carbon/trash-can";
 
 import { saveFile, selectLocalFiles, uploadFile } from "~/client/filesystem";
 import { resetInput, sleep } from "~/util";
@@ -241,6 +242,8 @@ const SettingsOverlay: Component = () => {
     <div class="min-w-[300px]">{props.children}</div>
   );
 
+  let logoInputEl: HTMLInputElement = undefined!;
+
   return (
     <>
       <div class="group print:hidden hidden lg:grid bg-white z-50 h-full fixed xxl:h-auto xxl:relative left-0 xxl:w-[480px] grid-rows-[1fr_auto] gap-4 p-1 xxl:p-3 transition-all shadow hover:shadow-2xl focus-within:shadow-2xl outline outline-1 outline-slate-700/10 w-24 hover:w-[480px] focus-within:w-[480px]">
@@ -747,11 +750,27 @@ const SettingsOverlay: Component = () => {
                 </div>
                 <div class="col-span-2">
                   <TextInput
+                    ref={logoInputEl}
                     label="Logo"
                     labelMinWidth={fullWidthLabelWidth}
                     type="file"
                     class="file-input"
                     accept="image/png, image/jpeg, image/svg+xml"
+                    suffix={
+                      localState.logo ? (
+                        <button
+                          type="button"
+                          class="btn btn-xs btn-error !rounded"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            setLocalState("logo", undefined);
+                            logoInputEl.value = "";
+                          }}
+                        >
+                          <DeleteIcon />
+                        </button>
+                      ) : undefined
+                    }
                     onInput={async (evt) => {
                       if (!evt.currentTarget.files) {
                         return;