Update UI design to premium violet palette, tweak hero section, and make search bar outline visible
This commit is contained in:
parent
eb8a302222
commit
c159ad4f37
11 changed files with 247 additions and 152 deletions
|
|
@ -34,17 +34,17 @@ export const SetupForm = () => {
|
|||
const displayError = localError || error
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-md p-8 space-y-8 bg-white/70 dark:bg-gray-800/70 backdrop-blur-xl rounded-2xl shadow-2xl border border-gray-100 dark:border-gray-700 transition-all">
|
||||
<div className="w-full max-w-md p-10 space-y-8 bg-white/80 dark:bg-gray-800/80 backdrop-blur-2xl rounded-[2rem] shadow-2xl shadow-accent-500/10 border border-white/50 dark:border-gray-700 transition-all">
|
||||
<div className="text-center">
|
||||
<div className="mx-auto w-16 h-16 bg-indigo-100 dark:bg-indigo-900/50 rounded-full flex items-center justify-center mb-6">
|
||||
<svg className="w-8 h-8 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8V7a4 4 0 00-8 0v4h8z" />
|
||||
<div className="mx-auto w-16 h-16 bg-gradient-to-br from-accent-400 to-accent-600 rounded-2xl flex items-center justify-center shadow-lg shadow-accent-500/30 mb-6 transform -rotate-6 hover:rotate-0 transition-transform duration-300">
|
||||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white mb-2">
|
||||
<h2 className="text-4xl font-heading font-bold tracking-tight text-gray-900 dark:text-white mb-2">
|
||||
Set up PaperJet
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
<p className="text-base text-gray-500 dark:text-gray-400 font-medium">
|
||||
Create a master password to secure your documents. Make sure you remember it!
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -52,13 +52,13 @@ export const SetupForm = () => {
|
|||
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
<label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 ml-1">
|
||||
Master Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
className="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-700/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all"
|
||||
className="w-full px-5 py-4 rounded-full border-2 border-transparent bg-white/60 dark:bg-gray-700/60 text-gray-900 dark:text-white focus:bg-white focus:ring-4 focus:ring-accent-500/20 focus:border-accent-400 outline-none transition-all placeholder-gray-400 dark:placeholder-gray-500 shadow-inner text-lg font-medium"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
|
|
@ -66,13 +66,13 @@ export const SetupForm = () => {
|
|||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
<label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 ml-1">
|
||||
Confirm Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
className="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-700/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all"
|
||||
className="w-full px-5 py-4 rounded-full border-2 border-transparent bg-white/60 dark:bg-gray-700/60 text-gray-900 dark:text-white focus:bg-white focus:ring-4 focus:ring-accent-500/20 focus:border-accent-400 outline-none transition-all placeholder-gray-400 dark:placeholder-gray-500 shadow-inner text-lg font-medium"
|
||||
placeholder="••••••••"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
|
|
@ -82,7 +82,7 @@ export const SetupForm = () => {
|
|||
</div>
|
||||
|
||||
{displayError && (
|
||||
<div className="p-3 text-sm text-red-600 bg-red-50 dark:bg-red-900/30 dark:text-red-400 rounded-lg animate-pulse">
|
||||
<div className="p-4 text-sm font-semibold text-red-600 bg-red-50 dark:bg-red-900/30 dark:text-red-400 rounded-2xl animate-in fade-in slide-in-from-top-2 border border-red-100 dark:border-red-800/50">
|
||||
{displayError}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -90,10 +90,10 @@ export const SetupForm = () => {
|
|||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || !password || !confirmPassword}
|
||||
className="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all active:scale-[0.98]"
|
||||
className="w-full flex justify-center py-4 px-6 border-2 border-transparent rounded-full shadow-lg text-lg font-bold text-white bg-gradient-to-r from-accent-500 to-accent-600 hover:from-accent-600 hover:to-accent-700 focus:outline-none focus:ring-4 focus:ring-accent-500/30 disabled:opacity-50 disabled:cursor-not-allowed transition-all active:scale-[0.98] hover:-translate-y-0.5"
|
||||
>
|
||||
{isLoading ? (
|
||||
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
|
||||
<svg className="animate-spin -ml-1 mr-3 h-6 w-6 text-white" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue