From 8b8ce2592d22e51ae93015b7b8c3c58a599a1871 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 14 Jul 2025 19:34:40 +0400
Subject: [PATCH] refac: styling

---
 .../RichTextInput/FormattingButtons.svelte    |  5 ++--
 src/lib/components/icons/CheckBox.svelte      | 24 +++++++++++++++++++
 src/lib/components/icons/CheckCircle.svelte   | 19 +++++++++++++++
 src/lib/components/icons/DocumentCheck.svelte | 19 +++++++++++++++
 4 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/icons/CheckBox.svelte
 create mode 100644 src/lib/components/icons/CheckCircle.svelte
 create mode 100644 src/lib/components/icons/DocumentCheck.svelte

diff --git a/src/lib/components/common/RichTextInput/FormattingButtons.svelte b/src/lib/components/common/RichTextInput/FormattingButtons.svelte
index c1d16fec11..e2b9adac94 100644
--- a/src/lib/components/common/RichTextInput/FormattingButtons.svelte
+++ b/src/lib/components/common/RichTextInput/FormattingButtons.svelte
@@ -12,10 +12,11 @@
 	import Italic from '$lib/components/icons/Italic.svelte';
 	import ListBullet from '$lib/components/icons/ListBullet.svelte';
 	import NumberedList from '$lib/components/icons/NumberedList.svelte';
-	import QueueList from '$lib/components/icons/QueueList.svelte';
 	import Strikethrough from '$lib/components/icons/Strikethrough.svelte';
 	import Underline from '$lib/components/icons/Underline.svelte';
+
 	import Tooltip from '../Tooltip.svelte';
+	import CheckBox from '$lib/components/icons/CheckBox.svelte';
 </script>
 
 <div
@@ -89,7 +90,7 @@
 				: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
 			type="button"
 		>
-			<QueueList />
+			<CheckBox />
 		</button>
 	</Tooltip>
 
diff --git a/src/lib/components/icons/CheckBox.svelte b/src/lib/components/icons/CheckBox.svelte
new file mode 100644
index 0000000000..2aa55ea8ce
--- /dev/null
+++ b/src/lib/components/icons/CheckBox.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+	><path
+		d="M3 20.4V3.6C3 3.26863 3.26863 3 3.6 3H20.4C20.7314 3 21 3.26863 21 3.6V20.4C21 20.7314 20.7314 21 20.4 21H3.6C3.26863 21 3 20.7314 3 20.4Z"
+		stroke="#000000"
+		stroke-width="1.5"
+	></path><path
+		d="M7 12.5L10 15.5L17 8.5"
+		stroke="#000000"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path>
+</svg>
diff --git a/src/lib/components/icons/CheckCircle.svelte b/src/lib/components/icons/CheckCircle.svelte
new file mode 100644
index 0000000000..dff5034d06
--- /dev/null
+++ b/src/lib/components/icons/CheckCircle.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+	/>
+</svg>
diff --git a/src/lib/components/icons/DocumentCheck.svelte b/src/lib/components/icons/DocumentCheck.svelte
new file mode 100644
index 0000000000..8fb59a0ef0
--- /dev/null
+++ b/src/lib/components/icons/DocumentCheck.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12"
+	/>
+</svg>