[ENHANCEMENT] Polish the dark mode; Overhaul submit form; Fix dark mode skeleton components;

frontend/src/components/blog-feed.tsx

@@ -43,26 +43,26 @@ export default function BlogFeed() {
     <div className="container mx-auto py-6">
       <div className="-mx-4 flex flex-wrap">
         <div className="w-full p-4 md:w-2/3">
-          <h1 className="mb-4 text-2xl font-semibold dark:text-white">
+          <h1 className="mb-4 text-2xl font-semibold dark:text-dark-primary">
             {selectedCategory === 'featured'
               ? 'Featured Posts'
               : `Posts related to "${selectedCategory}"`}
           </h1>
-          <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-6">
             {posts.length === 0
               ? Array(5)
-                  .fill(0)
-                  .map((_, index) => <FeaturedPostCardSkeleton key={index} />)
+                .fill(0)
+                .map((_, index) => <FeaturedPostCardSkeleton key={index} />)
               : posts
-                  .slice(0, 5)
-                  .map((post, index) => <FeaturedPostCard key={index} post={post} />)}
+                .slice(0, 5)
+                .map((post, index) => <FeaturedPostCard key={index} post={post} />)}
           </div>
         </div>
         <div className="w-full p-4 md:w-1/3">
           <div className="mb-6">
-            <div className="text-gray-500 dark:text-white">Discover by topic</div>
-            <h2 className="mb-4 text-2xl font-semibold dark:text-white">Categories</h2>
-            <div className="flex flex-wrap gap-2">
+            <div className="-mb-1 tracking-wide text-slate-500 dark:text-dark-tertiary">Discover by topic</div>
+            <h2 className="mb-2 text-2xl font-semibold dark:text-dark-primary">Categories</h2>
+            <div className="flex flex-wrap gap-3 dark:bg-dark-card dark:p-3 dark:rounded-lg">
               {CATEGORIES.map((category) => (
                 <button
                   key={category}
@@ -81,16 +81,16 @@ export default function BlogFeed() {
             </div>
           </div>
           <div>
-            <div className="text-gray-500 dark:text-white">What's new ?</div>
-            <h2 className="mb-4 text-2xl font-semibold dark:text-white">Latest Posts</h2>
-            <div className="flex flex-col gap-2">
+            <div className="-mb-1 tracking-wide text-slate-500 dark:text-dark-tertiary">What's new?</div>
+            <h2 className="mb-2 text-2xl font-semibold dark:text-dark-primary">Latest Posts</h2>
+            <div className="flex flex-col gap-4">
               {latestPosts.length === 0
                 ? Array(5)
-                    .fill(0)
-                    .map((_, index) => <LatestPostCardSkeleton key={index} />)
+                  .fill(0)
+                  .map((_, index) => <LatestPostCardSkeleton key={index} />)
                 : latestPosts
-                    .slice(0, 5)
-                    .map((post, index) => <LatestPostCard key={index} post={post} />)}
+                  .slice(0, 5)
+                  .map((post, index) => <LatestPostCard key={index} post={post} />)}
             </div>
           </div>
         </div>

frontend/src/components/featured-post-card.tsx

@@ -7,29 +7,29 @@ export default function FeaturedPostCard({ post }: { post: Post }) {
   const navigate = useNavigate();
   return (
     <div
-      className="flex h-48 cursor-pointer gap-4 rounded-lg bg-white p-2 dark:bg-dark-textfield"
+      className="flex h-48 cursor-pointer gap-2 rounded-lg bg-slate-50 dark:bg-dark-card"
       onClick={() => navigate('/details-page', { state: { post } })}
     >
       <div className="w-1/3">
         <img
           src={post.imageLink}
           alt={post.title}
-          className="h-full w-full rounded-lg object-cover"
+          className="h-full w-full rounded-lg object-cover shadow-lg"
         />
       </div>
-      <div className="flex h-full w-2/3 flex-col gap-2">
-        <div className="text-xl font-semibold dark:text-white">{post.title}</div>
+      <div className="flex h-full w-2/3 flex-col gap-2 p-2">
+        <div className="text-xl font-semibold dark:text-dark-title">{post.title}</div>
         <div className="flex flex-wrap gap-2">
           {post.categories.map((category, index) => (
             <span key={index} className={categoryProps(category)}>
               {category}
             </span>
           ))}
         </div>
-        <div className="line-clamp-2 text-gray-600">
-          <p className="overflow-ellipsis dark:text-white">{post.description}</p>
+        <div className="line-clamp-2 text-slate-700">
+          <p className="overflow-ellipsis dark:text-dark-description">{post.description}</p>
         </div>
-        <div className="mb-1 flex flex-1 items-end text-xs text-gray-500 dark:text-white">
+        <div className="flex flex-1 items-end text-xs text-slate-600 dark:text-dark-info">
           {post.authorName} • {formatPostTime(post.timeOfPost)}
         </div>
       </div>

frontend/src/components/latest-post-card.tsx

@@ -7,11 +7,11 @@ export default function LatestPostCard({ post }: { post: Post }) {
   const navigate = useNavigate();
   return (
     <div
-      className="cursor-pointer rounded-lg bg-white p-2 py-2 shadow-sm dark:bg-dark-textfield"
+      className="cursor-pointer rounded-lg bg-slate-50 p-3 shadow-sm dark:bg-dark-card"
       onClick={() => navigate('/details-page', { state: { post } })}
     >
       <div className="flex">
-        <div className="mb-2 flex flex-1 flex-wrap gap-2 ">
+        <div className="mb-2 flex flex-1 flex-wrap gap-2">
           {post.categories.map((category, index) => (
             <span key={index} className={categoryProps(category)}>
               {category}
@@ -20,8 +20,8 @@ export default function LatestPostCard({ post }: { post: Post }) {
         </div>
         <img src={linkIcon} className="h-3 w-3" onClick={() => navigate(-1)} />
       </div>
-      <div className="mb-2 line-clamp-2 text-xl font-semibold dark:text-white">{post.title}</div>
-      <div className="text-xs text-gray-500 dark:text-white">
+      <div className="mb-2 line-clamp-2 font-semibold dark:text-dark-title">{post.title}</div>
+      <div className="text-xs text-slate-500 dark:text-dark-info">
         {post.authorName} • {formatPostTime(post.timeOfPost)}
       </div>
     </div>

frontend/src/components/modal.tsx

@@ -24,16 +24,16 @@ const ModalComponent: React.FC<ModalProps> = ({
           role="dialog"
           aria-modal="false"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+          <div className="fixed inset-0 bg-slate-500 bg-opacity-75 transition-opacity"></div>
 
           <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
             <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-              <div className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
-                <div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+              <div className="relative transform overflow-hidden rounded-lg bg-slate-50 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="bg-slate-50 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                       <h3
-                        className="text-base font-semibold leading-6 text-gray-900"
+                        className="text-base font-semibold leading-6 text-slate-900"
                         id="modal-title"
                       >
                         Select Post Image
@@ -44,7 +44,7 @@ const ModalComponent: React.FC<ModalProps> = ({
                             <div
                               key={imageUrl}
                               className={`cursor-pointer border p-2 ${
-                                selectedImage === imageUrl ? 'border-blue-500' : 'border-gray-300'
+                                selectedImage === imageUrl ? 'border-blue-500' : 'border-slate-300'
                               } rounded-md`}
                               onClick={() => handleImageSelect(imageUrl)}
                             >
@@ -60,7 +60,7 @@ const ModalComponent: React.FC<ModalProps> = ({
                     </div>
                   </div>
                 </div>
-                <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+                <div className="bg-slate-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
                   <button
                     type="button"
                     name="imageLink"
@@ -71,7 +71,7 @@ const ModalComponent: React.FC<ModalProps> = ({
                   </button>
                   <button
                     type="button"
-                    className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                    className="mt-3 inline-flex w-full justify-center rounded-md bg-slate-50 px-3 py-2 text-sm font-semibold text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 hover:bg-slate-50 sm:mt-0 sm:w-auto"
                     onClick={() => {
                       setModal(false);
                     }}

frontend/src/components/post-card.tsx

@@ -10,19 +10,23 @@ export default function PostCard({ post }: { post: Post }) {
       className="w-full cursor-pointer p-4 md:w-1/2 lg:w-1/3 xl:w-1/4"
       onClick={() => navigate('/details-page', { state: { post } })}
     >
-      <div className="rounded-lg bg-white shadow-md dark:bg-dark-textfield">
+      <div className="rounded-lg bg-slate-50 shadow-md dark:bg-dark-card">
         <img
           src={post.imageLink}
           alt={post.title}
           className="h-48 w-full rounded-lg object-cover"
         />
         <div className="p-4">
-          <div className="mb-2 text-xs text-gray-500 dark:text-white">
+          <div className="mb-2 text-xs text-slate-500 dark:text-slate-400">
             {post.authorName} • {formatPostTime(post.timeOfPost)}
           </div>
-          <h2 className="mb-2 line-clamp-1 text-xl font-semibold dark:text-white">{post.title}</h2>
-          <p className="line-clamp-2 text-gray-600 dark:text-white">{post.description}</p>
-          <div className="mt-4 flex flex-wrap gap-2 dark:text-black">
+          <h2 className="mb-2 line-clamp-1 text-xl font-semibold dark:text-slate-50">
+            {post.title}
+          </h2>
+          <p className="line-clamp-2 text-slate-600 dark:text-dark-description">
+            {post.description}
+          </p>
+          <div className="mt-4 flex flex-wrap gap-2">
             {post.categories.map((category, index) => (
               <span key={index} className={categoryProps(category)}>
                 {category}

frontend/src/components/skeletons/featured-post-card-skeleton.tsx

@@ -2,26 +2,26 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 export const FeaturedPostCardSkeleton = () => {
   return (
-    <div className="flex h-48 gap-4 rounded-lg bg-white">
+    <div className="flex h-48 gap-4 rounded-lg bg-slate-50">
       <div className="w-1/3">
         {/* for image */}
-        <Skeleton className="h-full w-full rounded-lg bg-gray-200" />
+        <Skeleton className="h-full w-full rounded-lg bg-slate-200" />
       </div>
       <div className="flex h-full w-2/3 flex-col gap-2">
         {/* for title */}
-        <Skeleton className="h-6 w-full bg-gray-200 text-xl" />
-        <Skeleton className="h-6 w-2/3 bg-gray-200 text-xl" />
+        <Skeleton className="h-6 w-full bg-slate-200 text-xl" />
+        <Skeleton className="h-6 w-2/3 bg-slate-200 text-xl" />
         <div className="flex flex-wrap gap-2">
           {/* for categories */}
-          <Skeleton className="h-6 w-16 rounded-3xl bg-gray-200" />
-          <Skeleton className="h-6 w-16 rounded-3xl bg-gray-200" />
-          <Skeleton className="h-6 w-16 rounded-3xl bg-gray-200" />
+          <Skeleton className="h-6 w-16 rounded-3xl bg-slate-200" />
+          <Skeleton className="h-6 w-16 rounded-3xl bg-slate-200" />
+          <Skeleton className="h-6 w-16 rounded-3xl bg-slate-200" />
         </div>
         {/* for description */}
-        <Skeleton className="line-clamp-2 h-12 w-full bg-gray-200" />
+        <Skeleton className="line-clamp-2 h-12 w-full bg-slate-200" />
         <div className="mb-1 flex flex-1 items-end">
           {/* for author and time */}
-          <Skeleton className="h-5 w-1/3 bg-gray-200" />
+          <Skeleton className="h-5 w-1/3 bg-slate-200" />
         </div>
       </div>
     </div>

frontend/src/components/skeletons/latest-post-card-skeleton.tsx

@@ -2,21 +2,21 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 export const LatestPostCardSkeleton = () => {
   return (
-    <div className="rounded-lg bg-white py-2 shadow-sm">
+    <div className="rounded-lg bg-slate-50 py-2 shadow-sm">
       <div className="flex">
         <div className="mb-2 flex flex-1 flex-wrap gap-2">
-          <Skeleton className="h-6 w-16 rounded-3xl bg-gray-200" />
-          <Skeleton className="h-6 w-16 rounded-3xl bg-gray-200" />
-          <Skeleton className="h-6 w-16 rounded-3xl bg-gray-200" />
+          <Skeleton className="h-6 w-16 rounded-3xl bg-slate-200" />
+          <Skeleton className="h-6 w-16 rounded-3xl bg-slate-200" />
+          <Skeleton className="h-6 w-16 rounded-3xl bg-slate-200" />
         </div>
-        <Skeleton className="h-4 w-4 bg-gray-200" style={{ height: 12, width: 12 }} />
+        <Skeleton className="h-4 w-4 bg-slate-200" style={{ height: 12, width: 12 }} />
       </div>
       <div className="mb-2 line-clamp-2 text-xl font-semibold">
-        <Skeleton className="h-6 w-full bg-gray-200" />
-        <Skeleton className="mt-2 h-6 w-2/3 bg-gray-200" />
+        <Skeleton className="h-6 w-full bg-slate-200" />
+        <Skeleton className="mt-2 h-6 w-2/3 bg-slate-200" />
       </div>
-      <div className="flex text-xs text-gray-500">
-        <Skeleton className="h-4 w-1/3 bg-gray-200" />
+      <div className="flex text-xs text-slate-500">
+        <Skeleton className="h-4 w-1/3 bg-slate-200" />
       </div>
     </div>
   );

frontend/src/components/skeletons/post-card-skeleton.tsx

@@ -3,17 +3,17 @@ import { Skeleton } from '@/components/ui/skeleton';
 export const PostCardSkeleton = () => {
   return (
     <div className="w-full p-4 md:w-1/2 lg:w-1/3 xl:w-1/4">
-      <div className="rounded-lg bg-white shadow-md">
+      <div className="rounded-lg bg-slate-50 shadow-md">
         <Skeleton className="h-48 w-full rounded-lg" />
         <div className="p-4">
-          <div className="mb-2 flex text-xs text-gray-500">
-            <Skeleton className="mr-2 h-4 w-2/3 bg-gray-200" />
+          <div className="mb-2 flex text-xs text-slate-500">
+            <Skeleton className="mr-2 h-4 w-2/3 bg-slate-200" />
           </div>
-          <Skeleton className="mb-2 h-6 w-4/5 bg-gray-200" />
-          <Skeleton className="line-clamp-2 h-14 w-full bg-gray-200 text-gray-600" />
+          <Skeleton className="mb-2 h-6 w-4/5 bg-slate-200" />
+          <Skeleton className="line-clamp-2 h-14 w-full bg-slate-200 text-slate-600" />
           <div className="mt-4 flex flex-wrap gap-2">
-            <Skeleton className="h-6 w-16 rounded-3xl bg-gray-200" />
-            <Skeleton className="h-6 w-16 rounded-3xl bg-gray-200" />
+            <Skeleton className="h-6 w-16 rounded-3xl bg-slate-200" />
+            <Skeleton className="h-6 w-16 rounded-3xl bg-slate-200" />
           </div>
         </div>
       </div>

frontend/src/index.css

@@ -1,10 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  :root {
-    --color-dark-background: #10172a;
-    --color-dark-textfield-card: #1d293c;
-  }
-}