forked from
pds.ls/pdsls
atmosphere explorer
restyle account manager buttons
+9
-9
+2
-2
src/auth/account.tsx
+2
-2
src/auth/account.tsx
···
126
126
scopeFlow.cancel();
127
127
}}
128
128
alignTop
129
-
contentClass="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-88 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md dark:border-neutral-700"
129
+
contentClass="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-full max-w-sm rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 mx-3 shadow-md dark:border-neutral-700"
130
130
>
131
131
<Show when={!scopeFlow.showScopeSelector() && !showingAddAccount()}>
132
132
<div class="mb-2 px-1 font-semibold">
···
170
170
</div>
171
171
<button
172
172
onclick={() => setShowingAddAccount(true)}
173
-
class="flex w-full items-center justify-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-100 px-3 py-2 hover:bg-neutral-200 active:bg-neutral-300 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
173
+
class="dark:hover:bg-dark-200 dark:active:bg-dark-100 flex w-full items-center justify-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700"
174
174
>
175
175
<span class="iconify lucide--plus"></span>
176
176
<span>Add account</span>
+4
-4
src/auth/login.tsx
+4
-4
src/auth/login.tsx
···
32
32
};
33
33
34
34
return (
35
-
<div class="flex flex-col gap-y-2 px-1">
35
+
<div class="flex flex-col gap-y-3 px-1">
36
36
<Show when={!scopeFlow.showScopeSelector()}>
37
37
<Show when={props.onCancel}>
38
-
<div class="mb-1 flex items-center gap-2">
38
+
<div class="flex items-center gap-2">
39
39
<button
40
40
onclick={handleCancel}
41
41
class="flex items-center rounded-md p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
···
45
45
<div class="font-semibold">Add account</div>
46
46
</div>
47
47
</Show>
48
-
<form class="flex flex-col gap-2" onsubmit={(e) => e.preventDefault()}>
48
+
<form class="flex flex-col gap-3" onsubmit={(e) => e.preventDefault()}>
49
49
<label for="username" class="hidden">
50
50
Add account
51
51
</label>
···
69
69
</div>
70
70
<button
71
71
onclick={() => initiateLogin(loginInput())}
72
-
class="grow rounded-lg border-[0.5px] border-neutral-300 bg-neutral-100 px-3 py-2 hover:bg-neutral-200 active:bg-neutral-300 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
72
+
class="dark:hover:bg-dark-200 dark:active:bg-dark-100 flex w-full items-center justify-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700"
73
73
>
74
74
Continue
75
75
</button>
+3
-3
src/auth/scope-selector.tsx
+3
-3
src/auth/scope-selector.tsx
···
44
44
};
45
45
46
46
return (
47
-
<div class="flex flex-col gap-y-2">
48
-
<div class="mb-1 flex items-center gap-2">
47
+
<div class="flex flex-col gap-y-3">
48
+
<div class="flex items-center gap-2">
49
49
<button
50
50
onclick={props.onCancel}
51
51
class="flex items-center rounded-md p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
···
77
77
</div>
78
78
<button
79
79
onclick={handleConfirm}
80
-
class="mt-2 grow rounded-lg border-[0.5px] border-neutral-300 bg-neutral-100 px-3 py-2 hover:bg-neutral-200 active:bg-neutral-300 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
80
+
class="dark:hover:bg-dark-200 dark:active:bg-dark-100 flex w-full items-center justify-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700"
81
81
>
82
82
Continue
83
83
</button>