Visual edit in Lovable

Edited UI in Lovable

src/pages/Settings.tsx

@@ -1,4 +1,3 @@
-
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import NavBar from '@/components/NavBar';
@@ -7,7 +6,6 @@ import { User, CreditCard, Bell, Lock, HelpCircle, LogOut, ChevronRight } from '
 import { cn } from '@/lib/utils';
 import { useAuth } from '@/contexts/auth';
 import { useToast } from '@/hooks/useToast.wrapper';
-
 const SettingsOption = ({
   icon: Icon,
   label,
@@ -23,40 +21,35 @@ const SettingsOption = ({
   color?: string;
   disabled?: boolean;
 }) => {
-  return <div 
+  return <div className={cn("neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer")} onClick={disabled ? undefined : onClick}>
-    className={cn(
-      "neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex", 
-      disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
-    )} 
-    onClick={disabled ? undefined : onClick}
-  >
       <div className="flex items-center">
         <div className={cn("neuro-pressed p-3 rounded-full mr-4", color)}>
           <Icon size={20} />
         </div>
         <div className="flex-1">
-          <h3 className="font-medium">{label}</h3>
+          <h3 className="font-medium text-left">{label}</h3>
-          {description && <p className="text-xs text-gray-500">{description}</p>}
+          {description && <p className="text-xs text-gray-500 text-left">{description}</p>}
         </div>
         <ChevronRight size={18} className="text-gray-400" />
       </div>
     </div>;
 };
-
 const Settings = () => {
   const navigate = useNavigate();
-  const { user, signOut } = useAuth();
+  const {
-  const { toast } = useToast();
+    user,
-  
+    signOut
+  } = useAuth();
+  const {
+    toast
+  } = useToast();
   const handleLogout = async () => {
     await signOut();
     navigate('/login');
   };
-  
   const handleClick = (path: string) => {
     navigate(path);
   };
-  
   return <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
@@ -65,8 +58,7 @@ const Settings = () => {
           
           {/* User Profile */}
           <div className="neuro-flat p-6 mb-8">
-            {user ? (
+            {user ? <div className="flex items-center">
-              <div className="flex items-center">
                 <div className="neuro-flat p-3 rounded-full mr-4 text-neuro-income">
                   <User size={24} />
                 </div>
@@ -78,16 +70,13 @@ const Settings = () => {
                     {user.email}
                   </p>
                 </div>
-              </div>
+              </div> : <div className="flex flex-col items-center justify-center text-center py-3">
-            ) : (
-              <div className="flex flex-col items-center justify-center text-center py-3">
                 <div className="neuro-flat p-3 rounded-full mb-3 text-neuro-income">
                   <User size={24} />
                 </div>
                 <h2 className="font-semibold text-lg">로그인 필요</h2>
                 <p className="text-sm text-gray-500">계정에 로그인하세요</p>
-              </div>
+              </div>}
-            )}
           </div>
         </header>
         
@@ -100,50 +89,21 @@ const Settings = () => {
         {/* Settings Options */}
         <div className="space-y-4 mb-8">
           <h2 className="text-sm font-medium text-gray-500 mb-2 px-2">계정</h2>
-          <SettingsOption 
+          <SettingsOption icon={User} label="프로필 관리" description="프로필 및 비밀번호 설정" onClick={() => user ? navigate('/profile') : navigate('/login')} />
-            icon={User} 
+          <SettingsOption icon={CreditCard} label="결제 방법" description="카드 및 은행 계좌 관리" onClick={() => user ? navigate('/payment-methods') : navigate('/login')} />
-            label="프로필 관리" 
+          <SettingsOption icon={Bell} label="알림 설정" description="앱 알림 및 리마인더" onClick={() => user ? navigate('/notifications') : navigate('/login')} />
-            description="프로필 및 비밀번호 설정" 
-            onClick={() => user ? navigate('/profile') : navigate('/login')} 
-          />
-          <SettingsOption 
-            icon={CreditCard} 
-            label="결제 방법" 
-            description="카드 및 은행 계좌 관리" 
-            onClick={() => user ? navigate('/payment-methods') : navigate('/login')} 
-          />
-          <SettingsOption 
-            icon={Bell} 
-            label="알림 설정" 
-            description="앱 알림 및 리마인더" 
-            onClick={() => user ? navigate('/notifications') : navigate('/login')} 
-          />
         </div>
         
         <div className="space-y-4 mb-8">
           <h2 className="text-sm font-medium text-gray-500 mb-2 px-2">앱 설정</h2>
-          <SettingsOption 
+          <SettingsOption icon={Lock} label="보안 및 개인정보" description="보안 및 데이터 설정"
-            icon={Lock} 
+        // 로그인 상태와 관계없이 접근 가능하도록 변경
-            label="보안 및 개인정보" 
+        onClick={() => navigate('/security-privacy')} />
-            description="보안 및 데이터 설정" 
+          <SettingsOption icon={HelpCircle} label="도움말 및 지원" description="FAQ 및 고객 지원" onClick={() => navigate('/help-support')} />
-            // 로그인 상태와 관계없이 접근 가능하도록 변경
-            onClick={() => navigate('/security-privacy')} 
-          />
-          <SettingsOption 
-            icon={HelpCircle} 
-            label="도움말 및 지원" 
-            description="FAQ 및 고객 지원" 
-            onClick={() => navigate('/help-support')} 
-          />
         </div>
         
         <div className="mt-8">
-          <SettingsOption 
+          <SettingsOption icon={LogOut} label={user ? "로그아웃" : "로그인"} color="text-neuro-expense" onClick={user ? handleLogout : () => navigate('/login')} />
-            icon={LogOut} 
-            label={user ? "로그아웃" : "로그인"} 
-            color="text-neuro-expense" 
-            onClick={user ? handleLogout : () => navigate('/login')}
-          />
         </div>
         
         <div className="mt-12 text-center text-xs text-gray-400">
@@ -154,5 +114,4 @@ const Settings = () => {
       <NavBar />
     </div>;
 };
-
+export default Settings;
-export default Settings;