Merge pull request #1197 from gagansuie/dev

Feat: changed platform icons to svg icons from endpoint
CodeCrowCorp · Apr 30, 2024 · 3d41f0d · 3d41f0d
2 parents be54e78 + a69f19c
commit 3d41f0d
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 54 deletions.
diff --git a/src/lib/assets/icons/social/IconSocialTwitch.svelte b/src/lib/assets/icons/social/IconSocialTwitch.svelte
@@ -1,36 +1,15 @@
-<svg
-	version="1.1"
-	id="Layer_1"
-	xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	x="0px"
-	y="0px"
-	viewBox="0 0 2400 2800"
-	style="enable-background:new 0 0 2400 2800;"
-	xml:space="preserve"
-	class="w-6 h-6">
-	<style type="text/css">
-		.st0 {
-			fill: #ffffff;
-		}
-		.st1 {
-			fill: #9146ff;
-		}
-	</style>
-	<title>Asset 2</title>
-	<g>
-		<polygon
-			class="st0"
-			points="2200,1300 1800,1700 1400,1700 1050,2050 1050,1700 600,1700 600,200 2200,200" />
-		<g>
-			<g id="Layer_1-2">
-				<path
-					class="st1"
-					d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600
-				V1300z" />
-				<rect x="1700" y="550" class="st1" width="200" height="600" />
-				<rect x="1150" y="550" class="st1" width="200" height="600" />
-			</g>
-		</g>
-	</g>
-</svg>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+    y="0px" viewBox="0 0 2400 2800" style="enable-background:new 0 0 2400 2800;" xml:space="preserve" class="w-6 h-6">
+    <g>
+        <polygon style="fill: #ffffff;"
+            points="2200,1300 1800,1700 1400,1700 1050,2050 1050,1700 600,1700 600,200 2200,200" />
+        <g>
+            <g id="Layer_1-2">
+                <path style="fill: #9146ff;" d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600
+                V1300z" />
+                <rect x="1700" y="550" style="fill: #9146ff;" width="200" height="600" />
+                <rect x="1150" y="550" style="fill: #9146ff;" width="200" height="600" />
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/lib/assets/icons/social/IconSocialYouTube.svelte b/src/lib/assets/icons/social/IconSocialYouTube.svelte
@@ -1,8 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 46" class="w-7 h-7">
-	<g transform="translate(0,-1)">
+<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="4 9 40.1 30">
+	<g transform="translate(0,0)">
 		<path
 			fill="#FF3D00"
-			d="M43.2,33.9c-0.4,2.1-2.1,3.7-4.2,4c-3.3,0.5-8.8,1.1-15,1.1c-6.1,0-11.6-0.6-15-1.1c-2.1-0.3-3.8-1.9-4.2-4C4.4,31.6,4,28.2,4,24c0-4.2,0.4-7.6,0.8-9.9c0.4-2.1,2.1-3.7,4.2-4C12.3,9.6,17.8,9,24,9c6.2,0,11.6,0.6,15,1.1c2.1,0.3,3.8,1.9,4.2,4c0.4,2.3,0.9,5.7,0.9,9.9C44,28.2,43.6,31.6,43.2,33.9z" /><path
-			fill="#FFF"
-			d="M20 31L20 17 32 24z" /></g
-	></svg>
+			d="M43.2,33.9c-0.4,2.1-2.1,3.7-4.2,4c-3.3,0.5-8.8,1.1-15,1.1c-6.1,0-11.6-0.6-15-1.1c-2.1-0.3-3.8-1.9-4.2-4C4.4,31.6,4,28.2,4,24c0-4.2,0.4-7.6,0.8-9.9c0.4-2.1,2.1-3.7,4.2-4C12.3,9.6,17.8,9,24,9c6.2,0,11.6,0.6,15,1.1c2.1,0.3,3.8,1.9,4.2,4c0.4,2.3,0.9,5.7,0.9,9.9C44,28.2,43.6,31.6,43.2,33.9z" />
+		<path fill="#FFF" d="M20 31L20 17 32 24z" />
+	</g>
+</svg>
diff --git a/src/lib/components/Channel/Chat/Message.svelte b/src/lib/components/Channel/Chat/Message.svelte
@@ -197,11 +197,10 @@
 				</ul>
 			</div>
 			<div class="d-flex align-items-center">
-				{#if sender.platform === 'twitch'}
-					<div style="display: ruby;"><IconSocialTwitch /></div>
-				{/if}
-				{#if sender.platform === 'youtube'}
-					<div style="display: ruby;"><IconSocialYouTube /></div>
+				{#if sender.platform}
+					<div style="display: ruby;">
+						<img src={sender.iconUrl} class="w-6 h-6" alt="platform icon" />
+					</div>
 				{/if}
 				{#if role === '🤖 AI' || role === 'Host' || role === 'Mod' || role === 'You'}
 					<span class="{coloredRole.tagColor} rounded-sm text-sm px-[5px] py-[2px] text-white"

diff --git a/src/lib/components/Channel/Stream/StreamContainer.svelte b/src/lib/components/Channel/Stream/StreamContainer.svelte
@@ -2,8 +2,6 @@
 	import IconViewers from '$lib/assets/icons/IconViewers.svelte'
 	import IconChatDrawerChevronOpen from '$lib/assets/icons/channel/IconChatDrawerChevronOpen.svelte'
 	import IconChatDrawerChevronClose from '$lib/assets/icons/channel/IconChatDrawerChevronClose.svelte'
-	import IconSocialTwitch from '$lib/assets/icons/social/IconSocialTwitch.svelte'
-	import IconSocialYouTube from '$lib/assets/icons/social/IconSocialYouTube.svelte'
 	import IconViews from '$lib/assets/icons/IconViews.svelte'
 	import StreamControls from '$lib/components/Channel/Stream/StreamControls.svelte'
 	import DropdownViewers from '$lib/components/Channel/Stream/DropdownViewers.svelte'
@@ -145,11 +143,7 @@
 								<span
 									class="btn btn-sm btn-neutral font-medium text-white border-none flex items-center tooltip tooltip-bottom"
 									data-tip={platform.name}>
-									{#if platform.name === 'Twitch'}
-										<IconSocialTwitch />
-									{:else if platform.name === 'YouTube'}
-										<IconSocialYouTube />
-									{/if}
+									<img src={platform.iconUrl} class="w-6 h-6" alt="platform icon" />
 									{getNumberInThousands(platform.count || 0)}
 								</span>
 							{/each}