polish splash screen

src/app/auth/unlock.tsx

@@ -31,21 +31,12 @@ export function UnlockScreen() {
   const navigate = useNavigate();
   const setPrivkey = useStronghold((state) => state.setPrivkey);
 
-  const [passwordInput, setPasswordInput] = useState('password');
-  const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
 
   const { account } = useAccount();
   const { load } = useSecureStorage();
 
-  // toggle private key
-  const showPassword = () => {
-    if (passwordInput === 'password') {
-      setPasswordInput('text');
-    } else {
-      setPasswordInput('password');
-    }
-  };
-
   const {
     register,
     setError,
@@ -62,20 +53,19 @@ export function UnlockScreen() {
         setPrivkey(privkey);
         // redirect to home
         navigate('/', { replace: true });
-      } catch {
-        setLoading(false);
+      } catch (e) {
         setError('password', {
           type: 'custom',
-          message: 'Wrong password',
+          message: e,
         });
       }
     } else {
-      setLoading(false);
       setError('password', {
         type: 'custom',
         message: 'Password is required and must be greater than 3',
       });
     }
+    setLoading(false);
   };
 
   return (
@@ -89,15 +79,15 @@ export function UnlockScreen() {
             <div className="relative">
               <input
                 {...register('password', { required: true })}
-                type={passwordInput}
+                type={showPassword ? 'text' : 'password'}
                 className="relative h-12 w-full rounded-lg bg-white/10 py-1 text-center text-white !outline-none placeholder:text-white/10"
               />
               <button
                 type="button"
-                onClick={() => showPassword()}
+                onClick={() => setShowPassword((prev) => !prev)}
                 className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
               >
-                {passwordInput === 'password' ? (
+                {showPassword ? (
                   <EyeOffIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
                 ) : (
                   <EyeOnIcon className="h-5 w-5 text-white/50 group-hover:text-white" />

src/app/auth/welcome.tsx

@@ -5,27 +5,30 @@ import { Link } from 'react-router-dom';
 import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 
 export function WelcomeScreen() {
-  useEffect(() => {
-    async function setWindow() {
-      await appWindow.setSize(new LogicalSize(400, 500));
-      await appWindow.setResizable(false);
-      await appWindow.center();
-    }
+  async function setWindow() {
+    await appWindow.setSize(new LogicalSize(400, 500));
+    await appWindow.setResizable(false);
+    await appWindow.center();
+  }
 
+  async function resetWindow() {
+    await appWindow.setSize(new LogicalSize(1080, 800));
+    await appWindow.setResizable(false);
+    await appWindow.center();
+  }
+
+  useEffect(() => {
     setWindow();
 
     return () => {
-      appWindow.setSize(new LogicalSize(1080, 800)).then(() => {
-        appWindow.setResizable(false);
-        appWindow.center();
-      });
+      resetWindow();
     };
   }, []);
 
   return (
     <div className="flex h-screen w-full flex-col justify-between bg-white/10">
       <div className="flex flex-col gap-10 pt-16">
-        <div className="flex flex-col gap-2 text-center">
+        <div className="sflex flex-col gap-2 text-center">
           <h1 className="text-3xl font-medium text-white">Welcome to Lume</h1>
           <h3 className="mx-auto w-2/3 text-white/50">
             Let&apos;s get you up and connecting with all peoples around the world on