From 1ebb902894f97e19cd7e1052168bfe6c025411be Mon Sep 17 00:00:00 2001
From: Barbara Gomes <sugarpusher@users.noreply.github.com>
Date: Sun, 2 Apr 2023 14:49:07 -0400
Subject: [PATCH] style: fix spacing on rep selection (#340)

---
 packages/ui/src/lib/components/dropdown.svelte         | 7 ++++++-
 packages/ui/src/lib/components/persona_edit_rep.svelte | 2 +-
 packages/ui/src/lib/components/select.svelte           | 2 ++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/lib/components/dropdown.svelte b/packages/ui/src/lib/components/dropdown.svelte
index 662866c..7461c63 100644
--- a/packages/ui/src/lib/components/dropdown.svelte
+++ b/packages/ui/src/lib/components/dropdown.svelte
@@ -7,6 +7,7 @@
 	let cls: string | undefined = undefined
 	export { cls as class }
 	export let disabled: boolean | undefined = undefined
+	export let rep: boolean | undefined = undefined
 
 	let showDropdown = false
 	let dropdownElement: HTMLElement
@@ -40,7 +41,7 @@
 	</div>
 
 	<div class={`root ${cls}`}>
-		<ul class={showDropdown ? '' : 'hidden'}>
+		<ul class={`${showDropdown ? '' : 'hidden'} ${rep ? 'rep' : ''} ${cls}`}>
 			<slot />
 		</ul>
 	</div>
@@ -61,6 +62,10 @@
 			background-color: rgba(var(--color-body-bg-rgb), 0.93);
 			overflow: hidden;
 
+			&.rep {
+				inset: calc(100% - var(--spacing-12)) calc(var(--spacing-24) * -1) auto auto;
+			}
+
 			@media (min-width: 450px) {
 				min-width: min(calc(100vw - 48px), 350px);
 			}
diff --git a/packages/ui/src/lib/components/persona_edit_rep.svelte b/packages/ui/src/lib/components/persona_edit_rep.svelte
index dba7f3a..77f7c10 100644
--- a/packages/ui/src/lib/components/persona_edit_rep.svelte
+++ b/packages/ui/src/lib/components/persona_edit_rep.svelte
@@ -23,7 +23,7 @@
 <InfoScreen {title} {onBack} {onClose}>
 	<Container>
 		<h2>Reputation level</h2>
-		<Dropdown>
+		<Dropdown rep>
 			<Select slot="button" label="Reputation level" value={`Minimum ${minReputation} REP`} />
 
 			<DropdownItem
diff --git a/packages/ui/src/lib/components/select.svelte b/packages/ui/src/lib/components/select.svelte
index 31c1d0e..353144b 100644
--- a/packages/ui/src/lib/components/select.svelte
+++ b/packages/ui/src/lib/components/select.svelte
@@ -33,6 +33,7 @@
 		font-size: var(--font-size-normal);
 		white-space: nowrap;
 		color: var(--color-body-text);
+		margin: var(--spacing-24) calc(var(--spacing-24) * -1) var(--spacing-12);
 
 		.label {
 			font-size: var(--font-size-sm);
@@ -46,6 +47,7 @@
 			justify-content: space-between;
 			align-items: center;
 			width: 100%;
+			font-family: var(--font-serif);
 		}
 
 		& :global(svg) {