From 846b4514bae13e1566b7d0632b0e112b59cc72a6 Mon Sep 17 00:00:00 2001 From: Zai Shi Date: Sun, 14 Apr 2024 10:28:26 +0200 Subject: [PATCH] fixed ui bugs --- .../02-customization/03-custom-components.md | 2 +- packages/stack/src/components-core/avatar.tsx | 4 ++-- packages/stack/src/components-core/card.tsx | 24 ------------------- .../stack/src/components-core/dropdown.tsx | 1 + packages/stack/src/components-core/index.tsx | 11 +-------- .../src/components-page/account-settings.tsx | 7 +++--- .../src/providers/component-provider.tsx | 3 +-- 7 files changed, 9 insertions(+), 43 deletions(-) diff --git a/docs/docs/02-customization/03-custom-components.md b/docs/docs/02-customization/03-custom-components.md index 3b238f156..031792a29 100644 --- a/docs/docs/02-customization/03-custom-components.md +++ b/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 diff --git a/packages/stack/src/components-core/avatar.tsx b/packages/stack/src/components-core/avatar.tsx index cf0fecd1b..1f3c8c1f8 100644 --- a/packages/stack/src/components-core/avatar.tsx +++ b/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; diff --git a/packages/stack/src/components-core/card.tsx b/packages/stack/src/components-core/card.tsx index caaf910ee..6c38e4e43 100644 --- a/packages/stack/src/components-core/card.tsx +++ b/packages/stack/src/components-core/card.tsx @@ -15,16 +15,6 @@ const CardHeader = React.forwardRef>((props, ref) => ( - -)); -CardTitle.displayName = "CardTitle"; - -const CardDescription = React.forwardRef>((props, ref) => ( - -)); -CardDescription.displayName = "CardDescription"; - const CardContent = React.forwardRef>((props, ref) => ( )); @@ -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, }; diff --git a/packages/stack/src/components-core/dropdown.tsx b/packages/stack/src/components-core/dropdown.tsx index 04c8bca54..7e4e97ce4 100644 --- a/packages/stack/src/components-core/dropdown.tsx +++ b/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; diff --git a/packages/stack/src/components-core/index.tsx b/packages/stack/src/components-core/index.tsx index 6b5002c92..a2a6847bc 100644 --- a/packages/stack/src/components-core/index.tsx +++ b/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 ; -}); - -export const CardDescription = forwardRef< - HTMLParagraphElement, - React.ComponentProps ->((props, ref) => { - const { CardDescription } = useComponents(); - return ; -}); +}); \ No newline at end of file diff --git a/packages/stack/src/components-page/account-settings.tsx b/packages/stack/src/components-page/account-settings.tsx index b35fc8d6f..265386c05 100644 --- a/packages/stack/src/components-page/account-settings.tsx +++ b/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 ( - {props.title} - {props.desc} + {props.title} + {props.desc} {props.children &&
diff --git a/packages/stack/src/providers/component-provider.tsx b/packages/stack/src/providers/component-provider.tsx index 7c81054dd..d90d3afae 100644 --- a/packages/stack/src/providers/component-provider.tsx +++ b/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 = {