From 470abc02ebabd581f812f8820d9430c18575a6c2 Mon Sep 17 00:00:00 2001
From: Nitesh Seram <niteshseram@gmail.com>
Date: Fri, 15 Nov 2024 16:32:48 +0530
Subject: [PATCH] [web] interviews/guides: fix playbook ui issues (#984)

---
 apps/web/src/components/guides/cover/GuidesList.tsx  |  6 +++---
 .../guides/cover/GuidesListWithCategory.tsx          |  7 +++++--
 apps/web/src/components/ui/Heading/HeadingStyles.tsx | 12 +++++++++---
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/guides/cover/GuidesList.tsx b/apps/web/src/components/guides/cover/GuidesList.tsx
index d5b08c593..a50750d02 100644
--- a/apps/web/src/components/guides/cover/GuidesList.tsx
+++ b/apps/web/src/components/guides/cover/GuidesList.tsx
@@ -43,7 +43,7 @@ export default function GuidesList<Q extends GuideCardMetadata>({
               'relative isolate',
               'flex flex-grow items-center gap-6',
               'rounded-lg',
-              'px-6 py-5',
+              'px-6 py-4',
               themeBackgroundCardWhiteOnLightColor,
               ['border', themeBorderElementColor],
             )}>
@@ -55,8 +55,8 @@ export default function GuidesList<Q extends GuideCardMetadata>({
               onMarkAsCompleted={onMarkAsCompleted}
               onMarkAsNotCompleted={onMarkAsNotCompleted}
             />
-            <div className="flex flex-1 flex-col items-start gap-1">
-              <Text size="body2" weight="bold">
+            <div className="flex flex-1 flex-col items-start gap-2">
+              <Text size="body1" weight="bold">
                 {guide.title}
               </Text>
               <Text color="secondary" size="body2">
diff --git a/apps/web/src/components/guides/cover/GuidesListWithCategory.tsx b/apps/web/src/components/guides/cover/GuidesListWithCategory.tsx
index 318b9bb33..65d6c9c24 100644
--- a/apps/web/src/components/guides/cover/GuidesListWithCategory.tsx
+++ b/apps/web/src/components/guides/cover/GuidesListWithCategory.tsx
@@ -8,6 +8,7 @@ import type {
 } from '~/components/guides/types';
 import { useIntl } from '~/components/intl';
 import Heading from '~/components/ui/Heading';
+import { themeTextColor } from '~/components/ui/theme';
 
 import {
   useMutationGuideProgressAdd,
@@ -137,10 +138,12 @@ export default function GuidesListWithCategory({ guides }: Props) {
 
   return (
     <div className={clsx('grid lg:grid-cols-12')}>
-      <div className={clsx('flex flex-col gap-12', 'lg:col-span-10')}>
+      <div className={clsx('flex flex-col gap-12', 'lg:col-span-9')}>
         {guides.map(({ title, totalReadingTime, articles }, index) => (
           <div key={title}>
-            <Heading level="heading6">{title}</Heading>
+            <Heading className={themeTextColor} color="custom" level="heading6">
+              {title}
+            </Heading>
             <div className="mb-4 mt-6 flex items-center gap-10">
               <GuidesCountLabel count={articles.length} />
               <GuideReadingTimeLabel readingTime={totalReadingTime} />
diff --git a/apps/web/src/components/ui/Heading/HeadingStyles.tsx b/apps/web/src/components/ui/Heading/HeadingStyles.tsx
index a699a145a..a61f549cf 100644
--- a/apps/web/src/components/ui/Heading/HeadingStyles.tsx
+++ b/apps/web/src/components/ui/Heading/HeadingStyles.tsx
@@ -1,6 +1,12 @@
 import { cva } from 'class-variance-authority';
 import clsx from 'clsx';
 
+import {
+  themeTextColor,
+  themeTextDarkColor,
+  themeTextLightColor,
+} from '~/components/ui/theme';
+
 export type HeadingLevel =
   | 'custom'
   | 'heading1'
@@ -26,10 +32,10 @@ const headingLevelClasses: Record<HeadingLevel, string> = {
 };
 
 const headingColorClasses: Record<HeadingColor, string> = {
-  auto: 'text-neutral-900 dark:text-white',
+  auto: themeTextColor,
   custom: '',
-  dark: 'text-neutral-900',
-  light: 'text-white',
+  dark: themeTextDarkColor,
+  light: themeTextLightColor,
 };
 
 const headingWeightClasses: Record<HeadingWeight, string> = {