Improve exclusive mode permissions and enhance switch visibility

- Add 'All Users' option to exclusive mode write access for more flexibility
- Create custom styled switches with better visibility in off state
- Use dark gray background (#434343) for unchecked switches instead of faded appearance
- Add proper styling for loading and disabled switch states
- Improve user experience in both table view and modal forms
- Maintain excellent appearance of checked/on state while making off state clearly visible

Author: Maphikza

src/components/allowed-users/components/NPubManagement/NPubManagement.styles.ts

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { Switch } from 'antd';
 import { media } from '@app/styles/themes/constants';
 
 export const Container = styled.div`
@@ -62,4 +63,58 @@ export const BulkImportContainer = styled.div`
       }
     }
   }
+`;
+
+export const StyledSwitch = styled(Switch)`
+  &.ant-switch {
+    /* When switch is OFF (unchecked) */
+    background-color: #434343 !important;
+    border: 1px solid #666 !important;
+    
+    /* When switch is ON (checked) */
+    &.ant-switch-checked {
+      background-color: var(--primary-color) !important;
+      border: 1px solid var(--primary-color) !important;
+    }
+    
+    /* Handle styling */
+    .ant-switch-handle {
+      background-color: #fff !important;
+      border: 1px solid #d9d9d9;
+      
+      &::before {
+        background-color: #fff !important;
+      }
+    }
+    
+    /* Disabled state */
+    &.ant-switch-disabled {
+      background-color: #2a2a2a !important;
+      border: 1px solid #444 !important;
+      opacity: 0.6;
+      
+      .ant-switch-handle {
+        background-color: #666 !important;
+      }
+    }
+    
+    /* Loading state */
+    &.ant-switch-loading {
+      background-color: #434343 !important;
+      border: 1px solid #666 !important;
+      
+      &.ant-switch-checked {
+        background-color: var(--primary-color) !important;
+        opacity: 0.7;
+      }
+    }
+  }
+`;
+
+export const PermissionLabel = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-main-color);
+  font-size: 14px;
 `;

src/components/allowed-users/components/NPubManagement/NPubManagement.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Button, Input, Table, Space, Modal, Form, Select, message, Popconfirm, Switch } from 'antd';
+import { Button, Input, Table, Space, Modal, Form, Select, message, Popconfirm } from 'antd';
 import { PlusOutlined, UploadOutlined, DeleteOutlined, DownloadOutlined } from '@ant-design/icons';
 import { useAllowedUsersNpubs, useAllowedUsersValidation } from '@app/hooks/useAllowedUsers';
 import { AllowedUsersSettings, AllowedUsersMode } from '@app/types/allowedUsers.types';
@@ -220,9 +220,9 @@ export const NPubManagement: React.FC<NPubManagementProps> = ({
       key: 'readAccess',
       align: 'center' as const,
       render: (_: any, record: UnifiedUser) => (
-        <Switch
+        <S.StyledSwitch
           checked={record.readAccess}
-          onChange={(checked) => handleToggleAccess(record.npub, 'read', checked)}
+          onChange={(checked: boolean) => handleToggleAccess(record.npub, 'read', checked)}
           loading={readNpubs.loading}
           size="small"
         />
@@ -233,9 +233,9 @@ export const NPubManagement: React.FC<NPubManagementProps> = ({
       key: 'writeAccess',
       align: 'center' as const,
       render: (_: any, record: UnifiedUser) => (
-        <Switch
+        <S.StyledSwitch
           checked={record.writeAccess}
-          onChange={(checked) => handleToggleAccess(record.npub, 'write', checked)}
+          onChange={(checked: boolean) => handleToggleAccess(record.npub, 'write', checked)}
           loading={writeNpubs.loading}
           size="small"
         />
@@ -346,10 +346,14 @@ export const NPubManagement: React.FC<NPubManagementProps> = ({
           >
             <Space direction="vertical">
               <Form.Item name="readAccess" valuePropName="checked" style={{ marginBottom: 8 }}>
-                <Switch size="small" /> Read Access
+                <S.PermissionLabel>
+                  <S.StyledSwitch size="small" /> Read Access
+                </S.PermissionLabel>
               </Form.Item>
               <Form.Item name="writeAccess" valuePropName="checked" style={{ marginBottom: 0 }}>
-                <Switch size="small" /> Write Access
+                <S.PermissionLabel>
+                  <S.StyledSwitch size="small" /> Write Access
+                </S.PermissionLabel>
               </Form.Item>
             </Space>
           </Form.Item>

src/types/allowedUsers.types.ts

@@ -85,7 +85,8 @@ export const MODE_CONFIGURATIONS: Record<AllowedUsersMode, ModeOptions> = {
       { value: 'all_users', label: 'All Users' }
     ],
     writeOptions: [
-      { value: 'allowed_users', label: 'Allowed Users' }
+      { value: 'allowed_users', label: 'Allowed Users' },
+      { value: 'all_users', label: 'All Users' }
     ],
     allowsFreeTiers: true,
     requiresNpubManagement: true