All packages headings

2023-01-13 11:35:29 +00:00 · 2023-01-13 11:35:29 +00:00 · 91eded9834
parent c8b4cbb95f
commit 91eded9834
39 changed files with 81 additions and 75 deletions
--- a/packages/app-store/applecalendar/pages/setup/index.tsx
+++ b/packages/app-store/applecalendar/pages/setup/index.tsx
@ -32,7 +32,7 @@ export default function AppleCalendarSetup() {
            />
          </div>
          <div>
-            <h1 className="text-gray-600">{t("connect_apple_server")}</h1>
+            <h1>{t("connect_apple_server")}</h1>

            <div className="mt-1 text-sm">
              {t("apple_server_generate_password", { appName: APP_NAME })}{" "}
--- a/packages/app-store/caldavcalendar/pages/setup/index.tsx
+++ b/packages/app-store/caldavcalendar/pages/setup/index.tsx
@ -33,7 +33,7 @@ export default function CalDavCalendarSetup() {
            />
          </div>
          <div className="flex w-10/12 flex-col">
-            <h1 className="text-gray-600">{t("connect_caldav_server")}</h1>
+            <h1>{t("connect_caldav_server")}</h1>
            <div className="mt-1 text-sm">{t("credentials_stored_encrypted")}</div>
            <div className="my-2 mt-3">
              <Form
--- a/packages/app-store/closecom/pages/setup/index.tsx
+++ b/packages/app-store/closecom/pages/setup/index.tsx
@ -46,7 +46,7 @@ export default function CloseComSetup() {
            />
          </div>
          <div>
-            <h1 className="text-gray-600">{t("provide_api_key")}</h1>
+            <h1>{t("provide_api_key")}</h1>

            <div className="mt-1 text-sm">
              {t("generate_api_key_description")}{" "}
--- a/packages/app-store/ee/routing-forms/components/FormActions.tsx
+++ b/packages/app-store/ee/routing-forms/components/FormActions.tsx
@ -89,7 +89,7 @@ function NewFormDialog({ appUrl }: { appUrl: string }) {
    <Dialog name="new-form" clearQueryParamsOnClose={["target", "action"]}>
      <DialogContent className="overflow-y-auto">
        <div className="mb-4">
-          <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
+          <h3 className="leading-6" id="modal-title">
            {t("add_new_form")}
          </h3>
          <div>
--- a/packages/app-store/ee/routing-forms/pages/routing-link/[...appPages].tsx
+++ b/packages/app-store/ee/routing-forms/pages/routing-link/[...appPages].tsx
@ -108,9 +108,7 @@ function RoutingForm({ form, profile, ...restProps }: inferSSRProps<typeof getSe

                  <form onSubmit={handleOnSubmit}>
                    <div className="mb-8">
-                      <h1 className="font-cal mb-1 text-xl font-bold tracking-wide text-gray-900 dark:text-white">
-                        {form.name}
-                      </h1>
+                      <h1 className="mb-1 tracking-wide">{form.name}</h1>
                      {form.description ? (
                        <p className="min-h-10 text-sm text-gray-500 ltr:mr-4 rtl:ml-4 dark:text-white">
                          {form.description}
--- a/packages/app-store/exchange2013calendar/pages/setup/index.tsx
+++ b/packages/app-store/exchange2013calendar/pages/setup/index.tsx
@ -30,7 +30,7 @@ export default function Exchange2013CalendarSetup() {
          />
        </div>
        <div className="flex w-10/12 flex-col">
-          <h1 className="text-gray-600">{t("add_exchange2013")}</h1>
+          <h1>{t("add_exchange2013")}</h1>
          <div className="mt-1 text-sm">{t("credentials_stored_encrypted")}</div>
          <div className="my-2 mt-3">
            <Form
--- a/packages/app-store/exchange2016calendar/pages/setup/index.tsx
+++ b/packages/app-store/exchange2016calendar/pages/setup/index.tsx
@ -30,7 +30,7 @@ export default function Exchange2016CalendarSetup() {
          />
        </div>
        <div className="flex w-10/12 flex-col">
-          <h1 className="text-gray-600">{t("add_exchange2016")}</h1>
+          <h1>{t("add_exchange2016")}</h1>
          <div className="mt-1 text-sm">{t("credentials_stored_encrypted")}</div>
          <div className="my-2 mt-3">
            <Form
--- a/packages/app-store/exchangecalendar/pages/setup/index.tsx
+++ b/packages/app-store/exchangecalendar/pages/setup/index.tsx
@ -54,7 +54,7 @@ export default function ExchangeSetup() {
              />
            </div>
            <div className="grow">
-              <h1 className="text-gray-600">{t("exchange_add")}</h1>
+              <h1>{t("exchange_add")}</h1>
              <div className="text-sm">{t("credentials_stored_encrypted")}</div>
              <div className="my-2 mt-5">
                <Form
--- a/packages/app-store/giphy/components/SearchDialog.tsx
+++ b/packages/app-store/giphy/components/SearchDialog.tsx
@ -112,7 +112,7 @@ export const SearchDialog = (props: ISearchDialog) => {
  return (
    <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
      <DialogContent>
-        <h3 className="leading-16 font-cal text-xl text-gray-900" id="modal-title">
+        <h3 className="leading-16 " id="modal-title">
          {t("add_gif_to_confirmation")}
        </h3>
        <p className="mb-3 text-sm font-light text-gray-500">{t("find_gif_spice_confirmation")}</p>
--- a/packages/app-store/rainbow/components/RainbowKit.tsx
+++ b/packages/app-store/rainbow/components/RainbowKit.tsx
@ -112,7 +112,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
      <div className="rounded-md border border-neutral-200 dark:border-neutral-700 dark:hover:border-neutral-600">
        <div className="hover:border-brand dark:bg-darkgray-100 flex min-h-[120px] grow flex-col border-b border-neutral-200 bg-white p-6 text-center first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-white dark:border-neutral-700 dark:hover:border-neutral-600 md:flex-row md:text-left">
          <span className="mb-4 grow md:mb-0">
-            <h2 className="mb-2 grow font-semibold text-gray-900 dark:text-white">Token Gate</h2>
+            <h2 className="mb-2 grow ">Token Gate</h2>
            {isLoading && (
              <>
                <SkeletonText className="mb-3 h-1 w-full" />
--- a/packages/app-store/sendgrid/pages/setup/index.tsx
+++ b/packages/app-store/sendgrid/pages/setup/index.tsx
@ -41,7 +41,7 @@ export default function SendgridSetup() {
            <img src="/api/app-store/sendgrid/logo.png" alt="Sendgrid" className="h-12 w-12 max-w-2xl" />
          </div>
          <div>
-            <h1 className="text-gray-600">{t("provide_api_key")}</h1>
+            <h1>{t("provide_api_key")}</h1>

            <div className="mt-1 text-sm">
              {t("generate_api_key_description")}{" "}
--- a/packages/config/tailwind-bases.js
+++ b/packages/config/tailwind-bases.js
@ -1,29 +1,49 @@
 const plugin = require("tailwindcss/plugin");

-module.exports = plugin(function ({ addBase, theme }) {
+module.exports = plugin(function ({ addBase, theme, addComponents }) {
+  const h1Base = {
+    fontSize: "28px",
+    fontWeight: theme("fontWeight.semibold"),
+  };
+
+  const h2Base = {
+    fontSize: theme("fontSize.2xl"),
+    fontWeight: theme("fontWeight.semibold"),
+  };
+
+  const h3Base = {
+    fontSize: theme("fontSize.xl"),
+    fontWeight: theme("fontWeight.semibold"),
+  };
+
+  /** Base heading styles
+   * - used for all headings
+   * - h1,h2,h3 are commonly used
+   * - h4 is used in very few occurances and is not included in the base styles
+   */
+
  addBase({
-    h1: {
+    "h1, h2, h3, h4": {
      fontFamily: theme("fontFamily.cal"),
-      fontSize: "28px",
-      fontWeight: theme("fontWeight.semibold"),
-      color: theme("colors.black"),
-    },
-    h2: {
-      fontFamily: theme("fontFamily.cal"),
-      fontSize: theme("fontSize.2xl"),
-      fontWeight: theme("fontWeight.semibold"),
-      color: theme("colors.black"),
-    },
-    h3: {
-      fontFamily: theme("fontFamily.cal"),
-      fontSize: theme("fontSize.xl"),
-      fontWeight: theme("fontWeight.semibold"),
      color: theme("colors.black"),
    },
+
+    //** Base heading styles */
+    h1: h1Base,
+    h2: h2Base,
+    h3: h3Base,
+
    ".dark": {
-      "h1, h2, h3": {
+      "h1, h2, h3, h4": {
        color: theme("colors.darkgray.900"),
      },
    },
  });
+
+  //** Component heading styles - used if a heading needs to look like another varient*/
+  addComponents({
+    ".title-1": h1Base,
+    ".title-2": h2Base,
+    ".title-3": h3Base,
+  });
 });
--- a/packages/features/apps/AdminAppsList.tsx
+++ b/packages/features/apps/AdminAppsList.tsx
@ -76,7 +76,7 @@ const IntegrationContainer = ({
          <div className="flex w-full flex-1 items-center justify-between space-x-3 p-4 rtl:space-x-reverse md:max-w-3xl">
            {app.logo && <img className="h-10 w-10" src={app.logo} alt={app.title} />}
            <div className="flex-grow truncate pl-2">
-              <h3 className="truncate text-sm font-medium text-gray-900">
+              <h3 className="truncate">
                <p>{app.name || app.title}</p>
              </h3>
              <p className="truncate text-sm text-gray-500">{app.description}</p>
--- a/packages/features/calendars/weeklyview/components/Calendar.tsx
+++ b/packages/features/calendars/weeklyview/components/Calendar.tsx
@ -124,7 +124,7 @@ const MobileNotSupported = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      <div className="flex h-full flex-col items-center justify-center sm:hidden">
-        <h1 className="text-2xl font-bold">Mobile not supported yet </h1>
+        <h1>Mobile not supported yet </h1>
        <p className="text-gray-500">Please use a desktop browser to view this page</p>
      </div>
      <div className="hidden sm:block">{children}</div>
--- a/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
+++ b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
@ -12,7 +12,7 @@ export function SchedulerHeading() {

  return (
    <header className="flex flex-none flex-col justify-between py-4 sm:flex-row sm:items-center">
-      <h1 className="text-xl font-semibold text-gray-900">
+      <h1>
        {startDate.format("MMM DD")}-{endDate.format("DD")}
        <span className="text-gray-500">,{startDate.format("YYYY")}</span>
      </h1>
--- a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
@ -61,9 +61,7 @@ export default function ApiKeyDialogForm({
      {successfulNewApiKeyModal ? (
        <>
          <div className="mb-10">
-            <h2 className="font-semi-bold font-cal mb-2 text-xl tracking-wide text-gray-900">
-              {t("success_api_key_created")}
-            </h2>
+            <h2 className="mb-2 tracking-wide">{t("success_api_key_created")}</h2>
            <div className="text-sm text-gray-900">
              <span className="font-semibold">{t("success_api_key_created_bold_tagline")}</span>{" "}
              {t("you_will_only_view_it_once")}
@ -117,9 +115,7 @@ export default function ApiKeyDialogForm({
          }}
          className="space-y-4">
          <div className="mt-1 mb-10">
-            <h2 className="font-semi-bold font-cal text-xl tracking-wide text-gray-900">
-              {defaultValues ? t("edit_api_key") : t("create_api_key")}
-            </h2>
+            <h2 className="tracking-wide">{defaultValues ? t("edit_api_key") : t("create_api_key")}</h2>
            <p className="mt-1 mb-5 text-sm text-gray-500">{t("api_key_modal_subtitle")}</p>
          </div>
          <div>
--- a/packages/features/ee/sso/components/ConfigDialogForm.tsx
+++ b/packages/features/ee/sso/components/ConfigDialogForm.tsx
@ -47,9 +47,7 @@ export default function ConfigDialogForm({
          });
        }}>
        <div className="mb-10 mt-1">
-          <h2 className="font-semi-bold font-cal text-xl tracking-wide text-gray-900">
-            {t("saml_configuration")}
-          </h2>
+          <h2 className="tracking-wide">{t("saml_configuration")}</h2>
          <p className="mt-1 mb-5 text-sm text-gray-500">{t("saml_configuration_description")}</p>
        </div>
        <Controller
--- a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
+++ b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
@ -71,7 +71,7 @@ export default function MemberChangeRoleModal(props: {
        <>
          <div className="mb-4 sm:flex sm:items-start">
            <div className="text-center sm:text-left">
-              <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+              <h3 className="leading-6" id="modal-title">
                {t("change_member_role")}
              </h3>
            </div>
--- a/packages/features/ee/teams/components/TeamsListing.tsx
+++ b/packages/features/ee/teams/components/TeamsListing.tsx
@ -45,7 +45,7 @@ export function TeamsListing() {
      {!!errorMessage && <Alert severity="error" title={errorMessage} />}
      {invites.length > 0 && (
        <div className="mb-4">
-          <h1 className="mb-2 text-lg font-medium">{t("open_invitations")}</h1>
+          <h1 className="mb-2 ">{t("open_invitations")}</h1>
          <TeamList teams={invites} />
        </div>
      )}
@ -62,7 +62,7 @@ export function TeamsListing() {
                  backgroundRepeat: "no-repeat",
                }}>
                <div className="mt-3 px-14">
-                  <h1 className="font-cal text-3xl">{t("calcom_is_better_with_team")}</h1>
+                  <h1>{t("calcom_is_better_with_team")}</h1>
                  <p className="my-4 max-w-sm text-gray-600">{t("add_your_team_members")}</p>
                  <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
                    <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
@ -78,7 +78,7 @@ export function TeamsListing() {
                {features.map((feature) => (
                  <div key={feature.title} className="mb-6 min-h-[180px] w-full rounded-md bg-gray-50 p-8">
                    {feature.icon}
-                    <h2 className="font-cal mt-4 text-lg">{feature.title}</h2>
+                    <h2 className="mt-4">{feature.title}</h2>
                    <p className="text-gray-700">{feature.description}</p>
                  </div>
                ))}
--- a/packages/features/ee/teams/pages/team-billing-view.tsx
+++ b/packages/features/ee/teams/pages/team-billing-view.tsx
@ -16,7 +16,7 @@ const BillingView = () => {
      <Meta title={t("team_billing")} description={t("team_billing_description")} />
      <div className="flex flex-col text-sm sm:flex-row">
        <div>
-          <h2 className="font-medium">{t("billing_manage_details_title")}</h2>
+          <h2>{t("billing_manage_details_title")}</h2>
          <p>{t("billing_manage_details_description")}</p>
        </div>
        <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pt-0 sm:pl-3">
--- a/packages/features/ee/video/ViewRecordingsDialog.tsx
+++ b/packages/features/ee/video/ViewRecordingsDialog.tsx
@ -116,7 +116,7 @@ export const ViewRecordingsDialog = (props: IViewRecordingsDialog) => {
                        className="flex w-full items-center justify-between rounded-md border py-2 px-4"
                        key={recording.id}>
                        <div className="flex flex-col">
-                          <h1 className="text-sm font-semibold">
+                          <h1>
                            {t("recording")} {index + 1}
                          </h1>
                          <p className="text-sm font-normal text-gray-500">
@ -148,7 +148,7 @@ export const ViewRecordingsDialog = (props: IViewRecordingsDialog) => {
              {!isLoading &&
                (!recordings ||
                  (recordings && "total_count" in recordings && recordings?.total_count === 0)) && (
-                  <h1 className="font-semibold">No Recordings Found</h1>
+                  <h1>No Recordings Found</h1>
                )}
            </>
          )}
--- a/packages/features/ee/video/components/UpgradeRecordingBanner.tsx
+++ b/packages/features/ee/video/components/UpgradeRecordingBanner.tsx
@ -13,7 +13,7 @@ export default function UpgradeRecordingBanner() {
      <Icon.FiUsers className="dark:bg-gray-90 inline-block h-5 w-5" />
      <div className="flex flex-col gap-4">
        <div className="flex flex-col gap-2">
-          <h2 className="text-sm font-semibold">{t("upgrade_to_access_recordings_title")}</h2>
+          <h2>{t("upgrade_to_access_recordings_title")}</h2>
          <p className="text-sm font-normal">{t("upgrade_to_access_recordings_description")}</p>
        </div>
        <div>
--- a/packages/features/ee/workflows/components/EmptyScreen.tsx
+++ b/packages/features/ee/workflows/components/EmptyScreen.tsx
@ -66,7 +66,7 @@ export default function EmptyScreen({
          <IconHeading className="inline-block h-10 w-10 stroke-[1.3px] dark:bg-gray-900 dark:text-gray-600" />
        </div>
        <div className="max-w-[420px] text-center">
-          <h2 className="text-semibold font-cal mt-6 text-xl dark:text-gray-300">{headline}</h2>
+          <h2 className="tmt-6 ">{headline}</h2>
          <p className="line-clamp-2 mt-3 text-sm font-normal leading-6 text-gray-700 dark:text-gray-300">
            {description}
          </p>
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@ -732,7 +732,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
        <Dialog open={isAdditionalInputsDialogOpen} onOpenChange={setIsAdditionalInputsDialogOpen}>
          <DialogContent type="creation" className="sm:max-w-[610px] md:h-[570px]">
            <div className="-m-3 h-[430px] overflow-x-hidden overflow-y-scroll sm:m-0">
-              <h1 className="w-full text-xl font-semibold ">{t("how_additional_inputs_as_variables")}</h1>
+              <h1 className="w-full">{t("how_additional_inputs_as_variables")}</h1>
              <div className="mb-7 mt-7 rounded-md bg-gray-50 p-3 sm:p-4">
                <p className="test-sm font-medium">{t("format")}</p>
                <ul className="mt-2 ml-5 list-disc text-gray-900">
--- a/packages/features/eventtypes/components/EmptyPage.tsx
+++ b/packages/features/eventtypes/components/EmptyPage.tsx
@ -32,10 +32,8 @@ function EmptyPage({ name }: { name: string }) {
        <SkeletonEventType />
      </div>
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
-        <h3 className="text-lg font-semibold text-gray-600 dark:text-white">{t("no_event_types")} </h3>
-        <h4 className="text-sm leading-normal text-gray-600 dark:text-white">
-          {t("no_event_types_description", { name })}
-        </h4>
+        <h3 className="">{t("no_event_types")} </h3>
+        <h4 className="leading-normal">{t("no_event_types_description", { name })}</h4>
      </div>
    </div>
  );
--- a/packages/features/schedules/components/DateOverrideList.tsx
+++ b/packages/features/schedules/components/DateOverrideList.tsx
@ -42,7 +42,7 @@ const DateOverrideList = ({
      {items.map((item, index) => (
        <li key={item.id} className="flex justify-between border-b px-5 py-4 last:border-b-0">
          <div>
-            <h3 className="text-sm text-gray-900">
+            <h3>
              {new Intl.DateTimeFormat("en-GB", {
                weekday: "short",
                month: "long",
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@ -431,7 +431,7 @@ function ShellHeader() {
        )}
        <div>
          {meta.title && isLocaleReady ? (
-            <h1 className="font-cal mb-1 text-xl font-bold tracking-wide text-black">{t(meta.title)}</h1>
+            <h1 className="mb-1  tracking-wide ">{t(meta.title)}</h1>
          ) : (
            <div className="mb-1 h-6 w-24 animate-pulse rounded-md bg-gray-200" />
          )}
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@ -792,7 +792,7 @@ export function ShellMain(props: LayoutProps) {
            {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
            <div className="w-full ltr:mr-4 rtl:ml-4 sm:block">
              {props.heading && (
-                <h1 className="font-cal max-w-28 sm:max-w-72 md:max-w-80 mb-1 hidden truncate text-xl font-bold tracking-wide text-black sm:block xl:max-w-full">
+                <h1 className="max-w-28 sm:max-w-72 md:max-w-80 mb-1 hidden truncate tracking-wide sm:block xl:max-w-full">
                  {!isLocaleReady ? <SkeletonText invisible /> : props.heading}
                </h1>
              )}
--- a/packages/features/webhooks/components/WebhookTestDisclosure.tsx
+++ b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
@ -18,7 +18,7 @@ export default function WebhookTestDisclosure() {
    <div className="space-y-0 rounded-md border-0 border-neutral-200 bg-white sm:mx-0 md:border">
      <div className="flex justify-between border-b p-4">
        <div className="flex items-center space-x-1">
-          <h3 className="font-sm self-center font-medium text-black">{t("webhook_response")}</h3>
+          <h3 className="self-center">{t("webhook_response")}</h3>
          {mutation.data && (
            <Badge variant={mutation.data.ok ? "green" : "red"}>
              {mutation.data.ok ? t("passed") : t("failed")}
--- a/packages/ui/components/alert/Alert.tsx
+++ b/packages/ui/components/alert/Alert.tsx
@ -57,7 +57,7 @@ export function Alert(props: AlertProps) {
          )}
        </div>
        <div className="ml-3 flex-grow">
-          <h3 className="text-sm font-medium">{props.title}</h3>
+          <h3>{props.title}</h3>
          <div className="text-sm">{props.message}</div>
        </div>
        {/* @TODO: Shouldn't be absolute. This makes it harder to give margin etc. */}
--- a/packages/ui/components/apps/AllApps.tsx
+++ b/packages/ui/components/apps/AllApps.tsx
@ -66,7 +66,7 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
  };
  return (
    <div className="relative mb-4 flex flex-col justify-between lg:flex-row lg:items-center">
-      <h2 className="hidden text-lg font-semibold text-gray-900 sm:block">
+      <h2 className="hidden sm:block">
        {searchText
          ? t("search")
          : t("explore_apps", {
--- a/packages/ui/components/apps/AppCard.tsx
+++ b/packages/ui/components/apps/AppCard.tsx
@ -44,7 +44,7 @@ export function AppCard({ app, credentials, searchText }: AppCardProps) {
        <img src={app.logo} alt={app.name + " Logo"} className="mb-4 h-12 w-12 rounded-sm" />
      </div>
      <div className="flex items-center">
-        <h3 className="font-medium">
+        <h3>
          {searchTextIndex != undefined && searchText ? (
            <>
              {app.name.substring(0, searchTextIndex)}
--- a/packages/ui/components/apps/Categories.tsx
+++ b/packages/ui/components/apps/Categories.tsx
@ -37,11 +37,7 @@ export function AppStoreCategories({
            className="relative flex rounded-md"
            style={{ background: "radial-gradient(farthest-side at top right, #a2abbe 0%, #E3E3E3 100%)" }}>
            <div className="w-full self-center bg-[url('/noise.svg')] bg-cover bg-center bg-no-repeat px-6 py-4">
-              {isLocaleReady ? (
-                <h3 className="font-medium capitalize">{category.name}</h3>
-              ) : (
-                <SkeletonText invisible />
-              )}
+              {isLocaleReady ? <h3 className="capitalize">{category.name}</h3> : <SkeletonText invisible />}
              <p className="text-sm text-gray-500">
                {isLocaleReady ? t("number_apps", { count: category.count }) : <SkeletonText invisible />}{" "}
                <Icon.FiArrowRight className="inline-block h-4 w-4" />
--- a/packages/ui/components/apps/Slider.tsx
+++ b/packages/ui/components/apps/Slider.tsx
@ -51,7 +51,7 @@ export const Slider = <T extends string | unknown>({
          {isLocaleReady ? (
            title && (
              <div>
-                <h2 className="mt-0 mb-2 text-lg font-semibold text-gray-900">{title}</h2>
+                <h2 className="mt-0 mb-2">{title}</h2>
              </div>
            )
          ) : (
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@ -128,7 +128,7 @@ export function DialogHeader(props: DialogHeaderProps) {

  return (
    <div className="mb-4">
-      <h3 className="leading-20 text-semibold font-cal pb-1 text-xl text-gray-900" id="modal-title">
+      <h3 className="leading-20 pb-1" id="modal-title">
        {props.title}
      </h3>
      {props.subtitle && <div className="text-sm text-gray-500">{props.subtitle}</div>}
--- a/packages/ui/components/empty-screen/EmptyScreen.tsx
+++ b/packages/ui/components/empty-screen/EmptyScreen.tsx
@ -29,7 +29,7 @@ export function EmptyScreen({
          <Icon className="inline-block h-10 w-10 stroke-[1.3px] dark:bg-gray-900 dark:text-gray-600" />
        </div>
        <div className="flex max-w-[420px] flex-col items-center">
-          <h2 className="text-semibold font-cal mt-6 text-center text-xl dark:text-gray-300">{headline}</h2>
+          <h2 className="mt-6 text-center">{headline}</h2>
          <div className="mt-3 mb-8 text-center text-sm font-normal leading-6 text-gray-700 dark:text-gray-300">
            {description}
          </div>
--- a/packages/ui/components/image-uploader/ImageUploader.tsx
+++ b/packages/ui/components/image-uploader/ImageUploader.tsx
@ -166,7 +166,7 @@ export default function ImageUploader({
      <DialogContent>
        <div className="mb-4 sm:flex sm:items-start">
          <div className="mt-3 text-center sm:mt-0 sm:text-left">
-            <h3 className="font-cal text-lg leading-6 text-gray-900" id="modal-title">
+            <h3 className="leading-6" id="modal-title">
              {t("upload_target", { target })}
            </h3>
          </div>
--- a/packages/ui/components/layout/ShellSubHeading.tsx
+++ b/packages/ui/components/layout/ShellSubHeading.tsx
@ -11,7 +11,7 @@ export function ShellSubHeading(props: {
  return (
    <header className={classNames("mb-3 block justify-between sm:flex", props.className)}>
      <div>
-        <h2 className="flex content-center items-center space-x-2 text-base font-bold leading-6 text-gray-900 rtl:space-x-reverse">
+        <h2 className="flex content-center items-center space-x-2 leading-6 rtl:space-x-reverse">
          {props.title}
        </h2>
        {props.subtitle && <p className="text-sm text-gray-500 ltr:mr-4">{props.subtitle}</p>}
--- a/packages/ui/components/list/List.tsx
+++ b/packages/ui/components/list/List.tsx
@ -86,8 +86,8 @@ export function ListLinkItem(props: ListLinkItemProps) {
          "flex-grow truncate text-sm",
          disabled ? "pointer-events-none cursor-not-allowed opacity-30" : ""
        )}>
-        <h1 className="text-sm font-semibold leading-none">{heading}</h1>
-        <h2 className="min-h-4 mt-2 text-sm font-normal leading-none">
+        <h1 className="leading-none">{heading}</h1>
+        <h2 className="min-h-4 mt-2 leading-none">
          {subHeading.substring(0, 100)}
          {subHeading.length > 100 && "..."}
        </h2>