fix: button text now visable

Reviewed-on: #22

src/components/ChangePasswordDialog.js

@@ -128,7 +128,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
             <Button
               type="button"
               onClick={() => onOpenChange(false)}
-              className="btn-outline mr-33"
+              className="btn-outline mr-33 text-white"
             >
               Cancel
             </Button>

src/pages/admin/AdminValidations.js

@@ -34,7 +34,20 @@ import {
   PaginationEllipsis,
 } from '../../components/ui/pagination';
 import { toast } from 'sonner';
-import { CheckCircle, Clock, Search, ArrowUp, ArrowDown, X, FileText, XCircle } from 'lucide-react';
+import {
+  CheckCircle,
+  Clock,
+  Search,
+  ArrowUp,
+  ArrowDown,
+  X,
+  FileText,
+  XCircle,
+  Users,
+  Mail,
+  ShieldCheck,
+  CreditCard
+} from 'lucide-react';
 import PaymentActivationDialog from '../../components/PaymentActivationDialog';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import RejectionDialog from '../../components/RejectionDialog';
@@ -344,7 +357,7 @@ const AdminValidations = () => {
           <StatCard
             title="Total Pending"
             value={loading ? '-' : pendingUsers.length}
-            icon={CheckCircle}
+            icon={Users}
             iconBgClass="text-brand-purple"
             dataTestId="stat-total-users"
           />
@@ -352,24 +365,24 @@ const AdminValidations = () => {
           <StatCard
             title="Awaiting Email"
             value={loading ? '-' : pendingUsers.filter(u => u.status === 'pending_email').length}
-            icon={CheckCircle}
+            icon={Mail}
-            iconBgClass="text-brand-purple"
+            iconBgClass="text-brand-pink"
             dataTestId="stat-total-users"
           />
 
           <StatCard
             title="Pending Validation"
             value={loading ? '-' : pendingUsers.filter(u => u.status === 'pending_validation').length}
-            icon={CheckCircle}
+            icon={ShieldCheck}
-            iconBgClass="text-brand-purple"
+            iconBgClass="text-success"
             dataTestId="stat-pending-validation"
           />
 
           <StatCard
             title="Payment Pending"
             value={loading ? '-' : pendingUsers.filter(u => u.status === 'payment_pending').length}
-            icon={CheckCircle}
+            icon={CreditCard}
-            iconBgClass="text-brand-purple"
+            iconBgClass="text-accent"
             dataTestId="stat-payment-pending"
           />
 

src/pages/members/MembersDirectory.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import api from '../../utils/api';
 import Navbar from '../../components/Navbar';
 import MemberFooter from '../../components/MemberFooter';
+import { Link } from 'react-router-dom';
 import { Card } from '../../components/ui/card';
 import { Input } from '../../components/ui/input';
 import { Badge } from '../../components/ui/badge';
@@ -135,7 +136,7 @@ const MembersDirectory = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-bl from-[var(--neutral-100:)] to-[var(--neutral-800)]">
+    <div className="min-h-screen bg-gradient-to-bl from-white to-muted">
       <Navbar />
 
       <div className="max-w-7xl mx-auto py-12">
@@ -154,7 +155,7 @@ const MembersDirectory = () => {
           </div>
 
           {/* Search Bar */}
-          <div className="mb-24 mx-10">
+          <div className="mb-24 w-full">
             <div className="relative w-full  ">
               <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
               <Input
@@ -221,9 +222,10 @@ const MembersDirectory = () => {
                 </h3>
                 <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Update your profile settings to show in the directory and add your photo, bio, and contact information.{' '}
-                  <a href="/members/profile" className="text-[var(--orange-light)] hover:underline font-medium">
+
+                  <Link to="/profile" className="text-[var(--orange-light)] hover:underline font-medium">
                     Edit your profile →
-                  </a>
+                  </Link>
                 </p>
               </div>
             </div>