fix: fonts sizes and weights

package.json

@@ -65,6 +65,7 @@
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.16",
     "concurrently": "^8.2.2",
     "eslint": "^8.45.0",
     "eslint-config-standard-with-typescript": "^39.1.1",
@@ -77,6 +78,7 @@
     "ts-jest": "^29.1.1",
     "tsx": "^4.1.4",
     "typescript": "^5.0.2",
-    "vite": "^5.0.0"
+    "vite": "^5.0.0",
+    "vite-plugin-static-copy": "^1.0.0"
   }
 }

postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    'postcss-import': {},
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

src/components/PlanningTable/Columns/Actions.tsx

@@ -31,9 +31,8 @@ export const actions: ColumnDef<Planning> = {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-[160px]">
-        {!deliverableUuids.length && 'No deliverables'}
-        {deliverableUuids.length &&
-          deliverableUuids.map((uuid) => {
+        {deliverableUuids.length
+          ? deliverableUuids.map((uuid) => {
             return (
               <DropdownMenuItem key={uuid}>
                 <Link to='Editor' props={{ documentId: uuid }}>
@@ -42,6 +41,7 @@ export const actions: ColumnDef<Planning> = {
               </DropdownMenuItem>
             )
           })
+          : 'No deliverables'
         }
       </DropdownMenuContent>
     </DropdownMenu>

src/components/PlanningTable/Columns/Assignees.tsx

@@ -9,7 +9,7 @@ export const assignees: ColumnDef<Planning> = {
   cell: ({ row }) => {
     const assignees = row.getValue<string[]>('assignees') || []
     return (
-        <div className={cn('flex -space-x-2 w-fit text-sm font-semibold leading-6 h-8 items-center',
+        <div className={cn('flex -space-x-2 w-fit text-xs font-semibold leading-6 h-8 items-center',
           assignees.length > 3 && 'border rounded-full hidden lg:flex')}>
           {(assignees || []).slice(0, 3).map((assignee: string, index: number) => {
             const [first, last] = assignee.trim().split(' ')
@@ -18,7 +18,7 @@ export const assignees: ColumnDef<Planning> = {
               <TooltipProvider key={index}>
                 <Tooltip>
                   <TooltipTrigger>
-                    <div className='hidden lg:flex w-8 h-8 rounded-full items-center justify-center bg-[#973C9F] text-background dark:text-foreground border relative z-1'>
+                    <div className='hidden lg:flex w-8 h-8 rounded-full items-center justify-center bg-[#973C9F] text-background dark:text-foreground border'>
                       {initials}
                     </div>
                   </TooltipTrigger>
@@ -40,7 +40,7 @@ export const assignees: ColumnDef<Planning> = {
                   const initials = `${first[0]}${last[0]}`
                   return (
                     <div key={index} className='flex p-1'>
-                      <div className='w-8 h-8 rounded-full flex items-center justify-center bg-[#973C9F] text-background dark:text-foreground border-2 mr-4'>
+                      <div className='w-8 h-8 rounded-full flex items-center justify-center border-2 mr-4'>
                         {initials}
                       </div>
                       <p>{assignee}</p>

src/components/PlanningTable/Columns/Section.tsx

@@ -10,9 +10,9 @@ export const section: ColumnDef<Planning> = {
   cell: ({ row }) => {
     const sector = sectors.find((label) => label.value === row.original._source['document.rel.sector.title'][0])
 
-    return sector && <Badge variant='outline'>
+    return sector && <Badge variant='outline' className='rounded-md'>
         <div className={cn('h-2 w-2 rounded-full mr-2', sector?.color) } />
-        <span className='text-slate-500 font-medium font-sans'>{sector.label}</span>
+        <span className='text-slate-500 text-sm font-sans font-normal'>{sector.label}</span>
       </Badge>
   }
 }

src/components/PlanningTable/Columns/Title.tsx

@@ -29,7 +29,7 @@ export const title: ColumnDef<Planning> = {
             {row.getValue('title')}
           </span>
           {!!slugline?.length && (
-            <span className='hidden text-medium text-slate-600 lg:block'>{slugline[0]}</span>
+            <span className='hidden font-medium text-slate-500 lg:block'>{slugline[0]}</span>
           )}
         </div>
     )

tsconfig.json

@@ -50,6 +50,7 @@
     "srv-src",
     "vite.config.ts",
     "tailwind.config.ts",
+    "postcss.config.js",
     "setupTests.ts",
     "jest.config.ts",
     "__mocks__/**/*",

vite.config.ts

@@ -1,9 +1,20 @@
 import path from 'path'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { viteStaticCopy } from 'vite-plugin-static-copy'
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    viteStaticCopy({
+      targets: [
+        {
+          src: './node_modules/@ttab/elephant-ui/dist/styles/**/*',
+          dest: './'
+        }
+      ]
+    })
+  ],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src')