Using fewer classnames

Author: SpicyPete

frontend/src/components/pages/rp-connect/template-gallery/template-form-panel.tsx

@@ -241,11 +241,7 @@ export const TemplateFormPanel = forwardRef<TemplateFormPanelHandle, TemplateFor
                 key={section}
               >
                 <div className="flex flex-wrap items-center gap-2.5 border-divider-default border-b pb-2.5">
-                  <Heading
-                    className="font-bold text-foreground text-sm uppercase tracking-wider"
-                    id={`section-${section}`}
-                    level={5}
-                  >
+                  <Heading className="font-bold uppercase tracking-wider" id={`section-${section}`} level={5}>
                     {SECTION_LABELS[section]}
                   </Heading>
                   {endpoint ? <EndpointBadge endpoint={endpoint} /> : null}

frontend/src/components/pages/rp-connect/template-gallery/template-gallery-grid.tsx

@@ -155,7 +155,7 @@ export const TemplateGalleryGrid = ({ onSelect }: TemplateGalleryGridProps) => {
           data-testid="template-gallery-empty"
         >
           <Search aria-hidden className="h-6 w-6 text-muted-foreground" />
-          <Text className="font-medium">No templates match your search</Text>
+          <Text variant="bodyStrongMedium">No templates match your search</Text>
           {hasFiltersActive ? (
             <Button onClick={clearFilters} size="sm" variant="outline">
               Clear filters
@@ -177,11 +177,7 @@ export const TemplateGalleryGrid = ({ onSelect }: TemplateGalleryGridProps) => {
                 data-testid={`template-gallery-category-${category}`}
                 key={category}
               >
-                <Heading
-                  className="font-semibold text-base text-foreground"
-                  id={`gallery-category-${category}`}
-                  level={3}
-                >
+                <Heading id={`gallery-category-${category}`} level={4}>
                   {TEMPLATE_CATEGORY_LABELS[category]}
                 </Heading>
                 <div className="grid grid-cols-1 gap-2.5 md:grid-cols-2 lg:grid-cols-3">

frontend/src/components/redpanda-ui/components/code-block-dynamic.tsx

@@ -29,7 +29,7 @@ import { buttonVariants } from './button';
 import { useShiki } from '../lib/use-shiki';
 import { cn, type SharedProps } from '../lib/utils';
 
-export function useEffectEvent<F extends (...params: never[]) => unknown>(callback: F): F {
+export function useStableCallback<F extends (...params: never[]) => unknown>(callback: F): F {
   const ref = useRef(callback);
   ref.current = callback;
 
@@ -40,7 +40,7 @@ export function useCopyButton(onCopy: () => void | Promise<void>): [checked: boo
   const [checked, setChecked] = useState(false);
   const timeoutRef = useRef<number | null>(null);
 
-  const onClick: MouseEventHandler = useEffectEvent(() => {
+  const onClick: MouseEventHandler = useStableCallback(() => {
     if (timeoutRef.current) {
       window.clearTimeout(timeoutRef.current);
     }
@@ -293,8 +293,6 @@ export function DynamicCodeBlock({
 
   return (
     <>
-      {/* React 19 stylesheet hoisting props (href, precedence) — not yet typed in @types/react@18. */}
-      {/* @ts-expect-error remove once React types are upgraded to 19 */}
       <style href="shiki-dual-theme" precedence="medium">
         {shikiDualThemeStyles}
       </style>

frontend/src/components/ui/connect/log-explorer.tsx

@@ -366,9 +366,7 @@ export function LogExplorer({ pipeline, serverless, enableLiveView = false, titl
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-3">
           {title ? (
-            <Heading className="font-semibold text-base text-foreground" level={3}>
-              {title}
-            </Heading>
+            <Heading level={4}>{title}</Heading>
           ) : null}
           {!liveViewEnabled && (
             <DataTableFilter actions={actions} columns={filterColumns} filters={filters} table={table} />

frontend/src/components/ui/secret/quick-add-secrets.tsx

@@ -19,8 +19,9 @@ import { Button } from 'components/redpanda-ui/components/button';
 import { Card, CardContent, CardHeader, CardTitle } from 'components/redpanda-ui/components/card';
 import { Field, FieldDescription, FieldError, FieldLabel } from 'components/redpanda-ui/components/field';
 import { Input } from 'components/redpanda-ui/components/input';
+import { Spinner } from 'components/redpanda-ui/components/spinner';
 import { Text } from 'components/redpanda-ui/components/typography';
-import { Check, Key, Loader2, Plus, X } from 'lucide-react';
+import { Check, Key, Plus, X } from 'lucide-react';
 import { CreateSecretRequestSchema } from 'protogen/redpanda/api/console/v1alpha1/secret_pb';
 import {
   CreateSecretRequestSchema as CreateSecretRequestSchemaDataPlane,
@@ -265,7 +266,7 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
 
   const requiredSecretsForm = (
     <>
-      <Alert variant="warning">
+      <Alert variant="destructive">
         <AlertTitle>Required secrets are missing</AlertTitle>
         <AlertDescription>
           The tool requires secrets to function properly. Create them below before proceeding.
@@ -299,7 +300,7 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
         <Button className="w-full" disabled={form.formState.isSubmitting} type="submit" variant="primary">
           {form.formState.isSubmitting ? (
             <div className="flex items-center gap-2">
-              <Loader2 className="h-4 w-4 animate-spin" />
+              <Spinner />
               <Text as="span">Creating...</Text>
             </div>
           ) : (
@@ -318,20 +319,16 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
     <>
       {/* Display newly created secrets */}
       {newlyCreatedSecrets.length > 0 && (
-        <div className="space-y-2">
-          <Text className="font-medium text-muted-foreground text-sm">Created secrets</Text>
-          <div className="flex flex-col gap-1.5">
+        <Alert icon={<Check />} variant="success">
+          <AlertTitle>Created secrets</AlertTitle>
+          <AlertDescription>
             {newlyCreatedSecrets.map((secretName) => (
-              <div
-                className="flex items-center gap-2 rounded-md border border-green-600/30 bg-green-600/5 px-3 py-2"
-                key={secretName}
-              >
-                <Check className="h-4 w-4 shrink-0 text-green-600" />
-                <Text className="font-mono text-sm">{secretName}</Text>
-              </div>
+              <Text className="font-mono" key={secretName} variant="bodyMedium">
+                {secretName}
+              </Text>
             ))}
-          </div>
-        </div>
+          </AlertDescription>
+        </Alert>
       )}
 
       {/* Form to add new secrets */}
@@ -385,7 +382,7 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
           <Button className="w-full" disabled={newSecretForm.formState.isSubmitting} type="submit" variant="primary">
             {newSecretForm.formState.isSubmitting ? (
               <div className="flex items-center gap-2">
-                <Loader2 className="h-4 w-4 animate-spin" />
+                <Spinner />
                 <Text as="span">Creating...</Text>
               </div>
             ) : (
@@ -423,9 +420,7 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
             <div className={hasRequiredSection ? 'space-y-3 border-t pt-4' : 'space-y-4'}>
               {hasRequiredSection && (
                 <div className="flex items-center justify-between gap-2">
-                  <Text className="font-medium" variant="bodyStrongMedium">
-                    Add a custom secret
-                  </Text>
+                  <Text variant="bodyStrongMedium">Add a custom secret</Text>
                   <Button
                     aria-label="Hide custom secret form"
                     icon={<X />}