From 2e3fcb1dfda77c1a605c2da0ff92b20c7a46162e Mon Sep 17 00:00:00 2001
From: Zai Shi <zaishi00@outlook.com>
Date: Thu, 16 May 2024 15:48:57 +0200
Subject: [PATCH] fixed ux problems

---
 .../projects/[projectId]/auth-methods/providers.tsx       | 2 +-
 .../src/components/data-table/elements/cells.tsx          | 2 +-
 .../src/components/data-table/elements/faceted-filter.tsx | 3 ++-
 .../stack-server/src/components/data-table/user-table.tsx | 8 ++++++--
 packages/stack-server/src/components/settings.tsx         | 4 ++--
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx b/packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx
index 4e57586d0..7c013a10b 100644
--- a/packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx
+++ b/packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx
@@ -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
diff --git a/packages/stack-server/src/components/data-table/elements/cells.tsx b/packages/stack-server/src/components/data-table/elements/cells.tsx
index d114f4403..49edfdbd6 100644
--- a/packages/stack-server/src/components/data-table/elements/cells.tsx
+++ b/packages/stack-server/src/components/data-table/elements/cells.tsx
@@ -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>
   );
diff --git a/packages/stack-server/src/components/data-table/elements/faceted-filter.tsx b/packages/stack-server/src/components/data-table/elements/faceted-filter.tsx
index 7dde01f77..cc991e891 100644
--- a/packages/stack-server/src/components/data-table/elements/faceted-filter.tsx
+++ b/packages/stack-server/src/components/data-table/elements/faceted-filter.tsx
@@ -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 && (
             <>
diff --git a/packages/stack-server/src/components/data-table/user-table.tsx b/packages/stack-server/src/components/data-table/user-table.tsx
index 820ebc287..328217c79 100644
--- a/packages/stack-server/src/components/data-table/user-table.tsx
+++ b/packages/stack-server/src/components/data-table/user-table.tsx
@@ -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,
   },
   {
diff --git a/packages/stack-server/src/components/settings.tsx b/packages/stack-server/src/components/settings.tsx
index 7a69a87b4..4b37e3799 100644
--- a/packages/stack-server/src/components/settings.tsx
+++ b/packages/stack-server/src/components/settings.tsx
@@ -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>
   );