✨ Added remove-buttons in editor instead of right-click

frontend/src/lib/editor/ABCDEditorPart.svelte

@@ -44,21 +44,40 @@
 		{#each data.questions[selected_question].answers as answer, index}
 			<div
 				out:fade={{ duration: 150 }}
-				class="p-4 rounded-lg flex justify-center w-full transition"
+				class="p-4 rounded-lg flex justify-center w-full transition relative"
 				class:bg-red-500={!answer.right}
 				class:bg-green-500={answer.right}
 				class:bg-yellow-500={!reach(ABCDQuestionSchema, 'answer').isValidSync(
 					answer.answer
 				)}
 			>
-				<input
+				<button
-					bind:value={answer.answer}
+					class="rounded-full absolute -top-2 -right-2 opacity-70 hover:opacity-100 transition"
-					type="text"
+					type="button"
-					on:contextmenu|preventDefault={() => {
+					on:click={() => {
 						data.questions[selected_question].answers.splice(index, 1);
 						data.questions[selected_question].answers =
 							data.questions[selected_question].answers;
 					}}
+				>
+					<svg
+						class="w-6 h-6 bg-red-500 rounded-full"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				</button>
+				<input
+					bind:value={answer.answer}
+					type="text"
 					class="border-b-2 border-dotted w-5/6 text-center rounded-lg"
 					style="background-color: {answer.color ?? 'transparent'}"
 					placeholder="Empty..."

frontend/src/lib/editor/card.svelte

@@ -93,16 +93,37 @@
 					{/await}
 				</div>
 				{#if data.questions[selected_question].image != undefined && data.questions[selected_question].image !== ''}
-					<div class="flex justify-center pt-10 w-full max-h-72 w-full">
+					<div class="flex justify-center pt-10 w-full max-h-72">
+						<div class="max-h-72 h-auto relative">
+							<button
+								class="rounded-full absolute -top-2 -right-2 opacity-70 hover:opacity-100 transition"
+								type="button"
+								on:click={() => {
+									data.questions[selected_question].image = '';
+								}}
+							>
+								<svg
+									class="w-6 h-6 bg-red-500 rounded-full"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+									/>
+								</svg>
+							</button>
 							<img
 								src={data.questions[selected_question].image}
 								alt="not available"
-							class="max-h-72 h-auto w-auto"
+								class="max-h-64 h-auto w-auto"
-							on:contextmenu|preventDefault={() => {
-								data.questions[selected_question].image = '';
-							}}
 							/>
 						</div>
+					</div>
 				{:else if pow_data === undefined}
 					<a
 						href="/docs/pow"
@@ -163,7 +184,7 @@
 						<option value={QuizQuestionType.VOTING}>{$t('words.voting')}</option>
 					</select>
 				</div>
-				<div class="flex justify-center pt-10 w-full">
+				<div class="flex justify-center py-10 w-full">
 					{#if data.questions[selected_question].type === QuizQuestionType.ABCD}
 						{#await import('$lib/editor/ABCDEditorPart.svelte')}
 							<Spinner my_20={false} />
@@ -180,9 +201,6 @@
 						{/await}
 					{/if}
 				</div>
-				<p class="italic text-center mt-auto pt-4">
-					{$t('editor_page.right_click_to_delete')}
-				</p>
 			</div>
 		{/if}
 	</div>

frontend/src/lib/editor/sidebar.svelte

@@ -147,18 +147,37 @@
 			class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 transition"
 			class:bg-green-300={index === selected_question}
 			class:dark:bg-green-500={index === selected_question}
-			on:contextmenu|preventDefault={() => {
+			on:click={() => {
+				setSelectedQuestion(index);
+			}}
+			bind:this={arr_of_cards[index]}
+		>
+			<button
+				class="rounded-full absolute -top-3 -right-3 opacity-70 hover:opacity-100 transition"
+				type="button"
+				on:click={() => {
 					if (confirm('Do you really want to delete this Question?')) {
 						selected_question = selected_question - 1;
 						data.questions.splice(index, 1);
 						data.questions = data.questions;
 					}
 				}}
-			on:click={() => {
-				setSelectedQuestion(index);
-			}}
-			bind:this={arr_of_cards[index]}
 			>
+				<svg
+					class="w-6 h-6 bg-red-500 rounded-full"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			</button>
 			<div
 				use:tippy={{ content: question.question === '' ? 'No title' : question.question }}
 				class="m-1 border border-gray-500 rounded-lg p-0.5"