From f214d5f96b6ac26cd3ef90a6ab696a6dfe02b3f0 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 6 Apr 2023 16:07:34 +0200
Subject: [PATCH] feat(frontend): Tone down text + display whole text (#1366)

---
 .../componentsPanel/ComponentList.svelte      | 22 +++++++++----------
 .../editor/componentsPanel/ListItem.svelte    |  4 ++--
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
index 9436cad007..3f5a4dc671 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -96,20 +96,20 @@
 				{#if components.length}
 					<div transition:slide|local={{ duration: 100 }}>
 						<ListItem title={`${title} (${components.length})`}>
-							<div class="flex flex-wrap gap-2 py-2">
+							<div class="flex flex-wrap gap-3 py-2">
 								{#each components as item (item)}
-									<button
-										animate:flip={{ duration: 100 }}
-										on:click={() => addComponent(item)}
-										title={componentsRecord[item].name}
-										class="border w-24 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
-										justify-center bg-white rounded-md hover:bg-gray-100 duration-200"
-									>
-										<svelte:component this={componentsRecord[item].icon} />
-										<div class="text-xs w-full text-center ellipsize">
+									<div animate:flip={{ duration: 100 }} class="w-20">
+										<button
+											on:click={() => addComponent(item)}
+											title={componentsRecord[item].name}
+											class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center justify-center bg-white rounded-md hover:bg-gray-100 duration-200 hover:border-blue-500"
+										>
+											<svelte:component this={componentsRecord[item].icon} class="text-gray-600" />
+										</button>
+										<div class="text-xs text-center flex-wrap text-gray-600 mt-1">
 											{componentsRecord[item].name}
 										</div>
-									</button>
+									</div>
 								{/each}
 							</div>
 						</ListItem>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte
index 58eb6cbf38..98d875cf5a 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte
@@ -30,7 +30,7 @@
 	{#if prefix !== undefined}
 		<button
 			on:click|preventDefault={() => isOpenStore.toggle(storeTitle)}
-			class="w-full flex justify-between items-center text-gray-700 px-2 py-1 
+			class="w-full flex justify-between items-center text-gray-700 px-2 py-1
 			rounded-sm duration-200 hover:bg-gray-100 {toggleClasses}"
 		>
 			<h1 class="text-sm font-semibold text-left">
@@ -46,7 +46,7 @@
 			</div>
 		{/if}
 	{:else}
-		<h1 class="text-sm font-semibold text-left px-2 py-1">
+		<h1 class="text-sm font-semibold text-left px-2 py-1 text-gray-600">
 			<slot name="title">
 				{title}
 			</slot>