From e9a320af717fee342fce5ece8faf68842639e6ee Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Fri, 1 Dec 2023 03:47:21 +0530
Subject: [PATCH 01/24] feat: Add `dark` color to the theme Even if they are
 repetitive values, they remove the guesswork while setting the color to an
 element.

---
 frontend/tailwind.config.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index c47db360..a9bec36b 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+const colors = require('tailwindcss/colors');
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   darkMode: 'media',
@@ -6,9 +7,16 @@ export default {
     extend: {
       colors: {
         dark: {
-          DEFAULT: 'var(--color-dark-background)',
-          textfield: 'var(--color-dark-textfield-card)',
+          DEFAULT: colors.slate[900],
+          primary: colors.slate[50],
+          secondary: colors.slate[300],
+          tertiary: colors.slate[400],
+          card: colors.slate[800],
+          title: colors.slate[50],
+          description: colors.slate[300],
+          info: colors.slate[400],
         },
+        light: {},
       },
     },
   },

From afa1350fb34d2c68f926b570a69089f7f207035d Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Fri, 1 Dec 2023 03:49:41 +0530
Subject: [PATCH 02/24] feat: Completey overhaul the Create blog form More
 accessibility, more breathing space, improved placeholders, improved width.

---
 frontend/src/pages/add-blog.tsx | 210 +++++++++++++++++---------------
 1 file changed, 113 insertions(+), 97 deletions(-)

diff --git a/frontend/src/pages/add-blog.tsx b/frontend/src/pages/add-blog.tsx
index c87105d5..4754dfdd 100644
--- a/frontend/src/pages/add-blog.tsx
+++ b/frontend/src/pages/add-blog.tsx
@@ -122,125 +122,141 @@ function AddBlog() {
     };
   }, []);
 
+  function Asterisk() {
+    return <span className='dark:text-dark-tertiary'>*</span>
+  }
+
   return (
-    <div className="min-h-screen bg-white p-4 px-16 font-[Poppins] dark:bg-dark">
+    <div className="min-h-screen cursor-default bg-slate-50 px-16 py-8 font-[Poppins] dark:bg-dark">
       <div className="mb-4 flex items-center justify-start">
-        <div className="w-fit cursor-pointer text-base text-black  md:text-lg lg:text-2xl">
+        <div className="w-fit cursor-pointer text-base md:text-lg lg:text-2xl">
           <img
             src={isDarkMode ? navigateBackWhiteIcon : navigateBackBlackIcon}
             onClick={() => navigate(-1)}
             className="h-5 w-10"
           />
         </div>
-        <h2 className="ml-4 text-sm font-bold dark:text-white md:text-lg lg:text-2xl">
-          Create Post
+        <h2 className="ml-4 text-sm font-bold dark:text-dark-primary md:text-lg lg:text-2xl">
+          Create Blog
         </h2>
       </div>
+      <div className="flex justify-center">
+        <form onSubmit={handleSubmit} className="md:w-2/3">
+          <div className="mb-2">
+            <div className="px-2 py-1 text-dark-secondary">Blog title <Asterisk /></div>
+            <input
+              type="text"
+              name="title"
+              placeholder="Travel Bucket List for this Year"
+              autoComplete='off'
+              className="w-full rounded-lg bg-slate-50 p-3 placeholder:text-sm placeholder:text-slate-800 dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
+              value={formData.title}
+              onChange={handleInputChange}
+            />
+          </div>
 
-      <form onSubmit={handleSubmit}>
-        <div className="mb-4">
-          <input
-            type="text"
-            name="title"
-            placeholder="Title"
-            className="w-full rounded-lg bg-gray-50 p-2 placeholder:text-gray-800 dark:bg-dark-textfield dark:text-white dark:placeholder:text-white"
-            value={formData.title}
-            onChange={handleInputChange}
-          />
-        </div>
-        <div className="mb-4">
-          <input
-            type="text"
-            name="authorName"
-            placeholder="Author Name"
-            className="w-full rounded-lg bg-gray-50 p-2 placeholder:text-gray-800 dark:bg-dark-textfield dark:text-white dark:placeholder:text-white"
-            value={formData.authorName}
-            onChange={handleInputChange}
-          />
-        </div>
-        <div className="flex justify-between">
-          <div className="flex w-8/12">
+          <div className="mb-1">
+            <div className="px-2 py-1 text-dark-secondary">Blog content <Asterisk /></div>
+            <textarea
+              name="description"
+              placeholder="Start writing here&hellip;"
+              rows={5}
+              className="w-full rounded-lg bg-slate-50 p-3 placeholder:text-sm placeholder:text-slate-800 dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
+              value={formData.description}
+              onChange={handleInputChange}
+            />
+          </div>
+
+          <div className="mb-2">
+            <div className="px-2 py-1 text-dark-secondary">Author name <Asterisk /></div>
             <input
               type="text"
-              id="imgtext"
-              name="imageLink"
-              placeholder="Image URL"
-              className="w-full rounded-lg bg-gray-50 p-2 placeholder:text-gray-800 dark:bg-dark-textfield dark:text-white dark:placeholder:text-white"
-              value={formData.imageLink}
+              name="authorName"
+              placeholder="Shree Sharma"
+              className="w-full rounded-lg bg-slate-50 p-3 placeholder:text-sm placeholder:text-slate-800 dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
+              value={formData.authorName}
               onChange={handleInputChange}
             />
           </div>
-          <button
-            type="button"
-            className="rounded-lg bg-black px-3 text-white hover:bg-gray-800 dark:bg-white dark:text-black"
-            onClick={() => {
-              setmodal(true);
-            }}
-          >
-            Pick Image
-          </button>
-        </div>
-        <div className="mb-4 mt-4">
-          <textarea
-            name="description"
-            placeholder="Description"
-            className="w-full rounded-lg bg-gray-50 p-2 placeholder:text-gray-800 dark:bg-dark-textfield dark:text-white dark:placeholder:text-white"
-            value={formData.description}
-            onChange={handleInputChange}
-          />
-        </div>
 
-        <div className="mb-4 flex flex-col items-center md:flex-row">
-          <label className="mb-2 block w-full font-semibold dark:text-white md:mr-8 md:w-fit">
-            Categories
-          </label>
-          <div className="flex flex-wrap gap-2">
-            {CATEGORIES.map((category) => (
-              <span
-                key={category}
-                className={`cursor-pointer
-									${
-                    formData.categories.includes(category)
+          <div className="px-2 py-1 text-dark-secondary">
+            Blog cover image
+            <span className="text-xs tracking-wide text-dark-tertiary">&nbsp;(jpg/png/webp)&nbsp;</span><Asterisk />
+          </div>
+          <div className="mb-4 flex justify-between gap-4">
+            <div className="w-10/12">
+              <input
+                type="url"
+                id="imagelink"
+                name="imageLink"
+                placeholder="https://&hellip;"
+                autoComplete='off'
+                className="w-full rounded-lg bg-slate-50 p-3 placeholder:text-sm placeholder:text-slate-800 dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
+                value={formData.imageLink}
+                onChange={handleInputChange}
+              />
+            </div>
+            <button
+              type="button"
+              className="w-2/12 rounded-lg bg-black px-4 py-3 text-slate-50 hover:bg-slate-800 dark:bg-dark-primary dark:text-dark-card dark:hover:bg-dark-secondary"
+              onClick={() => {
+                setmodal(true);
+              }}
+            >
+              Pick image
+            </button>
+          </div>
+          <div className="mb-4 flex flex-col">
+            <label className="dark:text-dark-secondary md:mr-4 md:w-fit px-2 pb-1">
+              Categories <Asterisk />
+            </label>
+            <div className="flex flex-wrap gap-3 dark:bg-dark-card dark:p-3 dark:rounded-lg">
+              {CATEGORIES.map((category) => (
+                <span
+                  key={category}
+                  className={`cursor-pointer
+									${formData.categories.includes(category)
                       ? categoryProps(category, true)
                       : categoryProps(category, false)
-                  }`}
-                onClick={() => handleCategoryClick(category)}
-              >
-                {category}
-              </span>
-            ))}
+                    }`}
+                  onClick={() => handleCategoryClick(category)}
+                >
+                  {category}
+                </span>
+              ))}
+            </div>
           </div>
-        </div>
 
-        <div className="mb-4 flex items-center">
-          <label className="flex items-center">
-            <span className="text-base font-medium text-gray-800 dark:text-white">
-              Featured Post
-            </span>
-            <input
-              type="checkbox"
-              name="isFeaturedPost"
-              className="ml-2 h-5 w-5 rounded border text-indigo-600 focus:ring-indigo-400"
-              checked={formData.isFeaturedPost}
-              onChange={handleCheckboxChange}
-            />
-          </label>
-        </div>
+          <div className="mb-4 flex items-center">
+            <label className="flex items-center">
+              <span className="text-base font-medium text-slate-800 dark:text-dark-secondary px-1">
+                Is this a featured blog?
+              </span>
+              <input
+                type="checkbox"
+                name="isFeaturedPost"
+                className="ml-2 h-4 w-4 rounded-full border"
+                checked={formData.isFeaturedPost}
+                onChange={handleCheckboxChange}
+              />
+            </label>
+          </div>
 
-        <button
-          type="submit"
-          className="flex w-full items-center justify-center rounded-lg bg-black p-2 text-base text-white hover:bg-gray-800 dark:bg-white dark:text-black md:w-fit"
-        >
-          Create Blog
-        </button>
-      </form>
-      <ModalComponent
-        selectedImage={selectedImage}
-        handleImageSelect={handleImageSelect}
-        handleSelector={handleselector}
-        setModal={setmodal}
-        modal={modal}
-      />
+          <button
+            type="submit"
+            className="flex w-full items-center justify-center rounded-lg bg-black px-5 md:mx-1 py-3 text-base font-semibold text-white hover:bg-slate-800 dark:bg-dark-primary dark:text-dark-card dark:hover:bg-dark-secondary md:w-fit"
+          >
+            Post blog
+          </button>
+        </form>
+        <ModalComponent
+          selectedImage={selectedImage}
+          handleImageSelect={handleImageSelect}
+          handleSelector={handleselector}
+          setModal={setmodal}
+          modal={modal}
+        />
+      </div>
     </div>
   );
 }

From 17f652c2af2185c1413dbd5c554056b9d22e62bc Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Fri, 1 Dec 2023 03:50:30 +0530
Subject: [PATCH 03/24] chore: Remove stale css dark theme variables Weren't
 being used anywhere

---
 frontend/src/index.css | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 2acee128..b5c61c95 100644
--- a/frontend/src/index.css
+++ b/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;
-  }
-}

From 75c4c2ccbbd09bcae938f82c056862511cc3681b Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Fri, 1 Dec 2023 04:02:49 +0530
Subject: [PATCH 04/24] refactor: Changed all colors from *-gray-* and white to
 *-slate-* or *-dark-* This will make all colors uniform and add some
 hierarchy to the different texts instead of all texts being plain white.

---
 frontend/src/components/blog-feed.tsx          |  2 +-
 frontend/src/components/featured-post-card.tsx | 10 +++++-----
 frontend/src/components/latest-post-card.tsx   |  8 ++++----
 frontend/src/components/modal.tsx              | 14 +++++++-------
 frontend/src/components/post-card.tsx          | 14 +++++++++-----
 .../skeletons/featured-post-card-skeleton.tsx  | 18 +++++++++---------
 .../skeletons/latest-post-card-skeleton.tsx    | 18 +++++++++---------
 .../skeletons/post-card-skeleton.tsx           | 14 +++++++-------
 frontend/src/pages/details-page.tsx            |  8 ++++----
 frontend/src/pages/home-page.tsx               | 10 +++++-----
 10 files changed, 60 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/blog-feed.tsx b/frontend/src/components/blog-feed.tsx
index f09bad8c..292bbda5 100644
--- a/frontend/src/components/blog-feed.tsx
+++ b/frontend/src/components/blog-feed.tsx
@@ -43,7 +43,7 @@ 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}"`}
diff --git a/frontend/src/components/featured-post-card.tsx b/frontend/src/components/featured-post-card.tsx
index caaf8407..be7f4885 100644
--- a/frontend/src/components/featured-post-card.tsx
+++ b/frontend/src/components/featured-post-card.tsx
@@ -7,7 +7,7 @@ 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-4 rounded-lg bg-slate-50 dark:bg-dark-card"
       onClick={() => navigate('/details-page', { state: { post } })}
     >
       <div className="w-1/3">
@@ -18,7 +18,7 @@ export default function FeaturedPostCard({ post }: { post: Post }) {
         />
       </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="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)}>
@@ -26,10 +26,10 @@ export default function FeaturedPostCard({ post }: { post: Post }) {
             </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="mb-1 flex flex-1 items-end text-xs text-slate-600 dark:text-dark-info">
           {post.authorName} • {formatPostTime(post.timeOfPost)}
         </div>
       </div>
diff --git a/frontend/src/components/latest-post-card.tsx b/frontend/src/components/latest-post-card.tsx
index 934048a8..8794f91d 100644
--- a/frontend/src/components/latest-post-card.tsx
+++ b/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-2 py-2 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 text-xl 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>
diff --git a/frontend/src/components/modal.tsx b/frontend/src/components/modal.tsx
index 18e38e7b..d07a719b 100644
--- a/frontend/src/components/modal.tsx
+++ b/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);
                     }}
diff --git a/frontend/src/components/post-card.tsx b/frontend/src/components/post-card.tsx
index b7864c9a..afef74c7 100644
--- a/frontend/src/components/post-card.tsx
+++ b/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}
diff --git a/frontend/src/components/skeletons/featured-post-card-skeleton.tsx b/frontend/src/components/skeletons/featured-post-card-skeleton.tsx
index 64400da1..58887d60 100644
--- a/frontend/src/components/skeletons/featured-post-card-skeleton.tsx
+++ b/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>
diff --git a/frontend/src/components/skeletons/latest-post-card-skeleton.tsx b/frontend/src/components/skeletons/latest-post-card-skeleton.tsx
index 1e4b1095..2175d594 100644
--- a/frontend/src/components/skeletons/latest-post-card-skeleton.tsx
+++ b/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>
   );
diff --git a/frontend/src/components/skeletons/post-card-skeleton.tsx b/frontend/src/components/skeletons/post-card-skeleton.tsx
index 1ef9a362..a6e49d92 100644
--- a/frontend/src/components/skeletons/post-card-skeleton.tsx
+++ b/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>
diff --git a/frontend/src/pages/details-page.tsx b/frontend/src/pages/details-page.tsx
index ceba0db0..b2e3b4bf 100644
--- a/frontend/src/pages/details-page.tsx
+++ b/frontend/src/pages/details-page.tsx
@@ -20,7 +20,7 @@ const DetailsPage = () => {
           <div className="absolute bottom-4 w-full px-4 text-white md:bottom-8 md:px-8 lg:bottom-16 lg:px-16">
             <div className="mb-6 flex space-x-2">
               {post.categories.map((category, index) => (
-                <div key={index} className="rounded-full bg-gray-500 px-3 py-1 text-sm text-white">
+                <div key={index} className="rounded-full bg-slate-500 px-3 py-1 text-sm text-white">
                   {category}
                 </div>
               ))}
@@ -28,12 +28,12 @@ const DetailsPage = () => {
             <h1 className="text-lg font-semibold md:text-2xl lg:text-4xl">{post.title}</h1>
           </div>
         </div>
-        <div className="flex w-full flex-col gap-y-4 px-4 pt-4 text-left dark:text-white md:px-8 md:pt-8 lg:px-16 lg:pt-16">
+        <div className="flex w-full flex-col gap-y-4 px-4 pt-4 text-left dark:text-slate-50 md:px-8 md:pt-8 lg:px-16 lg:pt-16">
           <div>
-            <p className="text-gray-700 dark:text-white">{post.description}</p>
+            <p className="text-slate-700 dark:text-slate-50">{post.description}</p>
           </div>
           <div className="">
-            <p className="font-semibold text-gray-600 dark:text-white">By {post.authorName}</p>
+            <p className="font-semibold text-slate-600 dark:text-slate-50">By {post.authorName}</p>
             <p className="text-sm">{formatPostTime(post.timeOfPost)}</p>
           </div>
         </div>
diff --git a/frontend/src/pages/home-page.tsx b/frontend/src/pages/home-page.tsx
index a467f01c..b43bed53 100644
--- a/frontend/src/pages/home-page.tsx
+++ b/frontend/src/pages/home-page.tsx
@@ -21,17 +21,17 @@ function HomePage() {
   }, []);
   const navigate = useNavigate();
   return (
-    <div className="w-full font-[Poppins] dark:bg-dark">
+    <div className="w-full bg-slate-50 font-[Poppins] dark:bg-dark">
       <div
         style={{ backgroundImage: `url(${bg})` }}
         className="relative mt-[-8px] h-[460px] bg-cover bg-fixed bg-center"
       >
         <div className="absolute inset-0 bg-black opacity-50"></div>
-        <div className="absolute inset-0 flex flex-col px-16 py-8 text-white">
+        <div className="absolute inset-0 flex flex-col px-16 py-8 text-slate-50">
           <div className="flex w-full justify-between">
             <div className="text-2xl font-semibold">WanderLust</div>
             <button
-              className="rounded border border-white px-4 py-2"
+              className="rounded border border-slate-50 px-4 py-2"
               onClick={() => {
                 navigate('/add-blog');
               }}
@@ -39,7 +39,7 @@ function HomePage() {
               Create post
             </button>
           </div>
-          <div className="flex max-w-5xl flex-1 flex-col justify-end pb-8 dark:text-white">
+          <div className="flex max-w-5xl flex-1 flex-col justify-end pb-8 text-slate-50">
             <h1 className="text-4xl font-bold">Journey Beyond Horizons</h1>
             <p className="my-4 text-xl">
               Dive into the World of Travel with Stories That Transport You to Far-Off Lands.
@@ -51,7 +51,7 @@ function HomePage() {
       </div>
       <div className="px-16">
         <BlogFeed />
-        <h1 className="text-2xl font-semibold dark:text-white">All Blog Posts</h1>
+        <h1 className="text-2xl font-semibold dark:text-slate-50">All posts</h1>
         <div className="-mx-4 flex flex-wrap">
           {posts.length === 0
             ? Array(8)

From 583eb970ea4af568e38a79967fa5927965cd4db7 Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Fri, 1 Dec 2023 04:07:14 +0530
Subject: [PATCH 05/24] refactor: Overhaul the homepage - Embrace the slate
 color more. - Add some visual hierarchy to different sections of the
 homepage. - Change Many Title Case Text Elements to Sentence case elements. -
 Add a hover state to the Create post button.

---
 frontend/src/components/blog-feed.tsx         | 30 +++++++++----------
 .../src/components/featured-post-card.tsx     |  8 ++---
 frontend/src/components/latest-post-card.tsx  |  4 +--
 frontend/src/pages/home-page.tsx              | 21 ++++++-------
 4 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/blog-feed.tsx b/frontend/src/components/blog-feed.tsx
index 292bbda5..a090f103 100644
--- a/frontend/src/components/blog-feed.tsx
+++ b/frontend/src/components/blog-feed.tsx
@@ -48,21 +48,21 @@ export default function BlogFeed() {
               ? '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>
diff --git a/frontend/src/components/featured-post-card.tsx b/frontend/src/components/featured-post-card.tsx
index be7f4885..24648f0e 100644
--- a/frontend/src/components/featured-post-card.tsx
+++ b/frontend/src/components/featured-post-card.tsx
@@ -7,17 +7,17 @@ export default function FeaturedPostCard({ post }: { post: Post }) {
   const navigate = useNavigate();
   return (
     <div
-      className="flex h-48 cursor-pointer gap-4 rounded-lg bg-slate-50 dark:bg-dark-card"
+      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="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) => (
@@ -29,7 +29,7 @@ export default function FeaturedPostCard({ post }: { post: Post }) {
         <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-slate-600 dark:text-dark-info">
+        <div className="flex flex-1 items-end text-xs text-slate-600 dark:text-dark-info">
           {post.authorName} • {formatPostTime(post.timeOfPost)}
         </div>
       </div>
diff --git a/frontend/src/components/latest-post-card.tsx b/frontend/src/components/latest-post-card.tsx
index 8794f91d..60b43d6b 100644
--- a/frontend/src/components/latest-post-card.tsx
+++ b/frontend/src/components/latest-post-card.tsx
@@ -7,7 +7,7 @@ export default function LatestPostCard({ post }: { post: Post }) {
   const navigate = useNavigate();
   return (
     <div
-      className="cursor-pointer rounded-lg bg-slate-50 p-2 py-2 shadow-sm dark:bg-dark-card"
+      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">
@@ -20,7 +20,7 @@ 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-dark-title">{post.title}</div>
+      <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>
diff --git a/frontend/src/pages/home-page.tsx b/frontend/src/pages/home-page.tsx
index b43bed53..be0eba35 100644
--- a/frontend/src/pages/home-page.tsx
+++ b/frontend/src/pages/home-page.tsx
@@ -7,6 +7,7 @@ import PostCard from '@/components/post-card';
 import Post from '@/types/post-type';
 import { PostCardSkeleton } from '@/components/skeletons/post-card-skeleton';
 function HomePage() {
+  const navigate = useNavigate();
   const [posts, setPosts] = useState<Post[]>([]);
 
   useEffect(() => {
@@ -19,19 +20,19 @@ function HomePage() {
         console.error(error);
       });
   }, []);
-  const navigate = useNavigate();
+
   return (
-    <div className="w-full bg-slate-50 font-[Poppins] dark:bg-dark">
+    <div className="w-full cursor-default bg-slate-50 font-[Poppins] dark:bg-dark">
       <div
         style={{ backgroundImage: `url(${bg})` }}
-        className="relative mt-[-8px] h-[460px] bg-cover bg-fixed bg-center"
+        className="relative -mt-2 h-[460px] bg-cover bg-fixed bg-center"
       >
         <div className="absolute inset-0 bg-black opacity-50"></div>
         <div className="absolute inset-0 flex flex-col px-16 py-8 text-slate-50">
           <div className="flex w-full justify-between">
             <div className="text-2xl font-semibold">WanderLust</div>
             <button
-              className="rounded border border-slate-50 px-4 py-2"
+              className="rounded border border-slate-50 px-4 py-2 hover:bg-slate-500/25"
               onClick={() => {
                 navigate('/add-blog');
               }}
@@ -40,23 +41,23 @@ function HomePage() {
             </button>
           </div>
           <div className="flex max-w-5xl flex-1 flex-col justify-end pb-8 text-slate-50">
-            <h1 className="text-4xl font-bold">Journey Beyond Horizons</h1>
+            <h1 className="text-4xl font-bold tracking-wide">Journey Beyond Horizons</h1>
             <p className="my-4 text-xl">
-              Dive into the World of Travel with Stories That Transport You to Far-Off Lands.
+              Dive into the world of travel with stories that transport you to far-off lands.
               Adventure awaits around every corner. It's time to explore the world!
             </p>
-            <div className="text-xl font-semibold">Let's Go !!!</div>
+            <div className="text-xl font-semibold tracking-wide">Let's go!</div>
           </div>
         </div>
       </div>
-      <div className="px-16">
+      <div className="mx-16">
         <BlogFeed />
         <h1 className="text-2xl font-semibold dark:text-slate-50">All posts</h1>
         <div className="-mx-4 flex flex-wrap">
           {posts.length === 0
             ? Array(8)
-                .fill(0)
-                .map((_, index) => <PostCardSkeleton key={index} />)
+              .fill(0)
+              .map((_, index) => <PostCardSkeleton key={index} />)
             : posts.map((post) => <PostCard key={post._id} post={post} />)}
         </div>
       </div>

From a5f779b6979840500c8cf161eb307367dd1aa64c Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Fri, 1 Dec 2023 16:21:13 +0530
Subject: [PATCH 06/24] style: Remove some unnecessary `tracking`

---
 frontend/src/pages/home-page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/home-page.tsx b/frontend/src/pages/home-page.tsx
index be0eba35..50b81c22 100644
--- a/frontend/src/pages/home-page.tsx
+++ b/frontend/src/pages/home-page.tsx
@@ -41,12 +41,12 @@ function HomePage() {
             </button>
           </div>
           <div className="flex max-w-5xl flex-1 flex-col justify-end pb-8 text-slate-50">
-            <h1 className="text-4xl font-bold tracking-wide">Journey Beyond Horizons</h1>
+            <h1 className="text-4xl font-bold">Journey Beyond Horizons</h1>
             <p className="my-4 text-xl">
               Dive into the world of travel with stories that transport you to far-off lands.
               Adventure awaits around every corner. It's time to explore the world!
             </p>
-            <div className="text-xl font-semibold tracking-wide">Let's go!</div>
+            <div className="text-xl font-semibold">Let's go!</div>
           </div>
         </div>
       </div>

From 955d2d02cb60babbbd5c7f9db47f51922dbdea2e Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Fri, 1 Dec 2023 17:10:25 +0530
Subject: [PATCH 07/24] fix: Use margin instead of padding When you hover over
 the blank spaces between cards, you'd get a pointer cursor. That's because
 the cursor was actually over the card container with the onclick property.
 With this change, The card container is a proper blank space without any
 consequences.

---
 frontend/src/components/post-card.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/post-card.tsx b/frontend/src/components/post-card.tsx
index afef74c7..5c62b118 100644
--- a/frontend/src/components/post-card.tsx
+++ b/frontend/src/components/post-card.tsx
@@ -6,11 +6,11 @@ import { categoryProps } from '@/utils/category-props';
 export default function PostCard({ post }: { post: Post }) {
   const navigate = useNavigate();
   return (
+    <div className="w-full sm:w-1/2 lg:w-1/4 xl:w-1/5">
     <div
-      className="w-full cursor-pointer p-4 md:w-1/2 lg:w-1/3 xl:w-1/4"
+        className="bg-light m-4 cursor-pointer rounded-lg shadow-md dark:bg-dark-card"
       onClick={() => navigate('/details-page', { state: { post } })}
     >
-      <div className="rounded-lg bg-slate-50 shadow-md dark:bg-dark-card">
         <img
           src={post.imageLink}
           alt={post.title}

From 286a6a784004d6b42ba20a6cef15b70ec1e313db Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Fri, 1 Dec 2023 17:18:19 +0530
Subject: [PATCH 08/24] fix: Add classes to make the app more responsive on
 smaller screens

---
 frontend/src/components/blog-feed.tsx |  2 +-
 frontend/src/pages/home-page.tsx      | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/blog-feed.tsx b/frontend/src/components/blog-feed.tsx
index a090f103..fc87d316 100644
--- a/frontend/src/components/blog-feed.tsx
+++ b/frontend/src/components/blog-feed.tsx
@@ -40,7 +40,7 @@ export default function BlogFeed() {
   }, []);
 
   return (
-    <div className="container mx-auto py-6">
+    <div className="mx-auto my-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-dark-primary">
diff --git a/frontend/src/pages/home-page.tsx b/frontend/src/pages/home-page.tsx
index 50b81c22..a55ab852 100644
--- a/frontend/src/pages/home-page.tsx
+++ b/frontend/src/pages/home-page.tsx
@@ -28,7 +28,7 @@ function HomePage() {
         className="relative -mt-2 h-[460px] bg-cover bg-fixed bg-center"
       >
         <div className="absolute inset-0 bg-black opacity-50"></div>
-        <div className="absolute inset-0 flex flex-col px-16 py-8 text-slate-50">
+        <div className="absolute inset-0 flex flex-col px-8 py-8 text-slate-50 md:px-16">
           <div className="flex w-full justify-between">
             <div className="text-2xl font-semibold">WanderLust</div>
             <button
@@ -40,9 +40,9 @@ function HomePage() {
               Create post
             </button>
           </div>
-          <div className="flex max-w-5xl flex-1 flex-col justify-end pb-8 text-slate-50">
-            <h1 className="text-4xl font-bold">Journey Beyond Horizons</h1>
-            <p className="my-4 text-xl">
+          <div className="mb-8 flex max-w-3xl flex-1 flex-col justify-end text-slate-50">
+            <h1 className="text-2xl font-bold md:text-4xl">Journey Beyond Horizons</h1>
+            <p className="my-4 md:text-xl">
               Dive into the world of travel with stories that transport you to far-off lands.
               Adventure awaits around every corner. It's time to explore the world!
             </p>
@@ -50,14 +50,14 @@ function HomePage() {
           </div>
         </div>
       </div>
-      <div className="mx-16">
+      <div className="mx-4 md:mx-8 lg:mx-16">
         <BlogFeed />
-        <h1 className="text-2xl font-semibold dark:text-slate-50">All posts</h1>
-        <div className="-mx-4 flex flex-wrap">
+        <h1 className="text-2xl font-semibold dark:text-slate-50">All Posts</h1>
+        <div className="flex flex-wrap">
           {posts.length === 0
             ? Array(8)
-              .fill(0)
-              .map((_, index) => <PostCardSkeleton key={index} />)
+                .fill(0)
+                .map((_, index) => <PostCardSkeleton key={index} />)
             : posts.map((post) => <PostCard key={post._id} post={post} />)}
         </div>
       </div>

From ea05ef30edb45798ba4fe4ea9df7ce2a88f3e95d Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Fri, 1 Dec 2023 17:18:55 +0530
Subject: [PATCH 09/24] feat: Add a `light` theme to tailwind config Change
 light theme colors according to the theme vars

---
 frontend/src/components/blog-feed.tsx          |  5 +++--
 frontend/src/components/featured-post-card.tsx | 10 +++++-----
 frontend/src/components/latest-post-card.tsx   |  6 +++---
 frontend/src/components/post-card.tsx          | 12 ++++++------
 frontend/src/pages/home-page.tsx               |  2 +-
 frontend/tailwind.config.js                    | 14 +++++++++++---
 6 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/blog-feed.tsx b/frontend/src/components/blog-feed.tsx
index fc87d316..8ff7f0e1 100644
--- a/frontend/src/components/blog-feed.tsx
+++ b/frontend/src/components/blog-feed.tsx
@@ -43,7 +43,8 @@ export default function BlogFeed() {
     <div className="mx-auto my-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-dark-primary">
+          <div className="-mb-1 tracking-wide text-slate-500 dark:text-dark-tertiary">What's hot?</div>
+          <h1 className="mb-2 text-2xl font-semibold dark:text-dark-primary">
             {selectedCategory === 'featured'
               ? 'Featured Posts'
               : `Posts related to "${selectedCategory}"`}
@@ -60,7 +61,7 @@ export default function BlogFeed() {
         </div>
         <div className="w-full p-4 md:w-1/3">
           <div className="mb-6">
-            <div className="-mb-1 tracking-wide text-slate-500 dark:text-dark-tertiary">Discover by topic</div>
+            <div className="-mb-1 tracking-wide text-light-tertiary 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) => (
diff --git a/frontend/src/components/featured-post-card.tsx b/frontend/src/components/featured-post-card.tsx
index 24648f0e..2c4987f0 100644
--- a/frontend/src/components/featured-post-card.tsx
+++ b/frontend/src/components/featured-post-card.tsx
@@ -7,7 +7,7 @@ export default function FeaturedPostCard({ post }: { post: Post }) {
   const navigate = useNavigate();
   return (
     <div
-      className="flex h-48 cursor-pointer gap-2 rounded-lg bg-slate-50 dark:bg-dark-card"
+      className="flex h-48 cursor-pointer gap-2 rounded-lg bg-light dark:bg-dark-card"
       onClick={() => navigate('/details-page', { state: { post } })}
     >
       <div className="w-1/3">
@@ -18,7 +18,7 @@ export default function FeaturedPostCard({ post }: { post: Post }) {
         />
       </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="text-xl font-semibold text-light-title 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)}>
@@ -26,10 +26,10 @@ export default function FeaturedPostCard({ post }: { post: Post }) {
             </span>
           ))}
         </div>
-        <div className="line-clamp-2 text-slate-700">
-          <p className="overflow-ellipsis dark:text-dark-description">{post.description}</p>
+        <div className="line-clamp-2">
+          <p className="overflow-ellipsis text-light-description dark:text-dark-description">{post.description}</p>
         </div>
-        <div className="flex flex-1 items-end text-xs text-slate-600 dark:text-dark-info">
+        <div className="flex flex-1 items-end text-xs text-light-info dark:text-dark-info">
           {post.authorName} • {formatPostTime(post.timeOfPost)}
         </div>
       </div>
diff --git a/frontend/src/components/latest-post-card.tsx b/frontend/src/components/latest-post-card.tsx
index 60b43d6b..f9cc22d2 100644
--- a/frontend/src/components/latest-post-card.tsx
+++ b/frontend/src/components/latest-post-card.tsx
@@ -7,7 +7,7 @@ export default function LatestPostCard({ post }: { post: Post }) {
   const navigate = useNavigate();
   return (
     <div
-      className="cursor-pointer rounded-lg bg-slate-50 p-3 shadow-sm dark:bg-dark-card"
+      className="cursor-pointer rounded-lg bg-slate-50 p-3 border border-slate-200 dark:bg-dark-card"
       onClick={() => navigate('/details-page', { state: { post } })}
     >
       <div className="flex">
@@ -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 font-semibold dark:text-dark-title">{post.title}</div>
-      <div className="text-xs text-slate-500 dark:text-dark-info">
+      <div className="mb-2 line-clamp-2 font-semibold text-light-title dark:text-dark-title">{post.title}</div>
+      <div className="text-xs text-light-info dark:text-dark-info">
         {post.authorName} • {formatPostTime(post.timeOfPost)}
       </div>
     </div>
diff --git a/frontend/src/components/post-card.tsx b/frontend/src/components/post-card.tsx
index 5c62b118..ba2d1d4d 100644
--- a/frontend/src/components/post-card.tsx
+++ b/frontend/src/components/post-card.tsx
@@ -7,23 +7,23 @@ export default function PostCard({ post }: { post: Post }) {
   const navigate = useNavigate();
   return (
     <div className="w-full sm:w-1/2 lg:w-1/4 xl:w-1/5">
-    <div
+      <div
         className="bg-light m-4 cursor-pointer rounded-lg shadow-md dark:bg-dark-card"
-      onClick={() => navigate('/details-page', { state: { post } })}
-    >
+        onClick={() => navigate('/details-page', { state: { post } })}
+      >
         <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-slate-500 dark:text-slate-400">
+          <div className="text-light-info mb-2 text-xs dark:text-dark-info">
             {post.authorName} • {formatPostTime(post.timeOfPost)}
           </div>
-          <h2 className="mb-2 line-clamp-1 text-xl font-semibold dark:text-slate-50">
+          <h2 className="text-light-title mb-2 line-clamp-1 text-xl font-semibold dark:text-dark-title">
             {post.title}
           </h2>
-          <p className="line-clamp-2 text-slate-600 dark:text-dark-description">
+          <p className="text-light-description line-clamp-2 dark:text-dark-description">
             {post.description}
           </p>
           <div className="mt-4 flex flex-wrap gap-2">
diff --git a/frontend/src/pages/home-page.tsx b/frontend/src/pages/home-page.tsx
index a55ab852..fdf044f4 100644
--- a/frontend/src/pages/home-page.tsx
+++ b/frontend/src/pages/home-page.tsx
@@ -52,7 +52,7 @@ function HomePage() {
       </div>
       <div className="mx-4 md:mx-8 lg:mx-16">
         <BlogFeed />
-        <h1 className="text-2xl font-semibold dark:text-slate-50">All Posts</h1>
+        <h1 className="text-2xl font-semibold dark:text-dark-primary">All Posts</h1>
         <div className="flex flex-wrap">
           {posts.length === 0
             ? Array(8)
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index a9bec36b..f03b442f 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -13,10 +13,18 @@ export default {
           tertiary: colors.slate[400],
           card: colors.slate[800],
           title: colors.slate[50],
-          description: colors.slate[300],
-          info: colors.slate[400],
+          description: colors.slate[400],
+          info: colors.slate[500],
+        },
+        light: {
+          DEFAULT: colors.slate[50],
+          primary: colors.slate[900],
+          secondary: colors.slate[600],
+          tertiary: colors.slate[500],
+          title: colors.slate[900],
+          description: colors.slate[700],
+          info: colors.slate[500],
         },
-        light: {},
       },
     },
   },

From fe499729467a34c94615b96250f0fe2699868781 Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Fri, 1 Dec 2023 17:23:03 +0530
Subject: [PATCH 10/24] fix: Remove Latest post border in dark mode

---
 frontend/src/components/latest-post-card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/latest-post-card.tsx b/frontend/src/components/latest-post-card.tsx
index f9cc22d2..0d2209ab 100644
--- a/frontend/src/components/latest-post-card.tsx
+++ b/frontend/src/components/latest-post-card.tsx
@@ -7,7 +7,7 @@ export default function LatestPostCard({ post }: { post: Post }) {
   const navigate = useNavigate();
   return (
     <div
-      className="cursor-pointer rounded-lg bg-slate-50 p-3 border border-slate-200 dark:bg-dark-card"
+      className="cursor-pointer rounded-lg border border-slate-200 bg-slate-50 p-3 dark:border-none dark:bg-dark-card"
       onClick={() => navigate('/details-page', { state: { post } })}
     >
       <div className="flex">

From cd4026121c2e0c8cdda9e044c2822fdd70a9ba29 Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Fri, 1 Dec 2023 17:27:29 +0530
Subject: [PATCH 11/24] style: Use original breakpoint widths for cards

---
 frontend/src/components/post-card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/post-card.tsx b/frontend/src/components/post-card.tsx
index ba2d1d4d..8ae2b715 100644
--- a/frontend/src/components/post-card.tsx
+++ b/frontend/src/components/post-card.tsx
@@ -6,7 +6,7 @@ import { categoryProps } from '@/utils/category-props';
 export default function PostCard({ post }: { post: Post }) {
   const navigate = useNavigate();
   return (
-    <div className="w-full sm:w-1/2 lg:w-1/4 xl:w-1/5">
+    <div className="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
       <div
         className="bg-light m-4 cursor-pointer rounded-lg shadow-md dark:bg-dark-card"
         onClick={() => navigate('/details-page', { state: { post } })}

From 62088b172615c227dfa4f067f7358b268c41b88d Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Fri, 1 Dec 2023 19:07:38 +0530
Subject: [PATCH 12/24] feat: Add skeletons for dark mode (fixes #64)

- Remove unnecessary classes
---
 .../skeletons/featured-post-card-skeleton.tsx | 43 +++++++++++--------
 .../skeletons/latest-post-card-skeleton.tsx   | 24 ++++++-----
 .../skeletons/post-card-skeleton.tsx          | 20 ++++-----
 3 files changed, 47 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/skeletons/featured-post-card-skeleton.tsx b/frontend/src/components/skeletons/featured-post-card-skeleton.tsx
index 58887d60..b859ccf8 100644
--- a/frontend/src/components/skeletons/featured-post-card-skeleton.tsx
+++ b/frontend/src/components/skeletons/featured-post-card-skeleton.tsx
@@ -2,26 +2,33 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 export const FeaturedPostCardSkeleton = () => {
   return (
-    <div className="flex h-48 gap-4 rounded-lg bg-slate-50">
+    <div className="bg-light flex rounded-lg dark:bg-dark-card">
+      {/* for image */}
       <div className="w-1/3">
-        {/* for image */}
-        <Skeleton className="h-full w-full rounded-lg bg-slate-200" />
+        <Skeleton className="h-full w-full rounded-lg bg-slate-200 dark:bg-slate-700" />
       </div>
-      <div className="flex h-full w-2/3 flex-col gap-2">
-        {/* for title */}
-        <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-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-slate-200" />
-        <div className="mb-1 flex flex-1 items-end">
-          {/* for author and time */}
-          <Skeleton className="h-5 w-1/3 bg-slate-200" />
+      <div className="flex h-48 w-2/3 gap-4 rounded-lg p-3">
+        <div className="flex w-full flex-col gap-3">
+          {/* for title */}
+          <Skeleton className="h-6 w-11/12 bg-slate-200 dark:bg-slate-700" />
+          <Skeleton className="h-6 w-2/3 bg-slate-200 dark:bg-slate-700" />
+          <div className="flex flex-wrap gap-2">
+            {/* for categories */}
+            {Array(3)
+              .fill(0)
+              .map((_, index) => (
+                <Skeleton
+                  key={index}
+                  className="h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700"
+                />
+              ))}
+          </div>
+          {/* for description */}
+          <Skeleton className="line-clamp-2 h-12 w-10/12 bg-slate-200 dark:bg-slate-700" />
+          <div className="mb-1 flex flex-1 items-end">
+            {/* for author and time */}
+            <Skeleton className="h-3 w-1/3 bg-slate-200 dark:bg-slate-700" />
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/skeletons/latest-post-card-skeleton.tsx b/frontend/src/components/skeletons/latest-post-card-skeleton.tsx
index 2175d594..1ac8b206 100644
--- a/frontend/src/components/skeletons/latest-post-card-skeleton.tsx
+++ b/frontend/src/components/skeletons/latest-post-card-skeleton.tsx
@@ -2,22 +2,24 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 export const LatestPostCardSkeleton = () => {
   return (
-    <div className="rounded-lg bg-slate-50 py-2 shadow-sm">
+    <div className="bg-light rounded-lg p-3 dark:bg-dark-card">
       <div className="flex">
         <div className="mb-2 flex flex-1 flex-wrap gap-2">
-          <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" />
+          {Array(3)
+            .fill(0)
+            .map((_, index) => (
+              <Skeleton
+                key={index}
+                className="h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700"
+              />
+            ))}
         </div>
-        <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-slate-200" />
-        <Skeleton className="mt-2 h-6 w-2/3 bg-slate-200" />
-      </div>
-      <div className="flex text-xs text-slate-500">
-        <Skeleton className="h-4 w-1/3 bg-slate-200" />
+      <div className="mb-2">
+        <Skeleton className="h-6 w-11/12 bg-slate-200 dark:bg-slate-700" />
+        <Skeleton className="mt-2 h-4 w-2/3 bg-slate-200 dark:bg-slate-700" />
       </div>
+      <Skeleton className="h-3 w-1/3 bg-slate-200 dark:bg-slate-700" />
     </div>
   );
 };
diff --git a/frontend/src/components/skeletons/post-card-skeleton.tsx b/frontend/src/components/skeletons/post-card-skeleton.tsx
index a6e49d92..b3c0c479 100644
--- a/frontend/src/components/skeletons/post-card-skeleton.tsx
+++ b/frontend/src/components/skeletons/post-card-skeleton.tsx
@@ -2,18 +2,16 @@ 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-slate-50 shadow-md">
-        <Skeleton className="h-48 w-full rounded-lg" />
+    <div className="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
+      <div className="bg-light m-4 rounded-lg shadow-md dark:bg-dark-card">
+        <Skeleton className="h-48 w-full rounded-lg bg-slate-200 dark:bg-slate-700" />
         <div className="p-4">
-          <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-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-slate-200" />
-            <Skeleton className="h-6 w-16 rounded-3xl bg-slate-200" />
+          <Skeleton className="mb-2 h-3 w-2/3 bg-slate-200 dark:bg-slate-700" />
+          <Skeleton className="mb-2 h-6 w-4/5 bg-slate-200 dark:bg-slate-700" />
+          <Skeleton className="h-16 w-11/12 bg-slate-200 dark:bg-slate-700" />
+          <div className="mt-2 flex flex-wrap gap-2">
+            <Skeleton className="h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700" />
+            <Skeleton className="h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700" />
           </div>
         </div>
       </div>

From 4f5f5b9b25b307bbea71dfc6b775fbc89222cea8 Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Fri, 1 Dec 2023 21:31:44 +0530
Subject: [PATCH 13/24] styles: Add custom font to tailwind config This will
 get rid of the need of having the arbitrary value classes in class lists.

---
 frontend/src/pages/add-blog.tsx     | 2 +-
 frontend/src/pages/details-page.tsx | 2 +-
 frontend/src/pages/home-page.tsx    | 2 +-
 frontend/tailwind.config.js         | 5 +++++
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/add-blog.tsx b/frontend/src/pages/add-blog.tsx
index 4754dfdd..ec925555 100644
--- a/frontend/src/pages/add-blog.tsx
+++ b/frontend/src/pages/add-blog.tsx
@@ -127,7 +127,7 @@ function AddBlog() {
   }
 
   return (
-    <div className="min-h-screen cursor-default bg-slate-50 px-16 py-8 font-[Poppins] dark:bg-dark">
+    <div className="min-h-screen cursor-default bg-slate-50 px-16 py-8 dark:bg-dark">
       <div className="mb-4 flex items-center justify-start">
         <div className="w-fit cursor-pointer text-base md:text-lg lg:text-2xl">
           <img
diff --git a/frontend/src/pages/details-page.tsx b/frontend/src/pages/details-page.tsx
index b2e3b4bf..b9d98edf 100644
--- a/frontend/src/pages/details-page.tsx
+++ b/frontend/src/pages/details-page.tsx
@@ -9,7 +9,7 @@ const DetailsPage = () => {
   const navigate = useNavigate();
   return (
     <div className="min-h-screen dark:bg-dark">
-      <div className="min-h-min w-full font-[Poppins] dark:bg-dark">
+      <div className="min-h-min w-full dark:bg-dark">
         <div className="relative flex flex-col">
           <img src={post.imageLink} alt={post.title} className="h-80 w-full object-cover md:h-96" />
 
diff --git a/frontend/src/pages/home-page.tsx b/frontend/src/pages/home-page.tsx
index fdf044f4..c246e2b0 100644
--- a/frontend/src/pages/home-page.tsx
+++ b/frontend/src/pages/home-page.tsx
@@ -22,7 +22,7 @@ function HomePage() {
   }, []);
 
   return (
-    <div className="w-full cursor-default bg-slate-50 font-[Poppins] dark:bg-dark">
+    <div className="w-full cursor-default bg-light dark:bg-dark">
       <div
         style={{ backgroundImage: `url(${bg})` }}
         className="relative -mt-2 h-[460px] bg-cover bg-fixed bg-center"
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index f03b442f..c483bb89 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,5 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 const colors = require('tailwindcss/colors');
+const defaultTheme = require('tailwindcss/defaultTheme');
+
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   darkMode: 'media',
@@ -26,6 +28,9 @@ export default {
           info: colors.slate[500],
         },
       },
+      fontFamily: {
+        sans: ['Poppins', ...defaultTheme.fontFamily.sans],
+      },
     },
   },
   plugins: [],

From 842ecf767a21621ca1a710476fde93e54fe8471a Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Fri, 1 Dec 2023 21:42:04 +0530
Subject: [PATCH 14/24] styles: Add some visual hierarchy by adjusting text
 sizes.

---
 frontend/src/components/post-card.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/post-card.tsx b/frontend/src/components/post-card.tsx
index 8ae2b715..f4c53dcc 100644
--- a/frontend/src/components/post-card.tsx
+++ b/frontend/src/components/post-card.tsx
@@ -8,22 +8,22 @@ export default function PostCard({ post }: { post: Post }) {
   return (
     <div className="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
       <div
-        className="bg-light m-4 cursor-pointer rounded-lg shadow-md dark:bg-dark-card"
+        className="m-4 cursor-pointer rounded-lg bg-light shadow-md dark:bg-dark-card"
         onClick={() => navigate('/details-page', { state: { post } })}
       >
         <img
           src={post.imageLink}
           alt={post.title}
-          className="h-48 w-full rounded-lg object-cover"
+          className="h-48 w-full rounded-t-lg object-cover"
         />
         <div className="p-4">
-          <div className="text-light-info mb-2 text-xs dark:text-dark-info">
+          <div className="mb-1 text-xs text-light-info dark:text-dark-info">
             {post.authorName} • {formatPostTime(post.timeOfPost)}
           </div>
-          <h2 className="text-light-title mb-2 line-clamp-1 text-xl font-semibold dark:text-dark-title">
+          <h2 className="mb-2 line-clamp-1 text-lg font-semibold text-light-title dark:text-dark-title">
             {post.title}
           </h2>
-          <p className="text-light-description line-clamp-2 dark:text-dark-description">
+          <p className="line-clamp-2 text-sm text-light-description dark:text-dark-description">
             {post.description}
           </p>
           <div className="mt-4 flex flex-wrap gap-2">

From 26129586d05f9309208f7e72c7cf6c2d30da260b Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Fri, 1 Dec 2023 22:19:32 +0530
Subject: [PATCH 15/24] styles: Overhaul modal styling; add dark mode

---
 frontend/src/components/modal.tsx | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/modal.tsx b/frontend/src/components/modal.tsx
index d07a719b..8ab05028 100644
--- a/frontend/src/components/modal.tsx
+++ b/frontend/src/components/modal.tsx
@@ -24,27 +24,29 @@ const ModalComponent: React.FC<ModalProps> = ({
           role="dialog"
           aria-modal="false"
         >
-          <div className="fixed inset-0 bg-slate-500 bg-opacity-75 transition-opacity"></div>
+          <div className="fixed inset-0 bg-slate-800/50 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-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="relative transform overflow-hidden rounded-lg bg-light text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="bg-light px-4 pb-4 pt-5 dark:bg-dark 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">
+                    <div className="mt-3 text-center sm:text-left">
                       <h3
-                        className="text-base font-semibold leading-6 text-slate-900"
+                        className="text-base font-semibold leading-6 text-light-primary dark:text-dark-primary"
                         id="modal-title"
                       >
-                        Select Post Image
+                        Choose a post cover image
                       </h3>
                       <div className="mt-2">
                         <div className="grid grid-cols-3 gap-4">
                           {imageUrls.map((imageUrl) => (
                             <div
                               key={imageUrl}
-                              className={`cursor-pointer border p-2 ${
-                                selectedImage === imageUrl ? 'border-blue-500' : 'border-slate-300'
+                              className={`aspect-square cursor-pointer overflow-clip border ${
+                                selectedImage === imageUrl
+                                  ? 'border-4 border-blue-300'
+                                  : 'border-slate-300'
                               } rounded-md`}
                               onClick={() => handleImageSelect(imageUrl)}
                             >
@@ -60,18 +62,18 @@ const ModalComponent: React.FC<ModalProps> = ({
                     </div>
                   </div>
                 </div>
-                <div className="bg-slate-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+                <div className="bg-light px-4 py-3 dark:bg-dark sm:flex sm:flex-row-reverse sm:px-6">
                   <button
                     type="button"
                     name="imageLink"
-                    className="inline-flex w-full justify-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 sm:ml-3 sm:w-auto"
+                    className="inline-flex w-full justify-center rounded-md bg-light-primary px-3 py-2 text-sm font-semibold text-light shadow-sm hover:bg-light-secondary dark:bg-dark-primary dark:text-dark dark:hover:bg-dark-secondary sm:ml-3 sm:w-auto"
                     onClick={handleSelector}
                   >
                     Select
                   </button>
                   <button
                     type="button"
-                    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"
+                    className="mt-3 inline-flex w-full justify-center rounded-md bg-light px-3 py-2 text-sm font-semibold text-light-primary shadow-sm ring-1 ring-inset ring-slate-300 hover:bg-slate-200 dark:bg-dark dark:text-dark-primary dark:hover:bg-dark-secondary/25 sm:mt-0 sm:w-auto"
                     onClick={() => {
                       setModal(false);
                     }}

From ce2f99a65503fea00b7e7a2787c9e0649088b9fc Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Fri, 1 Dec 2023 22:38:27 +0530
Subject: [PATCH 16/24] styles: Change some styles of the submit form again

---
 frontend/src/pages/add-blog.tsx | 76 +++++++++++++++++++--------------
 1 file changed, 43 insertions(+), 33 deletions(-)

diff --git a/frontend/src/pages/add-blog.tsx b/frontend/src/pages/add-blog.tsx
index ec925555..a4c22efe 100644
--- a/frontend/src/pages/add-blog.tsx
+++ b/frontend/src/pages/add-blog.tsx
@@ -123,7 +123,7 @@ function AddBlog() {
   }, []);
 
   function Asterisk() {
-    return <span className='dark:text-dark-tertiary'>*</span>
+    return <span className="dark:text-dark-tertiary">*</span>;
   }
 
   return (
@@ -142,46 +142,70 @@ function AddBlog() {
       </div>
       <div className="flex justify-center">
         <form onSubmit={handleSubmit} className="md:w-2/3">
+          <div className="mb-2 flex items-center">
+            <label className="flex items-center">
+              <span className="px-2 text-base font-medium text-light-secondary dark:text-dark-secondary">
+                Is this a featured blog?
+              </span>
+              <input
+                type="checkbox"
+                name="isFeaturedPost"
+                className="ml-2 h-5 w-5 rounded-full accent-purple-400 "
+                checked={formData.isFeaturedPost}
+                onChange={handleCheckboxChange}
+              />
+            </label>
+          </div>
+
           <div className="mb-2">
-            <div className="px-2 py-1 text-dark-secondary">Blog title <Asterisk /></div>
+            <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
+              Blog title <Asterisk />
+            </div>
             <input
               type="text"
               name="title"
               placeholder="Travel Bucket List for this Year"
-              autoComplete='off'
-              className="w-full rounded-lg bg-slate-50 p-3 placeholder:text-sm placeholder:text-slate-800 dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
+              autoComplete="off"
+              className="w-full rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
               value={formData.title}
               onChange={handleInputChange}
             />
           </div>
 
           <div className="mb-1">
-            <div className="px-2 py-1 text-dark-secondary">Blog content <Asterisk /></div>
+            <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
+              Blog content <Asterisk />
+            </div>
             <textarea
               name="description"
               placeholder="Start writing here&hellip;"
               rows={5}
-              className="w-full rounded-lg bg-slate-50 p-3 placeholder:text-sm placeholder:text-slate-800 dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
+              className="w-full rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
               value={formData.description}
               onChange={handleInputChange}
             />
           </div>
 
           <div className="mb-2">
-            <div className="px-2 py-1 text-dark-secondary">Author name <Asterisk /></div>
+            <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
+              Author name <Asterisk />
+            </div>
             <input
               type="text"
               name="authorName"
               placeholder="Shree Sharma"
-              className="w-full rounded-lg bg-slate-50 p-3 placeholder:text-sm placeholder:text-slate-800 dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
+              className="w-full rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
               value={formData.authorName}
               onChange={handleInputChange}
             />
           </div>
 
-          <div className="px-2 py-1 text-dark-secondary">
+          <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
             Blog cover image
-            <span className="text-xs tracking-wide text-dark-tertiary">&nbsp;(jpg/png/webp)&nbsp;</span><Asterisk />
+            <span className="text-xs tracking-wide text-dark-tertiary">
+              &nbsp;(jpg/png/webp)&nbsp;
+            </span>
+            <Asterisk />
           </div>
           <div className="mb-4 flex justify-between gap-4">
             <div className="w-10/12">
@@ -190,15 +214,15 @@ function AddBlog() {
                 id="imagelink"
                 name="imageLink"
                 placeholder="https://&hellip;"
-                autoComplete='off'
-                className="w-full rounded-lg bg-slate-50 p-3 placeholder:text-sm placeholder:text-slate-800 dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
+                autoComplete="off"
+                className="w-full rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
                 value={formData.imageLink}
                 onChange={handleInputChange}
               />
             </div>
             <button
               type="button"
-              className="w-2/12 rounded-lg bg-black px-4 py-3 text-slate-50 hover:bg-slate-800 dark:bg-dark-primary dark:text-dark-card dark:hover:bg-dark-secondary"
+              className="w-2/12 rounded-lg bg-light-primary px-4 py-3 text-slate-50 hover:bg-light-primary/80 dark:bg-dark-primary dark:text-dark-card dark:hover:bg-dark-secondary/80"
               onClick={() => {
                 setmodal(true);
               }}
@@ -207,18 +231,19 @@ function AddBlog() {
             </button>
           </div>
           <div className="mb-4 flex flex-col">
-            <label className="dark:text-dark-secondary md:mr-4 md:w-fit px-2 pb-1">
+            <label className="px-2 pb-1 font-medium text-light-secondary dark:text-dark-secondary md:mr-4 md:w-fit">
               Categories <Asterisk />
             </label>
-            <div className="flex flex-wrap gap-3 dark:bg-dark-card dark:p-3 dark:rounded-lg">
+            <div className="flex flex-wrap gap-3 rounded-lg p-2 dark:bg-dark-card dark:p-3">
               {CATEGORIES.map((category) => (
                 <span
                   key={category}
                   className={`cursor-pointer
-									${formData.categories.includes(category)
+									${
+                    formData.categories.includes(category)
                       ? categoryProps(category, true)
                       : categoryProps(category, false)
-                    }`}
+                  }`}
                   onClick={() => handleCategoryClick(category)}
                 >
                   {category}
@@ -227,24 +252,9 @@ function AddBlog() {
             </div>
           </div>
 
-          <div className="mb-4 flex items-center">
-            <label className="flex items-center">
-              <span className="text-base font-medium text-slate-800 dark:text-dark-secondary px-1">
-                Is this a featured blog?
-              </span>
-              <input
-                type="checkbox"
-                name="isFeaturedPost"
-                className="ml-2 h-4 w-4 rounded-full border"
-                checked={formData.isFeaturedPost}
-                onChange={handleCheckboxChange}
-              />
-            </label>
-          </div>
-
           <button
             type="submit"
-            className="flex w-full items-center justify-center rounded-lg bg-black px-5 md:mx-1 py-3 text-base font-semibold text-white hover:bg-slate-800 dark:bg-dark-primary dark:text-dark-card dark:hover:bg-dark-secondary md:w-fit"
+            className="flex w-full items-center justify-center rounded-lg bg-light-primary px-12 py-3 text-base font-semibold text-light hover:bg-light-primary/80 dark:bg-dark-primary dark:text-dark-card dark:hover:bg-dark-secondary/80 md:mx-1 md:w-fit"
           >
             Post blog
           </button>

From 6efdfd1fbb3f1274f5476532191dc6d2930a141e Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Sat, 2 Dec 2023 02:11:54 +0530
Subject: [PATCH 17/24] feat: Introduce a `CategoryPill` component to replace
 `category-props`

- This aligns with the composition practice of react. We strive to make everything a component.
- Support dark mode. The dark mode will have darker versions of the light colors.
- Change from bg-*-100 to bg-*-200 to make the colors more prominent.
- Make the font medium, this will align more with the figma design.
- Remove utils/category-props.tsx
---
 frontend/src/components/blog-feed.tsx         |  9 +----
 frontend/src/components/category-pill.tsx     | 37 +++++++++++++++++++
 .../src/components/featured-post-card.tsx     |  6 +--
 frontend/src/components/latest-post-card.tsx  |  6 +--
 frontend/src/components/post-card.tsx         |  6 +--
 frontend/src/pages/add-blog.tsx               | 20 ++++------
 frontend/src/utils/category-props.tsx         | 25 -------------
 7 files changed, 52 insertions(+), 57 deletions(-)
 create mode 100644 frontend/src/components/category-pill.tsx
 delete mode 100644 frontend/src/utils/category-props.tsx

diff --git a/frontend/src/components/blog-feed.tsx b/frontend/src/components/blog-feed.tsx
index 8ff7f0e1..12331eb7 100644
--- a/frontend/src/components/blog-feed.tsx
+++ b/frontend/src/components/blog-feed.tsx
@@ -3,9 +3,9 @@ import { useEffect, useState } from 'react';
 import FeaturedPostCard from '@/components/featured-post-card';
 import LatestPostCard from '@/components/latest-post-card';
 import { CATEGORIES } from '@/constants/categories';
-import { categoryProps } from '@/utils/category-props';
 import { FeaturedPostCardSkeleton } from '@/components/skeletons/featured-post-card-skeleton';
 import { LatestPostCardSkeleton } from '@/components/skeletons/latest-post-card-skeleton';
+import CategoryPill from '@/components/category-pill';
 
 export default function BlogFeed() {
   const [selectedCategory, setSelectedCategory] = useState('featured');
@@ -70,13 +70,8 @@ export default function BlogFeed() {
                   onClick={() =>
                     setSelectedCategory(selectedCategory === category ? 'featured' : category)
                   }
-                  className={
-                    selectedCategory === category
-                      ? categoryProps(category, true)
-                      : categoryProps(category)
-                  }
                 >
-                  {category}
+                  <CategoryPill category={category} selected={selectedCategory === category} />
                 </button>
               ))}
             </div>
diff --git a/frontend/src/components/category-pill.tsx b/frontend/src/components/category-pill.tsx
new file mode 100644
index 00000000..52888492
--- /dev/null
+++ b/frontend/src/components/category-pill.tsx
@@ -0,0 +1,37 @@
+import { twMerge } from 'tailwind-merge';
+
+interface CategoryPillProps extends React.HTMLAttributes<HTMLSpanElement> {
+  category: string;
+  selected?: boolean;
+}
+
+export default function CategoryPill({ category, selected = false }: CategoryPillProps) {
+  const categoryColors: any = {
+    Travel: 'pink',
+    Nature: 'green',
+    City: 'yellow',
+    Adventure: 'blue',
+    Beaches: 'purple',
+    Landmarks: 'red',
+    Mountains: 'teal',
+  };
+
+  const selectedColor =
+    category in categoryColors ? `bg-${categoryColors[category]}-500/80` : 'bg-cyan-500/80';
+
+  const normalColor =
+    category in categoryColors
+      ? `bg-${categoryColors[category]}-200 dark:bg-${categoryColors[category]}-900`
+      : 'bg-cyan-200 dark:bg-cyan-900';
+
+  return (
+    <span
+      className={twMerge(
+        'cursor-pointer rounded-3xl px-3 py-1 text-xs font-medium text-light-primary/80 dark:text-dark-primary/80',
+        selected ? selectedColor : normalColor
+      )}
+    >
+      {category}
+    </span>
+  );
+}
diff --git a/frontend/src/components/featured-post-card.tsx b/frontend/src/components/featured-post-card.tsx
index 2c4987f0..5e988386 100644
--- a/frontend/src/components/featured-post-card.tsx
+++ b/frontend/src/components/featured-post-card.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 import Post from '@/types/post-type';
 import formatPostTime from '@/utils/format-post-time';
-import { categoryProps } from '@/utils/category-props';
+import CategoryPill from '@/components/category-pill';
 
 export default function FeaturedPostCard({ post }: { post: Post }) {
   const navigate = useNavigate();
@@ -21,9 +21,7 @@ export default function FeaturedPostCard({ post }: { post: Post }) {
         <div className="text-xl font-semibold text-light-title 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>
+            <CategoryPill key={`${category}-${index}`} category={category} />
           ))}
         </div>
         <div className="line-clamp-2">
diff --git a/frontend/src/components/latest-post-card.tsx b/frontend/src/components/latest-post-card.tsx
index 0d2209ab..86a99ff4 100644
--- a/frontend/src/components/latest-post-card.tsx
+++ b/frontend/src/components/latest-post-card.tsx
@@ -1,8 +1,8 @@
 import { useNavigate } from 'react-router-dom';
 import linkIcon from '@/assets/svg/link.svg';
 import Post from '@/types/post-type';
-import { categoryProps } from '@/utils/category-props';
 import formatPostTime from '@/utils/format-post-time';
+import CategoryPill from '@/components/category-pill';
 export default function LatestPostCard({ post }: { post: Post }) {
   const navigate = useNavigate();
   return (
@@ -13,9 +13,7 @@ export default function LatestPostCard({ post }: { post: Post }) {
       <div className="flex">
         <div className="mb-2 flex flex-1 flex-wrap gap-2">
           {post.categories.map((category, index) => (
-            <span key={index} className={categoryProps(category)}>
-              {category}
-            </span>
+            <CategoryPill key={`${category}-${index}`} category={category} />
           ))}
         </div>
         <img src={linkIcon} className="h-3 w-3" onClick={() => navigate(-1)} />
diff --git a/frontend/src/components/post-card.tsx b/frontend/src/components/post-card.tsx
index f4c53dcc..6141087a 100644
--- a/frontend/src/components/post-card.tsx
+++ b/frontend/src/components/post-card.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 import Post from '@/types/post-type';
 import formatPostTime from '@/utils/format-post-time';
-import { categoryProps } from '@/utils/category-props';
+import CategoryPill from '@/components/category-pill';
 
 export default function PostCard({ post }: { post: Post }) {
   const navigate = useNavigate();
@@ -28,9 +28,7 @@ export default function PostCard({ post }: { post: Post }) {
           </p>
           <div className="mt-4 flex flex-wrap gap-2">
             {post.categories.map((category, index) => (
-              <span key={index} className={categoryProps(category)}>
-                {category}
-              </span>
+              <CategoryPill key={`${category}-${index}`} category={category} />
             ))}
           </div>
         </div>
diff --git a/frontend/src/pages/add-blog.tsx b/frontend/src/pages/add-blog.tsx
index a4c22efe..66181756 100644
--- a/frontend/src/pages/add-blog.tsx
+++ b/frontend/src/pages/add-blog.tsx
@@ -6,8 +6,8 @@ import 'react-toastify/dist/ReactToastify.css';
 import navigateBackBlackIcon from '@/assets/svg/navigate-back-black.svg';
 import navigateBackWhiteIcon from '@/assets/svg/navigate-back-white.svg';
 import { CATEGORIES } from '@/constants/categories';
-import { categoryProps } from '@/utils/category-props';
 import ModalComponent from '@/components/modal';
+import CategoryPill from '@/components/category-pill';
 
 type FormData = {
   title: string;
@@ -235,18 +235,12 @@ function AddBlog() {
               Categories <Asterisk />
             </label>
             <div className="flex flex-wrap gap-3 rounded-lg p-2 dark:bg-dark-card dark:p-3">
-              {CATEGORIES.map((category) => (
-                <span
-                  key={category}
-                  className={`cursor-pointer
-									${
-                    formData.categories.includes(category)
-                      ? categoryProps(category, true)
-                      : categoryProps(category, false)
-                  }`}
-                  onClick={() => handleCategoryClick(category)}
-                >
-                  {category}
+              {CATEGORIES.map((category, index) => (
+                  <span key={`${category}-${index}`} onClick={() => handleCategoryClick(category)}>
+                    <CategoryPill
+                      category={category}
+                      selected={formData.categories.includes(category)}
+                    />
                 </span>
               ))}
             </div>
diff --git a/frontend/src/utils/category-props.tsx b/frontend/src/utils/category-props.tsx
deleted file mode 100644
index bc4d7272..00000000
--- a/frontend/src/utils/category-props.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-let commonProps: string = 'px-3 py-1 rounded-3xl font-normal text-sm';
-export const categoryProps = (category: string, selected: boolean = false) => {
-  switch (category) {
-    case 'Travel':
-      return `${commonProps} ${selected ? `bg-pink-500` : `bg-pink-100`}`;
-
-    case 'Nature':
-      return `${commonProps} ${selected ? `bg-green-500` : `bg-green-100`}`;
-
-    case 'City':
-      return `${commonProps} ${selected ? `bg-yellow-500` : `bg-yellow-100`}`;
-
-    case 'Adventure':
-      return `${commonProps} ${selected ? `bg-blue-500` : `bg-blue-100`}`;
-
-    case 'Beaches':
-      return `${commonProps} ${selected ? `bg-purple-500` : `bg-purple-100`}`;
-
-    case 'Landmarks':
-      return `${commonProps} ${selected ? `bg-red-500` : `bg-red-100`}`;
-
-    default:
-      return `${commonProps} ${selected ? `bg-orange-500` : `bg-orange-100`}`;
-  }
-};

From 89fb796b6cda1ba4a3f41fc60e3455c4402b2509 Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Sat, 2 Dec 2023 02:18:52 +0530
Subject: [PATCH 18/24] fix: Fix category pill colors
 https://tailwindcss.com/docs/content-configuration#dynamic-class-names

---
 frontend/src/components/category-pill.tsx | 29 ++++++++++++++---------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/category-pill.tsx b/frontend/src/components/category-pill.tsx
index 52888492..37551c38 100644
--- a/frontend/src/components/category-pill.tsx
+++ b/frontend/src/components/category-pill.tsx
@@ -7,22 +7,29 @@ interface CategoryPillProps extends React.HTMLAttributes<HTMLSpanElement> {
 
 export default function CategoryPill({ category, selected = false }: CategoryPillProps) {
   const categoryColors: any = {
-    Travel: 'pink',
-    Nature: 'green',
-    City: 'yellow',
-    Adventure: 'blue',
-    Beaches: 'purple',
-    Landmarks: 'red',
-    Mountains: 'teal',
+    Travel: 'bg-pink-200 dark:bg-pink-900',
+    Nature: 'bg-green-200 dark:bg-green-900',
+    City: 'bg-yellow-200 dark:bg-yellow-900',
+    Adventure: 'bg-blue-200 dark:bg-blue-900',
+    Beaches: 'bg-purple-200 dark:bg-purple-900',
+    Landmarks: 'bg-red-200 dark:bg-red-900',
+    Mountains: 'bg-teal-200 dark:bg-teal-900',
+  };
+  const categorySelectedColors: any = {
+    Travel: 'bg-pink-500/80',
+    Nature: 'bg-green-500/80',
+    City: 'bg-yellow-500/80',
+    Adventure: 'bg-blue-500/80',
+    Beaches: 'bg-purple-500/80',
+    Landmarks: 'bg-red-500/80',
+    Mountains: 'bg-teal-500/80',
   };
 
   const selectedColor =
-    category in categoryColors ? `bg-${categoryColors[category]}-500/80` : 'bg-cyan-500/80';
+    category in categorySelectedColors ? categorySelectedColors[category] : 'bg-cyan-500/80';
 
   const normalColor =
-    category in categoryColors
-      ? `bg-${categoryColors[category]}-200 dark:bg-${categoryColors[category]}-900`
-      : 'bg-cyan-200 dark:bg-cyan-900';
+    category in categoryColors ? categoryColors[category] : 'bg-cyan-200 dark:bg-cyan-900';
 
   return (
     <span

From 9f5a0d36b69982c57585fb2757c00da3ffcebcde Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Sat, 2 Dec 2023 02:51:37 +0530
Subject: [PATCH 19/24] chore: Run `prettier`

---
 frontend/components.json                      |  2 +-
 frontend/src/components/blog-feed.tsx         | 30 +++++++++++--------
 .../src/components/featured-post-card.tsx     |  8 +++--
 frontend/src/components/latest-post-card.tsx  |  4 ++-
 .../skeletons/featured-post-card-skeleton.tsx |  2 +-
 .../skeletons/latest-post-card-skeleton.tsx   |  2 +-
 .../skeletons/post-card-skeleton.tsx          |  2 +-
 frontend/src/lib/utils.ts                     |  8 ++---
 frontend/src/pages/add-blog.tsx               | 10 +++----
 frontend/tsconfig.json                        |  4 +--
 10 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/frontend/components.json b/frontend/components.json
index e24d4934..57039a23 100644
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -13,4 +13,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/blog-feed.tsx b/frontend/src/components/blog-feed.tsx
index 12331eb7..a3c8bfd8 100644
--- a/frontend/src/components/blog-feed.tsx
+++ b/frontend/src/components/blog-feed.tsx
@@ -43,7 +43,9 @@ export default function BlogFeed() {
     <div className="mx-auto my-6">
       <div className="-mx-4 flex flex-wrap">
         <div className="w-full p-4 md:w-2/3">
-          <div className="-mb-1 tracking-wide text-slate-500 dark:text-dark-tertiary">What's hot?</div>
+          <div className="-mb-1 tracking-wide text-slate-500 dark:text-dark-tertiary">
+            What's hot?
+          </div>
           <h1 className="mb-2 text-2xl font-semibold dark:text-dark-primary">
             {selectedCategory === 'featured'
               ? 'Featured Posts'
@@ -52,18 +54,20 @@ export default function BlogFeed() {
           <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="-mb-1 tracking-wide text-light-tertiary dark:text-dark-tertiary">Discover by topic</div>
+            <div className="-mb-1 tracking-wide text-light-tertiary 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">
+            <div className="flex flex-wrap gap-3 dark:rounded-lg dark:bg-dark-card dark:p-3">
               {CATEGORIES.map((category) => (
                 <button
                   key={category}
@@ -77,16 +81,18 @@ export default function BlogFeed() {
             </div>
           </div>
           <div>
-            <div className="-mb-1 tracking-wide text-slate-500 dark:text-dark-tertiary">What's new?</div>
+            <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>
diff --git a/frontend/src/components/featured-post-card.tsx b/frontend/src/components/featured-post-card.tsx
index 5e988386..c75f3c30 100644
--- a/frontend/src/components/featured-post-card.tsx
+++ b/frontend/src/components/featured-post-card.tsx
@@ -18,14 +18,18 @@ export default function FeaturedPostCard({ post }: { post: Post }) {
         />
       </div>
       <div className="flex h-full w-2/3 flex-col gap-2 p-2">
-        <div className="text-xl font-semibold text-light-title dark:text-dark-title">{post.title}</div>
+        <div className="text-xl font-semibold text-light-title dark:text-dark-title">
+          {post.title}
+        </div>
         <div className="flex flex-wrap gap-2">
           {post.categories.map((category, index) => (
             <CategoryPill key={`${category}-${index}`} category={category} />
           ))}
         </div>
         <div className="line-clamp-2">
-          <p className="overflow-ellipsis text-light-description dark:text-dark-description">{post.description}</p>
+          <p className="overflow-ellipsis text-light-description dark:text-dark-description">
+            {post.description}
+          </p>
         </div>
         <div className="flex flex-1 items-end text-xs text-light-info dark:text-dark-info">
           {post.authorName} • {formatPostTime(post.timeOfPost)}
diff --git a/frontend/src/components/latest-post-card.tsx b/frontend/src/components/latest-post-card.tsx
index 86a99ff4..e6b0dc3c 100644
--- a/frontend/src/components/latest-post-card.tsx
+++ b/frontend/src/components/latest-post-card.tsx
@@ -18,7 +18,9 @@ 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 font-semibold text-light-title dark:text-dark-title">{post.title}</div>
+      <div className="mb-2 line-clamp-2 font-semibold text-light-title dark:text-dark-title">
+        {post.title}
+      </div>
       <div className="text-xs text-light-info dark:text-dark-info">
         {post.authorName} • {formatPostTime(post.timeOfPost)}
       </div>
diff --git a/frontend/src/components/skeletons/featured-post-card-skeleton.tsx b/frontend/src/components/skeletons/featured-post-card-skeleton.tsx
index b859ccf8..bfd177e0 100644
--- a/frontend/src/components/skeletons/featured-post-card-skeleton.tsx
+++ b/frontend/src/components/skeletons/featured-post-card-skeleton.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 export const FeaturedPostCardSkeleton = () => {
   return (
-    <div className="bg-light flex rounded-lg dark:bg-dark-card">
+    <div className="flex rounded-lg bg-light dark:bg-dark-card">
       {/* for image */}
       <div className="w-1/3">
         <Skeleton className="h-full w-full rounded-lg bg-slate-200 dark:bg-slate-700" />
diff --git a/frontend/src/components/skeletons/latest-post-card-skeleton.tsx b/frontend/src/components/skeletons/latest-post-card-skeleton.tsx
index 1ac8b206..bc7fba6d 100644
--- a/frontend/src/components/skeletons/latest-post-card-skeleton.tsx
+++ b/frontend/src/components/skeletons/latest-post-card-skeleton.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 export const LatestPostCardSkeleton = () => {
   return (
-    <div className="bg-light rounded-lg p-3 dark:bg-dark-card">
+    <div className="rounded-lg bg-light p-3 dark:bg-dark-card">
       <div className="flex">
         <div className="mb-2 flex flex-1 flex-wrap gap-2">
           {Array(3)
diff --git a/frontend/src/components/skeletons/post-card-skeleton.tsx b/frontend/src/components/skeletons/post-card-skeleton.tsx
index b3c0c479..d6cbc1bd 100644
--- a/frontend/src/components/skeletons/post-card-skeleton.tsx
+++ b/frontend/src/components/skeletons/post-card-skeleton.tsx
@@ -3,7 +3,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 export const PostCardSkeleton = () => {
   return (
     <div className="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
-      <div className="bg-light m-4 rounded-lg shadow-md dark:bg-dark-card">
+      <div className="m-4 rounded-lg bg-light shadow-md dark:bg-dark-card">
         <Skeleton className="h-48 w-full rounded-lg bg-slate-200 dark:bg-slate-700" />
         <div className="p-4">
           <Skeleton className="mb-2 h-3 w-2/3 bg-slate-200 dark:bg-slate-700" />
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index ec79801f..9ad0df42 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
- 
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
diff --git a/frontend/src/pages/add-blog.tsx b/frontend/src/pages/add-blog.tsx
index 66181756..50ec42e6 100644
--- a/frontend/src/pages/add-blog.tsx
+++ b/frontend/src/pages/add-blog.tsx
@@ -236,11 +236,11 @@ function AddBlog() {
             </label>
             <div className="flex flex-wrap gap-3 rounded-lg p-2 dark:bg-dark-card dark:p-3">
               {CATEGORIES.map((category, index) => (
-                  <span key={`${category}-${index}`} onClick={() => handleCategoryClick(category)}>
-                    <CategoryPill
-                      category={category}
-                      selected={formData.categories.includes(category)}
-                    />
+                <span key={`${category}-${index}`} onClick={() => handleCategoryClick(category)}>
+                  <CategoryPill
+                    category={category}
+                    selected={formData.categories.includes(category)}
+                  />
                 </span>
               ))}
             </div>
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 52dd6bf6..a527a08a 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -2,9 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     },
     "target": "ES2020",
     "useDefineForClassFields": true,

From 2fe4e5f1c78618e38452f950ddd414cba4123a2c Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Sat, 2 Dec 2023 17:21:40 +0530
Subject: [PATCH 20/24] styles: Fix `DetailsPage` styling according to themes

---
 frontend/src/pages/details-page.tsx | 56 ++++++++++++++---------------
 1 file changed, 26 insertions(+), 30 deletions(-)

diff --git a/frontend/src/pages/details-page.tsx b/frontend/src/pages/details-page.tsx
index b9d98edf..c65e74e2 100644
--- a/frontend/src/pages/details-page.tsx
+++ b/frontend/src/pages/details-page.tsx
@@ -2,44 +2,40 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import navigateBackWhiteIcon from '@/assets/svg/navigate-back-white.svg';
 import Post from '@/types/post-type';
 import formatPostTime from '@/utils/format-post-time';
+import CategoryPill from '@/components/category-pill';
 
-const DetailsPage = () => {
+export default function DetailsPage() {
   const { state } = useLocation();
   const post: Post = state?.post;
   const navigate = useNavigate();
   return (
-    <div className="min-h-screen dark:bg-dark">
-      <div className="min-h-min w-full dark:bg-dark">
-        <div className="relative flex flex-col">
-          <img src={post.imageLink} alt={post.title} className="h-80 w-full object-cover md:h-96" />
-
-          <div className="absolute left-0 top-0 h-full w-full bg-black opacity-50"></div>
-          <div className="absolute top-16 w-full cursor-pointer justify-start px-4 text-lg text-white md:top-24 md:px-8 md:text-xl lg:px-16 lg:text-2xl">
-            <img src={navigateBackWhiteIcon} className="h-5 w-10" onClick={() => navigate(-1)} />
-          </div>
-          <div className="absolute bottom-4 w-full px-4 text-white md:bottom-8 md:px-8 lg:bottom-16 lg:px-16">
-            <div className="mb-6 flex space-x-2">
-              {post.categories.map((category, index) => (
-                <div key={index} className="rounded-full bg-slate-500 px-3 py-1 text-sm text-white">
-                  {category}
-                </div>
-              ))}
-            </div>
-            <h1 className="text-lg font-semibold md:text-2xl lg:text-4xl">{post.title}</h1>
-          </div>
+    <div className="min-h-screen bg-light dark:bg-dark">
+      <div className="relative flex flex-col">
+        <img src={post.imageLink} alt={post.title} className="h-80 w-full object-cover md:h-96" />
+        <div className="absolute left-0 top-0 h-full w-full bg-slate-950/60"></div>
+        <div className="absolute top-12 w-full cursor-pointer justify-start px-4 text-lg text-slate-50 md:top-20 md:px-8 md:text-xl lg:px-12 lg:text-2xl">
+          <img src={navigateBackWhiteIcon} className="h-5 w-10" onClick={() => navigate(-1)} />
         </div>
-        <div className="flex w-full flex-col gap-y-4 px-4 pt-4 text-left dark:text-slate-50 md:px-8 md:pt-8 lg:px-16 lg:pt-16">
-          <div>
-            <p className="text-slate-700 dark:text-slate-50">{post.description}</p>
-          </div>
-          <div className="">
-            <p className="font-semibold text-slate-600 dark:text-slate-50">By {post.authorName}</p>
-            <p className="text-sm">{formatPostTime(post.timeOfPost)}</p>
+        <div className="absolute bottom-6 w-full max-w-xl px-4 text-slate-50 md:bottom-8 md:max-w-3xl md:px-8 lg:bottom-12 lg:max-w-5xl lg:px-12">
+          <div className="mb-4 flex space-x-2">
+            {post.categories.map((category) => (
+              <CategoryPill category={category} />
+            ))}
           </div>
+          <h1 className="mb-4 text-xl font-semibold md:text-2xl lg:text-3xl">{post.title}</h1>
+          <p className="text-xs font-semibold text-dark-secondary md:text-sm">{post.authorName}</p>
+          <p className="text-xs text-dark-secondary/80 md:text-sm">
+            {formatPostTime(post.timeOfPost)}
+          </p>
+        </div>
+      </div>
+      <div className="mx-auto flex max-w-4xl flex-col items-center gap-y-4 px-8 py-10">
+        <div>
+          <p className="leading-7 text-light-secondary dark:text-dark-secondary md:text-lg">
+            {post.description}
+          </p>
         </div>
       </div>
     </div>
   );
-};
-
-export default DetailsPage;
+}

From a22734691fda6d0e9aa8b53d376d4910942559a9 Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Sun, 3 Dec 2023 00:58:03 +0530
Subject: [PATCH 21/24] style: Make add blog page mobile responsive; Move
 header along the form;

---
 frontend/src/pages/add-blog.tsx | 38 ++++++++++++++++-----------------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/frontend/src/pages/add-blog.tsx b/frontend/src/pages/add-blog.tsx
index 50ec42e6..a0d55f6a 100644
--- a/frontend/src/pages/add-blog.tsx
+++ b/frontend/src/pages/add-blog.tsx
@@ -127,21 +127,21 @@ function AddBlog() {
   }
 
   return (
-    <div className="min-h-screen cursor-default bg-slate-50 px-16 py-8 dark:bg-dark">
+    <div className="min-h-screen cursor-default bg-slate-50 px-6 py-8 dark:bg-dark">
       <div className="mb-4 flex items-center justify-start">
-        <div className="w-fit cursor-pointer text-base md:text-lg lg:text-2xl">
+        <div className="w-fit cursor-pointer">
           <img
             src={isDarkMode ? navigateBackWhiteIcon : navigateBackBlackIcon}
             onClick={() => navigate(-1)}
             className="h-5 w-10"
           />
         </div>
-        <h2 className="ml-4 text-sm font-bold dark:text-dark-primary md:text-lg lg:text-2xl">
-          Create Blog
-        </h2>
       </div>
       <div className="flex justify-center">
-        <form onSubmit={handleSubmit} className="md:w-2/3">
+        <form onSubmit={handleSubmit} className="md:w-5/6 lg:w-2/3">
+          <h2 className="mb-4 ml-2 text-lg font-semibold text-light-primary dark:text-dark-primary md:mb-6 md:text-xl lg:mb-8 lg:text-2xl">
+            Create Blog
+          </h2>
           <div className="mb-2 flex items-center">
             <label className="flex items-center">
               <span className="px-2 text-base font-medium text-light-secondary dark:text-dark-secondary">
@@ -207,22 +207,20 @@ function AddBlog() {
             </span>
             <Asterisk />
           </div>
-          <div className="mb-4 flex justify-between gap-4">
-            <div className="w-10/12">
-              <input
-                type="url"
-                id="imagelink"
-                name="imageLink"
-                placeholder="https://&hellip;"
-                autoComplete="off"
-                className="w-full rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
-                value={formData.imageLink}
-                onChange={handleInputChange}
-              />
-            </div>
+          <div className="mb-4 flex justify-between gap-2 md:gap-4">
+            <input
+              type="url"
+              id="imagelink"
+              name="imageLink"
+              placeholder="https://&hellip;"
+              autoComplete="off"
+              className="w-3/4 rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary lg:w-10/12"
+              value={formData.imageLink}
+              onChange={handleInputChange}
+            />
             <button
               type="button"
-              className="w-2/12 rounded-lg bg-light-primary px-4 py-3 text-slate-50 hover:bg-light-primary/80 dark:bg-dark-primary dark:text-dark-card dark:hover:bg-dark-secondary/80"
+              className="lg:text-md w-1/4 rounded-lg bg-light-primary text-xs text-slate-50 hover:bg-light-primary/80 dark:bg-dark-primary dark:text-dark-card dark:hover:bg-dark-secondary/80 md:text-sm lg:w-2/12 lg:px-4 lg:py-3"
               onClick={() => {
                 setmodal(true);
               }}

From 758448d43e424d33ca707062b8aee0cef00f6e7a Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Sun, 3 Dec 2023 01:00:24 +0530
Subject: [PATCH 22/24] refactor: `normalColor` -> `defaultColor`

---
 frontend/src/components/category-pill.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/category-pill.tsx b/frontend/src/components/category-pill.tsx
index 37551c38..8f6e1e6a 100644
--- a/frontend/src/components/category-pill.tsx
+++ b/frontend/src/components/category-pill.tsx
@@ -6,7 +6,7 @@ interface CategoryPillProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 
 export default function CategoryPill({ category, selected = false }: CategoryPillProps) {
-  const categoryColors: any = {
+  const categoryDefaultColors: any = {
     Travel: 'bg-pink-200 dark:bg-pink-900',
     Nature: 'bg-green-200 dark:bg-green-900',
     City: 'bg-yellow-200 dark:bg-yellow-900',
@@ -28,14 +28,14 @@ export default function CategoryPill({ category, selected = false }: CategoryPil
   const selectedColor =
     category in categorySelectedColors ? categorySelectedColors[category] : 'bg-cyan-500/80';
 
-  const normalColor =
-    category in categoryColors ? categoryColors[category] : 'bg-cyan-200 dark:bg-cyan-900';
+  const defaultColor =
+    category in categoryDefaultColors ? categoryDefaultColors[category] : 'bg-cyan-200 dark:bg-cyan-900';
 
   return (
     <span
       className={twMerge(
         'cursor-pointer rounded-3xl px-3 py-1 text-xs font-medium text-light-primary/80 dark:text-dark-primary/80',
-        selected ? selectedColor : normalColor
+        selected ? selectedColor : defaultColor
       )}
     >
       {category}

From 56c7b8f9de82bc7ff463889d08e97c217933b00a Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Mon, 4 Dec 2023 22:29:06 +0530
Subject: [PATCH 23/24] refactor: Add a util to get categories and their
 respective colors

- This way we make sure we have a single source of truth for all categories and their colors.

- const `categories` replaces the constants file CATEGORIES.

- I have renamed it to lower case to make it uniform with the rest of the codebase,
even if the best practices says to use uppercase for all constatnts.
---
 frontend/src/components/blog-feed.tsx     |  4 ++--
 frontend/src/components/category-pill.tsx | 26 ++---------------------
 frontend/src/constants/categories.ts      |  9 --------
 frontend/src/pages/add-blog.tsx           |  4 ++--
 frontend/src/utils/category-colors.ts     | 17 +++++++++++++++
 5 files changed, 23 insertions(+), 37 deletions(-)
 delete mode 100644 frontend/src/constants/categories.ts
 create mode 100644 frontend/src/utils/category-colors.ts

diff --git a/frontend/src/components/blog-feed.tsx b/frontend/src/components/blog-feed.tsx
index a3c8bfd8..6bf45131 100644
--- a/frontend/src/components/blog-feed.tsx
+++ b/frontend/src/components/blog-feed.tsx
@@ -2,10 +2,10 @@ import axios from 'axios';
 import { useEffect, useState } from 'react';
 import FeaturedPostCard from '@/components/featured-post-card';
 import LatestPostCard from '@/components/latest-post-card';
-import { CATEGORIES } from '@/constants/categories';
 import { FeaturedPostCardSkeleton } from '@/components/skeletons/featured-post-card-skeleton';
 import { LatestPostCardSkeleton } from '@/components/skeletons/latest-post-card-skeleton';
 import CategoryPill from '@/components/category-pill';
+import { categories } from '@/utils/category-colors';
 
 export default function BlogFeed() {
   const [selectedCategory, setSelectedCategory] = useState('featured');
@@ -68,7 +68,7 @@ export default function BlogFeed() {
             </div>
             <h2 className="mb-2 text-2xl font-semibold dark:text-dark-primary">Categories</h2>
             <div className="flex flex-wrap gap-3 dark:rounded-lg dark:bg-dark-card dark:p-3">
-              {CATEGORIES.map((category) => (
+              {categories.map((category) => (
                 <button
                   key={category}
                   onClick={() =>
diff --git a/frontend/src/components/category-pill.tsx b/frontend/src/components/category-pill.tsx
index 8f6e1e6a..69ab7af7 100644
--- a/frontend/src/components/category-pill.tsx
+++ b/frontend/src/components/category-pill.tsx
@@ -1,3 +1,4 @@
+import { getCategoryColors } from '@/utils/category-colors';
 import { twMerge } from 'tailwind-merge';
 
 interface CategoryPillProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -6,30 +7,7 @@ interface CategoryPillProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 
 export default function CategoryPill({ category, selected = false }: CategoryPillProps) {
-  const categoryDefaultColors: any = {
-    Travel: 'bg-pink-200 dark:bg-pink-900',
-    Nature: 'bg-green-200 dark:bg-green-900',
-    City: 'bg-yellow-200 dark:bg-yellow-900',
-    Adventure: 'bg-blue-200 dark:bg-blue-900',
-    Beaches: 'bg-purple-200 dark:bg-purple-900',
-    Landmarks: 'bg-red-200 dark:bg-red-900',
-    Mountains: 'bg-teal-200 dark:bg-teal-900',
-  };
-  const categorySelectedColors: any = {
-    Travel: 'bg-pink-500/80',
-    Nature: 'bg-green-500/80',
-    City: 'bg-yellow-500/80',
-    Adventure: 'bg-blue-500/80',
-    Beaches: 'bg-purple-500/80',
-    Landmarks: 'bg-red-500/80',
-    Mountains: 'bg-teal-500/80',
-  };
-
-  const selectedColor =
-    category in categorySelectedColors ? categorySelectedColors[category] : 'bg-cyan-500/80';
-
-  const defaultColor =
-    category in categoryDefaultColors ? categoryDefaultColors[category] : 'bg-cyan-200 dark:bg-cyan-900';
+  const [defaultColor, selectedColor]: [string, string] = getCategoryColors(category);
 
   return (
     <span
diff --git a/frontend/src/constants/categories.ts b/frontend/src/constants/categories.ts
deleted file mode 100644
index 2031888b..00000000
--- a/frontend/src/constants/categories.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const CATEGORIES: string[] = [
-  'Travel',
-  'Nature',
-  'City',
-  'Adventure',
-  'Beaches',
-  'Landmarks',
-  'Mountains',
-];
diff --git a/frontend/src/pages/add-blog.tsx b/frontend/src/pages/add-blog.tsx
index a0d55f6a..fff713ff 100644
--- a/frontend/src/pages/add-blog.tsx
+++ b/frontend/src/pages/add-blog.tsx
@@ -5,9 +5,9 @@ import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import navigateBackBlackIcon from '@/assets/svg/navigate-back-black.svg';
 import navigateBackWhiteIcon from '@/assets/svg/navigate-back-white.svg';
-import { CATEGORIES } from '@/constants/categories';
 import ModalComponent from '@/components/modal';
 import CategoryPill from '@/components/category-pill';
+import { categories } from '@/utils/category-colors';
 
 type FormData = {
   title: string;
@@ -233,7 +233,7 @@ function AddBlog() {
               Categories <Asterisk />
             </label>
             <div className="flex flex-wrap gap-3 rounded-lg p-2 dark:bg-dark-card dark:p-3">
-              {CATEGORIES.map((category, index) => (
+              {categories.map((category, index) => (
                 <span key={`${category}-${index}`} onClick={() => handleCategoryClick(category)}>
                   <CategoryPill
                     category={category}
diff --git a/frontend/src/utils/category-colors.ts b/frontend/src/utils/category-colors.ts
new file mode 100644
index 00000000..92fda076
--- /dev/null
+++ b/frontend/src/utils/category-colors.ts
@@ -0,0 +1,17 @@
+type CategoryColors = Map<string, [string, string]>;
+
+const categoryColors: CategoryColors = new Map([
+  ['Travel', ['bg-pink-200 dark:bg-pink-900', 'bg-pink-500/80']],
+  ['Nature', ['bg-green-200 dark:bg-green-900', 'bg-green-500/80']],
+  ['City', ['bg-yellow-200 dark:bg-yellow-900', 'bg-yellow-500/80']],
+  ['Adventure', ['bg-blue-200 dark:bg-blue-900', 'bg-blue-500/80']],
+  ['Beaches', ['bg-purple-200 dark:bg-purple-900', 'bg-purple-500/80']],
+  ['Landmarks', ['bg-red-200 dark:bg-red-900', 'bg-red-500/80']],
+]);
+
+export const categories: string[] = Array.from(categoryColors.keys());
+
+export function getCategoryColors(category: string): [string, string] {
+  const colorTuple: [string, string] | undefined = categoryColors.get(category);
+  return colorTuple ?? ['bg-cyan-200 dark:bg-cyan-900', 'bg-cyan-500/80'];
+}

From 28ac0780825a5d91caf185b08d570b5fb072d2a7 Mon Sep 17 00:00:00 2001
From: Chinmay Kunkikar <chinmay.kunkikar@gmail.com>
Date: Tue, 5 Dec 2023 01:19:58 +0530
Subject: [PATCH 24/24] styles: Fix navigation button alignments on blog and
 details pages

---
 frontend/src/pages/add-blog.tsx     | 24 +++++++++++++-----------
 frontend/src/pages/details-page.tsx |  2 +-
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/add-blog.tsx b/frontend/src/pages/add-blog.tsx
index fff713ff..882c943f 100644
--- a/frontend/src/pages/add-blog.tsx
+++ b/frontend/src/pages/add-blog.tsx
@@ -128,20 +128,22 @@ function AddBlog() {
 
   return (
     <div className="min-h-screen cursor-default bg-slate-50 px-6 py-8 dark:bg-dark">
-      <div className="mb-4 flex items-center justify-start">
-        <div className="w-fit cursor-pointer">
-          <img
-            src={isDarkMode ? navigateBackWhiteIcon : navigateBackBlackIcon}
-            onClick={() => navigate(-1)}
-            className="h-5 w-10"
-          />
+      <div className="mb-4 flex justify-center">
+        <div className="w-[32rem] md:w-5/6 lg:w-4/6 flex items-center justify-start space-x-4 ">
+          <div className="w-fit cursor-pointer">
+            <img
+              src={isDarkMode ? navigateBackWhiteIcon : navigateBackBlackIcon}
+              onClick={() => navigate(-1)}
+              className="h-5 w-10"
+            />
+          </div>
+          <h2 className="text-lg font-semibold text-light-primary dark:text-dark-primary md:text-xl lg:text-2xl">
+            Create Blog
+          </h2>
         </div>
       </div>
-      <div className="flex justify-center">
+      <div className="flex justify-center ">
         <form onSubmit={handleSubmit} className="md:w-5/6 lg:w-2/3">
-          <h2 className="mb-4 ml-2 text-lg font-semibold text-light-primary dark:text-dark-primary md:mb-6 md:text-xl lg:mb-8 lg:text-2xl">
-            Create Blog
-          </h2>
           <div className="mb-2 flex items-center">
             <label className="flex items-center">
               <span className="px-2 text-base font-medium text-light-secondary dark:text-dark-secondary">
diff --git a/frontend/src/pages/details-page.tsx b/frontend/src/pages/details-page.tsx
index c65e74e2..42a81f66 100644
--- a/frontend/src/pages/details-page.tsx
+++ b/frontend/src/pages/details-page.tsx
@@ -13,7 +13,7 @@ export default function DetailsPage() {
       <div className="relative flex flex-col">
         <img src={post.imageLink} alt={post.title} className="h-80 w-full object-cover md:h-96" />
         <div className="absolute left-0 top-0 h-full w-full bg-slate-950/60"></div>
-        <div className="absolute top-12 w-full cursor-pointer justify-start px-4 text-lg text-slate-50 md:top-20 md:px-8 md:text-xl lg:px-12 lg:text-2xl">
+        <div className="absolute top-12 w-full px-2 cursor-pointer justify-start text-lg text-slate-50 md:top-20 md:px-8 md:text-xl lg:px-12 lg:text-2xl">
           <img src={navigateBackWhiteIcon} className="h-5 w-10" onClick={() => navigate(-1)} />
         </div>
         <div className="absolute bottom-6 w-full max-w-xl px-4 text-slate-50 md:bottom-8 md:max-w-3xl md:px-8 lg:bottom-12 lg:max-w-5xl lg:px-12">