update resource drawer to design guidelines (#7770)

* fix(frontend): update resource drawer to design guidelines

* nit

frontend/src/lib/components/ResourceEditor.svelte

@@ -234,7 +234,7 @@
 				{#if can_write}
 					<Button
 						variant="subtle"
-						unifiedSize="sm"
+						unifiedSize="xs"
 						btnClasses={editDescription ? 'bg-surface-hover' : ''}
 						startIcon={{ icon: Pen }}
 						on:click={() => (editDescription = !editDescription)}
@@ -242,8 +242,8 @@
 				{/if}
 			</h4>
 			{#if can_write && editDescription}
-				<div>
-					<div class="flex flex-row-reverse text-2xs text-primary -mt-1">GH Markdown</div>
+				<div class="relative">
+					<div class="text-2xs text-primary absolute -top-4 right-0">GH Markdown</div>
 					<textarea
 						class="text-xs text-primary font-normal"
 						disabled={!can_write}
@@ -256,7 +256,7 @@
 				<div class="text-xs text-secondary font-normal">No description provided</div>
 			{:else}
 				<div class="text-xs text-primary font-normal">
-					<GfmMarkdown md={description} />
+					<GfmMarkdown md={description} noPadding />
 				</div>
 			{/if}
 		</div>

frontend/src/lib/components/schema/EditableSchemaWrapper.svelte

@@ -127,9 +127,9 @@
 {#if resourceIsTextFile}
 	<label
 		for="format-extension"
-		class="text-base font-medium whitespace-nowrap flex items-center gap-4"
+		class="text-xs font-semibold text-emphasis whitespace-nowrap flex items-center gap-4"
 	>
-		File extension :
+		File extension:
 		<Select
 			autofocus
 			items={safeSelectItems(suggestedFileExtensions)}

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

@@ -561,11 +561,16 @@
 <Drawer bind:this={editResourceTypeDrawer} size="800px">
 	<DrawerContent title="Edit resource type" on:close={editResourceTypeDrawer.closeDrawer}>
 		{#snippet actions()}
-			<Button startIcon={{ icon: Save }} on:click={updateResourceType}>Update</Button>
+			<Button
+				startIcon={{ icon: Save }}
+				on:click={updateResourceType}
+				unifiedSize="md"
+				variant="accent">Update</Button
+			>
 		{/snippet}
 		<div class="flex flex-col gap-6">
 			<label for="inp">
-				<div class="mb-1 font-semibold text-secondary gap-1 flex flex-row items-center"
+				<div class="mb-1 font-semibold text-emphasis text-xs gap-1 flex flex-row items-center"
 					>Name
 					<div class="flex flex-row items-center gap-x-4">
 						<div class="flex flex-row items-center">
@@ -583,7 +588,7 @@
 				</div></label
 			>
 			<label>
-				<div class="mb-1 font-semibold text-secondary">Description</div>
+				<div class="mb-1 font-semibold text-emphasis text-xs">Description</div>
 				<textarea use:autosize autocomplete="off" bind:value={editResourceType.description}
 				></textarea></label
 			>
@@ -597,7 +602,7 @@
 						contains a `content` field and thus cannot be edited.
 					</Alert>
 				{:else}
-					<div class="mb-1 font-semibold text-secondary">Schema</div>
+					<div class="mb-1 font-semibold text-emphasis text-xs">Schema</div>
 					<div class="flex flex-col gap-2">
 						<EditableSchemaWrapper bind:schema={editResourceType.schema} noPreview />
 					</div>
@@ -611,6 +616,8 @@
 	<DrawerContent title="Create resource type" on:close={resourceTypeDrawer.closeDrawer}>
 		{#snippet actions()}
 			<Button
+				unifiedSize="md"
+				variant="accent"
 				startIcon={{ icon: Save }}
 				on:click={addResourceType}
 				disabled={!isNewResourceTypeNameValid || resourceTypeNameExists}>Save</Button
@@ -618,7 +625,7 @@
 		{/snippet}
 		<div class="flex flex-col gap-6">
 			<label for="inp">
-				<div class="mb-1 font-semibold text-secondary gap-1 flex flex-row items-center"
+				<div class="mb-1 font-semibold text-emphasis text-xs 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.
@@ -665,17 +672,17 @@
 				{/if}
 			</label>
 			<label>
-				<div class="mb-1 font-semibold text-secondary">Description</div>
+				<div class="mb-1 font-semibold text-emphasis text-xs">Description</div>
 				<textarea use:autosize autocomplete="off" bind:value={newResourceType.description}
 				></textarea></label
 			>
 			<div>
-				<div class="flex justify-between w-full items-center">
-					<div class="mb-1 font-semibold text-secondary">Schema</div>
-					<div class="mb-2 w-full flex flex-row-reverse">
+				<div class="flex justify-between w-full items-center mb-1">
+					<div class="font-semibold text-emphasis text-xs">Schema</div>
+					<div class="w-full flex flex-row-reverse">
 						<Button
 							on:click={openInferrer}
-							size="sm"
+							unifiedSize="md"
 							variant="default"
 							startIcon={{ icon: Braces }}
 						>
@@ -683,12 +690,15 @@
 						</Button>
 					</div>
 				</div>
+
+				<div class="flex flex-col gap-2">
+					<EditableSchemaWrapper
+						bind:schema={newResourceType.schema}
+						bind:formatExtension={newResourceType.formatExtension}
+						fullHeight
+					/>
+				</div>
 			</div>
-			<EditableSchemaWrapper
-				bind:schema={newResourceType.schema}
-				bind:formatExtension={newResourceType.formatExtension}
-				fullHeight
-			/>
 		</div>
 	</DrawerContent>
 </Drawer>