Repository: supabase/supabase
File: apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx (TypeScript)

Code before:
        <div className="my-12">
          {builtInSMTP ? (
            <div className="mb-4">
              <EmailRateLimitsAlert />
            </div>
          ) : null}
          {isSecurityNotificationsEnabled ? (
            <Card>
              {TEMPLATES_SCHEMAS.map((template) => {
                const templateSlug = template.title.trim().replace(/\s+/g, '-').toLowerCase()
                return (
                  <CardContent key={`${template.id}`} className="p-0">
                    <Link
                      href={`/project/${projectRef}/auth/templates/${templateSlug}`}
                      className="flex items-center justify-between hover:bg-surface-200 transition-colors py-4 px-6 w-full h-full"
                    >
                      <div className="flex flex-col">
                        <h3 className="text-sm text-foreground">{template.title}</h3>
                        {template.purpose && (
                          <p className="text-sm text-foreground-lighter">{template.purpose}</p>
                        )}
                      </div>
                      <ChevronRight
                        size={16}
                        className="text-foreground-muted group-hover:text-foreground transition-colors"
                      />
                    </Link>
                  </CardContent>
                )
              })}
            </Card>
          ) : (
            <Card>
              <Tabs_Shadcn_ defaultValue={TEMPLATES_SCHEMAS[0].title.trim().replace(/\s+/g, '-')}>
                <TabsList_Shadcn_ className="pt-2 px-6 gap-5 mb-0 overflow-x-scroll no-scrollbar mb-4">
                  {TEMPLATES_SCHEMAS.map((template) => {
                    return (
                      <TabsTrigger_Shadcn_
                        key={`${template.id}`}
                        value={template.title.trim().replace(/\s+/g, '-')}
                      >
                        {template.title}
                      </TabsTrigger_Shadcn_>
                    )
                  })}
                </TabsList_Shadcn_>
                {TEMPLATES_SCHEMAS.map((template) => {
                  const panelId = template.title.trim().replace(/\s+/g, '-')
                  return (
                    <TabsContent_Shadcn_ key={panelId} value={panelId} className="mt-0">
                      <TemplateEditor key={template.title} template={template} />

Review comment (suggestion):
I couldn’t get `group-hover:text-foreground transition-colors` to work. Feel free to remove.

Code after:
      {isSuccess && (
        <div className="my-12">
          {builtInSMTP ? (
            <div className="mb-4">
              <EmailRateLimitsAlert />
            </div>
          ) : null}
          {isSecurityNotificationsEnabled ? (
            <Card>
              {TEMPLATES_SCHEMAS.map((template) => {
                const templateSlug = slugifyTitle(template.title)
                return (
                  <CardContent key={`${template.id}`} className="p-0">
                    <Link
                      href={`/project/${projectRef}/auth/templates/${templateSlug}`}
                      className="flex items-center justify-between hover:bg-surface-200 transition-colors py-4 px-6 w-full h-full"
                    >
                      <div className="flex flex-col">
                        <h3 className="text-sm text-foreground">{template.title}</h3>
                        {template.purpose && (
                          <p className="text-sm text-foreground-lighter">{template.purpose}</p>
                        )}
                      </div>
                      <ChevronRight
                        size={16}
                        className="text-foreground-muted group-hover:text-foreground transition-colors"
                      />
                    </Link>
                  </CardContent>
                )
              })}
            </Card>
          ) : (
            <Card>
              <Tabs_Shadcn_ defaultValue={slugifyTitle(TEMPLATES_SCHEMAS[0].title)}>
                <TabsList_Shadcn_ className="pt-2 px-6 gap-5 mb-0 overflow-x-scroll no-scrollbar mb-4">
                  {TEMPLATES_SCHEMAS.map((template) => {
                    return (
                      <TabsTrigger_Shadcn_
                        key={`${template.id}`}
                        value={slugifyTitle(template.title)}
                      >
                        {template.title}
                      </TabsTrigger_Shadcn_>
                    )
                  })}
                </TabsList_Shadcn_>
                {TEMPLATES_SCHEMAS.map((template) => {
                  const panelId = slugifyTitle(template.title)
                  return (
                    <TabsContent_Shadcn_ key={panelId} value={panelId} className="mt-0">