ui fixes

hellocoop · Dec 4, 2024 · 2e0a143 · 2e0a143
1 parent d1e3bc5
commit 2e0a143
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 28 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -156,7 +156,7 @@
 			if (!iss) throw params;
 			const wallet = iss.replace('issuer', 'wallet');
 			const authorize = new URL('/authorize', wallet).href;
-			selectedAuthzServer = authorize // save locally to call correct endpoints after iss flow
+			selectedAuthzServer = authorize; // save locally to call correct endpoints after iss flow
 			const loginHint = params.get('login_hint');
 			const domainHint = params.get('domain_hint');
 			const url = makeAuthzUrl({

diff --git a/src/lib/components/CopyButton.svelte b/src/lib/components/CopyButton.svelte
@@ -11,7 +11,10 @@
 	}
 </script>
 
-<button onclick={copy} class="w-4 {css}">
+<button
+	onclick={copy}
+	class="w-6 h-6 flex items-center justify-center {css} rounded-md bg-white dark:bg-charcoal"
+>
 	{#if copied}
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

diff --git a/src/lib/components/Request/AuthorizationServer.svelte b/src/lib/components/Request/AuthorizationServer.svelte
@@ -40,8 +40,10 @@
 					{#await validate(server)}
 						<span class="ml-2">Checking ...</span>
 					{:then validateOk}
-						<label for={server} class="ml-2 break-all" class:text-red-500={!validateOk}
-							>{server}</label
+						<label
+							for={server}
+							class="ml-2 break-all w-full md:w-auto truncate"
+							class:text-red-500={!validateOk}>{server}</label
 						>
 						<CopyButton content={server} css="opacity-70 ml-1" />
 					{/await}

diff --git a/src/lib/components/Request/HelloParams.svelte b/src/lib/components/Request/HelloParams.svelte
@@ -43,7 +43,7 @@
 					helloParams: selectedHelloParams,
 					helloParamsValues: selectedHelloParamsValues
 				})}
-				<li class="flex flex-row items-start">
+				<li class="flex flex-col md:flex-row items-start">
 					<div class="flex items-center space-x-2">
 						<input
 							type="checkbox"

diff --git a/src/lib/components/Request/ProtocolParams.svelte b/src/lib/components/Request/ProtocolParams.svelte
@@ -41,22 +41,23 @@
 					helloParamsValues: selectedHelloParamsValues
 				})}
 				{@const error = !requiredOk || !needsOk}
-				<li class="flex flex-row items-center space-x-2">
-					<input
-						type="checkbox"
-						id={param.NAME}
-						name="param"
-						bind:group={selectedProtocolParams}
-						class:invisible={param.CHECKBOX_HIDDEN}
-						value={param.NAME}
-					/>
-					<label
-						for={param.NAME}
-						class="font-normal w-48"
-						class:pointer-events-none={param.CHECKBOX_HIDDEN}
-						class:text-red-500={error}>{param.NAME} {required ? '*' : ''}</label
-					>
-
+				<li class="flex flex-col md:flex-row items-start">
+					<div class="flex items-center space-x-2">
+						<input
+							type="checkbox"
+							id={param.NAME}
+							name="param"
+							bind:group={selectedProtocolParams}
+							class:invisible={param.CHECKBOX_HIDDEN}
+							value={param.NAME}
+						/>
+						<label
+							for={param.NAME}
+							class="font-normal w-48"
+							class:pointer-events-none={param.CHECKBOX_HIDDEN}
+							class:text-red-500={error}>{param.NAME} {required ? '*' : ''}</label
+						>
+					</div>
 					{#if Array.isArray(param.POSSIBLE_VALUE)}
 						<ul
 							class="xl:h-8 p-1 space-y-0.5 xl:space-y-0 xl:space-x-1 w-full ring-1 ring-charcoal dark:ring-gray-800 flex flex-col xl:flex-row items-center rounded-sm"
@@ -85,7 +86,7 @@
 									{/if}
 									<label
 										for={value}
-										class="peer-checked:bg-charcoal peer-checked:ring-1 ring-charcoal dark:ring-gray-800 block flex justify-center items-center w-full cursor-pointer"
+										class="peer-checked:bg-charcoal peer-checked:ring-1 ring-charcoal dark:ring-gray-800 block flex justify-center items-center w-full cursor-pointer peer-checked:text-white peer-checked:dark:text-[#d4d4d4]"
 									>
 										{value}
 									</label>

diff --git a/src/lib/components/Request/ScopeParam.svelte b/src/lib/components/Request/ScopeParam.svelte
@@ -43,12 +43,12 @@
 			...(isHelloMode ? PARAMS.SCOPE_PARAM.HELLO_EXTEND_NON_STANDARD : [])
 		]}
 		<div
-			class="flex mt-2"
+			class="flex mt-2 space-x-2"
 			transition:slide={{ duration: 150 }}
 			class:opacity-50={isOverwritten}
 			class:pointer-events-none={isOverwritten}
 		>
-			<ul class="space-y-2 w-48">
+			<ul class="space-y-2 w-40 md:w-48">
 				{#each ALL_STANDARD_SCOEPS as stdScope}
 					{@const required = PARAMS.SCOPE_PARAM.REQUIRED.includes(stdScope)}
 					{@const selected = selectedScopes.includes(stdScope)}
@@ -62,14 +62,14 @@
 							bind:group={selectedScopes}
 							value={stdScope}
 						/>
-						<label for={stdScope} class:text-red-500={!requiredOk}
+						<label for={stdScope} class:text-red-500={!requiredOk} class="truncate"
 							>{stdScope} {required ? '*' : ''}</label
 						>
 					</li>
 				{/each}
 			</ul>
 
-			<ul class="space-y-2 w-48">
+			<ul class="space-y-2 w-40 md:w-48">
 				{#each ALL_NON_STANDARD_SCOPES as nonStdScope}
 					<li class="flex flex-row items-center space-x-2">
 						<input
@@ -79,7 +79,7 @@
 							value={nonStdScope}
 							bind:group={selectedScopes}
 						/>
-						<label for={nonStdScope} class="italic">{nonStdScope}</label>
+						<label for={nonStdScope} class="italic truncate">{nonStdScope}</label>
 					</li>
 				{/each}
 
@@ -95,7 +95,7 @@
 						class:opacity-50={!selectedScopes.includes('custom-scope')}
 						form="custom-scope"
 						type="text"
-						class="h-6 px-2 w-36 form-input italic"
+						class="h-6 px-2 w-32 md:w-40 form-input italic"
 						autocomplete="off"
 						autocorrect="off"
 						autocapitalize="off"