chore: adapt typo styles

zuplo · Jan 9, 2024 · 02dcc1b · 02dcc1b
1 parent 38e2c14
commit 02dcc1b
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 20 deletions.
diff --git a/src/app/intro/page.tsx b/src/app/intro/page.tsx
@@ -54,8 +54,8 @@ export default async function Page() {
 
   return (
     <DocsLayout frontmatter={{ title: "Zuplo Docs" }} useRateSection={false}>
-      Learn how to use Zuplo to add API-key management, developer documentation,
-      and rate-limiting, for any stack.
+      <p>Learn how to use Zuplo to add API-key management, developer documentation,
+      and rate-limiting, for any stack.</p>
       <h2>Overview</h2>
       <QuickLinks items={overviewItems} />
       <h2>Getting Started</h2>

diff --git a/src/components/DocsHeader.tsx b/src/components/DocsHeader.tsx
@@ -46,11 +46,11 @@ export function DocsHeader({
 
   return (
     <header className="mb-5">
-      <div className="mb-4 flex flex-wrap items-center gap-x-[3px] text-sm leading-6 tracking-wider text-gray-600 lg:mb-10">
+      <div className="mb-4 flex flex-wrap items-center gap-x-[3px] text-sm leading-6 text-slate-400 lg:mb-2">
         {breadcrumbItems.map((item, index) => (
           <div className="flex items-center" key={nanoid()}>
             {!!item?.href ? (
-              <Link href={item.href}>{item.label}</Link>
+              <Link href={item.href} className="hover:text-pink">{item.label}</Link>
             ) : (
               <p>{item.label}</p>
             )}

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -91,7 +91,7 @@ function NavSection({
 }) {
   const pathname = usePathname();
   const linkClassName =
-    "block w-full px-6 leading-6 tracking-wider transition-all hover:text-pink hover:text-shadow cursor-pointer relative";
+    "block w-full px-6 transition-all text-slate-600 hover:text-pink cursor-pointer relative";
 
   return (
     <>
@@ -143,15 +143,15 @@ export function Navigation({
         {navigation.map((section: NavCategory) => (
           <li key={section.label}>
             {section?.type === NavigationType.CATEGORY && (
-              <h5 className="pl-6 text-sm text-slate-400 font-medium">
+              <h5 className="pl-6 text-sm text-slate-400 font-light">
                 {section?.href ? (
                   <Link href={section.href}>{section.label}</Link>
                 ) : (
                   <>{section.label}</>
                 )}
               </h5>
             )}
-            <ul role="list" className="mt-2 space-y-2 lg:mt-3.5 lg:space-y-4 ">
+            <ul role="list" className="mt-2 space-y-2 lg:mt-3.5 lg:space-y-2 ">
               {!!section?.items &&
                 section?.items.map((navItem, i) => (
                   <NavSection

diff --git a/src/components/PrevNextLinks.tsx b/src/components/PrevNextLinks.tsx
@@ -26,7 +26,7 @@ function PageLink({
         <Link
           href={href}
           className={clsx(
-            "flex items-center gap-x-2.5 text-sm font-bold leading-6 tracking-wider text-pink",
+            "flex items-center gap-x-2.5 text-sm leading-6 text-slate-400 hover:text-pink",
             dir === "previous" && "flex-row-reverse",
           )}
         >
@@ -61,7 +61,7 @@ export function PrevNextLinks() {
   }
 
   return (
-    <dl className="flex border-t border-slate-200 py-5 dark:border-slate-800">
+    <dl className="flex border-t border-slate-200 py-5">
       {previousPage && !!previousPage?.href && (
         <PageLink
           dir="previous"

diff --git a/src/components/TableOfContents.tsx b/src/components/TableOfContents.tsx
@@ -68,30 +68,30 @@ export function TableOfContents({
           <>
             <h2
               id="on-this-page-title"
-              className="text-sm text-slate-400 font-medium"
+              className="text-sm text-slate-400 font-light"
             >
               On this page
             </h2>
-            <ol role="list" className="mt-4 space-y-3 text-sm">
+            <ol role="list" className="mt-4 space-y-2 text-sm">
               {tableOfContents.map((section) => (
-                <li key={section.id} className="leading-6 tracking-wider">
+                <li key={section.id} className="leading-6">
                   <Link
                     href={`#${section.id}`}
                     className={clsx(
-                      "block w-full transition-all hover:text-pink hover:text-shadow",
+                      "block w-full transition-all text-slate-500 hover:text-pink",
                       isActive(section) ? "font-bold" : "font-medium",
                     )}
                   >
                     {section.title}
                   </Link>
                   {section.children.length > 0 && (
-                    <ol role="list" className="mt-2 space-y-3 pl-5">
+                    <ol role="list" className="mt-2 space-y-2 pl-5">
                       {section.children.map((subSection) => (
                         <li key={subSection.id}>
                           <Link
                             href={`#${subSection.id}`}
                             className={clsx(
-                              "transition-all hover:text-pink hover:text-shadow",
+                              "transition-all text-slate-500 hover:text-pink",
                               isActive(subSection)
                                 ? "font-bold"
                                 : "font-medium",

diff --git a/src/components/shared/article/Rate.tsx b/src/components/shared/article/Rate.tsx
@@ -4,7 +4,7 @@ import DislikeIcon from "@/components/svgs/dislike.svg";
 import clsx from "classnames";
 
 export default function ArticleRate() {
-  const linkClassName = "btn btn-tertiary-dark flex items-center";
+  const linkClassName = "btn border hover:border-dark flex items-center opacity-50 hover:opacity-100 text-black";
 
   return (
     <div className="flex flex-wrap items-center gap-5 pt-[60px]">

diff --git a/src/components/shared/article/Support.tsx b/src/components/shared/article/Support.tsx
@@ -4,19 +4,19 @@ import ChangelogIcon from "@/components/svgs/changelog.svg";
 
 export default function ArticleSupport() {
   const linkClassName =
-    "font-bold tracking-wider text-pink transition-colors hover:text-pink-hover";
+    "text-pink underline transition-colors hover:text-pink-hover";
 
   return (
     <div className="py-[60px]">
       <div className="flex flex-col justify-center gap-y-2.5 rounded-lg px-5 py-3.5 text-sm leading-6 ring-1 ring-gray-500">
-        <div className="flex flex-wrap gap-x-2.5">
+        <div className="flex flex-wrap gap-x-1.5">
           <ContactIcon />
           <span>Do you have any questions?</span>
           <a className={linkClassName} href="mailto:[email protected]">
             Contact us
           </a>
         </div>
-        <div className="flex flex-wrap gap-x-2.5">
+        <div className="flex flex-wrap gap-x-1.5">
           <ChangelogIcon />
           <span>Check out our</span>
           <Link

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -111,8 +111,9 @@ export default {
           css: {
             a: {
               color: theme("colors.pink.DEFAULT"),
-              textDecorationLine: "none",
+              textDecorationLine: "underline",
               "&:hover": {
+                color: theme("colors.pink.hover"),
                 textDecorationLine: "underline",
               },
               fontWeight: "normal",