Update labels font

DragVerse · Mar 23, 2024 · 7fb0ceb · 7fb0ceb
1 parent b8be969
commit 7fb0ceb
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/apps/web/src/components/Common/CategoryFilters.tsx b/apps/web/src/components/Common/CategoryFilters.tsx
@@ -9,6 +9,7 @@ import HorizontalScroller from './HorizontalScroller'
 
 type Props = {
   heading?: string
+  headingClassName?: string; 
 }
 
 const CategoryFilters: FC<Props> = ({ heading }) => {
@@ -25,6 +26,7 @@ const CategoryFilters: FC<Props> = ({ heading }) => {
       <HorizontalScroller
         sectionRef={sectionRef}
         heading={heading ?? 'Explore The Garden🌱'}
+        headingClassName="font-syne font-extrabold"
       />
       <div
         ref={sectionRef}

diff --git a/apps/web/src/components/Common/HorizontalScroller.tsx b/apps/web/src/components/Common/HorizontalScroller.tsx
@@ -3,10 +3,11 @@ import type { FC, RefObject } from 'react'
 
 type Props = {
   heading: string
+  headingClassName?: string;
   sectionRef: RefObject<HTMLDivElement>
 }
 
-const HorizontalScroller: FC<Props> = ({ heading, sectionRef }) => {
+const HorizontalScroller: FC<Props> = ({ heading, sectionRef, headingClassName }) => {
   const sectionOffsetWidth = sectionRef.current?.offsetWidth ?? 1000
   const scrollOffset = sectionOffsetWidth / 1.2
 
@@ -19,7 +20,7 @@ const HorizontalScroller: FC<Props> = ({ heading, sectionRef }) => {
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center space-x-3 text-xl">
-        <h1 className="font-bold">{heading}</h1>
+      <h2 className={headingClassName}>{heading}</h2>
       </div>
       <div className="space-x-2">
         <button

diff --git a/apps/web/src/components/Home/TopSection.tsx b/apps/web/src/components/Home/TopSection.tsx
@@ -14,7 +14,9 @@ const TopSection = () => {
 
   return (
     <div className="flex flex-col">
-      <HorizontalScroller sectionRef={sectionRef} heading="Hottest Tea ☕" />
+      <HorizontalScroller sectionRef={sectionRef} 
+      heading="Hottest Tea ☕" 
+      headingClassName="font-syne font-extrabold" /> 
       <div
         ref={sectionRef}
         className="no-scrollbar laptop:pt-6 relative flex items-start space-x-4 overflow-x-auto overflow-y-hidden scroll-smooth pt-4"

diff --git a/packages/ui/tailwind-preset.ts b/packages/ui/tailwind-preset.ts
@@ -3,6 +3,9 @@ module.exports = {
   darkMode: 'class',
   theme: {
     extend: {
+      fontFamily: {
+        syne: ['Syne', 'sans-serif'],
+      },
       keyframes: {
         shimmer: {
           '0%, 100%': {