Merge pull request #148 from humanbeeng/untracked-payload-field-font-…

…changes refactor: font changes
humanbeeng · Jul 3, 2024 · c849547 · c849547
2 parents 6ef83e0 + cc63f95
commit c849547
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 10 deletions.
diff --git a/ui/src/app.css b/ui/src/app.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:wght@100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:wght@100..900&display=swap&family=PT+Mono');
 
 @tailwind base;
 @tailwind components;

diff --git a/ui/src/lib/components/DetailsTable.svelte b/ui/src/lib/components/DetailsTable.svelte
@@ -43,7 +43,7 @@
 			<hr />
 			<div class="grid grid-cols-5 text-sm w-full my-1 gap-2">
 				<p class="col-span-1 text-wrap">{d[0]}</p>
-				<code class="col-span-4 overflow-hidden hover:overflow-auto whitespace-normal">
+				<code class="col-span-4 overflow-hidden hover:overflow-auto whitespace-normal font-sans">
 					{d[1]}
 				</code>
 			</div>

diff --git a/ui/src/lib/components/RequestDetails.svelte b/ui/src/lib/components/RequestDetails.svelte
@@ -31,31 +31,31 @@
 		<hr />
 		<div class="grid grid-cols-10 gap-3 my-1 text-sm">
 			<p>ID</p>
-			<code class="overflow-hidden col-span-9">{request.uuid}</code>
+			<code class="overflow-hidden col-span-9 font-sans">{request.uuid}</code>
 		</div>
 
 		<hr />
 		<div class="grid grid-cols-10 gap-3 my-1 text-sm">
 			<p>Path</p>
-			<code class="overflow-hidden col-span-9">{request.path}</code>
+			<code class="overflow-hidden col-span-9 font-sans">{request.path}</code>
 		</div>
 
 		<hr />
 		<div class="grid grid-cols-10 gap-3 my-1 text-sm">
 			<p>Method</p>
-			<code class="overflow-hidden col-span-9">{request.method.toUpperCase()}</code>
+			<code class="font-sans overflow-hidden col-span-9">{request.method.toUpperCase()}</code>
 		</div>
 
 		<hr />
 		<div class="grid grid-cols-10 gap-3 my-1 text-sm">
 			<p>Size</p>
-			<code class="overflow-hidden col-span-9">{request.content_size}</code>
+			<code class="overflow-hidden col-span-9 font-sans">{request.content_size}</code>
 		</div>
 
 		<hr />
 		<div class="grid grid-cols-10 gap-3 my-1 text-sm">
 			<p>Time</p>
-			<code class="overflow-hidden col-span-9"
+			<code class="overflow-hidden col-span-9 font-sans"
 				>{request.created_at} ({timeAgo(request.created_at)})</code
 			>
 		</div>
@@ -116,12 +116,14 @@
 
 	{#if content && !(request.content_type.startsWith('multipart/form-data') || request.content_type.startsWith('application/x-www-form-urlencoded'))}
 		{#if checked}
-			<pre class="bg-gray-50 border rounded p-4 shadow-sm overflow-x-scroll"><code
+			<pre class="bg-gray-50 border rounded p-4 shadow-sm overflow-x-scroll"><code class="font-mono"
 					>{prettyContent}</code
 				>
 		</pre>
 		{:else}
-			<pre class="bg-gray-50 border rounded p-4 shadow-sm overflow-x-scroll"><code>{content}</code>
+			<pre class="bg-gray-50 border rounded p-4 shadow-sm overflow-x-scroll"><code class="font-mono"
+					>{content}</code
+				>
 		</pre>
 		{/if}
 	{:else}

diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
@@ -55,7 +55,8 @@ const config = {
 				sm: 'calc(var(--radius) - 4px)'
 			},
 			fontFamily: {
-				sans: ["'Figtree'", ...fontFamily.sans]
+				sans: ["'Figtree'", ...fontFamily.sans],
+				mono: ["'PT Mono'", ...fontFamily.mono],
 			}
 		}
 	}