company creation ui clean up final

Author: 0xkid-root

src/components/UseForm/CheckboxController/index.tsx

@@ -1,5 +1,3 @@
-
-
 import { Checkbox } from '@/components/ui/checkbox';
 import {
   FormControl,
@@ -16,6 +14,8 @@ interface CheckboxControllerProps {
   rules?: any;
   control: any;
   disabled?: boolean;
+  bottomText?: string; // Added property
+  bottomTextClass?: string; // Added property for custom bottom text styling
 }
 
 const CheckboxController: React.FC<CheckboxControllerProps> = ({
@@ -24,6 +24,8 @@ const CheckboxController: React.FC<CheckboxControllerProps> = ({
   rules,
   control,
   disabled = false,
+  bottomText, // Added property
+  bottomTextClass = 'text-gray-500', // Added property with default value
 }) => {
   return (
     <FormField
@@ -50,11 +52,14 @@ const CheckboxController: React.FC<CheckboxControllerProps> = ({
               );
             }}
           />
+          {bottomText && (
+            <span className={`text-sm ${bottomTextClass}`}>{bottomText}</span>
+          )}
           <FormMessage />
         </FormItem>
       )}
     />
   );
 };
 
-export default CheckboxController;
+export default CheckboxController;

src/components/UseForm/ControllerMap.tsx

@@ -1,5 +1,3 @@
-
-
 import SelectController from './SelectController';
 import InputController from './InputController';
 import CheckboxController from './CheckboxController';
@@ -119,6 +117,7 @@ export type   FormFieldConfig = {
   placeholder?: string;
   maxSize?: number;
   bottomText?: string;
+  bottomTextClass?: string; // Added property for custom bottom text styling
   maxDate?: boolean;
   meta?: {
     refId: string;
@@ -130,4 +129,4 @@ export type   FormFieldConfig = {
   inputType?: 'text' | 'number';
 };
 
-export default ControllerMap;
+export default ControllerMap;

src/components/UseForm/InputController/index.tsx

@@ -23,6 +23,8 @@ interface InputControllerProps {
   iconPosition?: "left" | "right";
   placeholder?: string;
   defaultValue?: string | number;
+  bottomText?: string; // Added property
+  bottomTextClass?: string; // Added property for custom bottom text styling
 }
 
 const InputController: React.FC<InputControllerProps> = ({
@@ -37,6 +39,8 @@ const InputController: React.FC<InputControllerProps> = ({
   onChange,
   placeholder,
   defaultValue,
+  bottomText, // Added property
+  bottomTextClass = 'text-gray-500', // Added property with default value
 }) => {
   return (
     <FormField
@@ -107,6 +111,9 @@ const InputController: React.FC<InputControllerProps> = ({
                 )}
               </div>
             </FormControl>
+            {bottomText && (
+              <span className={`text-sm ${bottomTextClass}`}>{bottomText}</span>
+            )}
             {error && <FormMessage>{error.message}</FormMessage>}
           </FormItem>
         );
@@ -115,4 +122,4 @@ const InputController: React.FC<InputControllerProps> = ({
   );
 };
 
-export default InputController;
+export default InputController;

src/components/UseForm/SelectController/index.tsx

@@ -24,6 +24,8 @@ interface IndexProps {
   onChange?: (value: string) => void;
   defaultValue?: string;
   onBlur?: () => void;
+  bottomText?: string; // Added property
+  bottomTextClass?: string; // Added property for custom bottom text styling
 }
 
 const Index: React.FC<IndexProps> = ({
@@ -36,6 +38,8 @@ const Index: React.FC<IndexProps> = ({
   defaultValue = "",
   onChange,
   onBlur,
+  bottomText, // Added property
+  bottomTextClass = 'text-gray-500', // Added property with default value
 }) => {
   return (
     <FormField
@@ -84,6 +88,9 @@ const Index: React.FC<IndexProps> = ({
                 ))}
               </SelectContent>
             </Select>
+            {bottomText && (
+              <span className={`text-sm ${bottomTextClass}`}>{bottomText}</span>
+            )}
             <FormMessage />
           </FormItem>
         );
@@ -92,4 +99,4 @@ const Index: React.FC<IndexProps> = ({
   );
 };
 
-export default Index;
+export default Index;

src/components/UseForm/TextareaController/index.tsx

@@ -1,5 +1,3 @@
-
-
 import React from 'react';
 import {
   FormField,
@@ -18,6 +16,7 @@ interface TextareaControllerProps {
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   rules?: any;
   bottomText?: string;
+  bottomTextClass?: string; // Added property for custom bottom text styling
 }
 
 const TextareaController: React.FC<TextareaControllerProps> = ({
@@ -26,6 +25,7 @@ const TextareaController: React.FC<TextareaControllerProps> = ({
   control,
   rules,
   bottomText,
+  bottomTextClass = 'text-gray-500', // Default class
   disabled = false,
   onChange,
 }) => {
@@ -58,7 +58,7 @@ const TextareaController: React.FC<TextareaControllerProps> = ({
                   }}
                 />
                 {bottomText && (
-                  <span className='text-sm text-gray-500'>{bottomText}</span>
+                  <span className={`text-sm ${bottomTextClass}`}>{bottomText}</span>
                 )}
               </div>
             </FormControl>
@@ -70,4 +70,4 @@ const TextareaController: React.FC<TextareaControllerProps> = ({
   );
 };
 
-export default TextareaController;
+export default TextareaController;

src/components/cards/company/addbank/AddAccount.tsx

@@ -36,10 +36,10 @@ const AddAccount = () => {
             >
                 <div className='flex justify-between items-center'>
                     <div className="flex items-center gap-2">
-                        <CreditCard className="h-5 w-5 text-blue-600" />
+                        <CreditCard className="h-5 w-5 text-gray-600" />
                         <h1 className='text-lg font-bold'>Bank Account List</h1>
                     </div>
-                    <Button size='sm' type='button' onClick={() => setOpen(true)} className="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700">
+                    <Button size='sm' type='button' onClick={() => setOpen(true)} className="bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 hover:border-gray-400 shadow-sm">
                         Add Bank Account <Plus className='h-4 w-4 ml-2' />
                     </Button>
                 </div>
@@ -49,8 +49,8 @@ const AddAccount = () => {
                 <DialogContent className="sm:max-w-[425px] rounded-2xl shadow-xl">
                     <DialogHeader className="mb-2">
                         <div className="flex items-center gap-3 mb-2">
-                            <div className="p-2 bg-blue-100 rounded-lg">
-                                <CreditCard className="h-5 w-5 text-blue-600" />
+                            <div className="p-2 bg-gray-100 rounded-lg">
+                                <CreditCard className="h-5 w-5 text-gray-600" />
                             </div>
                             <div>
                                 <DialogTitle className='text-xl font-bold text-gray-900'>
@@ -64,10 +64,10 @@ const AddAccount = () => {
                     </DialogHeader>
 
                     {/* Information Banner */}
-                    <div className="bg-blue-50 rounded-lg p-3 border border-blue-100 mb-4">
+                    <div className="bg-gray-50 rounded-lg p-3 border border-gray-100 mb-4">
                         <div className="flex items-start gap-2">
-                            <Info className="h-4 w-4 text-blue-600 mt-0.5 flex-shrink-0" />
-                            <p className="text-sm text-blue-700">
+                            <Info className="h-4 w-4 text-gray-600 mt-0.5 flex-shrink-0" />
+                            <p className="text-sm text-gray-700">
                                 All bank accounts must be verified before they can be used for transactions.
                             </p>
                         </div>
@@ -88,7 +88,7 @@ const AddAccount = () => {
                                     <Button type='button' variant='outline' onClick={() => setOpen(false)}>
                                         Cancel
                                     </Button>
-                                    <Button type='submit' className='bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700'>
+                                    <Button type='submit' className='bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 hover:border-gray-400 shadow-sm'>
                                         Save Account
                                     </Button>
                                 </div>

src/components/cards/company/board/Board.tsx

@@ -41,7 +41,7 @@ const BoardMember = () => {
                         <Users className="h-5 w-5 text-green-600" />
                         <h1 className='text-lg font-bold'>Board Member List</h1>
                     </div>
-                    <Button size='sm' type='button' onClick={() => setOpen(true)} className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700">
+                    <Button size='sm' type='button' onClick={() => setOpen(true)} className="bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 hover:border-gray-400 shadow-sm">
                         Add Board Member <Plus className='h-4 w-4 ml-2' />
                     </Button>
                 </div>
@@ -90,7 +90,7 @@ const BoardMember = () => {
                                     <Button type='button' variant='outline' onClick={() => setOpen(false)}>
                                         Cancel
                                     </Button>
-                                    <Button type='submit' className='bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700'>
+                                    <Button type='submit' className='bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 hover:border-gray-400 shadow-sm'>
                                         Save Member
                                     </Button>
                                 </div>

src/components/cards/company/legal/Legal.tsx

@@ -38,10 +38,10 @@ const LegalAdvisor = () => {
             >
                 <div className='flex justify-between items-center'>
                     <div className="flex items-center gap-2">
-                        <Scale className="h-5 w-5 text-purple-600" />
+                        <Scale className="h-5 w-5 text-gray-600" />
                         <h1 className='text-lg font-bold'>Legal Advisor List</h1>
                     </div>
-                    <Button size='sm' type='button' onClick={() => setOpen(true)} className="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700">
+                    <Button size='sm' type='button' onClick={() => setOpen(true)} className="bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 hover:border-gray-400 shadow-sm">
                         Add Legal Advisor <Plus className='h-4 w-4 ml-2' />
                     </Button>
                 </div>
@@ -51,8 +51,8 @@ const LegalAdvisor = () => {
                 <DialogContent className="sm:max-w-[500px] rounded-2xl shadow-xl">
                     <DialogHeader className="mb-2">
                         <div className="flex items-center gap-3 mb-2">
-                            <div className="p-2 bg-purple-100 rounded-lg">
-                                <Scale className="h-5 w-5 text-purple-600" />
+                            <div className="p-2 bg-gray-100 rounded-lg">
+                                <Scale className="h-5 w-5 text-gray-600" />
                             </div>
                             <div>
                                 <DialogTitle className='text-xl font-bold text-gray-900'>
@@ -66,10 +66,10 @@ const LegalAdvisor = () => {
                     </DialogHeader>
 
                     {/* Information Banner */}
-                    <div className="bg-purple-50 rounded-lg p-3 border border-purple-100 mb-4">
+                    <div className="bg-gray-50 rounded-lg p-3 border border-gray-100 mb-4">
                         <div className="flex items-start gap-2">
-                            <Info className="h-4 w-4 text-purple-600 mt-0.5 flex-shrink-0" />
-                            <p className="text-sm text-purple-700">
+                            <Info className="h-4 w-4 text-gray-600 mt-0.5 flex-shrink-0" />
+                            <p className="text-sm text-gray-700">
                                 Legal advisors will have access to company documents based on their area of expertise.
                             </p>
                         </div>
@@ -90,7 +90,7 @@ const LegalAdvisor = () => {
                                     <Button type='button' variant='outline' onClick={() => setOpen(false)}>
                                         Cancel
                                     </Button>
-                                    <Button type='submit' className='bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700'>
+                                    <Button type='submit' className='bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 hover:border-gray-400 shadow-sm'>
                                         Save Advisor
                                     </Button>
                                 </div>

src/components/ui/dialog.tsx

@@ -1,5 +1,3 @@
-
-
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
@@ -33,7 +31,7 @@ const DialogContent = ({
     <DialogOverlay />
     <DialogPrimitive.Content
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[85vh] overflow-y-scroll',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[90vh] overflow-y-auto',
         className
       )}
       {...props}

src/layout/Navbar.tsx

@@ -265,14 +265,7 @@ const Navbar = ({ onMenuToggle, className, isMobileMenuOpen = false, setIsMobile
   const chainId = useChainId();
   const { chains, switchChain, error: switchChainError } = useSwitchChain();
 
-  // Debug logging
-  console.log("=== WALLET DEBUG INFO ===");
-  console.log("isConnected:", isConnected);
-  console.log("address:", address);
-  console.log("currentChainId:", chainId);
-  console.log("chains array:", chains);
-  console.log("chains length:", chains?.length);
-  console.log("avalancheFujiChain state:", avalancheFujiChain);
+
 
   // Find Avalanche Fuji chain dynamically from available chains
   useEffect(() => {
@@ -287,21 +280,15 @@ const Navbar = ({ onMenuToggle, className, isMobileMenuOpen = false, setIsMobile
       const fujiById = chains.find(chain => chain.id === 43113);
       const fujiBySymbol = chains.find(chain => chain.nativeCurrency?.symbol === 'AVAX');
 
-      console.log("Search results:");
-      console.log("- By name 'Avalanche Fuji':", fujiByName);
-      console.log("- By ID 43113:", fujiById);
-      console.log("- By symbol 'AVAX':", fujiBySymbol);
+  
 
       const fujiChain = fujiByName || fujiById || fujiBySymbol;
 
       if (fujiChain) {
         console.log('✅ Found Avalanche Fuji chain:', fujiChain);
         setAvalancheFujiChain(fujiChain);
       } else {
-        console.log('❌ Avalanche Fuji chain not found in available chains');
-        console.log('Available chain names:', chains.map(c => c.name));
-        console.log('Available chain IDs:', chains.map(c => c.id));
-        console.log('Available chain symbols:', chains.map(c => c.nativeCurrency?.symbol));
+        
       }
     } else {
       console.log('❌ Conditions not met for chain detection');
@@ -314,13 +301,6 @@ const Navbar = ({ onMenuToggle, className, isMobileMenuOpen = false, setIsMobile
   });
 
   // Debug balance fetching
-  console.log("=== BALANCE DEBUG INFO ===");
-  console.log("Balance fetch params:", {
-    address,
-    chainId: avalancheFujiChain?.id,
-    avalancheFujiChainExists: !!avalancheFujiChain
-  });
-  console.log("Balance result:", { data, isLoading, balanceError });
 
   // Check if currently connected to Avalanche Fuji
   const isOnAvalancheFuji = avalancheFujiChain && chainId === avalancheFujiChain.id;
@@ -435,7 +415,7 @@ const Navbar = ({ onMenuToggle, className, isMobileMenuOpen = false, setIsMobile
         fixed  left-0 right-0 rounded-6xl border border-gray-200/20 drop-shadow-lg dark:border-gray-800/20 h-16 z-50 transition-all duration-500 ease-out
         ${isScrolled 
           ? 'bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl shadow-lg shadow-black/5 border-b border-gray-200/20 dark:border-gray-800/20' 
-          : 'bg-white/60 dark:bg-gray-900/60 backdrop-blur-lg border-b border-transparent'
+          : 'bg-white/60 dark:bg-gray-900/80 backdrop-blur-lg border-b border-transparent'
         }
       `}>
         {/* Animated gradient background */}