Adjusted styling

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 space-y-4"
+	class="container mx-auto 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">
@@ -68,14 +68,14 @@
 	{/each}
 
 	<span class="flex justify-center items-center gap-2 max-w-sm mx-auto">
-		<select name="security-schema" bind:value={selectedSchema} class="input w-fit">
+		<select name="security-schema" bind:value={selectedSchema} class="input w-fit text-sm">
 			<option value="basicAuth" selected>Basic Auth</option>
 			<option value="bearerAuth">Bearer Auth</option>
 			<option value="ApiKeyAuth">API Key Auth</option>
 			<option value="openId">OpenID</option>
 			<option value="oAuthSample">OAuth2</option>
 		</select>
-		<button type="button" class="btn variant-filled-primary" on:click={addSecuritySchema}>
+		<button type="button" class="btn text-sm variant-filled-primary" on:click={addSecuritySchema}>
 			Add Security Schema
 		</button>
 	</span>

src/lib/components/sections/Info.svelte

@@ -4,11 +4,13 @@
 	import { openApiStore } from '$lib';
 </script>
 
-<form class="container mx-auto card px-6 py-4 space-y-4">
+<form
-	<label class="text-xl space-y-2">
+	class="container mx-auto border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 space-y-2"
-		<span>Title (required)</span>
+>
+	<label class=" space-y-1">
+		<span class="text-sm">Title (required)</span>
 		<input
-			class="input"
+			class="input text-sm"
 			name="title"
 			placeholder="Sample API"
 			type="text"
@@ -16,8 +18,8 @@
 			required
 		/>
 	</label>
-	<label class="text-xl space-y-2">
+	<label class=" space-y-1">
-		<span> Description (optional) </span>
+		<span class="text-sm"> Description (optional) </span>
 		<textarea
 			class="textarea"
 			name="description"
@@ -25,10 +27,10 @@
 			bind:value={$openApiStore.info.description}
 		/>
 	</label>
-	<label class="text-xl space-y-2">
+	<label class=" space-y-1">
-		<span>Version (required)</span>
+		<span class="text-sm">Version (required)</span>
 		<input
-			class="input"
+			class="input text-sm"
 			name="version"
 			placeholder="0.1.0"
 			type="text"
@@ -36,42 +38,42 @@
 			required
 		/>
 	</label>
-	<label class="text-xl space-y-2">
+	<label class=" space-y-1">
-		<span>Terms of Service (optional)</span>
+		<span class="text-sm">Terms of Service (optional)</span>
 		<input
-			class="input"
+			class="input text-sm"
 			name="termsOfService"
 			placeholder="https://example.com/terms"
 			type="url"
 			bind:value={$openApiStore.info.termsOfService}
 		/>
 	</label>
-	<div class="border-token rounded-container-token space-y-4 p-4">
+	<div class="border-token rounded-container-token space-y-2 p-4">
 		<h4 class="h4">Contact Information</h4>
-		<label class="text-xl space-y-2">
+		<label class=" space-y-1">
-			<span>Name (optional)</span>
+			<span class="text-sm">Name (optional)</span>
 			<input
-				class="input"
+				class="input text-sm"
 				name="contactName"
 				placeholder="John Doe"
 				type="text"
 				bind:value={$openApiStore.info.contact.name}
 			/>
 		</label>
-		<label class="text-xl space-y-2">
+		<label class=" space-y-1">
-			<span>Email (optional)</span>
+			<span class="text-sm">Email (optional)</span>
 			<input
-				class="input"
+				class="input text-sm"
 				name="contactEmail"
 				placeholder="email@example.com"
 				type="email"
 				bind:value={$openApiStore.info.contact.email}
 			/>
 		</label>
-		<label class="text-xl space-y-2">
+		<label class=" space-y-1">
-			<span>URL (optional)</span>
+			<span class="text-sm">URL (optional)</span>
 			<input
-				class="input"
+				class="input text-sm"
 				name="contactUrl"
 				placeholder="https://example.com"
 				type="url"

src/lib/components/sections/Paths.svelte

@@ -3,7 +3,7 @@
 	import { openApiStore, pathRegex, sortPathsAlphabetically } from '$lib';
 	import { pathTemplate } from '$lib/pathTemplate';
 	import PathListItem from '../atoms/PathListItem.svelte';
-	import AddPathButtons from '../atoms/AddPathButtons.svelte';
+	import PathButtons from '../atoms/PathButtons.svelte';
 	import { getModalStore } from '@skeletonlabs/skeleton';
 
 	const modalStore = getModalStore();
@@ -43,17 +43,17 @@
 </script>
 
 <div
-	class="container mx-auto border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 space-y-3"
+	class="container mx-auto border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 min-h-20 space-y-3"
 >
 	{#if Object.keys($openApiStore.paths).length > 0}
-		<AddPathButtons />
+		<PathButtons />
 		<hr />
 		{#each Object.keys($openApiStore.paths) as pathName, index}
 			<PathListItem {pathName} id={index} />
 		{/each}
-		
+
-		<AddPathButtons />
+		<PathButtons />
-		{:else}
+	{:else}
-		<AddPathButtons justify="justify-center" sort={false} />
+		<PathButtons justify="justify-center" sort={false} />
 	{/if}
 </div>

src/lib/components/sections/Servers.svelte

@@ -23,7 +23,9 @@
 	};
 </script>
 
-<form class="container mx-auto card px-6 py-4 space-y-6">
+<form
+	class="container mx-auto border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 min-h-20 space-y-6"
+>
 	<!-- If openApiStore.servers isnt an array show add button -->
 	{#if Array.isArray($openApiStore.servers)}
 		<ul class="list space-y-6">
@@ -46,13 +48,13 @@
 			{/each}
 		</ul>
 		<span class="flex justify-center" class:!mt-0={$openApiStore.servers.length === 0}>
-			<button type="button" class="btn variant-filled-primary" on:click={addServer}>
+			<button type="button" class="btn text-sm variant-filled-primary" on:click={addServer}>
 				Add Server
 			</button>
 		</span>
 	{:else}
 		<span class="flex justify-center mt-0">
-			<button type="button" class="btn variant-filled-primary" on:click={addServer}>
+			<button type="button" class="btn text-sm variant-filled-primary" on:click={addServer}>
 				Add Server
 			</button>
 		</span>