[filigran-ui] Modify Sheet component and rename class text to font

FiligranHQ · Aug 20, 2024 · 674a815 · 674a815
1 parent fc47572
commit 674a815
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 19 deletions.
diff --git a/packages/filigran-ui/src/components/clients/data-table.tsx b/packages/filigran-ui/src/components/clients/data-table.tsx
@@ -332,13 +332,13 @@ const DataTableRowPerPage = ({
   const {table, t_i18n} = useContext(TableContext)
   return (
     <div className="flex items-center gap-s">
-      <p className="text-sub-content">{t_i18n('Rows per page')}</p>
+      <p className="font-sub-content">{t_i18n('Rows per page')}</p>
       <Select
         value={`${table.getState().pagination.pageSize}`}
         onValueChange={(value) => {
           table.setPageSize(Number(value))
         }}>
-        <div className="box-content flex h-8 rounded border border-border-medium-strong text-sub-content">
+        <div className="font-sub-content box-content flex h-8 rounded border border-border-medium-strong">
           <SelectTrigger className="border-none">
             <SelectValue placeholder={table.getState().pagination.pageSize} />
           </SelectTrigger>
@@ -381,7 +381,7 @@ const DataTablePagination = () => {
           aria-label={t_i18n('Go to previous page')}>
           <ArrowPreviousIcon className="h-3 w-3" />
         </Button>
-        <div className="h-8 p-s text-text-secondary text-sub-content">
+        <div className="font-sub-content h-8 p-s text-text-secondary">
           {t_i18n('Rows')}{' '}
           <span className="text-foreground">
             {table.getRowCount() > 0 ? pageIndex * pageSize + 1 : 0}{' '}

diff --git a/packages/filigran-ui/src/components/clients/sheet.tsx b/packages/filigran-ui/src/components/clients/sheet.tsx
@@ -6,6 +6,7 @@ import {cva, type VariantProps} from 'class-variance-authority'
 import {X} from 'lucide-react'
 
 import {cn} from '../../lib/utils'
+import {Button} from '../servers'
 
 const Sheet = SheetPrimitive.Root
 
@@ -31,7 +32,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  'fixed z-50 gap-4 pb-6 bg-background px-6 pt-16 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
   {
     variants: {
       side: {
@@ -64,9 +65,15 @@ const SheetContent = React.forwardRef<
       className={cn(sheetVariants({side}), className)}
       {...props}>
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
+      <SheetPrimitive.Close asChild>
+        <div className="absolute left-4 top-0 flex h-16 items-center">
+          <Button
+            variant="ghost"
+            className="text-primary hover:bg-hover/50 focus:bg-hover/50">
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </Button>
+        </div>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
   </SheetPortal>
@@ -79,7 +86,7 @@ const SheetHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col space-y-2 text-center sm:text-left',
+      'z-1 absolute left-0 right-0 top-0 flex h-16 flex-col justify-center border-b border-border-light bg-background pl-[4.5rem] text-foreground',
       className
     )}
     {...props}
@@ -107,7 +114,7 @@ const SheetTitle = React.forwardRef<
 >(({className, ...props}, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold text-foreground', className)}
+    className={cn('text-lg text-foreground', className)}
     {...props}
   />
 ))
@@ -119,7 +126,7 @@ const SheetDescription = React.forwardRef<
 >(({className, ...props}, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('font-sub-content text-muted-foreground', className)}
     {...props}
   />
 ))

diff --git a/packages/filigran-ui/src/plugin.ts b/packages/filigran-ui/src/plugin.ts
@@ -4,44 +4,44 @@ const FiligranUIPlugin = () => {
   return plugin(
     ({addUtilities, addComponents}) => {
       addUtilities({
-        '.text-jumbo': {
+        '.font-jumbo': {
           'font-size': '2.5rem',
           'letter-spacing': '0.01875rem',
         },
-        '.text-title': {
+        '.font-title': {
           'font-size': '1.5rem',
           'letter-spacing': '0.01125rem',
         },
-        '.text-subtitle': {
+        '.font-subtitle': {
           'font-size': '1.125rem',
           'letter-spacing': '0.00844rem',
         },
-        '.text-category': {
+        '.font-category': {
           'font-size': '0.875rem',
           'font-weight': 'bold',
           'letter-spacing': '0.00656rem',
         },
-        '.text-tab': {
+        '.font-tab': {
           'font-size': '0.875rem',
           'letter-spacing': '0.00656rem',
           'text-transform': 'uppercase',
         },
-        '.text-container-title': {
+        '.font-container-title': {
           'font-size': '0.75rem',
           'letter-spacing': '0.00563rem',
           'text-transform': 'uppercase',
         },
-        '.text-default': {
+        '.font-default': {
           'font-size': '0.875rem',
           'line-height': '1.52',
           'letter-spacing': '0.0035rem',
         },
-        '.text-sub-content': {
+        '.font-sub-content': {
           'font-size': '0.75rem',
           'line-height': '1.52',
           'letter-spacing': '0.003rem',
         },
-        '.text-mini': {
+        '.font-mini': {
           'font-size': '0.5625rem',
           'line-height': '1.52',
           'letter-spacing': '0.00225rem',