feat(frontend): Small style fix (#1473)

* feat(frontend): Small style fix

* feat(frontend): fix button dropdown z-index

* feat(frontend): fix button dropdown z-index

* feat(frontend): revert

* feat(frontend): revert

frontend/src/lib/components/CronInput.svelte

@@ -144,7 +144,7 @@
 	}).format
 </script>
 
-<div class="w-full flex space-x-16 p-4">
+<div class="w-full flex space-x-16">
 	<div class="w-full flex flex-col space-y-2">
 		<div class="w-full flex flex-col gap-1">
 			<small class="font-bold">Cron</small>
@@ -318,7 +318,7 @@
 			<small>Estimated upcoming events ({timezone})</small>
 			<div class="flex flex-col rounded-md p-4 border text-gray-600">
 				{#each preview as date}
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center space-x-2 text-sm">
 						<span>{dateFormatter(new Date(date))}</span>
 					</div>
 				{/each}

frontend/src/lib/components/ScheduleEditor.svelte

@@ -193,10 +193,10 @@
 				<div class="mb-8" />
 			{/if}
 
-			<h2 class="border-b pb-1 mb-2">
-				<span class="mr-1">Schedule</span>
+			<div class="flex flex-row items-center mb-2 gap-1">
+				<div class="text-xl font-extrabold">Schedule</div>
 				<Tooltip>Schedules use CRON syntax. Seconds are mandatory.</Tooltip>
-			</h2>
+			</div>
 
 			<CronInput disabled={!can_write} bind:schedule bind:timezone bind:validCRON />
 

frontend/src/lib/components/SchemaEditor.svelte

@@ -179,11 +179,10 @@
 				}}
 			/>
 			<div class="ml-2">
-				<Tooltip>
-					Arguments can be edited either using the wizard, or by editing their JSON Schema,
-					<a href="https://docs.windmill.dev/docs/reference/#script-parameters-to-json-schema"
-						>see docs</a
-					>
+				<Tooltip
+					documentationLink="https://docs.windmill.dev/docs/reference/#script-parameters-to-json-schema"
+				>
+					Arguments can be edited either using the wizard, or by editing their JSON Schema
 				</Tooltip>
 			</div>
 		</div>

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

@@ -546,7 +546,7 @@
 	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
 		<Dropdown
 			placement="bottom-end"
-			btnClasses="!border !rounded-md"
+			btnClasses="!rounded-md"
 			dropdownItems={[
 				{
 					displayName: 'JSON',

frontend/src/lib/components/common/button/ButtonDropdown.svelte

@@ -3,7 +3,7 @@
 	import { ChevronDown } from 'lucide-svelte'
 </script>
 
-<Menu let:open as="div" class="relative z-50 flex w-full h-full">
+<Menu let:open as="div" class="relative hover:z-50 flex w-full h-full">
 	<MenuButton class="h-full w-full px-2">
 		<ChevronDown class="w-5 h-5" />
 	</MenuButton>

frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte

@@ -12,7 +12,7 @@
 	import { findStore } from '../../store/controllers/storeApi'
 
 	import { onDestroy } from 'svelte'
-	import { Expand } from 'lucide-svelte'
+	import { Expand, Minus, Plus } from 'lucide-svelte'
 
 	//these are typscripted as any, however they have been transformed inside of store.ts
 	export let canvasId: string
@@ -199,34 +199,31 @@
 	</svg>
 </div>
 <div id="buttons">
-	<button title="Zoom In" id="zoom_in">+</button>
-	<button title="Zoom Out" id="zoom_out">-</button>
+	<button title="Zoom In" id="zoom_in">
+		<Plus size="14" class="flex justify-start m-1" />
+	</button>
+	<button title="Zoom Out" id="zoom_out">
+		<Minus size="14" class="flex justify-start m-1" />
+	</button>
 	{#if download}
-		<button title="Download" id="download" on:click={() => dispatch('expand')}
-			><Expand size="15" /></button
-		>
+		<button on:click={() => dispatch('expand')}>
+			<Expand size="14" class="flex justify-start m-1" />
+		</button>
 	{/if}
 </div>
 
 <style>
 	#buttons {
 		position: absolute;
-		top: 4px;
-		right: 10px;
+		top: 8px;
+		right: 8px;
 		z-index: 20;
 	}
-	#buttons > #download {
-		padding: 0;
-		padding-left: 3.5px;
-	}
+
 	#buttons > button {
 		border-radius: 4px;
 		background-color: white;
-		border: #999 solid 1px;
-		padding-right: 4px;
-		padding-left: 4px;
-		width: 24px;
-		height: 24px;
+		border: #bbb solid 1px;
 	}
 
 	.Nodes {

frontend/src/routes/(root)/(logged)/resources/+page.svelte

@@ -26,7 +26,14 @@
 	import type { ResourceType } from '$lib/gen'
 	import { OauthService, ResourceService, type ListableResource } from '$lib/gen'
 	import { oauthStore, userStore, workspaceStore } from '$lib/stores'
-	import { canWrite, emptySchema, removeMarkdown, sendUserToast, truncate } from '$lib/utils'
+	import {
+		canWrite,
+		classNames,
+		emptySchema,
+		removeMarkdown,
+		sendUserToast,
+		truncate
+	} from '$lib/utils'
 	import {
 		faChain,
 		faCircle,
@@ -261,28 +268,39 @@
 		</svelte:fragment>
 		<div class="flex flex-col gap-6">
 			<label for="inp">
-				<div class="mb-1 font-semibold text-gray-700">Name<Required required={true} /></div>
+				<div class="mb-1 font-semibold text-gray-700 gap-1 flex flex-row items-center"
+					>Name<Required required={true} /><Tooltip>
+						Resource types are synchronized with the official types on the hub regularly. The `c_`
+						prefix is to avoid name clashes with them.
+					</Tooltip></div
+				>
 				<div class="flex flex-row items-center gap-x-4">
-					{#if !disableCustomPrefix}
-						<span
-							class="border border-gray-700 rounded p-1 -mr-6 text-sm bg-gray-200 inline-block w-8"
-							>c_</span
-						>
-					{/if}
+					<div class="flex flex-row items-center">
+						{#if !disableCustomPrefix}
+							<span
+								class="border border-gray-200 rounded-l py-1 text-sm bg-gray-200 inline-block w-8 h-8 px-2"
+							>
+								c_
+							</span>
+						{/if}
 
-					<div class="inline-block">
-						<input id="inp" type="text" bind:value={newResourceType.name} />
+						<div class="inline-block">
+							<input
+								id="inp"
+								type="text"
+								bind:value={newResourceType.name}
+								class={classNames(
+									'!h-8  !border !border-gray-200',
+									!disableCustomPrefix ? '!rounded-l-none' : ''
+								)}
+							/>
+						</div>
 					</div>
-
 					{#if $userStore?.is_admin || $userStore?.is_super_admin}
 						<Toggle
 							bind:checked={disableCustomPrefix}
 							options={{ right: 'disable c_ prefix (admin only)' }}
 						/>
-						<Tooltip
-							>Resource types are synchronized with the official types on the hub regularly. The
-							`c_` prefix is to avoid name clashes with them.</Tooltip
-						>
 					{/if}
 				</div>
 			</label>