CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-13 21:01:21 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fixed ux problems

Browse Source
This commit is contained in:
Zai Shi 2024-05-16 15:48:57 +02:00
parent a789929a74
commit 2e3fcb1dfd
5 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx
View File

@ -177,7 +177,7 @@ export function ProviderSettingSwitch(props: Props) {
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Badge variant="outline">shared keys</Badge>
<Badge variant="secondary">shared keys</Badge>
</TooltipTrigger>
<TooltipContent>
Shared keys are created by the Stack team for easy development experience

2
packages/stack-server/src/components/data-table/elements/cells.tsx
View File

@ -88,7 +88,7 @@ export function BadgeCell(props: { badges: string[], size?: number }) {
return (
<div className="flex items-center gap-1 flex-wrap">
{props.badges.map((badge, index) => (
<Badge key={index} variant="outline">{badge}</Badge>
<Badge key={index} variant="secondary">{badge}</Badge>
))}
</div>
);

3
packages/stack-server/src/components/data-table/elements/faceted-filter.tsx
View File

@ -20,6 +20,7 @@ import {
PopoverTrigger,
} from "@/components/ui/popover";
import { Separator } from "@/components/ui/separator";
import { Filter, ListFilter } from "lucide-react";
interface DataTableFacetedFilterProps<TData, TValue> {
column?: Column<TData, TValue>,
@ -43,7 +44,7 @@ export function DataTableFacetedFilter<TData, TValue>({
<Popover>
<PopoverTrigger asChild>
<Button variant="outline" size="sm" className="h-8 border">
<PlusCircledIcon className="mr-2 h-4 w-4" />
<ListFilter className="mr-2 h-4 w-4 text-gray-500" />
{title}
{selectedValues?.size > 0 && (
<>

8
packages/stack-server/src/components/data-table/user-table.tsx
View File

@ -129,6 +129,10 @@ function UserActions({ row }: { row: Row<ExtendedServerUser> }) {
);
}
function capitalizeFirstLetter(s: string) {
return s.charAt(0).toUpperCase() + s.slice(1);
}
export const commonUserColumns: ColumnDef<ExtendedServerUser>[] = [
{
accessorKey: "id",
@ -158,13 +162,13 @@ const columns: ColumnDef<ExtendedServerUser>[] = [
{
accessorKey: "emailVerified",
header: ({ column }) => <DataTableColumnHeader column={column} title="Email Verified" />,
cell: ({ row }) => <BadgeCell badges={[row.original.emailVerified === 'verified' ? '✓' : '✗']} />,
cell: ({ row }) => <TextCell>{row.original.emailVerified === 'verified' ? '✓' : ''}</TextCell>,
filterFn: standardFilterFn
},
{
accessorKey: "authType",
header: ({ column }) => <DataTableColumnHeader column={column} title="Auth Method" />,
cell: ({ row }) => <BadgeCell badges={[row.original.authType]} />,
cell: ({ row }) => <BadgeCell badges={[capitalizeFirstLetter(row.original.authType)]} />,
filterFn: standardFilterFn,
},
{

4
packages/stack-server/src/components/settings.tsx
View File

@ -56,14 +56,14 @@ export function SettingSwitch(props: {
};
return (
<div className="flex items-center gap-2">
<div className="flex items-center">
<Switch
id={id}
checked={checked}
onCheckedChange={onCheckedChange}
disabled={props.disabled}
/>
<Label htmlFor={id}>{props.label}</Label>
<Label className='px-2' htmlFor={id}>{props.label}</Label>
{showActions && props.actions}
</div>
);