diff --git a/src/components/settings/SettingsHome.tsx b/src/components/settings/SettingsHome.tsx
index d7210c094..74bcc767d 100644
--- a/src/components/settings/SettingsHome.tsx
+++ b/src/components/settings/SettingsHome.tsx
@@ -23,7 +23,8 @@ const SettingsHome = () => {
console.log('Delete all data');
};
- const menuItems = [
+ // Main settings menu items
+ const mainMenuItems = [
{
id: 'connections',
title: 'Connections',
@@ -33,7 +34,8 @@ const SettingsHome = () => {
),
- onClick: () => navigateToSettings('connections')
+ onClick: () => navigateToSettings('connections'),
+ dangerous: false
},
{
id: 'messaging',
@@ -44,7 +46,8 @@ const SettingsHome = () => {
),
- onClick: () => navigateToSettings('messaging')
+ onClick: () => navigateToSettings('messaging'),
+ dangerous: false
},
{
id: 'privacy',
@@ -55,7 +58,8 @@ const SettingsHome = () => {
),
- onClick: () => navigateToSettings('privacy')
+ onClick: () => navigateToSettings('privacy'),
+ dangerous: false
},
{
id: 'profile',
@@ -66,7 +70,8 @@ const SettingsHome = () => {
),
- onClick: () => navigateToSettings('profile')
+ onClick: () => navigateToSettings('profile'),
+ dangerous: false
},
{
id: 'advanced',
@@ -78,7 +83,8 @@ const SettingsHome = () => {
),
- onClick: () => navigateToSettings('advanced')
+ onClick: () => navigateToSettings('advanced'),
+ dangerous: false
},
{
id: 'encryption',
@@ -86,10 +92,11 @@ const SettingsHome = () => {
description: 'Access your encryption key for backup purposes',
icon: (
),
- onClick: handleViewEncryptionKey
+ onClick: handleViewEncryptionKey,
+ dangerous: false
},
{
id: 'billing',
@@ -97,11 +104,16 @@ const SettingsHome = () => {
description: 'Manage your subscription and payment methods',
icon: (
),
- onClick: () => navigateToSettings('billing')
- },
+ onClick: () => navigateToSettings('billing'),
+ dangerous: false
+ }
+ ];
+
+ // Destructive actions menu items
+ const destructiveMenuItems = [
{
id: 'delete',
title: 'Delete All Data',
@@ -113,6 +125,18 @@ const SettingsHome = () => {
),
onClick: handleDeleteAllData,
dangerous: true
+ },
+ {
+ id: 'logout',
+ title: 'Log out',
+ description: 'Sign out of your account',
+ icon: (
+
+ ),
+ onClick: handleLogout,
+ dangerous: true
}
];
@@ -121,33 +145,38 @@ const SettingsHome = () => {
- {/* Menu items */}
-
- {menuItems.map((item, index) => (
-
- ))}
+
+ {/* Main Settings */}
+
+ {mainMenuItems.map((item, index) => (
+
+ ))}
+
- {/* Logout */}
-
-
-
- }
- title="Log out"
- description="Sign out of your account"
- onClick={handleLogout}
- dangerous
- isLast
- />
+ {/* Destructive Actions */}
+
+ {destructiveMenuItems.map((item, index) => (
+
+ ))}
+
diff --git a/src/components/settings/components/SettingsMenuItem.tsx b/src/components/settings/components/SettingsMenuItem.tsx
index 447d7b2a2..4fba5696d 100644
--- a/src/components/settings/components/SettingsMenuItem.tsx
+++ b/src/components/settings/components/SettingsMenuItem.tsx
@@ -22,7 +22,7 @@ const SettingsMenuItem = ({
// Color variations for dangerous items (like logout/delete)
const titleColor = dangerous ? 'text-amber-400' : 'text-white';
const iconColor = dangerous ? 'text-amber-400' : 'text-white';
- const borderColor = dangerous ? 'border-amber-500/30' : 'border-stone-700';
+ const borderColor = 'border-stone-700'; // Use consistent border color for all items
// Border classes for first/last items
const borderClasses = isLast ? '' : `border-b ${borderColor}`;