From eea36b5bfc541d10e1adfbfdf9b97883a6d3fd7e Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 31 Jul 2023 13:16:19 +0200
Subject: [PATCH] fix(frontend): Fix dropdown buttons (#1970)

---
 .../components/common/button/Button.svelte    |  8 ++-
 .../common/button/ButtonDropdown.svelte       |  2 +-
 frontend/src/routes/kitchen_sink/+page.svelte | 66 +++++++++++++++++++
 3 files changed, 73 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/routes/kitchen_sink/+page.svelte

diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index 76fa5f7a28..b06f17592e 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -123,7 +123,9 @@
 </script>
 
 <div
-	class="{dropdownItems ? colorVariants[color].divider : ''} {wrapperClasses} flex flex-row"
+	class="{dropdownItems && variant === 'contained'
+		? colorVariants[color].divider
+		: ''} {wrapperClasses} flex flex-row"
 	style={wrapperStyle}
 >
 	{#if href}
@@ -197,7 +199,9 @@
 	{/if}
 
 	{#if dropdownItems}
-		<div class={twMerge(buttonClass, 'rounded-r-md rounded-l-none m-0 p-0 h-auto')}>
+		<div
+			class={twMerge(buttonClass, 'rounded-r-md rounded-l-none m-0 p-0 h-auto !w-10 border-l-0')}
+		>
 			<ButtonDropdown>
 				<svelte:fragment slot="items">
 					{#each computeDropdowns() ?? [] as item}
diff --git a/frontend/src/lib/components/common/button/ButtonDropdown.svelte b/frontend/src/lib/components/common/button/ButtonDropdown.svelte
index 415c2781dc..e250c9f63a 100644
--- a/frontend/src/lib/components/common/button/ButtonDropdown.svelte
+++ b/frontend/src/lib/components/common/button/ButtonDropdown.svelte
@@ -24,7 +24,7 @@
 	}
 </script>
 
-<Menu let:open as="div" class="relative hover:z-50 flex w-full h-full ">
+<Menu let:open as="div" class="relative hover:z-50 flex w-full h-full">
 	<span use:popperRef>
 		<MenuButton
 			class={twMerge('h-full w-full flex flex-row gap-2 items-center', hasPadding ? 'px-2' : '')}
diff --git a/frontend/src/routes/kitchen_sink/+page.svelte b/frontend/src/routes/kitchen_sink/+page.svelte
new file mode 100644
index 0000000000..773f218933
--- /dev/null
+++ b/frontend/src/routes/kitchen_sink/+page.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import Button from '$lib/components/common/button/Button.svelte'
+	import Tab from '$lib/components/common/tabs/Tab.svelte'
+	import TabContent from '$lib/components/common/tabs/TabContent.svelte'
+	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
+	import DarkModeToggle from '$lib/components/sidebar/DarkModeToggle.svelte'
+
+	let tab = 'button'
+	let dropdownItems = [
+		{
+			label: 'Lorem ipsum',
+			onClick: () => {}
+		}
+	]
+</script>
+
+<DarkModeToggle forcedDarkMode={false} />
+
+<Tabs bind:selected={tab}>
+	<Tab value="button">Buttons</Tab>
+
+	<svelte:fragment slot="content">
+		<TabContent value="button" class="p-4 flex gap-4 flex-col ">
+			<div class="font-bold text-md">Contained buttons</div>
+			<div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-6">
+				<Button>Lorem</Button>
+				<Button color="dark">Lorem</Button>
+				<Button color="gray">Lorem</Button>
+				<Button color="green">Lorem</Button>
+				<Button color="light">Lorem</Button>
+				<Button color="none">Lorem</Button>
+				<Button color="red">Lorem</Button>
+			</div>
+			<div class="font-bold text-md">Border buttons</div>
+			<div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-6">
+				<Button variant="border">Lorem</Button>
+				<Button variant="border" color="dark">Lorem</Button>
+				<Button variant="border" color="gray">Lorem</Button>
+				<Button variant="border" color="green">Lorem</Button>
+				<Button variant="border" color="light">Lorem</Button>
+				<Button variant="border" color="none">Lorem</Button>
+				<Button variant="border" color="red">Lorem</Button>
+			</div>
+			<div class="font-bold text-md">Dropdown buttons</div>
+			<div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-6">
+				<Button {dropdownItems}>Lorem</Button>
+				<Button {dropdownItems} color="dark">Lorem</Button>
+				<Button {dropdownItems} color="gray">Lorem</Button>
+				<Button {dropdownItems} color="green">Lorem</Button>
+				<Button {dropdownItems} color="light">Lorem</Button>
+				<Button {dropdownItems} color="none">Lorem</Button>
+				<Button {dropdownItems} color="red">Lorem</Button>
+			</div>
+			<div class="font-bold text-md">Dropdown buttons</div>
+			<div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-6">
+				<Button variant="border" {dropdownItems}>Lorem</Button>
+				<Button variant="border" {dropdownItems} color="dark">Lorem</Button>
+				<Button variant="border" {dropdownItems} color="gray">Lorem</Button>
+				<Button variant="border" {dropdownItems} color="green">Lorem</Button>
+				<Button variant="border" {dropdownItems} color="light">Lorem</Button>
+				<Button variant="border" {dropdownItems} color="none">Lorem</Button>
+				<Button variant="border" {dropdownItems} color="red">Lorem</Button>
+			</div>
+		</TabContent>
+	</svelte:fragment>
+</Tabs>