basic typography classes (supabase#37613)

* basic typography classes

* Clean up classes for where we use h1 tags

* Clean up classes for where we use h2, h3, h4

* Clean up classes for where we use h6

---------

Co-authored-by: Joshen Lim <[email protected]>

Author: SaxonF

apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx

@@ -109,7 +109,7 @@ export const FilterPopoverPrimitive = ({
             ))}
             {localFilters.length == 0 && (
               <div className="space-y-1 px-3">
-                <h5 className="text-sm text-foreground-light">No filters applied to this view</h5>
+                <h5 className="text-foreground-light">No filters applied to this view</h5>
                 <p className="text-xs text-foreground-lighter">
                   Add a column below to filter the view
                 </p>

apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx

@@ -185,7 +185,7 @@ export const SortPopoverPrimitive = ({
       ))}
       {localSorts.length === 0 && (
         <div className="space-y-1 px-3">
-          <h5 className="text-sm text-foreground-light">No sorts applied to this view</h5>
+          <h5 className="text-foreground-light">No sorts applied to this view</h5>
           <p className="text-xs text-foreground-lighter">Add a column below to sort the view</p>
         </div>
       )}

apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx

@@ -25,7 +25,7 @@ export const SpamValidation = ({ validationResult }: SpamValidationProps) => {
         )}
       </div>
       <div className="flex flex-col gap-2">
-        <h5 className="text-sm">
+        <h5>
           {hasSpamWarning
             ? 'Email has a high probability of being marked as spam - review issues below to improve deliverability.'
             : 'Email content is unlikely to be marked as spam'}

apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatePreview.tsx

@@ -15,7 +15,7 @@ const TemplatePreview = ({ selectedTemplate }: TemplatePreviewProps) => {
           <div className="my-5 h-full space-y-6 px-6">
             <div className="space-y-2">
               <div className="flex flex-col space-y-2">
-                <h3 className="text-foreground text-base">{templateName}</h3>
+                <h3>{templateName}</h3>
                 <p className="text-foreground-light text-sm">{description}</p>
               </div>
             </div>

apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx

@@ -122,7 +122,7 @@ const EnableExtensionModal = ({ visible, extension, onCancel }: EnableExtensionM
       size="small"
       header={
         <div className="flex items-baseline gap-2">
-          <h5 className="text-sm text-foreground">Confirm to enable</h5>
+          <h5 className="text-foreground">Confirm to enable</h5>
           <code className="text-xs">{extension.name}</code>
         </div>
       }

apps/studio/components/interfaces/Home/AdvisorWidget.tsx

@@ -81,7 +81,7 @@ export const AdvisorWidget = () => {
   let titleContent: React.ReactNode
 
   if (totalIssues === 0) {
-    titleContent = <h2 className="text-xl">No issues available</h2>
+    titleContent = <h2>No issues available</h2>
   } else {
     const issuesText = totalIssues === 1 ? 'issue' : 'issues'
     const numberDisplay = totalIssues.toString()
@@ -94,7 +94,7 @@ export const AdvisorWidget = () => {
     }
 
     titleContent = (
-      <h2 className="text-xl">
+      <h2>
         {numberDisplay} {issuesText} need
         {totalIssues === 1 ? 's' : ''} <span className={attentionClassName}>attention</span>
       </h2>

apps/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx

@@ -25,7 +25,7 @@ const NewProjectPanel = () => {
         <div className="flex flex-col space-y-12 md:space-y-20">
           <div className="flex h-full flex-col justify-between">
             <div className="space-y-2">
-              <h3 className="text-xl text-foreground">Welcome to your new project</h3>
+              <h2>Welcome to your new project</h2>
               <p className="text-base text-foreground-light">
                 Your project has been deployed on its own instance, with its own API all set up and
                 ready to use.
@@ -36,9 +36,7 @@ const NewProjectPanel = () => {
           <div className="grid grid-cols-12 gap-4">
             <div className="col-span-12 flex flex-col justify-center space-y-8 lg:col-span-7">
               <div className="space-y-2">
-                <h3 className="text-xl text-foreground">
-                  Get started by building out your database
-                </h3>
+                <h2>Get started by building out your database</h2>
                 <p className="text-base text-foreground-light">
                   Start building your app by creating tables and inserting data. Our Table Editor
                   makes Postgres as easy to use as a spreadsheet, but there's also our SQL Editor if
@@ -71,7 +69,7 @@ const NewProjectPanel = () => {
           {authEnabled && edgeFunctionsEnabled && storageEnabled && (
             <div className="flex h-full flex-col justify-between space-y-6">
               <div className="max-w-2xl space-y-2">
-                <h3 className="text-xl text-foreground">Explore our other products</h3>
+                <h2>Explore our other products</h2>
                 <p className="text-base text-foreground-light">
                   Supabase provides all the backend features you need to build a product. You can
                   use it completely, or just the features you need.
@@ -228,7 +226,7 @@ const NewProjectPanel = () => {
       <div className="col-span-12 lg:col-span-4">
         <div className="space-y-6">
           <div className="space-y-2">
-            <h3 className="text-xl text-foreground">Connecting to your new project</h3>
+            <h2>Connecting to your new project</h2>
             <p className="text-base text-foreground-light lg:max-w-sm">
               Interact with your database through the{' '}
               <Link href="https://supabase.com/docs/reference" className="text-brand">

apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx

@@ -91,11 +91,11 @@ export const GraphiQLTab = () => {
       <div className="flex flex-col items-center justify-center flex-1 px-4">
         <div className="w-full max-w-md">
           <div className="mb-6">
-            <h1 className="mt-8 mb-2 text-2xl">Enable the GraphQL Extension</h1>
-            <h2 className="text-sm text-foreground-light">
+            <h1 className="mt-8 mb-2">Enable the GraphQL Extension</h1>
+            <p className="text-sm text-foreground-light">
               Toggle the switch below to enable the GraphQL extension. You can then use the GraphQL
               API with your Supabase Database.
-            </h2>
+            </p>
           </div>
 
           <ExtensionCard extension={pgGraphqlExtension} />

apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx

@@ -258,7 +258,7 @@ export default function JWTSecretKeysTable() {
 
           <div className="flex flex-col gap-4">
             <div className="flex flex-col gap-2">
-              <h2 className="text-xl">Previously used keys</h2>
+              <h2>Previously used keys</h2>
               <p className="text-sm text-foreground-lighter">
                 These JWT signing keys are still used to{' '}
                 <em className="text-brand not-italic">verify tokens</em> that are yet to expire.
@@ -326,7 +326,7 @@ export default function JWTSecretKeysTable() {
       {revokedKeys.length > 0 && (
         <div className="flex flex-col gap-4">
           <div className="flex flex-col gap-2">
-            <h2 className="text-xl">Revoked keys</h2>
+            <h2>Revoked keys</h2>
             <p className="text-sm text-foreground-lighter">
               These keys are no longer used to verify or sign JWTs.
             </p>

apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx

@@ -8,6 +8,7 @@ import { z } from 'zod'
 import { useParams } from 'common'
 import { LogDrainData, useLogDrainsQuery } from 'data/log-drains/log-drains-query'
 
+import { DocsButton } from 'components/ui/DocsButton'
 import {
   Button,
   Form_Shadcn_,
@@ -38,7 +39,6 @@ import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
 import { urlRegex } from '../Auth/Auth.constants'
 import { DATADOG_REGIONS, LOG_DRAIN_TYPES, LogDrainType } from './LogDrains.constants'
-import { DocsButton } from 'components/ui/DocsButton'
 
 const FORM_ID = 'log-drain-destination-form'
 
@@ -456,7 +456,7 @@ export function LogDrainDestinationSheetForm({
             <>
               <div className="border-t mt-4">
                 <div className="px-content pt-2 pb-3 border-b bg-background-alternative-200">
-                  <h2 className="text-sm text-foreground">Custom Headers</h2>
+                  <h2 className="text-sm">Custom Headers</h2>
                   <p className="text-xs text-foreground-lighter">
                     {getHeadersSectionDescription()}
                   </p>