Babalicious/title class name gradient group fix (#355)

* tool pages - main * tool pages - associated subsections * tools page - how-to modules + home page - modules * how-to pages * media page + faq page
stampchain-io · Nov 22, 2024 · 9ac7398 · 9ac7398
1 parent 7828443
commit 9ac7398
Show file tree

Hide file tree

Showing 13 changed files with 33 additions and 30 deletions.
diff --git a/components/howto/HowToLayout.tsx b/components/howto/HowToLayout.tsx
@@ -12,14 +12,17 @@ export function HowToLayout(
   { title, subtitle, headerImage, children, importantNotes = [] }:
     HowToLayoutProps,
 ) {
+  const titleGreyDLClassName =
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black gray-gradient3";
+  const subTitleGreyClassName =
+    "text-2xl mobileMd:text-3xl mobileLg:text-4xl desktop:text-5xl font-extralight text-stamp-grey-light mb-1.5 mobileLg:mb-3";
+
   return (
     <div class="text-[#CCCCCC] text-lg font-medium flex flex-col gap-12 mt-20 tablet:mt-5">
       <div class="max-w-[1080px] w-full mx-auto flex flex-col gap-12">
         <section>
-          <h1 class="gray-gradient3 text-6xl font-black">HOW-TO</h1>
-          <h2 class="text-2xl tablet:text-5xl font-extralight mb-3">
-            {subtitle}
-          </h2>
+          <h1 className={titleGreyDLClassName}>HOW-TO</h1>
+          <h2 className={subTitleGreyClassName}>{subtitle}</h2>
           <img
             src={headerImage}
             width="1020"

diff --git a/islands/modules/Styles.ts b/islands/modules/Styles.ts
@@ -1,12 +1,12 @@
 export const ModulesStyles = {
-  titleGreyDL:
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black gray-gradient3",
-  titleGreyLD:
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black gray-gradient1",
-  titlePurpleDL:
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient1",
-  titlePurpleLD:
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3",
+  titleGreyDLClassName:
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black gray-gradient3",
+  titleGreyLDClassName:
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black gray-gradient1",
+  titlePurpleDLClassName:
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient1",
+  titlePurpleLDClassName:
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3",
   subTitleGrey:
     "text-2xl mobileMd:text-3xl mobileLg:text-4xl desktop:text-5xl font-extralight text-stamp-grey-light mb-1.5 mobileLg:mb-3",
   subTitlePurple:

diff --git a/islands/stamp/StampSection.tsx b/islands/stamp/StampSection.tsx
@@ -82,9 +82,9 @@ export default function StampSection({
   }, [pagination?.page]);
 
   const titlePurpleDLClassName =
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient1";
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient1";
   const titlePurpleLDClassName =
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3";
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3";
   const subTitlePurpleClassName =
     "text-2xl mobileMd:text-3xl mobileLg:text-4xl desktop:text-5xl font-extralight text-stamp-purple-highlight mb-1.5 mobileLg:mb-3";
 

diff --git a/islands/stamping/src20/deploy/DeployContent.tsx b/islands/stamping/src20/deploy/DeployContent.tsx
@@ -152,7 +152,7 @@ export function DeployContent(
   const bodyToolsClassName =
     "flex flex-col w-full items-center gap-3 mobileMd:gap-6";
   const titlePurpleLDCenterClassName =
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3 w-full text-center";
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3 w-full text-center";
   const feeSelectorContainerClassName =
     "p-3 mobileMd:p-6 dark-gradient z-[10] w-full";
 

diff --git a/islands/stamping/src20/deploy/RecentDeploy.tsx b/islands/stamping/src20/deploy/RecentDeploy.tsx
@@ -10,9 +10,9 @@ const RecentDeploy = ({ transactions }) => {
   }));
 
   const titlePurpleDLClassName =
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient1";
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient1";
   const titlePurpleLDClassName =
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3";
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3";
   const subTitlePurpleClassName =
     "text-2xl mobileMd:text-3xl mobileLg:text-4xl desktop:text-5xl font-extralight text-stamp-purple-highlight mb-1.5 mobileLg:mb-3";
 

diff --git a/islands/stamping/src20/mint/MintContent.tsx b/islands/stamping/src20/mint/MintContent.tsx
@@ -171,7 +171,7 @@ export function MintContent({
   const bodyToolsClassName =
     "flex flex-col w-full items-center gap-3 mobileMd:gap-6";
   const titlePurpleLDCenterClassName =
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3 w-full text-center";
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3 w-full text-center";
   const feeSelectorContainerClassName =
     "p-3 mobileMd:p-6 dark-gradient z-[10] w-full";
   const inputFieldContainerClassName =

diff --git a/islands/stamping/src20/mint/PopularMinting.tsx b/islands/stamping/src20/mint/PopularMinting.tsx
@@ -7,9 +7,9 @@ const PopularMinting = ({ transactions }) => {
   }
 
   const titlePurpleDLClassName =
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient1";
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient1";
   const titlePurpleLDClassName =
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3";
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3";
   const subTitlePurpleClassName =
     "text-2xl mobileMd:text-3xl mobileLg:text-4xl desktop:text-5xl font-extralight text-stamp-purple-highlight mb-1.5 mobileLg:mb-3";
 

diff --git a/islands/stamping/src20/transfer/LatestTransfer.tsx b/islands/stamping/src20/transfer/LatestTransfer.tsx
@@ -10,9 +10,9 @@ const LatestTransfer = ({ transactions }) => {
   }));
 
   const titlePurpleDLClassName =
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient1";
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient1";
   const titlePurpleLDClassName =
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3";
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3";
   const subTitlePurpleClassName =
     "text-2xl mobileMd:text-3xl mobileLg:text-4xl desktop:text-5xl font-extralight text-stamp-purple-highlight mb-1.5 mobileLg:mb-3";
 

diff --git a/islands/stamping/src20/transfer/TransferContent.tsx b/islands/stamping/src20/transfer/TransferContent.tsx
@@ -9,10 +9,10 @@ import { InputField } from "$islands/stamping/InputField.tsx";
 
 import { logger } from "$lib/utils/logger.ts";
 
-const titlePurpleLDCenterClassName =
-  "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3 w-full text-center";
 const bodyToolsClassName =
   "flex flex-col w-full items-center gap-3 mobileMd:gap-6";
+const titlePurpleLDCenterClassName =
+  "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3 w-full text-center";
 
 const inputFieldContainerClassName =
   "flex flex-col gap-3 mobileMd:gap-6 p-3 mobileMd:p-6 dark-gradient w-full";

diff --git a/islands/stamping/stamp/OlgaContent.tsx b/islands/stamping/stamp/OlgaContent.tsx
@@ -755,7 +755,7 @@ export function OlgaContent() {
   const bodyToolsClassName =
     "flex flex-col w-full items-center gap-3 mobileMd:gap-6";
   const titlePurpleLDCenterClassName =
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3 w-full text-center";
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3 w-full text-center";
 
   const isFormValid = isValidForMinting({
     file,

diff --git a/routes/faq/index.tsx b/routes/faq/index.tsx
@@ -3,10 +3,10 @@ import Accordion from "$islands/Accordion.tsx";
 
 export default function FAQ() {
   const bodyClassName = "flex flex-col gap-12 mobileLg:gap-24 desktop:gap-36";
-  const titleGreyLDClassName =
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black gray-gradient1";
   const titleGreyDLClassName =
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black gray-gradient3";
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black gray-gradient3";
+  const titleGreyLDClassName =
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black gray-gradient1";
   const subTitleGreyClassName =
     "text-2xl mobileMd:text-3xl mobileLg:text-4xl desktop:text-5xl font-extralight text-white mb-1.5 mobileLg:mb-3";
   const bodyTextLightClassName =

diff --git a/routes/howto/index.tsx b/routes/howto/index.tsx
@@ -3,7 +3,7 @@ import { Head } from "$fresh/runtime.ts";
 export default function HowTo() {
   const bodyClassName = "flex flex-col gap-12 mobileLg:gap-24 desktop:gap-36";
   const titleGreyDLClassName =
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black gray-gradient3";
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black gray-gradient3";
   const subTitleGreyClassName =
     "text-2xl mobileMd:text-3xl mobileLg:text-4xl desktop:text-5xl font-extralight text-stamp-grey-light mb-1.5 mobileLg:mb-3";
   const bodyTextLightClassName =

diff --git a/routes/media/index.tsx b/routes/media/index.tsx
@@ -1,7 +1,7 @@
 export default function Media() {
   const bodyClassName = "flex flex-col gap-12 mobileLg:gap-24 desktop:gap-36";
   const titleGreyDLClassName =
-    "text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black gray-gradient3";
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black gray-gradient3";
   const subTitleGreyClassName =
     "text-2xl mobileMd:text-3xl mobileLg:text-4xl desktop:text-5xl font-extralight text-stamp-grey-light mb-1.5 mobileLg:mb-3";
   const articleLinkClassName =