From 4ee63a731a00a91a4c6e8ea4afb56410d84c4d29 Mon Sep 17 00:00:00 2001
From: k3y0708 <keyvan@atashfaraz.de>
Date: Thu, 12 Oct 2023 18:49:01 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20UI=20Improvements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+layout.svelte          |  1 +
 src/routes/request/+page.svelte    |  3 ++-
 src/routes/request/Request.svelte  | 18 +++++++++---------
 src/routes/request/Response.svelte | 18 +++++++++---------
 4 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4e307a2..8380a62 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -58,6 +58,7 @@
 		left: 1rem;
 		height: calc(100vh - 2rem);
 		width: calc(20vw - 1.5rem);
+		border-right: 1px solid #fff;
 	}
 
 	nav input {
diff --git a/src/routes/request/+page.svelte b/src/routes/request/+page.svelte
index ea1caae..0358bf6 100644
--- a/src/routes/request/+page.svelte
+++ b/src/routes/request/+page.svelte
@@ -14,6 +14,7 @@
 	$: headers = [{ key: 'User-Agent', value: 'RestRover/0.0.1' }];
 	$: body = '';
 
+	$: response = null;
 	$: responseBody = '';
 	$: responseHeaders = {};
 
@@ -37,7 +38,7 @@
 	}
 </script>
 
-<h1>{id} - {name}</h1>
+<h1>{name}</h1>
 <div>
 	<input type="text" bind:value={method} />
 	<input type="text" bind:value={requestUrl} />
diff --git a/src/routes/request/Request.svelte b/src/routes/request/Request.svelte
index a21baf4..7361864 100644
--- a/src/routes/request/Request.svelte
+++ b/src/routes/request/Request.svelte
@@ -62,10 +62,10 @@
 		padding: 20px;
 		width: 100%;
 		border: 1px solid silver;
-		background: #fff;
+		background: #323232;
 		line-height: 1.5em;
 		letter-spacing: 0.3px;
-		color: #444;
+		color: #fff;
 	}
 
 	#tab-request-body:checked ~ figure .tab-request-body,
@@ -79,24 +79,24 @@
 		padding: 15px 15px;
 		border-top: 1px solid silver;
 		border-right: 1px solid silver;
-		background: hsl(210, 50%, 50%);
-		color: #eee;
+		background: #323232;
+		color: #fff;
 	}
 
 	nav label:nth-child(1) {
-		border-left: 1px solid silver;
+		border-left: 1px solid #c0c0c0;
 	}
 	nav label:hover {
-		background: hsl(210, 50%, 40%);
+		background: #252525;
 	}
 	nav label:active {
-		background: #ffffff;
+		background: #fff;
 	}
 
 	#tab-request-body:checked ~ nav label[for='tab-request-body'],
 	#tab-request-headers:checked ~ nav label[for='tab-request-headers'],
 	#tab-request-unused:checked ~ nav label[for='tab-request-unused'] {
-		background: white;
+		background: #fff;
 		color: #111;
 		position: relative;
 		border-bottom: none;
@@ -110,7 +110,7 @@
 		position: absolute;
 		height: 2px;
 		width: 100%;
-		background: white;
+		background: #fff;
 		left: 0;
 		bottom: -1px;
 	}
diff --git a/src/routes/request/Response.svelte b/src/routes/request/Response.svelte
index 4d72bfe..300e0b2 100644
--- a/src/routes/request/Response.svelte
+++ b/src/routes/request/Response.svelte
@@ -47,10 +47,10 @@
 		padding: 20px;
 		width: 100%;
 		border: 1px solid silver;
-		background: #fff;
+		background: #323232;
 		line-height: 1.5em;
 		letter-spacing: 0.3px;
-		color: #444;
+		color: #fff;
 	}
 
 	#tab1:checked ~ figure .tab1,
@@ -64,24 +64,24 @@
 		padding: 15px 15px;
 		border-top: 1px solid silver;
 		border-right: 1px solid silver;
-		background: hsl(210, 50%, 50%);
-		color: #eee;
+		background: #323232;
+		color: #fff;
 	}
 
 	nav label:nth-child(1) {
-		border-left: 1px solid silver;
+		border-left: 1px solid #c0c0c0;
 	}
 	nav label:hover {
-		background: hsl(210, 50%, 40%);
+		background: #252525;
 	}
 	nav label:active {
-		background: #ffffff;
+		background: #fff;
 	}
 
 	#tab1:checked ~ nav label[for='tab1'],
 	#tab2:checked ~ nav label[for='tab2'],
 	#tab3:checked ~ nav label[for='tab3'] {
-		background: white;
+		background: #fff;
 		color: #111;
 		position: relative;
 		border-bottom: none;
@@ -95,7 +95,7 @@
 		position: absolute;
 		height: 2px;
 		width: 100%;
-		background: white;
+		background: #fff;
 		left: 0;
 		bottom: -1px;
 	}