Skip to content

Commit e1a0aff

Browse files
vrtndvrtnd
committed
improve mobile non auth user page
1 parent 18a7625 commit e1a0aff

File tree

2 files changed

+37
-22
lines changed

2 files changed

+37
-22
lines changed

‎src/containers/Subscribtion/Home.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export function SubscribeHome({ returnUrl, isTrial }: { returnUrl?: string; isTr
110110
<p className="text-center text-[#919296]">
111111
Upgrade now for access to LlamaFeed, Custom Dashboards, CSV data downloads and more.
112112
</p>
113-
{isAuthenticated && (
113+
{isAuthenticated ? (
114114
<div className="mx-auto w-full max-w-[400px]">
115115
<button
116116
onClick={() => {
@@ -126,6 +126,16 @@ export function SubscribeHome({ returnUrl, isTrial }: { returnUrl?: string; isTr
126126
</button>
127127
<p className="mt-2 text-center text-xs text-[#8a8c90]">Cancel anytime • Crypto and Card payments</p>
128128
</div>
129+
) : (
130+
<div className="mx-auto w-full max-w-[400px] lg:hidden">
131+
<SignIn
132+
text={`Get Pro for $${billingInterval === 'year' ? '490' : '49'}${billingInterval === 'year' ? '/year' : '/month'}`}
133+
className="w-full rounded-lg bg-linear-to-r from-[#5C5CF9] to-[#6E6EFA] px-6 py-3.5 font-semibold text-white shadow-lg transition-all duration-200 hover:from-[#4A4AF0] hover:to-[#5A5AF5] hover:shadow-[#5C5CF9]/30"
134+
pendingActionMessage="Sign in or create an account to subscribe to the Pro plan."
135+
defaultFlow="signup"
136+
/>
137+
<p className="mt-2 text-center text-xs text-[#8a8c90]">Cancel anytime • Crypto and Card payments</p>
138+
</div>
129139
)}
130140
</div>
131141
)}

‎src/containers/Subscribtion/SignIn.tsx‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,20 @@ export const SignIn = ({
1212
text,
1313
className,
1414
showOnlyAuthDialog = false,
15-
pendingActionMessage
15+
pendingActionMessage,
16+
defaultFlow = 'signin'
1617
}: {
1718
text?: string
1819
className?: string
1920
showOnlyAuthDialog?: boolean
2021
pendingActionMessage?: string
22+
defaultFlow?: 'signin' | 'signup' | 'forgot'
2123
}) => {
2224
const dialogState = Ariakit.useDialogStore({ defaultOpen: showOnlyAuthDialog })
2325
const { openConnectModal } = useConnectModal()
2426
const { address } = useAccount()
2527

26-
const [flow, setFlow] = useState<'signin' | 'signup' | 'forgot'>('signin')
28+
const [flow, setFlow] = useState<'signin' | 'signup' | 'forgot'>(defaultFlow)
2729
const [email, setEmail] = useState('')
2830
const [password, setPassword] = useState('')
2931
const [confirmPassword, setConfirmPassword] = useState('')
@@ -170,13 +172,13 @@ export const SignIn = ({
170172
<Ariakit.Dialog
171173
store={dialogState}
172174
hideOnInteractOutside={showOnlyAuthDialog ? false : true}
173-
className="dialog animate-fadeIn flex max-h-[75dvh] max-w-md flex-col rounded-xl border border-[#39393E] bg-[#1a1b1f] p-6 shadow-2xl backdrop-blur-md"
175+
className="dialog animate-fadeIn flex max-h-[90dvh] max-w-md flex-col overflow-y-auto rounded-xl border border-[#39393E] bg-[#1a1b1f] p-4 shadow-2xl backdrop-blur-md sm:p-6"
174176
style={{
175177
backgroundImage: 'radial-gradient(circle at center, rgba(92, 92, 249, 0.05), transparent 80%)'
176178
}}
177179
>
178-
<div className="mb-5 flex items-center justify-between">
179-
<Ariakit.DialogHeading className="bg-linear-to-r from-[#5C5CF9] to-[#8A8AFF] bg-clip-text text-2xl font-bold text-transparent">
180+
<div className="mb-3 flex items-center justify-between sm:mb-5">
181+
<Ariakit.DialogHeading className="bg-linear-to-r from-[#5C5CF9] to-[#8A8AFF] bg-clip-text text-xl font-bold text-transparent sm:text-2xl">
180182
{flow === 'signin' ? 'Sign In' : flow === 'signup' ? 'Create Account' : 'Reset Password'}
181183
</Ariakit.DialogHeading>
182184

@@ -192,41 +194,44 @@ export const SignIn = ({
192194
</div>
193195

194196
{pendingActionMessage && (
195-
<div className="mb-4 rounded-lg border border-[#5C5CF9]/30 bg-[#5C5CF9]/10 p-3">
196-
<p className="text-center text-sm text-[#b4b7bc]">{pendingActionMessage}</p>
197+
<div className="mb-3 rounded-lg border border-[#5C5CF9]/30 bg-[#5C5CF9]/10 p-2.5 sm:mb-4 sm:p-3">
198+
<p className="text-center text-xs text-[#b4b7bc] sm:text-sm">{pendingActionMessage}</p>
197199
</div>
198200
)}
199201

200-
<div className="flex w-full flex-col gap-3">
202+
<div className="flex w-full flex-col gap-2 sm:gap-3">
201203
<button
202-
className="relative flex w-full items-center justify-center gap-2 rounded-lg bg-linear-to-r from-[#5C5CF9] to-[#6E6EFA] py-3 font-medium text-white shadow-lg transition-all duration-200 hover:from-[#4A4AF0] hover:to-[#5A5AF5] hover:shadow-[#5C5CF9]/20 disabled:cursor-not-allowed disabled:opacity-50"
204+
className="relative flex w-full items-center justify-center gap-2 rounded-lg bg-linear-to-r from-[#5C5CF9] to-[#6E6EFA] py-2.5 text-sm font-medium text-white shadow-lg transition-all duration-200 hover:from-[#4A4AF0] hover:to-[#5A5AF5] hover:shadow-[#5C5CF9]/20 disabled:cursor-not-allowed disabled:opacity-50 sm:py-3"
203205
onClick={handleWalletSignIn}
204206
disabled={loaders.signInWithEthereum}
205207
>
206-
<Icon name="wallet" height={18} width={18} />
208+
<Icon name="wallet" height={16} width={16} />
207209
{loaders.signInWithEthereum ? 'Connecting...' : 'Sign in with Wallet'}
208210
</button>
209211

210212
<button
211-
className="relative flex w-full items-center justify-center gap-2 rounded-lg border border-[#39393E] bg-[#222429] py-3 font-medium text-white transition-all duration-200 hover:bg-[#2a2b30] disabled:cursor-not-allowed disabled:opacity-50"
213+
className="relative flex w-full items-center justify-center gap-2 rounded-lg border border-[#39393E] bg-[#222429] py-2.5 text-sm font-medium text-white transition-all duration-200 hover:bg-[#2a2b30] disabled:cursor-not-allowed disabled:opacity-50 sm:py-3"
212214
onClick={() => signInWithGithub(() => dialogState.hide())}
213215
disabled={loaders.signInWithGithub}
214216
>
215-
<Icon name="github" height={18} width={18} />
217+
<Icon name="github" height={16} width={16} />
216218
{loaders.signInWithGithub ? 'Connecting...' : 'Sign in with GitHub'}
217219
</button>
218220
</div>
219221

220-
<div className="relative my-2 flex items-center">
222+
<div className="relative my-2 flex items-center sm:my-3">
221223
<div className="grow border-t border-[#39393E]"></div>
222-
<span className="mx-4 shrink text-sm text-[#9a9da1]">or continue with email</span>
224+
<span className="mx-3 shrink text-xs text-[#9a9da1] sm:mx-4 sm:text-sm">or continue with email</span>
223225
<div className="grow border-t border-[#39393E]"></div>
224226
</div>
225227

226228
{flow === 'signin' ? (
227-
<form className="flex flex-col gap-4" onSubmit={handleEmailSignIn}>
228-
<div className="space-y-1.5">
229-
<label htmlFor={`${text || 'default'}-signin-email`} className="text-sm font-medium text-[#b4b7bc]">
229+
<form className="flex flex-col gap-3 sm:gap-4" onSubmit={handleEmailSignIn}>
230+
<div className="space-y-1">
231+
<label
232+
htmlFor={`${text || 'default'}-signin-email`}
233+
className="text-xs font-medium text-[#b4b7bc] sm:text-sm"
234+
>
230235
Email
231236
</label>
232237
<div className="relative">
@@ -237,15 +242,15 @@ export const SignIn = ({
237242
id={`${text || 'default'}-signin-email`}
238243
type="email"
239244
required
240-
className="w-full rounded-lg border border-[#39393E] bg-[#222429] p-3 pl-10 text-white transition-all duration-200 placeholder:text-[#8a8c90] focus:border-[#5C5CF9] focus:ring-1 focus:ring-[#5C5CF9] focus:outline-hidden"
245+
className="w-full rounded-lg border border-[#39393E] bg-[#222429] p-2.5 pl-10 text-sm text-white transition-all duration-200 placeholder:text-[#8a8c90] focus:border-[#5C5CF9] focus:ring-1 focus:ring-[#5C5CF9] focus:outline-hidden sm:p-3"
241246
value={email}
242247
onChange={(e) => setEmail(e.target.value)}
243248
/>
244249
</div>
245250
</div>
246251

247-
<div className="space-y-1.5">
248-
<label htmlFor="signin-password" className="text-sm font-medium text-[#b4b7bc]">
252+
<div className="space-y-1">
253+
<label htmlFor="signin-password" className="text-xs font-medium text-[#b4b7bc] sm:text-sm">
249254
Password
250255
</label>
251256
<div className="relative">
@@ -256,7 +261,7 @@ export const SignIn = ({
256261
id="signin-password"
257262
type="password"
258263
required
259-
className="w-full rounded-lg border border-[#39393E] bg-[#222429] p-3 pl-10 text-white transition-all duration-200 placeholder:text-[#8a8c90] focus:border-[#5C5CF9] focus:ring-1 focus:ring-[#5C5CF9] focus:outline-hidden"
264+
className="w-full rounded-lg border border-[#39393E] bg-[#222429] p-2.5 pl-10 text-sm text-white transition-all duration-200 placeholder:text-[#8a8c90] focus:border-[#5C5CF9] focus:ring-1 focus:ring-[#5C5CF9] focus:outline-hidden sm:p-3"
260265
value={password}
261266
onChange={(e) => setPassword(e.target.value)}
262267
/>

0 commit comments

Comments
 (0)