chore: remove markdown component from billing (supabase#30664)

Author: kevcodez

apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx

@@ -2,7 +2,7 @@ import { useProjectsQuery } from 'data/projects/projects-query'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 import type { Organization } from 'types'
 import { Admonition } from 'ui-patterns'
-import { Markdown } from '../Markdown'
+import Link from 'next/link'
 
 interface NoProjectsOnPaidOrgInfoProps {
   organization?: Organization
@@ -28,11 +28,11 @@ export const NoProjectsOnPaidOrgInfo = ({ organization }: NoProjectsOnPaidOrgInf
       type="default"
       title={`Your organization is on the ${orgSubscription.plan.name} plan with no projects running`}
       description={
-        <Markdown
-          className="!max-w-full"
-          content={`The monthly fees for the paid plan still apply. To cancel your subscription, head over to
-          your [organization billing settings](/dashboard/org/${organization?.slug}/billing).`}
-        />
+        <div className="!max-w-full prose text-sm">
+          The monthly fees for the paid plan still apply. To cancel your subscription, head over to
+          your{' '}
+          <Link href={`/org/${organization?.slug}/billing`}>organization billing settings</Link>
+        </div>
       }
     />
   )

apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx

@@ -4,7 +4,6 @@ import dayjs from 'dayjs'
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 
-import { Markdown } from 'components/interfaces/Markdown'
 import {
   ScaffoldSection,
   ScaffoldSectionContent,
@@ -147,10 +146,14 @@ const Subscription = () => {
                       type="default"
                       title="This organization is limited by the included usage"
                     >
-                      <Markdown
-                        className="[&>p]:!leading-normal"
-                        content={`Projects may become unresponsive when this organization exceeds its [included usage quota](/org/${slug}/usage). To scale seamlessly and pay for over-usage, ${currentPlan?.id === 'free' ? 'upgrade to a paid plan.' : 'you can disable Spend Cap under the Cost Control settings.'}`}
-                      />
+                      <div className="[&>p]:!leading-normal prose text-sm">
+                        Projects may become unresponsive when this organization exceeds its
+                        <Link href={`/org/${slug}/usage`}>included usage quota</Link>. To scale
+                        seamlessly and pay for over-usage, $
+                        {currentPlan?.id === 'free'
+                          ? 'upgrade to a paid plan.'
+                          : 'you can disable Spend Cap under the Cost Control settings.'}
+                      </div>
                       <Button
                         type="default"
                         className="mt-1"