fixed the dark-mode issue in author page

Author: kh-ub-ayb

src/pages/News/AuthorPage.tsx

@@ -159,12 +159,12 @@ const AuthorPage: React.FC = () => {
   return (
     <>
       <Header />
-      <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50">
+      <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50 dark:from-gray-900 dark:via-gray-900 dark:to-gray-800">
         <div className="container mx-auto px-4 py-8 max-w-7xl">
           {/* Back Button */}
           <motion.button
             onClick={() => navigate(-1)}
-            className="mb-6 px-4 py-2 flex items-center text-blue-600 hover:text-blue-700 transition-colors rounded-md hover:bg-blue-50"
+            className="mb-6 px-4 py-2 flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors rounded-md hover:bg-blue-50 dark:hover:bg-blue-900/30"
             whileHover={{ scale: 1.05 }}
             whileTap={{ scale: 0.95 }}
           >
@@ -174,7 +174,7 @@ const AuthorPage: React.FC = () => {
 
           {/* Author Header */}
           <motion.div
-            className="bg-white rounded-2xl shadow-xl p-4 sm:p-6 lg:p-8 mb-8"
+            className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl dark:shadow-2xl dark:shadow-black/20 p-4 sm:p-6 lg:p-8 mb-8"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
@@ -186,7 +186,7 @@ const AuthorPage: React.FC = () => {
                   <img
                     src={author.avatar}
                     alt={author.name}
-                    className="w-24 h-24 sm:w-28 sm:h-28 lg:w-32 lg:h-32 rounded-full object-cover border-4 border-blue-100"
+                    className="w-24 h-24 sm:w-28 sm:h-28 lg:w-32 lg:h-32 rounded-full object-cover border-4 border-blue-100 dark:border-blue-900"
                   />
                 ) : (
                   <div className="w-24 h-24 sm:w-28 sm:h-28 lg:w-32 lg:h-32 bg-blue-100 rounded-full flex items-center justify-center">
@@ -197,17 +197,19 @@ const AuthorPage: React.FC = () => {
 
               {/* Author Info */}
               <div className="flex-1 text-center sm:text-left">
-                <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-2">
+                <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-2">
                   {author.name}
                 </h1>
                 <div className="flex flex-col sm:flex-row sm:items-center gap-2 mb-3">
-                  <span className="text-lg lg:text-xl text-blue-600 font-medium">
+                  <span className="text-lg lg:text-xl text-blue-600 dark:text-blue-400 font-medium">
                     {author.title}
                   </span>
                   {author.organization && (
                     <>
-                      <span className="hidden sm:inline text-gray-400">at</span>
-                      <div className="flex items-center justify-center sm:justify-start gap-1 text-gray-700">
+                      <span className="hidden sm:inline text-gray-400 dark:text-gray-500">
+                        at
+                      </span>
+                      <div className="flex items-center justify-center sm:justify-start gap-1 text-gray-700 dark:text-gray-300">
                         <Building className="w-4 h-4" />
                         <span className="font-medium">
                           {author.organization}
@@ -216,21 +218,21 @@ const AuthorPage: React.FC = () => {
                     </>
                   )}
                 </div>
-                <p className="text-gray-600 text-base lg:text-lg mb-4 max-w-2xl">
+                <p className="text-gray-600 dark:text-gray-300 text-base lg:text-lg mb-4 max-w-2xl">
                   {author.description}
                 </p>
 
                 {/* Quick Stats */}
-                <div className="flex flex-wrap justify-center sm:justify-start gap-4 text-sm text-gray-600">
-                  <div className="flex items-center gap-1 bg-blue-50 px-3 py-1 rounded-full">
+                <div className="flex flex-wrap justify-center sm:justify-start gap-4 text-sm text-gray-600 dark:text-gray-300">
+                  <div className="flex items-center gap-1 bg-blue-50 dark:bg-blue-900/30 px-3 py-1 rounded-full">
                     <BookOpen className="w-4 h-4" />
                     <span>
                       {posts.length}{' '}
                       {posts.length === 1 ? 'Article' : 'Articles'}
                     </span>
                   </div>
                   {author.organization && (
-                    <div className="flex items-center gap-1 bg-gray-50 px-3 py-1 rounded-full">
+                    <div className="flex items-center gap-1 bg-gray-50 dark:bg-gray-700/50 px-3 py-1 rounded-full">
                       <Building className="w-4 h-4" />
                       <span>{author.organization}</span>
                     </div>
@@ -249,16 +251,16 @@ const AuthorPage: React.FC = () => {
               transition={{ duration: 0.5, delay: 0.2 }}
             >
               {/* About Section */}
-              <div className="bg-white rounded-2xl shadow-xl p-4 sm:p-6 lg:p-8 mb-6 lg:mb-8">
+              <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl dark:shadow-2xl dark:shadow-black/20 p-4 sm:p-6 lg:p-8 mb-6 lg:mb-8">
                 <MarkdownRenderer content={author.content} />
               </div>
 
               {/* Articles Section */}
-              <div className="bg-white rounded-2xl shadow-xl p-4 sm:p-6 lg:p-8">
+              <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl dark:shadow-2xl dark:shadow-black/20 p-4 sm:p-6 lg:p-8">
                 <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
                   <div className="flex items-center gap-2">
-                    <BookOpen className="w-5 h-5 text-blue-600" />
-                    <h3 className="text-xl lg:text-2xl font-bold text-gray-900">
+                    <BookOpen className="w-5 h-5 text-blue-600 dark:text-blue-400" />
+                    <h3 className="text-xl lg:text-2xl font-bold text-gray-900 dark:text-white">
                       Articles ({filteredPosts.length})
                     </h3>
                   </div>
@@ -268,21 +270,21 @@ const AuthorPage: React.FC = () => {
                     <div className="flex flex-col sm:flex-row gap-3">
                       {/* Search */}
                       <div className="relative">
-                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 w-4 h-4" />
                         <input
                           type="text"
                           placeholder="Search articles..."
                           value={searchTerm}
                           onChange={(e) => setSearchTerm(e.target.value)}
-                          className="pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm w-full sm:w-auto"
+                          className="pl-10 pr-4 py-2 border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent text-sm w-full sm:w-auto placeholder-gray-400 dark:placeholder-gray-500"
                         />
                       </div>
 
                       {/* Category Filter */}
                       <select
                         value={selectedCategory}
                         onChange={(e) => setSelectedCategory(e.target.value)}
-                        className="px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
+                        className="px-3 py-2 border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent text-sm"
                       >
                         {getUniqueCategories().map((category) => (
                           <option key={category} value={category}>
@@ -297,20 +299,22 @@ const AuthorPage: React.FC = () => {
                         onChange={(e) =>
                           setSortBy(e.target.value as 'date' | 'title')
                         }
-                        className="px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
+                        className="px-3 py-2 border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 
+                        text-gray-900 dark:text-gray-100 rounded-lg focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 
+                        focus:border-transparent text-sm"
                       >
                         <option value="date">Sort by Date</option>
                         <option value="title">Sort by Title</option>
                       </select>
 
                       {/* View Toggle */}
-                      <div className="flex bg-gray-100 rounded-lg p-1">
+                      <div className="flex bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
                         <button
                           onClick={() => setViewMode('grid')}
                           className={`p-2 rounded-md transition-colors ${
                             viewMode === 'grid'
-                              ? 'bg-white text-blue-600 shadow-sm'
-                              : 'text-gray-600'
+                              ? 'bg-white dark:bg-gray-600 text-blue-600 dark:text-blue-400 shadow-sm dark:shadow-black/20'
+                              : 'text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400'
                           }`}
                         >
                           <Grid className="w-4 h-4" />
@@ -319,8 +323,8 @@ const AuthorPage: React.FC = () => {
                           onClick={() => setViewMode('list')}
                           className={`p-2 rounded-md transition-colors ${
                             viewMode === 'list'
-                              ? 'bg-white text-blue-600 shadow-sm'
-                              : 'text-gray-600'
+                              ? 'bg-white dark:bg-gray-600 text-blue-600 dark:text-blue-400 shadow-sm dark:shadow-black/20'
+                              : 'text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400'
                           }`}
                         >
                           <List className="w-4 h-4" />
@@ -336,12 +340,12 @@ const AuthorPage: React.FC = () => {
                     <div className="text-4xl mb-4">
                       {searchTerm || selectedCategory !== 'All' ? '🔍' : '📝'}
                     </div>
-                    <h4 className="text-lg font-semibold text-gray-700 mb-2">
+                    <h4 className="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">
                       {searchTerm || selectedCategory !== 'All'
                         ? 'No matching articles'
                         : 'No articles published yet'}
                     </h4>
-                    <p className="text-gray-600">
+                    <p className="text-gray-600 dark:text-gray-400">
                       {searchTerm || selectedCategory !== 'All'
                         ? 'Try adjusting your search or filter criteria'
                         : 'Articles will appear here when published'}
@@ -374,8 +378,8 @@ const AuthorPage: React.FC = () => {
                           <motion.article
                             key={post.slug}
                             className={`
-                              border border-gray-200 rounded-lg hover:border-blue-300 hover:shadow-md 
-                              transition-all duration-300 cursor-pointer group bg-white
+                              border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-300 dark:hover:border-blue-500 hover:shadow-md dark:hover:shadow-blue-500/10
+                              transition-all duration-300 cursor-pointer group bg-white dark:bg-gray-800
                               ${viewMode === 'list' ? 'flex gap-4 p-4' : 'p-4'}
                             `}
                             onClick={() => handlePostClick(post)}
@@ -396,14 +400,14 @@ const AuthorPage: React.FC = () => {
                             )}
 
                             <div className="flex-1">
-                              <h4 className="font-semibold text-gray-900 mb-2 line-clamp-2 group-hover:text-blue-600 transition-colors">
+                              <h4 className="font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                                 {post.title}
                               </h4>
-                              <p className="text-sm text-gray-600 mb-3 line-clamp-2">
+                              <p className="text-sm text-gray-600 dark:text-gray-300 mb-3 line-clamp-2">
                                 {post.excerpt}
                               </p>
 
-                              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 text-xs text-gray-500">
+                              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 text-xs text-gray-500 dark:text-gray-400">
                                 <div className="flex items-center gap-3">
                                   <div className="flex items-center gap-1">
                                     <Calendar className="w-3 h-3" />
@@ -421,7 +425,7 @@ const AuthorPage: React.FC = () => {
                                     </div>
                                   )}
                                 </div>
-                                <span className="px-2 py-1 bg-blue-100 text-blue-600 rounded-full text-xs font-medium">
+                                <span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full text-xs font-medium">
                                   {post.category}
                                 </span>
                               </div>
@@ -436,13 +440,14 @@ const AuthorPage: React.FC = () => {
                       <div className="text-center mt-8">
                         <motion.button
                           onClick={handleShowMore}
-                          className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium flex items-center gap-2 mx-auto"
+                          className="px-6 py-3 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white 
+                          rounded-lg transition-colors font-medium flex items-center gap-2 mx-auto shadow-md dark:shadow-blue-500/20"
                           whileHover={{ scale: 1.05 }}
                           whileTap={{ scale: 0.95 }}
                         >
                           Load More Articles
                           <ChevronDown className="w-4 h-4" />
-                          <span className="text-xs bg-blue-500 px-2 py-1 rounded-full">
+                          <span className="text-xs bg-blue-500 dark:bg-blue-600 px-2 py-1 rounded-full">
                             +{Math.min(6, filteredPosts.length - displayCount)}
                           </span>
                         </motion.button>
@@ -461,30 +466,33 @@ const AuthorPage: React.FC = () => {
               transition={{ duration: 0.5, delay: 0.3 }}
             >
               {/* Author Stats Card */}
-              <div className="bg-white rounded-2xl shadow-xl p-6 mb-6">
-                <h3 className="text-lg font-bold text-gray-900 mb-4">
+              <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl dark:shadow-2xl dark:shadow-black/20 p-6 mb-6">
+                <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
                   Profile Stats
                 </h3>
                 <div className="space-y-3">
                   <div className="flex justify-between items-center">
-                    <span className="text-gray-600">Total Articles</span>
-                    <span className="font-semibold text-blue-600">
+                    <span className="text-gray-600 dark:text-gray-300">
+                      Total Articles
+                    </span>
+                    <span className="font-semibold text-blue-600 dark:text-blue-400">
                       {posts.length}
                     </span>
                   </div>
                   <div className="flex justify-between items-center">
-                    <span className="text-gray-600">Categories</span>
-                    <span className="font-semibold text-gray-900">
+                    <span className="text-gray-600 dark:text-gray-300">
+                      Categories
+                    </span>
+                    <span className="font-semibold text-gray-900 dark:text-white">
                       {getUniqueCategories().length - 1}
                     </span>
                   </div>
                 </div>
-              </div>
-
+              </div>{' '}
               {/* Categories Card */}
               {getUniqueCategories().length > 2 && (
-                <div className="bg-white rounded-2xl shadow-xl p-6">
-                  <h3 className="text-lg font-bold text-gray-900 mb-4">
+                <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl dark:shadow-2xl dark:shadow-black/20 p-6">
+                  <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
                     Categories
                   </h3>
                   <div className="space-y-2">
@@ -500,14 +508,14 @@ const AuthorPage: React.FC = () => {
                             onClick={() => setSelectedCategory(category)}
                             className={`w-full flex justify-between items-center p-2 rounded-lg transition-colors text-left ${
                               selectedCategory === category
-                                ? 'bg-blue-50 text-blue-700'
-                                : 'hover:bg-gray-50'
+                                ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
+                                : 'hover:bg-gray-50 dark:hover:bg-gray-700/50 text-gray-700 dark:text-gray-300'
                             }`}
                           >
                             <span className="text-sm font-medium">
                               {category}
                             </span>
-                            <span className="text-xs bg-gray-100 px-2 py-1 rounded-full">
+                            <span className="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded-full">
                               {count}
                             </span>
                           </button>