fixed ui bugs

docs/docs/02-customization/03-custom-components.md

@@ -84,7 +84,7 @@ Here is a list of low-level components that you can customize, stared ones are t
 - `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSeparator`
 - `Avatar`, `AvatarFallback`, `AvatarImage`
 - `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent`
-- `Card`, `CardHeader`, `CardContent`, `CardFooter`, `CardDescription`
+- `Card`, `CardHeader`, `CardContent`, `CardFooter`
 
 ## MUI Joy setup
 

packages/stack/src/components-core/avatar.tsx

@@ -7,8 +7,8 @@ import { SECONDARY_FONT_COLORS } from '../utils/constants';
 const StyledAvatar = styled(AvatarPrimitive.Root)`
   position: relative;
   display: flex;
-  height: 2.25rem;
-  width: 2.25rem;
+  height: 2rem;
+  width: 2rem;
   flex-shrink: 0;
   overflow: hidden;
   border-radius: 9999px;

packages/stack/src/components-core/card.tsx

@@ -15,16 +15,6 @@ const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
 ));
 CardHeader.displayName = "CardHeader";
 
-const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>((props, ref) => (
-  <StyledCardTitle ref={ref} {...props} />
-));
-CardTitle.displayName = "CardTitle";
-
-const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>((props, ref) => (
-  <StyledCardDescription ref={ref} {...props} />
-));
-CardDescription.displayName = "CardDescription";
-
 const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (
   <StyledCardContent ref={ref} {...props} />
 ));
@@ -53,18 +43,6 @@ const StyledCardHeader = styled.div`
   margin-bottom: 1.5rem;
 `;
 
-const StyledCardTitle = styled.h3`
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: -0.05em;
-`;
-
-const StyledCardDescription = styled.p`
-  font-size: 0.875rem;
-  color: #6c757d; /* Example muted text color */
-`;
-
 const StyledCardContent = styled.div`
 `;
 
@@ -78,7 +56,5 @@ export {
   Card, 
   CardHeader, 
   CardFooter, 
-  CardTitle, 
-  CardDescription, 
   CardContent,
 };

packages/stack/src/components-core/dropdown.tsx

@@ -9,6 +9,7 @@ import { SELECTED_BACKGROUND_COLORS } from '../utils/constants';
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
 const StyledTrigger = styled(DropdownMenuPrimitive.Trigger)`
+  all: unset;
   &:focus {
     outline: none;
     box-shadow: 0;

packages/stack/src/components-core/index.tsx

@@ -15,7 +15,6 @@ import type {
   CardHeader as StaticCardHeader,
   CardContent as StaticCardContent,
   CardFooter as StaticCardFooter,
-  CardDescription as StaticCardDescription,
 } from './card';
 import type { 
   Popover as StaticPopover,
@@ -246,12 +245,4 @@ export const CardFooter = forwardRef<
 >((props, ref) => {
   const { CardFooter } = useComponents();
   return <CardFooter {...props} ref={ref} />;
-});
-
-export const CardDescription = forwardRef<
-  HTMLParagraphElement, 
-  React.ComponentProps<typeof StaticCardDescription>
->((props, ref) => {
-  const { CardDescription } = useComponents();
-  return <CardDescription {...props} ref={ref} />;
-});
+});

packages/stack/src/components-page/account-settings.tsx

@@ -3,11 +3,10 @@
 import React from 'react';
 import { PasswordField, useUser } from '..';
 import RedirectMessageCard from '../components/redirect-message-card';
-import { Text, Label, Input, Button, Card, CardHeader, CardDescription, CardContent, CardFooter, Container } from "../components-core";
+import { Text, Label, Input, Button, Card, CardHeader, CardContent, CardFooter, Container } from "../components-core";
 import UserAvatar from '../components/user-avatar';
 import { useState } from 'react';
 import FormWarningText from '../components/form-warning';
-import { CardTitle } from '../components-core/card';
 import { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';
 
 function SettingSection(props: {
@@ -23,8 +22,8 @@ function SettingSection(props: {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>{props.title}</CardTitle>
-        <CardDescription>{props.desc}</CardDescription>
+        <Text size='xl' as='h2'>{props.title}</Text>
+        <Text variant='secondary'>{props.desc}</Text>
       </CardHeader>
       {props.children && <CardContent>
         <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>

packages/stack/src/providers/component-provider.tsx

@@ -8,7 +8,7 @@ import { Input } from '../components-core/input';
 import { Link } from '../components-core/link';
 import { Label } from '../components-core/label';
 import { Text } from '../components-core/text';
-import { Card, CardHeader, CardContent, CardFooter, CardDescription } from '../components-core/card';
+import { Card, CardHeader, CardContent, CardFooter } from '../components-core/card';
 import { Popover, PopoverTrigger, PopoverContent } from '../components-core/popover';
 import { 
   DropdownMenu,
@@ -48,7 +48,6 @@ export const Components = {
   CardHeader,
   CardContent,
   CardFooter,
-  CardDescription,
 } as const;
 
 export type ComponentConfig = {