fix: blog colors (#7303)

Author: alicanerdurmaz

documentation/src/components/blog/category-nav-bar/index.tsx

@@ -190,9 +190,10 @@ function CategoryNavBarSelect({
                 "font-medium",
                 isAllPostsActive &&
                   "text-zinc-900 bg-zinc-200 dark:bg-zinc-800 dark:text-white",
+                isAllPostsActive && "hover:text-zinc-900 dark:hover:text-white",
                 !isAllPostsActive && "text-zinc-500 dark:text-zinc-400",
                 !isAllPostsActive &&
-                  "hover:text-zinc-200 dark:hover:text-zinc-300",
+                  "hover:text-zinc-700 dark:hover:text-zinc-300",
                 !isAllPostsActive &&
                   "hover:bg-zinc-200/80 dark:hover:bg-zinc-800/80",
                 "transition-colors",
@@ -226,8 +227,9 @@ function CategoryNavBarSelect({
                     "font-medium",
                     isActive &&
                       "text-zinc-900 bg-zinc-200 dark:bg-zinc-800 dark:text-white",
+                    isActive && "hover:text-zinc-900 dark:hover:text-white",
                     !isActive && "text-zinc-500 dark:text-zinc-400",
-                    !isActive && "hover:text-zinc-200 dark:hover:text-zinc-300",
+                    !isActive && "hover:text-zinc-700 dark:hover:text-zinc-300",
                     !isActive &&
                       "hover:bg-zinc-200/80 dark:hover:bg-zinc-800/80",
                     "transition-colors",
@@ -291,7 +293,15 @@ function CategoryNavBarDesktop({
               "font-medium",
               isAllPostsActive &&
                 "text-zinc-900 bg-zinc-200 dark:bg-zinc-800 dark:text-white",
-              !isAllPostsActive && "text-zinc-400 hover:text-zinc-200",
+              isAllPostsActive && "hover:text-zinc-900 dark:hover:text-white",
+              !isAllPostsActive && "text-zinc-500 dark:text-zinc-400",
+              !isAllPostsActive &&
+                "hover:text-zinc-700 dark:hover:text-zinc-300",
+              !isAllPostsActive &&
+                "hover:bg-zinc-200/80 dark:hover:bg-zinc-800/80",
+              "transition-colors",
+              "duration-200",
+              "ease-in-out",
             )}
           >
             {allLabel}
@@ -316,8 +326,9 @@ function CategoryNavBarDesktop({
                   "font-medium",
                   isActive &&
                     "text-zinc-900 bg-zinc-200 dark:bg-zinc-800 dark:text-white",
+                  isActive && "hover:text-zinc-900 dark:hover:text-white",
                   !isActive && "text-zinc-500 dark:text-zinc-400",
-                  !isActive && "hover:text-zinc-200 dark:hover:text-zinc-300",
+                  !isActive && "hover:text-zinc-700 dark:hover:text-zinc-300",
                   !isActive && "hover:bg-zinc-200/80 dark:hover:bg-zinc-800/80",
                   "transition-colors",
                   "duration-200",

documentation/src/components/blog/post-paginator/index.js

@@ -67,8 +67,8 @@ export const PostPaginator = ({ posts, title }) => {
                     "hover:no-underline",
                     "transition-colors",
                     "duration-200",
-                    "hover:bg-zinc-100/80",
-                    "dark:hover:bg-zinc-800/60",
+                    "hover:bg-white/50",
+                    "dark:hover:bg-[#09090B80]",
                   )}
                 >
                   <div

documentation/src/refine-theme/blog-footer.tsx

@@ -14,7 +14,7 @@ export const BlogFooter = () => {
         "border-t",
         "py-4",
         "border-zinc-200",
-        "bg-zinc-50",
+        "bg-white",
         "dark:border-zinc-800",
         "dark:bg-zinc-900",
         "blog-md:h-16",

documentation/src/refine-theme/blog-layout.tsx

@@ -15,7 +15,12 @@ export const RefineBlogLayout = (props: Props) => {
   return (
     <CommonLayout
       {...layoutProps}
-      className={clsx("relative", "bg-zinc-50", "dark:bg-zinc-900")}
+      className={clsx(
+        "relative",
+        toc && "bg-zinc-50",
+        !toc && "bg-zinc-100",
+        "dark:bg-zinc-900",
+      )}
     >
       <BlogHeader trackProgress={Boolean(toc)} />
       {props.showHero && <BlogHero />}

documentation/src/theme/BlogPostItems/components/blog-post-list-item.tsx

@@ -37,7 +37,7 @@ export function BlogPostListItem() {
           "py-5",
           "no-underline",
           "hover:no-underline",
-          "hover:bg-[#FFFFFF80]",
+          "hover:bg-white/50",
           "dark:hover:bg-[#09090B80]",
           "transition-colors",
           "duration-200",
@@ -72,6 +72,7 @@ export function BlogPostListItem() {
             "truncate",
             "group-hover:text-zinc-600",
             "dark:group-hover:text-zinc-300",
+            "text-right",
           )}
         >
           {category.label}
@@ -88,6 +89,7 @@ export function BlogPostListItem() {
             "uppercase",
             "group-hover:text-zinc-600",
             "dark:group-hover:text-zinc-300",
+            "text-right",
           )}
         >
           <DateComponent date={date} formattedDate={formattedDate} />