From b2228c19b04aaaa5bff227fe968d2e35ae82316b Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 26 Jan 2024 12:18:35 +0100
Subject: [PATCH] fix(frontend): Fix currency input dark mode (#3085)

* fix(frontend): Fix curreny input dark mode

* fix(frontend): collapsible alert
---
 frontend/src/lib/components/ArgInput.svelte   |  6 +-
 .../lib/components/LightweightArgInput.svelte |  6 +-
 .../src/lib/components/SchemaModal.svelte     |  6 +-
 .../inputs/currency/CurrencyInput.svelte      |  9 +-
 .../lib/components/common/alert/Alert.svelte  | 86 ++++++++++++++-----
 5 files changed, 81 insertions(+), 32 deletions(-)

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index c10a25589e..0ee02246c5 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -326,11 +326,11 @@
 				{:else if extra?.currency}
 					<CurrencyInput
 						inputClasses={{
-							formatted: twMerge('px-2 w-full py-1.5 text-black'),
+							formatted: 'px-2 w-full py-1.5 text-black dark:text-white',
 							wrapper: 'w-full windmillapp',
-							formattedZero: twMerge('text-black')
+							formattedZero: 'text-black dark:text-white'
 						}}
-						style="color:black;"
+						noColor
 						bind:value
 						currency={extra?.currency}
 						locale={extra?.currencyLocale ?? 'en-US'}
diff --git a/frontend/src/lib/components/LightweightArgInput.svelte b/frontend/src/lib/components/LightweightArgInput.svelte
index 2fcc85a8a8..5536ebb02f 100644
--- a/frontend/src/lib/components/LightweightArgInput.svelte
+++ b/frontend/src/lib/components/LightweightArgInput.svelte
@@ -187,11 +187,11 @@
 				{:else if extra?.currency}
 					<CurrencyInput
 						inputClasses={{
-							formatted: twMerge('px-2 w-full py-1.5 text-black'),
+							formatted: 'px-2 w-full py-1.5 text-black dark:text-white',
 							wrapper: 'w-full windmillapp',
-							formattedZero: twMerge('text-black')
+							formattedZero: 'text-black dark:text-white'
 						}}
-						style="color:black;"
+						noColor
 						bind:value
 						currency={extra?.currency}
 						locale={extra?.currencyLocale ?? 'en-US'}
diff --git a/frontend/src/lib/components/SchemaModal.svelte b/frontend/src/lib/components/SchemaModal.svelte
index ed0cb1a313..3a40754b7e 100644
--- a/frontend/src/lib/components/SchemaModal.svelte
+++ b/frontend/src/lib/components/SchemaModal.svelte
@@ -226,12 +226,12 @@
 					/>
 				</div>
 				{#if isFlowInput}
-					<Alert type="info" title="Default not used by webhooks">
+					<Alert type="info" title="Default not used by webhooks" size="xs" collapsible>
 						If this flow is triggered by a webhook, the default value will not replace a missing
 						value from the payload. It will only be used as the default value in the autogenerated
 						UI. We recommend using default values in the signature of the steps where this value is
-						used (using `x=default`) to have the desired behavior.</Alert
-					>
+						used (using `x=default`) to have the desired behavior.
+					</Alert>
 				{/if}
 			</div>
 			<div>
diff --git a/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte b/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte
index e200704ad4..87b535ae94 100644
--- a/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
+
 	/* Forked from MIT LICENSE
     https://raw.githubusercontent.com/Canutin/svelte-currency-input/main/src/lib/CurrencyInput.svelte 
     */
@@ -35,6 +37,7 @@
 	export let isNegativeAllowed: boolean = true
 	export let fractionDigits: number = DEFAULT_FRACTION_DIGITS
 	export let inputClasses: InputClasses | null = null
+	export let noColor: boolean = false
 	export let style: string = ''
 
 	// Formats value as: e.g. $1,523.00 | -$1,523.00
@@ -161,8 +164,12 @@
 	$: isZero = value === 0
 	$: isNegative = value < 0
 	$: value, setFormattedValue()
+
+	let darkMode: boolean = false
 </script>
 
+<DarkModeObserver bind:darkMode />
+
 <div class={inputClasses?.wrapper ?? DEFAULT_CLASS_WRAPPER}>
 	<input
 		class={inputClasses?.unformatted ?? DEFAULT_CLASS_UNFORMATTED}
@@ -182,7 +189,7 @@
 			? inputClasses?.formattedNegative ?? DEFAULT_CLASS_FORMATTED_NEGATIVE
 			: ''}
 		"
-		{style}
+		style={style ? style : noColor ? (darkMode ? 'color: white;' : 'color: black;') : ''}
 		type="text"
 		inputmode="numeric"
 		name={`formatted-${name}`}
diff --git a/frontend/src/lib/components/common/alert/Alert.svelte b/frontend/src/lib/components/common/alert/Alert.svelte
index cb5d4ab039..8b7c3a60ad 100644
--- a/frontend/src/lib/components/common/alert/Alert.svelte
+++ b/frontend/src/lib/components/common/alert/Alert.svelte
@@ -2,15 +2,26 @@
 	import { classNames } from '$lib/utils'
 	import type { AlertType } from './model'
 	import Tooltip from '$lib/components/Tooltip.svelte'
-	import { AlertCircle, AlertTriangle, CheckCircle2, Info } from 'lucide-svelte'
+	import {
+		AlertCircle,
+		AlertTriangle,
+		CheckCircle2,
+		Info,
+		ChevronDown,
+		ChevronUp
+	} from 'lucide-svelte'
+	import { slide } from 'svelte/transition'
+	import { twMerge } from 'tailwind-merge'
 
 	export let type: AlertType = 'info'
 	export let title: string
 	export let notRounded = false
 	export let tooltip: string = ''
 	export let documentationLink: string | undefined = undefined
-
 	export let size: 'xs' | 'sm' = 'sm'
+	export let collapsible: boolean = false
+
+	let isCollapsed = true
 
 	const icons: Record<AlertType, any> = {
 		info: Info,
@@ -45,12 +56,18 @@
 			descriptionClass: 'text-green-700 dark:text-green-200'
 		}
 	}
+
+	function toggleCollapse() {
+		if (collapsible) {
+			isCollapsed = !isCollapsed
+		}
+	}
 </script>
 
 <div
 	class={classNames(
 		notRounded ? '' : 'rounded-md',
-		size === 'sm' ? 'p-4' : 'p-2 ',
+		size === 'sm' ? 'p-4' : 'p-2',
 		classes[type].bgClass,
 		$$props.class
 	)}
@@ -59,28 +76,53 @@
 		<div class="flex h-8 w-8 items-center justify-center rounded-full">
 			<svelte:component this={icons[type]} class={classes[type].iconClass} size={16} />
 		</div>
-
-		<div class="ml-2 pt-[0.15rem] w-full">
-			<span
-				class={classNames(
-					size === 'sm' ? 'text-sm' : 'text-xs ',
-					'font-medium',
-					classes[type].titleClass
-				)}
-			>
-				{title}&nbsp;{#if tooltip != '' || documentationLink}
-					<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
-				{/if}
-			</span>
-			{#if $$slots.default}
-				<div
+		<div class={twMerge('ml-2 w-full')}>
+			<div class={twMerge('w-full flex flex-row items-center justify-between h-8')}>
+				<span
 					class={classNames(
-						size === 'sm' ? 'text-sm' : 'text-xs ',
-						'mt-2',
-						classes[type].descriptionClass
+						size === 'sm' ? 'text-sm' : 'text-xs',
+						'font-medium',
+						classes[type].titleClass
 					)}
 				>
-					<slot />
+					{title}
+					{#if tooltip != '' || documentationLink}
+						<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
+					{/if}
+				</span>
+				{#if collapsible}
+					<button class="cursor-pointer" on:click={toggleCollapse}>
+						{#if isCollapsed}
+							<ChevronDown size={16} />
+						{:else}
+							<ChevronUp size={16} />
+						{/if}
+					</button>
+				{/if}
+			</div>
+
+			{#if $$slots.default && !isCollapsed}
+				<div transition:slide|local={{ duration: 200 }} class="mt-2">
+					<div
+						class={classNames(
+							size === 'sm' ? 'text-sm' : 'text-xs',
+							classes[type].descriptionClass
+						)}
+					>
+						<slot />
+					</div>
+				</div>
+			{/if}
+			{#if $$slots.default && !collapsible}
+				<div class="mt-2">
+					<div
+						class={classNames(
+							size === 'sm' ? 'text-sm' : 'text-xs',
+							classes[type].descriptionClass
+						)}
+					>
+						<slot />
+					</div>
 				</div>
 			{/if}
 		</div>