Common UI components refactoring & accesibility improvements

web/app/components/ExitIntentPopup.tsx

@@ -5,6 +5,7 @@ import { Link } from '~/ui/Link'
 import { useAuth } from '~/providers/AuthProvider'
 
 import { Badge } from '~/ui/Badge'
+import { Text } from '~/ui/Text'
 import { trackCustom } from '~/utils/analytics'
 import { getCookie, setCookie } from '~/utils/cookie'
 
@@ -119,13 +120,23 @@ export default function ExitIntentPopup({
           />
         </div>
 
-        <h2 className='mb-4 max-w-3xl text-[2.5rem]/10 font-semibold tracking-tight text-pretty text-gray-950 lg:text-5xl dark:text-gray-200'>
+        <Text
+          as='h2'
+          weight='semibold'
+          tracking='tight'
+          className='mb-4 max-w-3xl text-[2.5rem]/10 text-pretty lg:text-5xl'
+        >
           {t('exitIntentPopup.title')}
-        </h2>
+        </Text>
 
-        <p className='mb-8 text-xl leading-relaxed text-gray-950 dark:text-gray-200'>
+        <Text
+          as='p'
+          size='xl'
+          colour='secondary'
+          className='mb-8 leading-relaxed'
+        >
           {t('exitIntentPopup.desc')}
-        </p>
+        </Text>
 
         <Link
           to='/'

web/app/components/Footer/index.tsx

@@ -35,6 +35,7 @@ import _map from 'lodash/map'
 import React, { memo, type FC } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Link } from '~/ui/Link'
+import { Text } from '~/ui/Text'
 
 import { changeLanguage } from '~/i18n'
 import {
@@ -673,9 +674,14 @@ const Footer = ({ showDBIPMessage }: FooterProps) => {
             {/* Column 1: Products + Free Tools */}
             <div className='space-y-8'>
               <div>
-                <h3 className='mb-4 text-sm font-semibold text-gray-200'>
+                <Text
+                  as='h3'
+                  size='sm'
+                  weight='semibold'
+                  className='mb-4 text-gray-200'
+                >
                   {t('footer.products')}
-                </h3>
+                </Text>
                 <ul className='space-y-2.5'>
                   {_map(
                     navigation.products,
@@ -696,9 +702,14 @@ const Footer = ({ showDBIPMessage }: FooterProps) => {
               </div>
 
               <div>
-                <h3 className='mb-4 text-sm font-semibold text-gray-200'>
+                <Text
+                  as='h3'
+                  size='sm'
+                  weight='semibold'
+                  className='mb-4 text-gray-200'
+                >
                   {t('footer.freeTools')}
-                </h3>
+                </Text>
                 <ul className='space-y-2.5'>
                   {_map(
                     navigation.freeTools,
@@ -722,9 +733,14 @@ const Footer = ({ showDBIPMessage }: FooterProps) => {
             {/* Column 2: Resources + Comparisons */}
             <div className='space-y-8'>
               <div>
-                <h3 className='mb-4 text-sm font-semibold text-gray-200'>
+                <Text
+                  as='h3'
+                  size='sm'
+                  weight='semibold'
+                  className='mb-4 text-gray-200'
+                >
                   {t('footer.resources')}
-                </h3>
+                </Text>
                 <ul className='space-y-2.5'>
                   {_map(
                     navigation.resources,
@@ -745,9 +761,14 @@ const Footer = ({ showDBIPMessage }: FooterProps) => {
               </div>
 
               <div>
-                <h3 className='mb-4 text-sm font-semibold text-gray-200'>
+                <Text
+                  as='h3'
+                  size='sm'
+                  weight='semibold'
+                  className='mb-4 text-gray-200'
+                >
                   {t('footer.comparisons')}
-                </h3>
+                </Text>
                 <ul className='space-y-2.5'>
                   {_map(
                     navigation.comparisons,
@@ -771,9 +792,14 @@ const Footer = ({ showDBIPMessage }: FooterProps) => {
             {/* Column 3: Company + Community */}
             <div className='space-y-8'>
               <div>
-                <h3 className='mb-4 text-sm font-semibold text-gray-200'>
+                <Text
+                  as='h3'
+                  size='sm'
+                  weight='semibold'
+                  className='mb-4 text-gray-200'
+                >
                   {t('footer.company')}
-                </h3>
+                </Text>
                 <ul className='space-y-2.5'>
                   {_map(
                     navigation.company,
@@ -794,9 +820,14 @@ const Footer = ({ showDBIPMessage }: FooterProps) => {
               </div>
 
               <div>
-                <h3 className='mb-4 text-sm font-semibold text-gray-200'>
+                <Text
+                  as='h3'
+                  size='sm'
+                  weight='semibold'
+                  className='mb-4 text-gray-200'
+                >
                   {t('footer.community')}
-                </h3>
+                </Text>
                 <ul className='space-y-2.5'>
                   {_map(
                     navigation.community,
@@ -821,7 +852,7 @@ const Footer = ({ showDBIPMessage }: FooterProps) => {
             <div>
               <SwetrixLogo theme='dark' />
 
-              <p className='mt-4 max-w-72 text-sm text-gray-200'>
+              <Text as='p' size='sm' className='mt-4 max-w-72 text-gray-200'>
                 {isSelfhosted ? (
                   <Trans
                     t={t}
@@ -840,7 +871,7 @@ const Footer = ({ showDBIPMessage }: FooterProps) => {
                 ) : (
                   t('footer.description')
                 )}
-              </p>
+              </Text>
 
               {isSelfhosted ? null : (
                 <div className='mt-2 flex text-sm text-gray-200'>

web/app/components/GithubAuth.tsx

@@ -18,10 +18,9 @@ const GithubAuth = ({ className, onClick, disabled }: GoogleAuthProps) => {
 
   return (
     <Button
+      variant='secondary'
       className={cx(className, 'flex items-center justify-center')}
       onClick={onClick}
-      secondary
-      regular
       disabled={disabled}
     >
       <>

web/app/components/GoogleAuth.tsx

@@ -15,10 +15,9 @@ const GoogleAuth = ({ onClick, className, disabled }: GoogleAuthProps) => {
 
   return (
     <Button
+      variant='secondary'
       className={cx(className, 'flex items-center justify-center')}
       onClick={onClick}
-      secondary
-      regular
       disabled={disabled}
     >
       <>

web/app/components/Header/index.tsx

@@ -60,6 +60,7 @@ import { useAuth } from '~/providers/AuthProvider'
 import { useTheme } from '~/providers/ThemeProvider'
 import Flag from '~/ui/Flag'
 import SwetrixLogo from '~/ui/icons/SwetrixLogo'
+import { Text } from '~/ui/Text'
 import routes from '~/utils/routes'
 import { cn } from '~/utils/generic'
 import { BannerManager } from './banners'
@@ -203,9 +204,13 @@ const SolutionsMenu = () => {
                       </a>
                     )}
 
-                    <p className='mt-1 text-xs text-gray-600 dark:text-neutral-100'>
+                    <Text
+                      as='p'
+                      size='xs'
+                      className='mt-1 text-gray-600 dark:text-neutral-100'
+                    >
                       {item.description}
-                    </p>
+                    </Text>
                   </div>
                 </div>
               ))}
@@ -812,9 +817,13 @@ const Header = ({ refPage, transparent }: HeaderProps) => {
                                     </a>
                                   )}
 
-                                  <p className='mt-1 text-xs text-gray-600 dark:text-neutral-100'>
+                                  <Text
+                                    as='p'
+                                    size='xs'
+                                    className='mt-1 text-gray-600 dark:text-neutral-100'
+                                  >
                                     {item.description}
-                                  </p>
+                                  </Text>
                                 </div>
                               </DisclosureButton>
                             ))}

web/app/components/NotificationChannels/EnableWebPushButton.tsx

@@ -182,8 +182,8 @@ const EnableWebPushButton = ({
 
   return (
     <Button
-      secondary
-      small
+      variant='secondary'
+      size='xs'
       onClick={onClick}
       loading={loading}
       className={className}

web/app/components/NotificationChannels/NotificationChannels.tsx

@@ -314,35 +314,25 @@ const NotificationChannels = ({
 
   return (
     <section>
-      <div className='flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
+      <div className='mb-4 flex flex-col items-start justify-between gap-y-2 sm:flex-row sm:items-center'>
         <div>
           <Text as='h3' size='lg' weight='bold'>
             {headingTitle}
           </Text>
-          <Text
-            as='p'
-            size='sm'
-            colour='secondary'
-            className='mt-1 max-w-prose'
-          >
+          <Text as='p' size='sm' colour='muted' className='mt-1 max-w-prose'>
             {headingDescription}
           </Text>
         </div>
-        <div className='flex flex-wrap items-center gap-2'>
-          <Button
-            small
-            primary
-            onClick={() => {
-              setForm(blankForm(allowedTypes[0]))
-              setCreating(true)
-            }}
-          >
-            <span className='inline-flex items-center gap-1'>
-              <PlusIcon className='size-4' aria-hidden />
-              {t('notificationChannels.add')}
-            </span>
-          </Button>
-        </div>
+        <Button
+          size='xs'
+          onClick={() => {
+            setForm(blankForm(allowedTypes[0]))
+            setCreating(true)
+          }}
+        >
+          <PlusIcon className='mr-1 size-4' aria-hidden />
+          {t('notificationChannels.add')}
+        </Button>
       </div>
 
       {!isLoaded ? (
@@ -372,8 +362,6 @@ const NotificationChannels = ({
           </Text>
           <div className='mt-5 flex justify-center'>
             <Button
-              primary
-              regular
               onClick={() => {
                 setForm(blankForm(allowedTypes[0]))
                 setCreating(true)
@@ -430,8 +418,8 @@ const NotificationChannels = ({
                 <div className='flex shrink-0 flex-wrap items-center gap-1.5'>
                   {canVerify ? (
                     <Button
-                      small
-                      secondary
+                      variant='secondary'
+                      size='xs'
                       onClick={() => onVerify(channel)}
                       disabled={isMutating}
                     >

web/app/components/OIDCAuth.tsx

@@ -15,10 +15,9 @@ const OIDCAuth = ({ onClick, className, disabled }: OIDCAuthProps) => {
 
   return (
     <Button
+      variant='secondary'
       className={cx(className, 'flex items-center justify-center')}
       onClick={onClick}
-      secondary
-      regular
       disabled={disabled}
     >
       <KeyIcon className='mr-2 size-5' />

web/app/components/marketing/DitchGoogle.tsx

@@ -1,6 +1,7 @@
 import { ArrowRightIcon, CheckIcon } from '@phosphor-icons/react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Link } from '~/ui/Link'
+import { Text } from '~/ui/Text'
 
 import routes from '~/utils/routes'
 
@@ -15,20 +16,29 @@ export const DitchGoogle = () => {
         </div>
         <div className='rounded-xl p-8 backdrop-blur-xl sm:p-12 lg:p-16'>
           <div className='mx-auto max-w-4xl'>
-            <h2 className='mb-6 text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl lg:text-6xl dark:text-white'>
+            <Text
+              as='h2'
+              size='4xl'
+              weight='bold'
+              tracking='tight'
+              className='mb-6 sm:text-5xl lg:text-6xl'
+            >
               <Trans
                 t={t}
                 i18nKey='main.timeToDitchGoogleAnalytics'
                 components={{
-                  colour: (
-                    <span className='bg-gradient-to-r from-red-600 to-orange-600 bg-clip-text text-transparent' />
-                  ),
+                  colour: <span className='text-red-600 dark:text-red-400' />,
                 }}
               />
-            </h2>
-            <p className='mx-auto mb-10 max-w-2xl text-xl leading-relaxed text-slate-900 dark:text-slate-200'>
+            </Text>
+            <Text
+              as='p'
+              size='xl'
+              colour='secondary'
+              className='mx-auto mb-10 max-w-2xl leading-relaxed'
+            >
               {t('main.whyDitch')}
-            </p>
+            </Text>
             <div className='mb-8 flex flex-col items-center justify-center gap-4 sm:flex-row'>
               <Link
                 to={routes.signup}

web/app/components/marketing/FAQ.tsx

@@ -6,6 +6,7 @@ import sanitizeHtml from 'sanitize-html'
 
 import { DOCS_URL, PLAN_LIMITS, TRIAL_DAYS, DISCORD_URL } from '~/lib/constants'
 import { FAQ as FAQAccordion } from '~/ui/FAQ'
+import { Text } from '~/ui/Text'
 import routesPath from '~/utils/routes'
 
 interface FAQProps {
@@ -133,9 +134,15 @@ const FAQ = ({ includeGAQuestions = false }: FAQProps) => {
 
   return (
     <section className='relative mx-auto max-w-5xl px-2 py-14 lg:px-8'>
-      <h2 className='text-center text-3xl font-extrabold text-slate-900 sm:text-4xl dark:text-white'>
+      <Text
+        as='h2'
+        size='3xl'
+        weight='bold'
+        tracking='tight'
+        className='text-center sm:text-4xl'
+      >
         {t('main.faq.title')}
-      </h2>
+      </Text>
       <div className='mt-8 flex flex-col'>
         <FAQAccordion items={formattedItems} withPadding />
       </div>