From e8d3a0efb1e23ae66d755489f96f09932544be9c Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 14 Nov 2022 18:04:47 +0100
Subject: [PATCH] fix(frontend): add size prop to tabs (#894)

---
 .../src/lib/components/common/tabs/Tab.svelte  | 18 +++++++++++++++---
 .../src/lib/components/common/tabs/Tabs.svelte |  6 +++++-
 .../components/scriptEditor/LogPanel.svelte    |  6 +++---
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/common/tabs/Tab.svelte b/frontend/src/lib/components/common/tabs/Tab.svelte
index bfc78c896e..cf00b267e5 100644
--- a/frontend/src/lib/components/common/tabs/Tab.svelte
+++ b/frontend/src/lib/components/common/tabs/Tab.svelte
@@ -4,16 +4,28 @@
 	import type { TabsContext } from './Tabs.svelte'
 
 	export let value: string
+	export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm'
+
+	const fontSizeClasses = {
+		xs: 'text-xs',
+		sm: 'text-sm',
+		md: 'text-md',
+		lg: 'text-lg',
+		xl: 'text-xl'
+	}
 
 	const { selected, update } = getContext<TabsContext>('Tabs')
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
 	class={classNames(
 		value === $selected
-			? 'border-b-2 border-gray-900 text-gray-900 text-sm'
-			: 'text-sm hover:border-b-2 hover:border-gray-300',
-		' py-1 px-4 cursor-pointer transition-all ease-linear  font-medium'
+			? 'border-b-2 border-gray-600 text-gray-800 '
+			: 'hover:border-b-2 hover:border-gray-300 text-gray-500',
+		'py-1 px-4 cursor-pointer transition-all ease-linear font-medium',
+		fontSizeClasses[size],
+		$$props.class
 	)}
 	on:click={() => update(value)}
 >
diff --git a/frontend/src/lib/components/common/tabs/Tabs.svelte b/frontend/src/lib/components/common/tabs/Tabs.svelte
index a1e4e35fa8..ed102143d8 100644
--- a/frontend/src/lib/components/common/tabs/Tabs.svelte
+++ b/frontend/src/lib/components/common/tabs/Tabs.svelte
@@ -9,6 +9,7 @@
 	import { setContext } from 'svelte'
 	import { writable, type Writable } from 'svelte/store'
 	import { createEventDispatcher } from 'svelte'
+	import { classNames } from '$lib/utils'
 
 	const dispatch = createEventDispatcher()
 
@@ -34,7 +35,10 @@
 </script>
 
 <div
-	class="border-b border-gray-200 flex flex-row whitespace-nowrap overflow-y-auto scrollbar-hidden {$$props.class}"
+	class={classNames(
+		'border-b border-gray-200 flex flex-row whitespace-nowrap overflow-y-auto scrollbar-hidden',
+		$$props.class
+	)}
 >
 	<slot />
 </div>
diff --git a/frontend/src/lib/components/scriptEditor/LogPanel.svelte b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
index a34dacd8c4..277ea19517 100644
--- a/frontend/src/lib/components/scriptEditor/LogPanel.svelte
+++ b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
@@ -66,9 +66,9 @@
 </Drawer>
 
 <Tabs bind:selected={selectedTab}>
-	<Tab value="logs"><span class="text-xs">Logs/Result</span></Tab>
-	<Tab value="history"><span class="text-xs">History</span></Tab>
-	<Tab value="last_save"><span class="text-xs">Last save</span></Tab>
+	<Tab value="logs" size="xs">Logs/Result</Tab>
+	<Tab value="history" size="xs">History</Tab>
+	<Tab value="last_save" size="xs">Last save</Tab>
 
 	<svelte:fragment slot="content">
 		<!--