From f92e581bd14b677aeaab4f889ae9cdfaacfe7583 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 9 Dec 2022 14:32:50 +0100
Subject: [PATCH] editor styling

---
 frontend/src/lib/components/Editor.svelte        | 16 ++++++++++++----
 .../src/lib/components/InputTransformForm.svelte |  2 +-
 frontend/src/lib/components/SchemaEditor.svelte  |  2 +-
 frontend/src/lib/components/ScriptEditor.svelte  |  2 +-
 frontend/src/lib/components/SimpleEditor.svelte  |  6 ++----
 .../flows/content/FlowModuleComponent.svelte     |  2 +-
 6 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index 451087959d..97a4a769b2 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -11,6 +11,16 @@
 		noSuggestionDiagnostics: true,
 		noSyntaxValidation: true
 	})
+	monaco.editor.defineTheme('myTheme', {
+		base: 'vs',
+		inherit: true,
+		rules: [],
+		colors: {
+			'editorLineNumber.foreground': '#999',
+			'editorGutter.background': '#F9FAFB'
+		}
+	})
+	monaco.editor.setTheme('myTheme')
 </script>
 
 <script lang="ts">
@@ -485,12 +495,10 @@
 	})
 </script>
 
-<div bind:this={divEl} class={$$props.class} />
+<div bind:this={divEl} class="{$$props.class} editor" />
 
 <style>
 	.editor {
-		@apply px-0;
-		/* stylelint-disable-next-line unit-allowed-list */
-		height: 80vh;
+		@apply p-0 border rounded-md border-gray-50;
 	}
 </style>
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index 1bc6ca3ea9..b80f0ff5ab 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -239,7 +239,7 @@
 				bind:pickForField
 			/>
 		{:else if arg.expr != undefined}
-			<div class="border rounded p-2 mt-2 border-gray-300">
+			<div class="border rounded mt-2 border-gray-300">
 				<SimpleEditor
 					bind:this={monaco}
 					bind:code={arg.expr}
diff --git a/frontend/src/lib/components/SchemaEditor.svelte b/frontend/src/lib/components/SchemaEditor.svelte
index 4ae1d22454..896ce5d10b 100644
--- a/frontend/src/lib/components/SchemaEditor.svelte
+++ b/frontend/src/lib/components/SchemaEditor.svelte
@@ -183,7 +183,7 @@
 	</div>
 
 	<!--json schema or table view-->
-	<div class="h-full overflow-y-auto">
+	<div class="h-full">
 		{#if !viewJsonSchema}
 			<div class="h-full">
 				{#if schema.properties && Object.keys(schema.properties).length > 0 && schema.required}
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index a5b8dd21c5..6093f766e7 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -140,7 +140,7 @@
 <SplitPanesWrapper panesClass="!overflow-visible">
 	<Pane size={60} minSize={10} class="!overflow-visible">
 		<div
-			class="p-2 h-full !overflow-visible"
+			class="pl-2 h-full !overflow-visible"
 			on:mouseleave={() => {
 				inferSchema()
 			}}
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index 219be7bf1a..3af46c1288 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -182,13 +182,11 @@
 	})
 </script>
 
-<div bind:this={divEl} class={$$props.class} bind:clientWidth={width} />
+<div bind:this={divEl} class="{$$props.class} editor" bind:clientWidth={width} />
 
 <style>
 	.editor {
-		@apply px-0;
-		/* stylelint-disable-next-line unit-allowed-list */
-		height: 80vh;
+		@apply rounded-lg p-0;
 	}
 
 	.small-editor {
diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index 2fde8f8a1a..8e902774e9 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -144,7 +144,7 @@
 			</svelte:fragment>
 
 			{#if value.type === 'rawscript'}
-				<div class="border-b-2 shadow-sm px-1 mb-1">
+				<div class="border-b-2 shadow-sm px-1">
 					<EditorBar
 						{validCode}
 						{editor}