style: change icons from svg paths to material ui icons (#245)

zeno-ml · Sep 29, 2023 · 81e9a84 · 81e9a84
1 parent 537c84e
commit 81e9a84
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 14 deletions.
diff --git a/frontend/src/lib/components/instance-views/views/views/OpenAIChat.svelte b/frontend/src/lib/components/instance-views/views/views/OpenAIChat.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { resolveDataPoint } from '$lib/util/util';
+	import { mdiChevronUp } from '@mdi/js';
 	import CircularProgress from '@smui/circular-progress/src/CircularProgress.svelte';
 	import AssistantBlock from './openai-chat/AssistantBlock.svelte';
 	import SystemBlock from './openai-chat/SystemBlock.svelte';
@@ -34,7 +35,7 @@
 				on:click={() => (showall = true)}
 			>
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 fill-grey-darker">
-					<path d="m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
+					<path d={mdiChevronUp} />
 				</svg>
 				<span class="pr-1">Show All</span>
 			</button>

diff --git a/frontend/src/lib/components/instance-views/views/views/OpenAIChatMarkdown.svelte b/frontend/src/lib/components/instance-views/views/views/OpenAIChatMarkdown.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Markdown from '$lib/components/general/Markdown.svelte';
 	import { resolveDataPoint } from '$lib/util/util';
+	import { mdiChevronUp } from '@mdi/js';
 	import CircularProgress from '@smui/circular-progress/src/CircularProgress.svelte';
 	import purify from 'isomorphic-dompurify';
 	import { parse } from 'marked';
@@ -42,7 +43,7 @@
 				on:click={() => (showall = true)}
 			>
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 fill-grey-darker">
-					<path d="m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
+					<path d={mdiChevronUp} />
 				</svg>
 				<span class="pr-1">Show All</span>
 			</button>

diff --git a/frontend/src/lib/components/instance-views/views/views/chatbot/AssistantBlock.svelte b/frontend/src/lib/components/instance-views/views/views/chatbot/AssistantBlock.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { mdiRobotHappy } from '@mdi/js';
+
 	export let input: string;
 	export let output = false;
 </script>
@@ -9,9 +11,7 @@
 		viewBox="0 0 640 512"
 		class={`${output ? 'fill-primary' : 'fill-grey-darker'} w-6 mr-2.5 mt-2`}
 	>
-		<path
-			d="M320 0c17.7 0 32 14.3 32 32V96H472c39.8 0 72 32.2 72 72V440c0 39.8-32.2 72-72 72H168c-39.8 0-72-32.2-72-72V168c0-39.8 32.2-72 72-72H288V32c0-17.7 14.3-32 32-32zM208 384c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H208zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H304zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H400zM264 256a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zm152 40a40 40 0 1 0 0-80 40 40 0 1 0 0 80zM48 224H64V416H48c-26.5 0-48-21.5-48-48V272c0-26.5 21.5-48 48-48zm544 0c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H576V224h16z"
-		/>
+		<path d={mdiRobotHappy} />
 	</svg>
 
 	<p class="rounded m-0 p-2.5 {output ? 'border border-primary' : 'border border-grey-darker'}">

diff --git a/frontend/src/lib/components/instance-views/views/views/chatbot/UserBlock.svelte b/frontend/src/lib/components/instance-views/views/views/chatbot/UserBlock.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { mdiAccount } from '@mdi/js';
+
 	export let input: string;
 </script>
 
@@ -8,9 +10,7 @@
 		viewBox="0 0 448 512"
 		class="w-6 mr-2.5 mt-2 fill-grey-darker"
 	>
-		<path
-			d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"
-		/>
+		<path d={mdiAccount} />
 	</svg>
 
 	<p class="rounded m-0 p-2.5 border border-grey-darker">{input}</p>

diff --git a/frontend/src/lib/components/instance-views/views/views/openai-chat/AssistantBlock.svelte b/frontend/src/lib/components/instance-views/views/views/openai-chat/AssistantBlock.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { mdiRobotHappy } from '@mdi/js';
+
 	export let input: string;
 	export let output = false;
 </script>
@@ -9,9 +11,7 @@
 		viewBox="0 0 640 512"
 		class={`${output ? 'fill-primary' : 'fill-grey-darker'} w-6 mr-2.5 mt-2`}
 	>
-		<path
-			d="M320 0c17.7 0 32 14.3 32 32V96H472c39.8 0 72 32.2 72 72V440c0 39.8-32.2 72-72 72H168c-39.8 0-72-32.2-72-72V168c0-39.8 32.2-72 72-72H288V32c0-17.7 14.3-32 32-32zM208 384c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H208zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H304zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H400zM264 256a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zm152 40a40 40 0 1 0 0-80 40 40 0 1 0 0 80zM48 224H64V416H48c-26.5 0-48-21.5-48-48V272c0-26.5 21.5-48 48-48zm544 0c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H576V224h16z"
-		/>
+		<path d={mdiRobotHappy} />
 	</svg>
 
 	<p

diff --git a/frontend/src/lib/components/instance-views/views/views/openai-chat/UserBlock.svelte b/frontend/src/lib/components/instance-views/views/views/openai-chat/UserBlock.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { mdiAccount } from '@mdi/js';
+
 	export let input: string;
 </script>
 
@@ -15,8 +17,6 @@
 		viewBox="0 0 448 512"
 		class="w-3.5 ml-2.5 mt-2 fill-grey-darker"
 	>
-		<path
-			d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"
-		/>
+		<path d={mdiAccount} />
 	</svg>
 </div>