fix: h1-h6 base style using CSS from .tracking-tight (#2142)

open-sauced · Nov 15, 2023 · 4ad69a1 · 4ad69a1
1 parent 8955e02
commit 4ad69a1
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 7 deletions.
diff --git a/components/ListHeader/list-header.tsx b/components/ListHeader/list-header.tsx
@@ -44,7 +44,7 @@ const ListHeader = ({ name, isPublic, listId, isOwner, numberOfContributors }: L
         </div>
         <div className="flex flex-col justify-center p-2 header-info grow">
           <div className="flex gap-2">
-            <Title level={1} className="!text-2xl font-semibold tracking-tight text-slate-900">
+            <Title level={1} className="!text-2xl font-semibold text-slate-900">
               {(name && truncateString(name, 30)) || "List"}
             </Title>
             {<Badge isPublic={isPublic} />}

diff --git a/components/molecules/FilterHeader/filter-header.tsx b/components/molecules/FilterHeader/filter-header.tsx
@@ -48,7 +48,7 @@ const HeaderFilter = () => {
         ></ContextThumbnail>
       </div>
       <div className="header-info md:truncate flex flex-col grow justify-center p-2">
-        <Title level={1} className="!text-3xl font-semibold tracking-tight text-slate-900">
+        <Title level={1} className="!text-3xl font-semibold text-slate-900">
           {topicNameFormatting(pageId as string)}
         </Title>
         <Text className="mt-1 !text-base   text-slate-500">

diff --git a/components/molecules/InsightHeader/insight-header.tsx b/components/molecules/InsightHeader/insight-header.tsx
@@ -61,7 +61,7 @@ const InsightHeader = ({ insight, repositories, insightId, isOwner }: InsightHea
         </div>
         <div className="flex flex-col justify-center p-2 header-info grow">
           <div className="flex gap-2">
-            <Title level={1} className="!text-2xl font-semibold tracking-tight text-slate-900">
+            <Title level={1} className="!text-2xl font-semibold text-slate-900">
               {(insight && truncateString(insight.name, 30)) || "Insights"}
             </Title>
             {insight && <Badge isPublic={insight?.is_public} />}

diff --git a/components/molecules/OnboardingButton/onboarding-button.tsx b/components/molecules/OnboardingButton/onboarding-button.tsx
@@ -16,7 +16,7 @@ const OnboardingButton: React.FC<OnboardingButtonProps> = ({ className, children
       aria-labelledby={aria}
       aria-label={ariaLabel}
       onClick={() => router.push("/start")}
-      className={`${className} hidden items-center gap-2 border border-light-orange-8 py-1 px-1 pr-3 rounded-lg md:flex`}
+      className={`${className} items-center gap-2 border border-light-orange-8 py-1 px-1 pr-3 rounded-lg md:flex`}
     >
       <ProgressPie percentage={66} />
       {children}

diff --git a/components/molecules/PageHeader/page-header.tsx b/components/molecules/PageHeader/page-header.tsx
@@ -9,7 +9,7 @@ interface PageHeaderProps {
 const PageHeader = ({ title, rightComponent, leftComponent }: PageHeaderProps): JSX.Element => {
   return (
     <div className="w-full flex md:flex-row flex-col  bg-light-orange-2  gap-x-3 items-start  md:items-end  pt-6 pb-4">
-      <Title className="md:!text-2xl   !tracking-tight !text-xl" level={1}>
+      <Title className="md:!text-2xl !text-xl" level={1}>
         {title}
       </Title>
       <div className="flex md:flex-row flex-col w-full md:justify-between items-start md:items-center">

diff --git a/components/organisms/Waitlist/waitlist.tsx b/components/organisms/Waitlist/waitlist.tsx
@@ -20,7 +20,7 @@ const WaitlistComponent = () => {
             </Text>
           </div>
           <div className="max-w-2xl mt-7 px-9 font-semibold">
-            <Title className="text-center tracking-tight leading-10 !text-light-slate-1" level={1}>
+            <Title className="text-center leading-10 !text-light-slate-1" level={1}>
               You and 32 others are on the Open Sauced waitlist.
             </Title>
           </div>

diff --git a/pages/start.tsx b/pages/start.tsx
@@ -344,7 +344,7 @@ const Login: WithPageLayout = () => {
             <ProgressPie
               percentage={currentLoginStep === 1 ? 0 : currentLoginStep === 2 ? 33 : currentLoginStep === 3 ? 66 : 100}
             />
-            <Title className="!text-2xl !tracking-tight">Let‘s get started</Title>
+            <Title className="!text-2xl">Let‘s get started</Title>
           </div>
           <div className="mb-8">
             <Text className="!text-sm">

diff --git a/styles/globals.css b/styles/globals.css
@@ -15,6 +15,16 @@
 body {
   background-color: #f8f9fa;
 }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply tracking-tight;
+}
+
 .auto-grow-input:not(:empty) {
   color: black;
 }