fix(frontend): Fix log bg color + add style to the supabase connect button (#1981)

frontend/src/lib/components/ApiConnectForm.svelte

@@ -6,7 +6,7 @@
 	import SimpleEditor from './SimpleEditor.svelte'
 	import Toggle from './Toggle.svelte'
 	import TestConnection from './TestConnection.svelte'
-	import { Button } from './common'
+	import SupabaseIcon from './icons/SupabaseIcon.svelte'
 
 	export let resource_type: string
 	export let args: Record<string, any> | any = {}
@@ -69,7 +69,7 @@
 </script>
 
 {#if !notFound}
-	<div class="w-full flex gap-4 flex-row-reverse">
+	<div class="w-full flex gap-4 flex-row-reverse items-center">
 		<Toggle
 			on:change={(e) => switchTab(e.detail)}
 			options={{
@@ -78,9 +78,14 @@
 		/>
 		<TestConnection {resource_type} {args} />
 		{#if resource_type == 'postgresql' && supabaseWizard}
-			<Button variant="border" target="_blank" href="/api/oauth/connect/supabase_wizard">
-				Add a Supabase DB
-			</Button>
+			<a
+				target="_blank"
+				href="/api/oauth/connect/supabase_wizard"
+				class="border rounded-lg flex flex-row gap-2 items-center text-xs px-3 py-1.5 h-8 bg-[#F1F3F5] hover:bg-[#E6E8EB] dark:bg-[#1C1C1C] dark:hover:bg-black"
+			>
+				<SupabaseIcon height="16px" width="16px" />
+				<div class="text-[#11181C] dark:text-[#EDEDED] font-semibold">Connect Supabase</div>
+			</a>
 		{/if}
 	</div>
 {:else}

frontend/src/lib/components/ArgEnum.svelte

@@ -34,7 +34,7 @@
 		on:focus
 		type="text"
 		class={twMerge(
-			'secondaryBackground',
+			'bg-surface-secondary',
 			valid
 				? ''
 				: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'

frontend/src/lib/components/LogViewer.svelte

@@ -52,7 +52,7 @@
 </Drawer>
 
 <div class="relative w-full h-full {wrapperClass}">
-	<div bind:this={div} class="w-full h-full overflow-auto relative secondaryBackground">
+	<div bind:this={div} class="w-full h-full overflow-auto relative bg-surface-secondary">
 		<div class="sticky top-0 right-0 w-full flex flex-row-reverse justify-between text-sm">
 			<div class="flex gap-1">
 				<button on:click={logViewer.openDrawer}>Expand</button>

frontend/src/lib/components/TestConnection.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { JobService, Preview } from '$lib/gen'
 
-	import { Loader2 } from 'lucide-svelte'
+	import { Database, Loader2 } from 'lucide-svelte'
 	import Button from './common/button/Button.svelte'
 	import { sendUserToast } from '$lib/toast'
 	import { workspaceStore } from '$lib/stores'
@@ -73,7 +73,19 @@ export async function main(args: any) {
 </script>
 
 {#if resource_type == 'postgresql' || resource_type == 'mysql'}
-	<Button size="sm" on:click={testConnection}
-		>{#if loading}<Loader2 class="animate-spin mr-2" />{/if} Test connection</Button
+	<Button
+		spacingSize="sm"
+		size="xs"
+		btnClasses="h-8"
+		color="light"
+		variant="border"
+		on:click={testConnection}
 	>
+		{#if loading}
+			<Loader2 class="animate-spin mr-2 !h-4 !w-4" />
+		{:else}
+			<Database class="mr-2 !h-4 !w-4" />
+		{/if}
+		Test connection
+	</Button>
 {/if}

frontend/src/lib/components/WhitelistIp.svelte

@@ -18,7 +18,7 @@
 </script>
 
 {#if ips}
-	<div class="mt-2" />
+	<div class="mt-4" />
 	<Alert size="xs" type="info" title="IPs to whitelist">
 		<span class="text-tertiary">If necessary, the workers IPs to whitelist are:</span>
 		{ips.join(', ')}

frontend/src/lib/components/apps/editor/AppEditor.svelte

@@ -260,7 +260,7 @@
 										<div id="app-editor-top-level-drawer" />
 										<div
 											class={classNames(
-												'relative mx-auto w-full h-full overflow-auto',
+												'bg-surface-secondary/80 relative mx-auto w-full h-full overflow-auto',
 												app.fullscreen ? '' : 'max-w-6xl'
 											)}
 										>

frontend/src/lib/components/apps/editor/GridEditor.svelte

@@ -79,7 +79,7 @@
 		}}
 		bind:clientWidth={$parentWidth}
 	>
-		<div class={!$focusedGrid && $mode !== 'preview' ? 'border-gray-400 border border-dashed' : ''}>
+		<div class={!$focusedGrid && $mode !== 'preview' ? ' border border-dashed' : ''}>
 			<Grid
 				allIdsInPath={$allIdsInPath}
 				selectedIds={$selectedComponent}
@@ -98,7 +98,7 @@
 					id={dataItem.id}
 					type={dataItem.data.type}
 					class={classNames(
-						'h-full w-full center-center',
+						'h-full w-full center-center outline outline-surface-secondary',
 						Boolean($selectedComponent?.includes(dataItem.id)) ? 'active-grid-item' : ''
 					)}
 				>