Style changes

src/lib/components/atoms/ParameterInput.svelte

@@ -26,7 +26,7 @@
 	};
 </script>
 
-<div class="card py-6 px-4 flex flex-col gap-4">
+<div class="card py-6 px-4 flex flex-col gap-4 text-sm">
 	<h4 class="h4">&lbrace;{variableName}&rbrace;</h4>
 
 	<span class="flex items-center gap-2">
@@ -52,15 +52,21 @@
 			placeholder="Description of the parameter. Supports markdown."
 		/>
 	</label>
+	<div class="flex flex-row gap-16">
 		<SlideToggle name="required" disabled={location === 'path'} bind:checked={value.required}>
-		required
+			Required
 		</SlideToggle>
 		<SlideToggle name="deprecated" bind:checked={value.deprecated} disabled={location === 'path'}>
-		deprecated
+			Deprecated
 		</SlideToggle>
-	<SlideToggle name="allowEmptyValue" bind:value={value.allowEmptyValue}>
+		<SlideToggle
+			name="allowEmptyValue"
+			bind:value={value.allowEmptyValue}
+			disabled={location === 'path'}
+		>
 			Allow Empty Value
 		</SlideToggle>
+	</div>
 	<label class="space-y-2">
 		<p>Style</p>
 		<select name="style" class="select" bind:value={value.style}>
@@ -74,8 +80,11 @@
 			<option value="deepObject">Deep Object</option>
 		</select>
 	</label>
+	<div class="flex flex-row gap-16">
 		<SlideToggle name="explode" bind:checked={value.explode}>Explode</SlideToggle>
-	<SlideToggle name="allowReserved" bind:checked={value.allowReserved}>Allow Reserved</SlideToggle>
+		<SlideToggle name="allowReserved" bind:checked={value.allowReserved}>Allow Reserved</SlideToggle
+		>
+	</div>
 	<label class="space-y-2">
 		<p>Schema</p>
 		<!-- Subject to change -->

src/lib/components/atoms/ServerInput.svelte

@@ -69,7 +69,7 @@
 			bind:value={server.description}
 		/>
 	</label>
-	<div class="border-token rounded-container-token space-y-4 p-4">
+	<div class="border-token rounded-container-token space-y-4">
 		{#if server.variables}
 			<Accordion>
 				<AccordionItem>
@@ -84,7 +84,7 @@
 						</div>
 					</svelte:fragment>
 					<svelte:fragment slot="content">
-						<table class="table">
+						<table class="table my-2">
 							<tbody>
 								{#each Object.keys(server.variables) as variable, index}
 									<tr>

src/lib/components/sections/Authentication.svelte

@@ -47,7 +47,7 @@
 </script>
 
 <form
-	class="container mx-auto border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 min-h-20 space-y-4"
+	class="border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 min-h-20 space-y-4"
 >
 	{#each $openApiStore.security as schema, index}
 		<div class="card w-full p-4">

src/lib/components/sections/Paths.svelte

@@ -12,13 +12,9 @@
 	const modalStore = getModalStore();
 </script>
 
-<div
-	class="container mx-auto border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 space-y-4"
->
-	{#each Object.keys(paths) as pathName, index}
-		<PathListItem {pathName} id={index} />
-	{/each}
-	<span class="w-full flex justify-center">
+<div class="w-full flex flex-row justify-center">
+	<div class="fixed flex flex-row gap-2 justify-center bg-surface-50-900-token rounded-full p-4">
+		<span class="flex justify-center">
 			<button
 				type="button"
 				class="btn variant-filled-primary"
@@ -29,7 +25,7 @@
 				Add Path
 			</button>
 		</span>
-	<span class="w-full flex justify-center">
+		<span class="flex justify-center">
 			<button
 				type="button"
 				class="btn btn-sm variant-filled-secondary"
@@ -38,4 +34,12 @@
 				Sort paths
 			</button>
 		</span>
+	</div>
+</div>
+<div
+	class="mx-auto border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 space-y-4"
+>
+	{#each Object.keys(paths) as pathName, index}
+		<PathListItem {pathName} id={index} />
+	{/each}
 </div>

src/routes/FancyAppRail.svelte

@@ -3,6 +3,7 @@
 		AppRail,
 		AppRailAnchor,
 		AppRailTile,
+		FileButton,
 		FileDropzone,
 		LightSwitch
 	} from '@skeletonlabs/skeleton';
@@ -124,13 +125,16 @@
 		Paths
 	</AppRailAnchor>
 	<svelte:fragment slot="trail">
-		<FileDropzone
+		<FileButton
 			bind:files
 			accept=".yml,.yaml,.json"
+			button="btn text-sm rounded-none text-wrap variant-soft-primary flex flex-col justify-center items-center h-20 w-full"
 			on:change={onFileUpload}
 			type="file"
 			name="openapispec"
-		/>
+		>
+			Upload</FileButton
+		>
 		<button
 			type="button"
 			class="btn text-sm rounded-none text-wrap variant-soft-primary flex flex-col justify-center items-center h-20 w-full"
@@ -202,7 +206,7 @@
 		</button>
 		<button
 			type="button"
-			class="btn text-sm rounded-none text-wrap variant-ringed-error hover:variant-soft-error flex justify-center items-center h-16 w-full"
+			class="btn text-sm rounded-none text-wrap variant-soft-error hover:variant-soft-error flex justify-center items-center h-16 w-full"
 			on:click={() => {
 				if (confirm('Are you sure you want to reset ALL current inputs?')) {
 					// remove `openApi` from localStorage