fix: resolve follow-up issues from oxlint migration

.eslintignore

@@ -1,8 +0,0 @@
-# Config files
-*.config.js
-*.config.cjs
-
-# Statically hosted javascript files
-apps/*/public/*.js
-apps/*/public/*.cjs
-scripts/

.eslintrc.cjs

@@ -1,16 +0,0 @@
-/** @type {import('eslint').Linter.Config} */
-module.exports = {
-  root: true,
-  extends: ['@documenso/eslint-config'],
-  rules: {
-    '@next/next/no-img-element': 'off',
-    'no-unreachable': 'error',
-    'react-hooks/exhaustive-deps': 'off',
-  },
-  settings: {
-    next: {
-      rootDir: ['apps/*/'],
-    },
-  },
-  ignorePatterns: ['lingui.config.ts', 'packages/lib/translations/**/*.js'],
-};

.oxfmtrc.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "always",
+  "importOrder": [
+    "^server-only|client-only$",
+    "^react$",
+    "^next(/.*)?$",
+    "<THIRD_PARTY_MODULES>",
+    "^@documenso/(.*)$",
+    "^~/(.*)$",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "sortTailwindcss": {
+    "functions": ["cn", "cva"]
+  },
+  "sortPackageJson": false,
+  "ignorePatterns": [
+    "packages/lib/translations/**/*.js",
+    "*.test.ts",
+    "apps/docs/content/**/*.mdx",
+    "*.css",
+    "*.po",
+    "*.md",
+    "*.json"
+  ]
+}

.oxlintrc.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "import", "react", "nextjs", "promise"],
+  "env": { "browser": true, "node": true, "es2022": true },
+  "categories": { "correctness": "error" },
+  "rules": {
+    "eslint/no-unused-vars": [
+      "warn",
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "after-used",
+        "argsIgnorePattern": "^_",
+        "destructuredArrayIgnorePattern": "^_"
+      }
+    ],
+
+    "eslint/no-promise-executor-return": "error",
+    "eslint/prefer-promise-reject-errors": "error",
+    "eslint/no-unreachable": "error",
+
+    "typescript/no-floating-promises": "error",
+    "typescript/no-misused-promises": ["error", { "checksVoidReturn": { "attributes": false } }],
+    "typescript/promise-function-async": "error",
+    "typescript/require-await": "error",
+    "typescript/consistent-type-assertions": ["warn", { "assertionStyle": "never" }],
+    "typescript/consistent-type-imports": [
+      "warn",
+      {
+        "prefer": "type-imports",
+        "fixStyle": "separate-type-imports",
+        "disallowTypeAnnotations": false
+      }
+    ],
+
+    "react/no-unescaped-entities": "off",
+    "react/exhaustive-deps": "off",
+    "nextjs/no-html-link-for-pages": "off",
+    "nextjs/no-img-element": "off"
+  },
+  "ignorePatterns": [
+    "*.config.js",
+    "*.config.cjs",
+    "apps/*/public/*.js",
+    "apps/*/public/*.cjs",
+    "scripts/",
+    "lingui.config.ts",
+    "packages/lib/translations/**/*.js"
+  ]
+}

.prettierignore

@@ -1,20 +0,0 @@
-node_modules
-.next
-public
-**/**/node_modules
-**/**/.next
-**/**/public
-packages/lib/translations/**/*.js
-
-*.lock
-*.log
-*.test.ts
-
-.gitignore
-.npmignore
-.prettierignore
-.DS_Store
-.eslintignore
-
-# Docs MDX - Prettier strips indentation from code blocks inside components
-apps/docs/content/**/*.mdx

apps/docs/src/app/og/docs/[...slug]/route.tsx

@@ -40,104 +40,102 @@ export async function GET(_req: Request, { params }: RouteContext<'/og/docs/[...
   const { logoSrc, fonts } = await loadAssets();
 
   return new ImageResponse(
-    (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'white',
+        padding: '60px 80px',
+        fontFamily: 'Inter',
+        position: 'relative',
+      }}
+    >
+      {/* Green accent bar */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: '6px',
+          backgroundColor: '#6DC947',
+        }}
+      />
+
+      {/* Top: Logo */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '16px',
+        }}
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={logoSrc} alt="Documenso" height="28" />
+        <span
+          style={{
+            color: '#D4D4D8',
+            fontSize: '28px',
+            fontWeight: 400,
+          }}
+        >
+          |
+        </span>
+        <span style={{ color: '#71717A', fontSize: '20px', fontWeight: 400 }}>Docs</span>
+      </div>
+
+      {/* Middle: Title + description */}
       <div
         style={{
           display: 'flex',
           flexDirection: 'column',
-          width: '100%',
+          flex: 1,
-          height: '100%',
+          justifyContent: 'center',
-          backgroundColor: 'white',
+          gap: '16px',
-          padding: '60px 80px',
-          fontFamily: 'Inter',
-          position: 'relative',
         }}
       >
-        {/* Green accent bar */}
+        <h1
-        <div
           style={{
-            position: 'absolute',
+            color: '#18181B',
-            top: 0,
+            fontSize: page.data.title.length > 40 ? '48px' : '56px',
-            left: 0,
+            fontWeight: 700,
-            right: 0,
+            lineHeight: 1.15,
-            height: '6px',
+            letterSpacing: '-0.025em',
-            backgroundColor: '#6DC947',
+            margin: 0,
-          }}
-        />
-
-        {/* Top: Logo */}
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '16px',
           }}
         >
-          {/* eslint-disable-next-line @next/next/no-img-element */}
+          {page.data.title}
-          <img src={logoSrc} alt="Documenso" height="28" />
+        </h1>
-          <span
+        {page.data.description && (
+          <p
             style={{
-              color: '#D4D4D8',
+              color: '#71717A',
-              fontSize: '28px',
+              fontSize: '22px',
               fontWeight: 400,
-            }}
+              lineHeight: 1.4,
-          >
-            |
-          </span>
-          <span style={{ color: '#71717A', fontSize: '20px', fontWeight: 400 }}>Docs</span>
-        </div>
-
-        {/* Middle: Title + description */}
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            flex: 1,
-            justifyContent: 'center',
-            gap: '16px',
-          }}
-        >
-          <h1
-            style={{
-              color: '#18181B',
-              fontSize: page.data.title.length > 40 ? '48px' : '56px',
-              fontWeight: 700,
-              lineHeight: 1.15,
-              letterSpacing: '-0.025em',
               margin: 0,
+              maxWidth: '900px',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
             }}
           >
-            {page.data.title}
+            {page.data.description}
-          </h1>
+          </p>
-          {page.data.description && (
+        )}
-            <p
-              style={{
-                color: '#71717A',
-                fontSize: '22px',
-                fontWeight: 400,
-                lineHeight: 1.4,
-                margin: 0,
-                maxWidth: '900px',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                display: '-webkit-box',
-                WebkitLineClamp: 2,
-                WebkitBoxOrient: 'vertical',
-              }}
-            >
-              {page.data.description}
-            </p>
-          )}
-        </div>
-
-        {/* Bottom: URL */}
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <span style={{ color: '#A1A1AA', fontSize: '16px', fontWeight: 400 }}>
-            docs.documenso.com{page.url}
-          </span>
-        </div>
       </div>
-    ),
+
+      {/* Bottom: URL */}
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <span style={{ color: '#A1A1AA', fontSize: '16px', fontWeight: 400 }}>
+          docs.documenso.com{page.url}
+        </span>
+      </div>
+    </div>,
     {
       width: 1200,
       height: 630,

apps/openpage-api/package.json

@@ -6,17 +6,20 @@
     "dev": "next dev -p 3003",
     "build": "next build",
     "start": "next start -p 3003",
-    "lint:fix": "next lint --fix",
+    "lint:fix": "oxlint --type-aware --fix .",
     "clean": "rimraf .next && rimraf node_modules"
   },
   "dependencies": {
     "@documenso/prisma": "*",
     "luxon": "^3.7.2",
-    "next": "15.5.12"
+    "next": "15.5.12",
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "18.3.27",
+    "@types/react-dom": "^18",
     "typescript": "5.6.2"
   }
 }

apps/remix/app/components/dialogs/account-delete-dialog.tsx

@@ -122,7 +122,7 @@ export const AccountDeleteDialog = ({ className }: AccountDeleteDialogProps) =>
                   <Label>
                     <Trans>
                       Please type{' '}
-                      <span className="text-muted-foreground font-semibold">{user.email}</span> to
+                      <span className="font-semibold text-muted-foreground">{user.email}</span> to
                       confirm.
                     </Trans>
                   </Label>

apps/remix/app/components/dialogs/assistant-confirmation-dialog.tsx

@@ -115,7 +115,7 @@ export function AssistantConfirmationDialog({
                   <div className="mt-4 flex flex-col gap-4">
                     {!isEditingNextSigner && (
                       <div>
-                        <p className="text-muted-foreground text-sm">
+                        <p className="text-sm text-muted-foreground">
                           <Trans>
                             The next recipient to sign this document will be{' '}
                             <span className="font-semibold">{form.watch('name')}</span> (

apps/remix/app/components/dialogs/document-move-to-folder-dialog.tsx

@@ -165,7 +165,7 @@ export const DocumentMoveToFolderDialog = ({
         </DialogHeader>
 
         <div className="relative">
-          <Search className="text-muted-foreground absolute left-2 top-3 h-4 w-4" />
+          <Search className="absolute left-2 top-3 h-4 w-4 text-muted-foreground" />
           <Input
             placeholder={_(msg`Search folders...`)}
             value={searchTerm}
@@ -219,7 +219,7 @@ export const DocumentMoveToFolderDialog = ({
                           ))}
 
                           {searchTerm && filteredFolders?.length === 0 && (
-                            <div className="text-muted-foreground px-2 py-2 text-center text-sm">
+                            <div className="px-2 py-2 text-center text-sm text-muted-foreground">
                               <Trans>No folders found</Trans>
                             </div>
                           )}

apps/remix/app/components/dialogs/document-resend-dialog.tsx

@@ -183,7 +183,7 @@ export const DocumentResendDialog = ({ document, recipients }: DocumentResendDia
             <DialogClose asChild>
               <Button
                 type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                className="flex-1 bg-black/5 hover:bg-black/10 dark:bg-muted dark:hover:bg-muted/80"
                 variant="secondary"
                 disabled={isSubmitting}
               >

apps/remix/app/components/dialogs/envelope-download-dialog.tsx

@@ -132,7 +132,7 @@ export const EnvelopeDownloadDialog = ({
               {Array.from({ length: 1 }).map((_, index) => (
                 <div
                   key={index}
-                  className="border-border bg-card flex items-center gap-2 rounded-lg border p-4"
+                  className="flex items-center gap-2 rounded-lg border border-border bg-card p-4"
                 >
                   <Skeleton className="h-10 w-10 flex-shrink-0 rounded-lg" />
 
@@ -149,20 +149,20 @@ export const EnvelopeDownloadDialog = ({
             envelopeItems.map((item) => (
               <div
                 key={item.id}
-                className="border-border bg-card hover:bg-accent/50 flex items-center gap-4 rounded-lg border p-4 transition-colors"
+                className="flex items-center gap-4 rounded-lg border border-border bg-card p-4 transition-colors hover:bg-accent/50"
               >
                 <div className="flex-shrink-0">
-                  <div className="bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
-                    <FileTextIcon className="text-primary h-5 w-5" />
+                    <FileTextIcon className="h-5 w-5 text-primary" />
                   </div>
                 </div>
 
                 <div className="min-w-0 flex-1">
                   {/* Todo: Envelopes - Fix overflow */}
-                  <h4 className="text-foreground truncate text-sm font-medium" title={item.title}>
+                  <h4 className="truncate text-sm font-medium text-foreground" title={item.title}>
                     {item.title}
                   </h4>
-                  <p className="text-muted-foreground mt-0.5 text-xs">
+                  <p className="mt-0.5 text-xs text-muted-foreground">
                     <Trans>PDF Document</Trans>
                   </p>
                 </div>

apps/remix/app/components/dialogs/folder-delete-dialog.tsx

@@ -134,7 +134,7 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
                     <FormLabel>
                       <Trans>
                         Confirm by typing:{' '}
-                        <span className="font-sm text-destructive font-semibold">
+                        <span className="font-sm font-semibold text-destructive">
                           {deleteMessage}
                         </span>
                       </Trans>

apps/remix/app/components/dialogs/folder-move-dialog.tsx

@@ -129,7 +129,7 @@ export const FolderMoveDialog = ({
         </DialogHeader>
 
         <div className="relative">
-          <Search className="text-muted-foreground absolute left-2 top-3 h-4 w-4" />
+          <Search className="absolute left-2 top-3 h-4 w-4 text-muted-foreground" />
           <Input
             placeholder={t`Search folders...`}
             value={searchTerm}

apps/remix/app/components/dialogs/organisation-create-dialog.tsx

@@ -357,9 +357,9 @@ const BillingPlanForm = ({
         <button
           onClick={() => onChange('')}
           className={cn(
-            'hover:border-primary flex cursor-pointer items-center space-x-2 rounded-md border p-4 transition-all hover:shadow-sm',
+            'flex cursor-pointer items-center space-x-2 rounded-md border p-4 transition-all hover:border-primary hover:shadow-sm',
             {
-              'ring-primary/10 border-primary ring-2 ring-offset-1': '' === value,
+              'border-primary ring-2 ring-primary/10 ring-offset-1': '' === value,
             },
           )}
           disabled={!canCreateFreeOrganisation}
@@ -390,9 +390,9 @@ const BillingPlanForm = ({
             key={plan[billingPeriod]?.id}
             onClick={() => onChange(plan[billingPeriod]?.id ?? '')}
             className={cn(
-              'hover:border-primary flex cursor-pointer items-center space-x-2 rounded-md border p-4 transition-all hover:shadow-sm',
+              'flex cursor-pointer items-center space-x-2 rounded-md border p-4 transition-all hover:border-primary hover:shadow-sm',
               {
-                'ring-primary/10 border-primary ring-2 ring-offset-1':
+                'border-primary ring-2 ring-primary/10 ring-offset-1':
                   plan[billingPeriod]?.id === value,
               },
             )}
@@ -403,7 +403,7 @@ const BillingPlanForm = ({
             </div>
             <div className="whitespace-nowrap text-right text-sm font-medium">
               <p>{plan[billingPeriod]?.friendlyPrice}</p>
-              <span className="text-muted-foreground text-xs">
+              <span className="text-xs text-muted-foreground">
                 {billingPeriod === 'monthlyPrice' ? (
                   <Trans>per month</Trans>
                 ) : (
@@ -417,13 +417,13 @@ const BillingPlanForm = ({
         <Link
           to="https://documen.so/enterprise-cta"
           target="_blank"
-          className="bg-muted/30 flex items-center space-x-2 rounded-md border p-4"
+          className="flex items-center space-x-2 rounded-md border bg-muted/30 p-4"
         >
           <div className="flex-1 font-normal">
-            <p className="text-muted-foreground font-medium">
+            <p className="font-medium text-muted-foreground">
               <Trans>Enterprise</Trans>
             </p>
-            <p className="text-muted-foreground flex flex-row items-center gap-1">
+            <p className="flex flex-row items-center gap-1 text-muted-foreground">
               <Trans>Contact sales here</Trans>
               <ExternalLinkIcon className="h-4 w-4" />
             </p>
@@ -434,7 +434,7 @@ const BillingPlanForm = ({
       <div className="mt-6 text-center">
         <Link
           to="https://documenso.com/pricing"
-          className="text-primary hover:text-primary/80 flex items-center justify-center gap-1 text-sm hover:underline"
+          className="flex items-center justify-center gap-1 text-sm text-primary hover:text-primary/80 hover:underline"
           target="_blank"
         >
           <Trans>Compare all plans and features in detail</Trans>

apps/remix/app/components/dialogs/organisation-email-create-dialog.tsx

@@ -176,14 +176,14 @@ export const OrganisationEmailCreateDialog = ({
                           }}
                           placeholder={t`support`}
                         />
-                        <div className="bg-muted text-muted-foreground absolute bottom-0 right-0 top-0 flex items-center rounded-r-md border px-3 py-2 text-sm">
+                        <div className="absolute bottom-0 right-0 top-0 flex items-center rounded-r-md border bg-muted px-3 py-2 text-sm text-muted-foreground">
                           @{emailDomain.domain}
                         </div>
                       </div>
                     </FormControl>
                     <FormMessage />
                     {!form.formState.errors.email && (
-                      <span className="text-foreground/50 text-xs font-normal">
+                      <span className="text-xs font-normal text-foreground/50">
                         {field.value ? (
                           field.value
                         ) : (

apps/remix/app/components/dialogs/organisation-email-domain-delete-dialog.tsx

@@ -126,7 +126,7 @@ export const OrganisationEmailDomainDeleteDialog = ({
                     <FormLabel>
                       <Trans>
                         Confirm by typing{' '}
-                        <span className="font-sm text-destructive font-semibold">
+                        <span className="font-sm font-semibold text-destructive">
                           {deleteMessage}
                         </span>
                       </Trans>

apps/remix/app/components/dialogs/organisation-group-create-dialog.tsx

@@ -178,7 +178,7 @@ export const OrganisationGroupCreateDialog = ({
                     </FormLabel>
                     <FormControl>
                       <Select {...field} onValueChange={field.onChange}>
-                        <SelectTrigger className="text-muted-foreground w-full">
+                        <SelectTrigger className="w-full text-muted-foreground">
                           <SelectValue />
                         </SelectTrigger>
 
@@ -217,7 +217,7 @@ export const OrganisationGroupCreateDialog = ({
                         loading={isLoadingMembers}
                         selectedValues={field.value}
                         onChange={field.onChange}
-                        className="bg-background w-full"
+                        className="w-full bg-background"
                         emptySelectionPlaceholder={t`Select members`}
                       />
                     </FormControl>

apps/remix/app/components/dialogs/organisation-member-invite-dialog.tsx

@@ -329,12 +329,12 @@ export const OrganisationMemberInviteDialog = ({
             onValueChange={(value) => setInvitationType(value as TabTypes)}
           >
             <TabsList className="w-full">
-              <TabsTrigger value="INDIVIDUAL" className="hover:text-foreground w-full">
+              <TabsTrigger value="INDIVIDUAL" className="w-full hover:text-foreground">
                 <MailIcon size={20} className="mr-2" />
                 <Trans>Invite Members</Trans>
               </TabsTrigger>
 
-              <TabsTrigger value="BULK" className="hover:text-foreground w-full">
+              <TabsTrigger value="BULK" className="w-full hover:text-foreground">
                 <UsersIcon size={20} className="mr-2" /> <Trans>Bulk Import</Trans>
               </TabsTrigger>
             </TabsList>
@@ -382,7 +382,7 @@ export const OrganisationMemberInviteDialog = ({
                                 )}
                                 <FormControl>
                                   <Select {...field} onValueChange={field.onChange}>
-                                    <SelectTrigger className="text-muted-foreground max-w-[200px]">
+                                    <SelectTrigger className="max-w-[200px] text-muted-foreground">
                                       <SelectValue />
                                     </SelectTrigger>
 
@@ -447,7 +447,7 @@ export const OrganisationMemberInviteDialog = ({
               <div className="mt-4 space-y-4">
                 <Card gradient className="h-32">
                   <CardContent
-                    className="text-muted-foreground/80 hover:text-muted-foreground/90 flex h-full cursor-pointer flex-col items-center justify-center rounded-lg p-0 transition-colors"
+                    className="flex h-full cursor-pointer flex-col items-center justify-center rounded-lg p-0 text-muted-foreground/80 transition-colors hover:text-muted-foreground/90"
                     onClick={() => fileInputRef.current?.click()}
                   >
                     <Upload className="h-5 w-5" />

apps/remix/app/components/dialogs/public-profile-template-manage-dialog.tsx

@@ -290,11 +290,11 @@ export const ManagePublicTemplateDialog = ({
                           key={row.id}
                           onClick={() => setSelectedTemplateId(row.id)}
                         >
-                          <TableCell className="text-muted-foreground max-w-[30ch] text-sm">
+                          <TableCell className="max-w-[30ch] text-sm text-muted-foreground">
                             {row.title}
                           </TableCell>
 
-                          <TableCell className="text-muted-foreground text-sm">
+                          <TableCell className="text-sm text-muted-foreground">
                             {i18n.date(row.createdAt)}
                           </TableCell>
 
@@ -381,7 +381,7 @@ export const ManagePublicTemplateDialog = ({
                             </FormControl>
 
                             {!form.formState.errors.publicDescription && (
-                              <p className="text-muted-foreground text-sm">
+                              <p className="text-sm text-muted-foreground">
                                 {remaningLength >= 0 ? (
                                   <Plural
                                     value={remaningLength}

apps/remix/app/components/dialogs/team-email-delete-dialog.tsx

@@ -129,7 +129,7 @@ export const TeamEmailDeleteDialog = ({ trigger, teamName, team }: TeamEmailDele
               (team.teamEmail?.name || team.emailVerification?.name) ?? '',
             )}
             primaryText={
-              <span className="text-foreground/80 text-sm font-semibold">
+              <span className="text-sm font-semibold text-foreground/80">
                 {team.teamEmail?.name || team.emailVerification?.name}
               </span>
             }

apps/remix/app/components/dialogs/team-group-create-dialog.tsx

@@ -198,7 +198,7 @@ export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps)
                                 })),
                               );
                             }}
-                            className="bg-background w-full"
+                            className="w-full bg-background"
                             emptySelectionPlaceholder={t`Select groups`}
                           />
                         </FormControl>

apps/remix/app/components/dialogs/template-move-to-folder-dialog.tsx

@@ -157,7 +157,7 @@ export function TemplateMoveToFolderDialog({
         </DialogHeader>
 
         <div className="relative">
-          <Search className="text-muted-foreground absolute left-2 top-3 h-4 w-4" />
+          <Search className="absolute left-2 top-3 h-4 w-4 text-muted-foreground" />
           <Input
             placeholder={_(msg`Search folders...`)}
             value={searchTerm}
@@ -211,7 +211,7 @@ export function TemplateMoveToFolderDialog({
                           ))}
 
                           {searchTerm && filteredFolders?.length === 0 && (
-                            <div className="text-muted-foreground px-2 py-2 text-center text-sm">
+                            <div className="px-2 py-2 text-center text-sm text-muted-foreground">
                               <Trans>No folders found</Trans>
                             </div>
                           )}

apps/remix/app/components/dialogs/token-delete-dialog.tsx

@@ -142,7 +142,7 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
                     <FormLabel>
                       <Trans>
                         Confirm by typing:{' '}
-                        <span className="font-sm text-destructive font-semibold">
+                        <span className="font-sm font-semibold text-destructive">
                           {deleteMessage}
                         </span>
                       </Trans>

apps/remix/app/components/dialogs/webhook-delete-dialog.tsx

@@ -132,7 +132,7 @@ export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogPr
                     <FormLabel>
                       <Trans>
                         Confirm by typing:{' '}
-                        <span className="font-sm text-destructive font-semibold">
+                        <span className="font-sm font-semibold text-destructive">
                           {deleteMessage}
                         </span>
                       </Trans>

apps/remix/app/components/dialogs/webhook-test-dialog.tsx

@@ -140,7 +140,7 @@ export const WebhookTestDialog = ({ webhook, children }: WebhookTestDialogProps)
                 <h4 className="mb-2 text-sm font-medium">
                   <Trans>Webhook URL</Trans>
                 </h4>
-                <p className="text-muted-foreground break-all text-sm">{webhook.webhookUrl}</p>
+                <p className="break-all text-sm text-muted-foreground">{webhook.webhookUrl}</p>
               </div>
 
               <DialogFooter>

apps/remix/app/components/embed/authoring/configure-document-advanced-settings.tsx

@@ -60,11 +60,11 @@ export const ConfigureDocumentAdvancedSettings = ({
 
   return (
     <div>
-      <h3 className="text-foreground mb-1 text-lg font-medium">
+      <h3 className="mb-1 text-lg font-medium text-foreground">
         <Trans>Advanced Settings</Trans>
       </h3>
 
-      <p className="text-muted-foreground mb-6 text-sm">
+      <p className="mb-6 text-sm text-muted-foreground">
         <Trans>Configure additional options and preferences</Trans>
       </p>
 
@@ -100,7 +100,7 @@ export const ConfigureDocumentAdvancedSettings = ({
                         }))}
                         selectedValues={field.value}
                         onChange={field.onChange}
-                        className="bg-background w-full"
+                        className="w-full bg-background"
                         emptySelectionPlaceholder={t`Select signature types`}
                       />
                     </FormControl>
@@ -204,7 +204,7 @@ export const ConfigureDocumentAdvancedSettings = ({
                         <TooltipTrigger>
                           <InfoIcon className="mx-2 h-4 w-4" />
                         </TooltipTrigger>
-                        <TooltipContent className="text-muted-foreground max-w-xs">
+                        <TooltipContent className="max-w-xs text-muted-foreground">
                           <Trans>
                             Add a URL to redirect the user to once the document is signed
                           </Trans>
@@ -279,7 +279,7 @@ export const ConfigureDocumentAdvancedSettings = ({
                       <FormControl>
                         <Input
                           id="subject"
-                          className="bg-background mt-2"
+                          className="mt-2 bg-background"
                           disabled={isSubmitting || !isEmailDistribution}
                           {...field}
                         />
@@ -302,7 +302,7 @@ export const ConfigureDocumentAdvancedSettings = ({
                       <FormControl>
                         <Textarea
                           id="message"
-                          className="bg-background mt-2 h-32 resize-none"
+                          className="mt-2 h-32 resize-none bg-background"
                           disabled={isSubmitting || !isEmailDistribution}
                           {...field}
                         />

apps/remix/app/components/embed/authoring/configure-document-recipients.tsx

@@ -146,11 +146,11 @@ export const ConfigureDocumentRecipients = ({
 
   return (
     <div>
-      <h3 className="text-foreground mb-1 text-lg font-medium">
+      <h3 className="mb-1 text-lg font-medium text-foreground">
         <Trans>Recipients</Trans>
       </h3>
 
-      <p className="text-muted-foreground mb-6 text-sm">
+      <p className="mb-6 text-sm text-muted-foreground">
         <Trans>Add signers and configure signing preferences</Trans>
       </p>
 
@@ -206,7 +206,7 @@ export const ConfigureDocumentRecipients = ({
               </FormLabel>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <span className="text-muted-foreground ml-1 cursor-help">
+                  <span className="ml-1 cursor-help text-muted-foreground">
                     <HelpCircle className="h-3.5 w-3.5" />
                   </span>
                 </TooltipTrigger>
@@ -249,7 +249,7 @@ export const ConfigureDocumentRecipients = ({
                       {...provided.dragHandleProps}
                       disabled={signer.disabled}
                       className={cn('py-1', {
-                        'bg-widget-foreground pointer-events-none rounded-md pt-2':
+                        'pointer-events-none rounded-md bg-widget-foreground pt-2':
                           snapshot.isDragging,
                       })}
                     >

apps/remix/app/components/embed/authoring/configure-document-upload.tsx

@@ -144,7 +144,7 @@ export const ConfigureDocumentUpload = ({ isSubmitting = false }: ConfigureDocum
                     <div
                       {...getRootProps()}
                       className={cn(
-                        'border-border bg-background relative flex min-h-[160px] cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed transition',
+                        'relative flex min-h-[160px] cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-border bg-background transition',
                         {
                           'border-primary/50 bg-primary/5': isDragActive,
                           'hover:bg-muted/30':
@@ -193,21 +193,21 @@ export const ConfigureDocumentUpload = ({ isSubmitting = false }: ConfigureDocum
                   </FormControl>
 
                   {isLoading && (
-                    <div className="bg-background/50 absolute inset-0 flex items-center justify-center rounded-lg">
+                    <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background/50">
-                      <Loader className="text-muted-foreground h-10 w-10 animate-spin" />
+                      <Loader className="h-10 w-10 animate-spin text-muted-foreground" />
                     </div>
                   )}
                 </div>
               ) : (
                 <div className="mt-2 rounded-lg border p-4">
                   <div className="flex items-center gap-x-4">
-                    <div className="bg-primary/10 text-primary flex h-12 w-12 items-center justify-center rounded-md">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-md bg-primary/10 text-primary">
                       <FileText className="h-6 w-6" />
                     </div>
 
                     <div className="flex-1">
                       <div className="text-sm font-medium">{documentData.name}</div>
-                      <div className="text-muted-foreground text-xs">
+                      <div className="text-xs text-muted-foreground">
                         {formatFileSize(documentData.size)}
                       </div>
                     </div>

apps/remix/app/components/embed/authoring/configure-document-view.tsx

@@ -88,11 +88,11 @@ export const ConfigureDocumentView = ({
   return (
     <div className="flex w-full flex-col space-y-8">
       <div>
-        <h2 className="text-foreground mb-1 text-xl font-semibold">
+        <h2 className="mb-1 text-xl font-semibold text-foreground">
           {isTemplate ? <Trans>Configure Template</Trans> : <Trans>Configure Document</Trans>}
         </h2>
 
-        <p className="text-muted-foreground text-sm">
+        <p className="text-sm text-muted-foreground">
           {isTemplate ? (
             <Trans>Set up your template properties and recipient information</Trans>
           ) : (

apps/remix/app/components/embed/embed-client-loading.tsx

@@ -3,7 +3,7 @@ import { Loader } from 'lucide-react';
 
 export const EmbedClientLoading = () => {
   return (
-    <div className="bg-background fixed left-0 top-0 z-[9999] flex h-full w-full items-center justify-center">
+    <div className="fixed left-0 top-0 z-[9999] flex h-full w-full items-center justify-center bg-background">
       <Loader className="mr-2 h-4 w-4 animate-spin" />
 
       <span>

apps/remix/app/components/embed/embed-document-completed.tsx

@@ -12,7 +12,7 @@ export type EmbedDocumentCompletedPageProps = {
 export const EmbedDocumentCompleted = ({ name, signature }: EmbedDocumentCompletedPageProps) => {
   return (
     <div className="embed--DocumentCompleted relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
-      <h3 className="text-foreground text-2xl font-semibold">
+      <h3 className="text-2xl font-semibold text-foreground">
         <Trans>Document Completed!</Trans>
       </h3>
 
@@ -25,7 +25,7 @@ export const EmbedDocumentCompleted = ({ name, signature }: EmbedDocumentComplet
         />
       </div>
 
-      <p className="text-muted-foreground mt-8 max-w-[50ch] text-center text-sm">
+      <p className="mt-8 max-w-[50ch] text-center text-sm text-muted-foreground">
         <Trans>
           The document is now completed, please follow any instructions provided within the parent
           application.

apps/remix/app/components/embed/embed-document-rejected.tsx

@@ -6,25 +6,25 @@ export const EmbedDocumentRejected = () => {
     <div className="embed--DocumentRejected relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
       <div className="flex flex-col items-center">
         <div className="flex items-center gap-x-4">
-          <XCircle className="text-destructive h-10 w-10" />
+          <XCircle className="h-10 w-10 text-destructive" />
 
           <h2 className="max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
             <Trans>Document Rejected</Trans>
           </h2>
         </div>
 
-        <div className="text-destructive mt-4 flex items-center text-center text-sm">
+        <div className="mt-4 flex items-center text-center text-sm text-destructive">
           <Trans>You have rejected this document</Trans>
         </div>
 
-        <p className="text-muted-foreground mt-6 max-w-[60ch] text-center text-sm">
+        <p className="mt-6 max-w-[60ch] text-center text-sm text-muted-foreground">
           <Trans>
             The document owner has been notified of your decision. They may contact you with further
             instructions if necessary.
           </Trans>
         </p>
 
-        <p className="text-muted-foreground mt-2 max-w-[60ch] text-center text-sm">
+        <p className="mt-2 max-w-[60ch] text-center text-sm text-muted-foreground">
           <Trans>No further action is required from you at this time.</Trans>
         </p>
       </div>

apps/remix/app/components/embed/embed-document-waiting-for-turn.tsx

@@ -25,19 +25,19 @@ export const EmbedDocumentWaitingForTurn = () => {
 
   return (
     <div className="embed--WaitingForTurn relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
-      <h3 className="text-foreground text-center text-2xl font-bold">
+      <h3 className="text-center text-2xl font-bold text-foreground">
         <Trans>Waiting for Your Turn</Trans>
       </h3>
 
       <div className="mt-8 max-w-[50ch] text-center">
-        <p className="text-muted-foreground text-sm">
+        <p className="text-sm text-muted-foreground">
           <Trans>
             It's currently not your turn to sign. Please check back soon as this document should be
             available for you to sign shortly.
           </Trans>
         </p>
 
-        <p className="text-muted-foreground mt-4 text-sm">
+        <p className="mt-4 text-sm text-muted-foreground">
           <Trans>Please check with the parent application for more information.</Trans>
         </p>
       </div>

apps/remix/app/components/embed/multisign/multi-sign-document-list.tsx

@@ -60,27 +60,27 @@ export function MultiSignDocumentList({ envelopes, onDocumentSelect }: MultiSign
     return (
       <div className="mx-auto mt-16 flex w-full max-w-lg flex-col md:mt-16 md:rounded-2xl md:border md:px-8 md:py-16 md:shadow-lg">
         <div className="flex items-center justify-center">
-          <XCircle className="text-destructive h-16 w-16 md:h-24 md:w-24" strokeWidth={1.2} />
+          <XCircle className="h-16 w-16 text-destructive md:h-24 md:w-24" strokeWidth={1.2} />
         </div>
 
         <h2 className="mt-12 text-xl font-bold md:text-2xl">
           <Trans>It looks like we ran into an issue!</Trans>
         </h2>
 
-        <p className="text-muted-foreground mt-6">
+        <p className="mt-6 text-muted-foreground">
           <Trans>
             One of the documents in the current bundle has a signing role that is not compatible
             with the current signing experience.
           </Trans>
         </p>
 
-        <p className="text-muted-foreground mt-2">
+        <p className="mt-2 text-muted-foreground">
           <Trans>
             Assistants and Copy roles are currently not compatible with the multi-sign experience.
           </Trans>
         </p>
 
-        <p className="text-muted-foreground mt-2">
+        <p className="mt-2 text-muted-foreground">
           <Trans>Please contact the site owner for further assistance.</Trans>
         </p>
       </div>
@@ -88,12 +88,12 @@ export function MultiSignDocumentList({ envelopes, onDocumentSelect }: MultiSign
   }
 
   return (
-    <div className="bg-background mx-auto w-full max-w-lg md:my-12 md:rounded-2xl md:border md:p-8 md:shadow-lg">
+    <div className="mx-auto w-full max-w-lg bg-background md:my-12 md:rounded-2xl md:border md:p-8 md:shadow-lg">
-      <h2 className="text-foreground mb-1 text-lg font-semibold">
+      <h2 className="mb-1 text-lg font-semibold text-foreground">
         <Trans>Sign Documents</Trans>
       </h2>
 
-      <p className="text-muted-foreground text-sm">
+      <p className="text-sm text-muted-foreground">
         <Trans>
           You have been requested to sign the following documents. Review each document carefully
           and complete the signing process.
@@ -103,7 +103,7 @@ export function MultiSignDocumentList({ envelopes, onDocumentSelect }: MultiSign
       {/* Progress Section */}
       <div className="mt-6">
         <div className="flex items-center justify-between text-sm">
-          <span className="text-muted-foreground font-medium">
+          <span className="font-medium text-muted-foreground">
             <Trans>Progress</Trans>
           </span>
           <span className="text-muted-foreground">
@@ -120,9 +120,9 @@ export function MultiSignDocumentList({ envelopes, onDocumentSelect }: MultiSign
         {envelopes.map((envelope) => (
           <div
             key={envelope.document.id}
-            className="border-border flex items-center gap-4 rounded-lg border px-4 py-2"
+            className="flex items-center gap-4 rounded-lg border border-border px-4 py-2"
           >
-            <span className="text-foreground flex-1 truncate text-sm font-medium">
+            <span className="flex-1 truncate text-sm font-medium text-foreground">
               {envelope.document.title}
             </span>
 

apps/remix/app/components/forms/2fa/enable-authenticator-app-dialog.tsx

@@ -216,18 +216,18 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
                       }}
                     />
 
-                    <p className="text-muted-foreground text-sm">
+                    <p className="text-sm text-muted-foreground">
                       <Trans>
                         If your authenticator app does not support QR codes, you can use the
                         following code instead:
                       </Trans>
                     </p>
 
-                    <p className="bg-muted/60 text-muted-foreground rounded-lg p-2 text-center font-mono tracking-widest">
+                    <p className="rounded-lg bg-muted/60 p-2 text-center font-mono tracking-widest text-muted-foreground">
                       {setup2FAData?.secret}
                     </p>
 
-                    <p className="text-muted-foreground text-sm">
+                    <p className="text-sm text-muted-foreground">
                       <Trans>
                         Once you have scanned the QR code or entered the code manually, enter the
                         code provided by your authenticator app below.

apps/remix/app/components/forms/2fa/recovery-code-list.tsx

@@ -42,7 +42,7 @@ export const RecoveryCodeList = ({ recoveryCodes }: RecoveryCodeListProps) => {
       {recoveryCodes.map((code) => (
         <div
           key={code}
-          className="bg-muted text-muted-foreground relative rounded-lg p-4 font-mono md:text-center"
+          className="relative rounded-lg bg-muted p-4 font-mono text-muted-foreground md:text-center"
         >
           <span>{code}</span>
 

apps/remix/app/components/forms/avatar-image.tsx

@@ -168,7 +168,7 @@ export const AvatarImageForm = ({ className, team, organisation }: AvatarImageFo
                       {hasAvatarImage && (
                         <button
                           type="button"
-                          className="bg-background/70 text-destructive absolute inset-0 flex cursor-pointer items-center justify-center text-xs opacity-0 transition-opacity hover:opacity-100"
+                          className="absolute inset-0 flex cursor-pointer items-center justify-center bg-background/70 text-xs text-destructive opacity-0 transition-opacity hover:opacity-100"
                           disabled={form.formState.isSubmitting}
                           onClick={() => void onFormSubmit({ bytes: null })}
                         >

apps/remix/app/components/forms/branding-preferences-form.tsx

@@ -173,7 +173,7 @@ export function BrandingPreferencesForm({
           />
 
           <div className="relative flex w-full flex-col gap-y-4">
-            {!isBrandingEnabled && <div className="bg-background/60 absolute inset-0 z-[9998]" />}
+            {!isBrandingEnabled && <div className="absolute inset-0 z-[9998] bg-background/60" />}
 
             <FormField
               control={form.control}
@@ -185,7 +185,7 @@ export function BrandingPreferencesForm({
                   </FormLabel>
 
                   <div className="flex flex-col gap-4">
-                    <div className="border-border bg-background relative h-48 w-full overflow-hidden rounded-lg border">
+                    <div className="relative h-48 w-full overflow-hidden rounded-lg border border-border bg-background">
                       {previewUrl ? (
                         <img
                           src={previewUrl}
@@ -193,12 +193,12 @@ export function BrandingPreferencesForm({
                           className="h-full w-full object-contain p-4"
                         />
                       ) : (
-                        <div className="bg-muted/20 dark:bg-muted text-muted-foreground relative flex h-full w-full items-center justify-center text-sm">
+                        <div className="relative flex h-full w-full items-center justify-center bg-muted/20 text-sm text-muted-foreground dark:bg-muted">
                           <Trans>Please upload a logo</Trans>
 
                           {!hasLoadedPreview && (
-                            <div className="bg-muted dark:bg-muted absolute inset-0 z-[999] flex items-center justify-center">
+                            <div className="absolute inset-0 z-[999] flex items-center justify-center bg-muted dark:bg-muted">
-                              <Loader className="text-muted-foreground h-8 w-8 animate-spin" />
+                              <Loader className="h-8 w-8 animate-spin text-muted-foreground" />
                             </div>
                           )}
                         </div>
@@ -243,7 +243,7 @@ export function BrandingPreferencesForm({
                           type="button"
                           variant="link"
                           size="sm"
-                          className="text-destructive text-xs"
+                          className="text-xs text-destructive"
                           onClick={() => {
                             setPreviewUrl('');
                             onChange(null);

apps/remix/app/components/forms/editor/editor-field-checkbox-form.tsx

@@ -184,7 +184,7 @@ export const EditorFieldCheckboxForm = ({
                 </FormLabel>
                 <FormControl>
                   <Select value={field.value} onValueChange={field.onChange}>
-                    <SelectTrigger className="text-muted-foreground bg-background w-full">
+                    <SelectTrigger className="w-full bg-background text-muted-foreground">
                       <SelectValue placeholder={t`Select direction`} />
                     </SelectTrigger>
                     <SelectContent position="popper">
@@ -214,7 +214,7 @@ export const EditorFieldCheckboxForm = ({
                     </FormLabel>
                     <FormControl>
                       <Select {...field} onValueChange={field.onChange}>
-                        <SelectTrigger className="text-muted-foreground bg-background w-full">
+                        <SelectTrigger className="w-full bg-background text-muted-foreground">
                           <SelectValue placeholder={t`Select at least`} />
                         </SelectTrigger>
                         <SelectContent position="popper">
@@ -260,7 +260,7 @@ export const EditorFieldCheckboxForm = ({
                           void form.trigger();
                         }}
                       >
-                        <SelectTrigger className="text-muted-foreground bg-background mt-5 w-full">
+                        <SelectTrigger className="mt-5 w-full bg-background text-muted-foreground">
                           <SelectValue placeholder={t`Pick a number`} />
                         </SelectTrigger>
                         <SelectContent position="popper">
@@ -310,7 +310,7 @@ export const EditorFieldCheckboxForm = ({
                       <FormItem>
                         <FormControl>
                           <Checkbox
-                            className="data-[state=checked]:bg-primary border-foreground/30 h-5 w-5"
+                            className="h-5 w-5 border-foreground/30 data-[state=checked]:bg-primary"
                             checked={field.value}
                             onCheckedChange={field.onChange}
                           />

apps/remix/app/components/forms/editor/editor-field-dropdown-form.tsx

@@ -176,7 +176,7 @@ export const EditorFieldDropdownForm = ({
                     value={field.value ?? '-1'}
                     onValueChange={(value) => field.onChange(value === '-1' ? undefined : value)}
                   >
-                    <SelectTrigger className="text-muted-foreground bg-background w-full">
+                    <SelectTrigger className="w-full bg-background text-muted-foreground">
                       <SelectValue placeholder={t`Default Value`} />
                     </SelectTrigger>
                     <SelectContent position="popper">

apps/remix/app/components/forms/editor/editor-field-generic-field-forms.tsx

@@ -255,7 +255,7 @@ export const EditorGenericRequiredField = ({
                 onCheckedChange={field.onChange}
               />
 
-              <label className="text-muted-foreground ml-2 text-sm" htmlFor="field-required">
+              <label className="ml-2 text-sm text-muted-foreground" htmlFor="field-required">
                 <Trans>Required Field</Trans>
               </label>
             </div>
@@ -298,7 +298,7 @@ export const EditorGenericReadOnlyField = ({
                 onCheckedChange={field.onChange}
               />
 
-              <label className="text-muted-foreground ml-2 text-sm" htmlFor="field-read-only">
+              <label className="ml-2 text-sm text-muted-foreground" htmlFor="field-read-only">
                 <Trans>Read Only</Trans>
               </label>
             </div>

apps/remix/app/components/forms/editor/editor-field-number-form.tsx

@@ -203,7 +203,7 @@ export const EditorFieldNumberForm = ({
                     value={field.value === null ? '-1' : field.value}
                     onValueChange={(value) => field.onChange(value === '-1' ? null : value)}
                   >
-                    <SelectTrigger className="text-muted-foreground bg-background w-full">
+                    <SelectTrigger className="w-full bg-background text-muted-foreground">
                       <SelectValue placeholder={t`Field format`} />
                     </SelectTrigger>
                     <SelectContent position="popper">

apps/remix/app/components/forms/editor/editor-field-radio-form.tsx

@@ -140,7 +140,7 @@ export const EditorFieldRadioForm = ({
                 </FormLabel>
                 <FormControl>
                   <Select value={field.value} onValueChange={field.onChange}>
-                    <SelectTrigger className="text-muted-foreground bg-background w-full">
+                    <SelectTrigger className="w-full bg-background text-muted-foreground">
                       <SelectValue placeholder={t`Select direction`} />
                     </SelectTrigger>
                     <SelectContent position="popper">
@@ -187,7 +187,7 @@ export const EditorFieldRadioForm = ({
                       <FormItem>
                         <FormControl>
                           <Checkbox
-                            className="data-[state=checked]:bg-primary border-foreground/30 h-5 w-5"
+                            className="h-5 w-5 border-foreground/30 data-[state=checked]:bg-primary"
                             checked={field.value}
                             onCheckedChange={(value) => {
                               // Uncheck all other values.

apps/remix/app/components/forms/editor/editor-field-signature-form.tsx

@@ -60,7 +60,7 @@ export const EditorFieldSignatureForm = ({
         <fieldset className="flex flex-col gap-2">
           <div>
             <EditorGenericFontSizeField formControl={form.control} />
-            <p className="text-muted-foreground mt-0.5 text-xs">
+            <p className="mt-0.5 text-xs text-muted-foreground">
               <Trans>The typed signature font size</Trans>
             </p>
           </div>

apps/remix/app/components/forms/organisation-update-form.tsx

@@ -131,7 +131,7 @@ export const OrganisationUpdateForm = () => {
                   <Input className="bg-background" {...field} />
                 </FormControl>
                 {!form.formState.errors.url && (
-                  <span className="text-foreground/50 text-xs font-normal">
+                  <span className="text-xs font-normal text-foreground/50">
                     {field.value ? (
                       `${NEXT_PUBLIC_WEBAPP_URL()}/o/${field.value}`
                     ) : (

apps/remix/app/components/forms/public-profile-form.tsx

@@ -155,7 +155,7 @@ export const PublicProfileForm = ({
                 </FormControl>
 
                 {!isPersonalLayoutMode && (
-                  <p className="text-muted-foreground text-xs">
+                  <p className="text-xs text-muted-foreground">
                     <Trans>
                       You can update the profile URL by updating the team URL in the general
                       settings page.
@@ -165,7 +165,7 @@ export const PublicProfileForm = ({
 
                 <div className="h-8">
                   {!form.formState.errors.url && (
-                    <div className="text-muted-foreground h-8 text-sm">
+                    <div className="h-8 text-sm text-muted-foreground">
                       {field.value ? (
                         <div>
                           <Button
@@ -229,7 +229,7 @@ export const PublicProfileForm = ({
                   </FormControl>
 
                   {!form.formState.errors.profileBio && (
-                    <p className="text-muted-foreground text-sm">
+                    <p className="text-sm text-muted-foreground">
                       {remaningLength >= 0 ? (
                         <Plural
                           value={remaningLength}

apps/remix/app/components/forms/search-param-selector.tsx

@@ -41,7 +41,7 @@ export const SearchParamSelector = ({ children, paramKey, isValueValid }: Search
 
   return (
     <Select defaultValue={value} onValueChange={onValueChange}>
-      <SelectTrigger className="text-muted-foreground max-w-[200px]">
+      <SelectTrigger className="max-w-[200px] text-muted-foreground">
         <SelectValue />
       </SelectTrigger>
 

apps/remix/app/components/forms/signup.tsx

@@ -196,7 +196,7 @@ export const SignUpForm = ({
 
   return (
     <div className={cn('flex justify-center gap-x-12', className)}>
-      <div className="border-border relative hidden flex-1 overflow-hidden rounded-xl border xl:flex">
+      <div className="relative hidden flex-1 overflow-hidden rounded-xl border border-border xl:flex">
         <div className="absolute -inset-8 -z-[2] backdrop-blur">
           <img
             src={communityCardsImage}
@@ -205,17 +205,17 @@ export const SignUpForm = ({
           />
         </div>
 
-        <div className="bg-background/50 absolute -inset-8 -z-[1] backdrop-blur-[2px]" />
+        <div className="absolute -inset-8 -z-[1] bg-background/50 backdrop-blur-[2px]" />
 
         <div className="relative flex h-full w-full flex-col items-center justify-evenly">
-          <div className="bg-background rounded-2xl border px-4 py-1 text-sm font-medium">
+          <div className="rounded-2xl border bg-background px-4 py-1 text-sm font-medium">
             <Trans>User profiles are here!</Trans>
           </div>
 
           <div className="w-full max-w-md">
             <UserProfileTimur
               rows={2}
-              className="bg-background border-border rounded-2xl border shadow-md"
+              className="rounded-2xl border border-border bg-background shadow-md"
             />
           </div>
 
@@ -223,13 +223,13 @@ export const SignUpForm = ({
         </div>
       </div>
 
-      <div className="border-border dark:bg-background relative z-10 flex min-h-[min(850px,80vh)] w-full max-w-lg flex-col rounded-xl border bg-neutral-100 p-6">
+      <div className="relative z-10 flex min-h-[min(850px,80vh)] w-full max-w-lg flex-col rounded-xl border border-border bg-neutral-100 p-6 dark:bg-background">
         <div className="h-20">
           <h1 className="text-xl font-semibold md:text-2xl">
             <Trans>Create a new account</Trans>
           </h1>
 
-          <p className="text-muted-foreground mt-2 text-xs md:text-sm">
+          <p className="mt-2 text-xs text-muted-foreground md:text-sm">
             <Trans>
               Create your account and start using state-of-the-art document signing. Open and
               beautiful signing is within your grasp.
@@ -325,11 +325,11 @@ export const SignUpForm = ({
               {hasSocialAuthEnabled && (
                 <>
                   <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
-                    <div className="bg-border h-px flex-1" />
+                    <div className="h-px flex-1 bg-border" />
-                    <span className="text-muted-foreground bg-transparent">
+                    <span className="bg-transparent text-muted-foreground">
                       <Trans>Or</Trans>
                     </span>
-                    <div className="bg-border h-px flex-1" />
+                    <div className="h-px flex-1 bg-border" />
                   </div>
                 </>
               )}
@@ -340,7 +340,7 @@ export const SignUpForm = ({
                     type="button"
                     size="lg"
                     variant={'outline'}
-                    className="bg-background text-muted-foreground border"
+                    className="border bg-background text-muted-foreground"
                     disabled={isSubmitting}
                     onClick={onSignUpWithGoogleClick}
                   >
@@ -356,7 +356,7 @@ export const SignUpForm = ({
                     type="button"
                     size="lg"
                     variant={'outline'}
-                    className="bg-background text-muted-foreground border"
+                    className="border bg-background text-muted-foreground"
                     disabled={isSubmitting}
                     onClick={onSignUpWithMicrosoftClick}
                   >
@@ -376,7 +376,7 @@ export const SignUpForm = ({
                     type="button"
                     size="lg"
                     variant={'outline'}
-                    className="bg-background text-muted-foreground border"
+                    className="border bg-background text-muted-foreground"
                     disabled={isSubmitting}
                     onClick={onSignUpWithOIDCClick}
                   >
@@ -386,7 +386,7 @@ export const SignUpForm = ({
                 </>
               )}
 
-              <p className="text-muted-foreground mt-4 text-sm">
+              <p className="mt-4 text-sm text-muted-foreground">
                 <Trans>
                   Already have an account?{' '}
                   <Link to="/signin" className="text-documenso-700 duration-200 hover:opacity-70">
@@ -406,7 +406,7 @@ export const SignUpForm = ({
             </Button>
           </form>
         </Form>
-        <p className="text-muted-foreground mt-6 text-xs">
+        <p className="mt-6 text-xs text-muted-foreground">
           <Trans>
             By proceeding, you agree to our{' '}
             <Link

apps/remix/app/components/forms/team-update-form.tsx

@@ -129,7 +129,7 @@ export const TeamUpdateForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
                   <Input className="bg-background" {...field} />
                 </FormControl>
                 {!form.formState.errors.url && (
-                  <span className="text-foreground/50 text-xs font-normal">
+                  <span className="text-xs font-normal text-foreground/50">
                     {field.value ? (
                       `${NEXT_PUBLIC_WEBAPP_URL()}/t/${field.value}`
                     ) : (

apps/remix/app/components/general/admin-monthly-active-user-charts.tsx

@@ -44,7 +44,7 @@ export const MonthlyActiveUsersChart = ({
 
   return (
     <div className={className}>
-      <div className="border-border flex flex-1 flex-col justify-center rounded-2xl border p-6 pl-2">
+      <div className="flex flex-1 flex-col justify-center rounded-2xl border border-border p-6 pl-2">
         <div className="mb-6 flex px-4">
           <h3 className="text-lg font-semibold">{title}</h3>
         </div>

apps/remix/app/components/general/admin-stats-signer-conversion-chart.tsx

@@ -26,7 +26,7 @@ export const AdminStatsSignerConversionChart = ({
 
   return (
     <div className={className}>
-      <div className="border-border flex flex-1 flex-col justify-center rounded-2xl border p-6 pl-2">
+      <div className="flex flex-1 flex-col justify-center rounded-2xl border border-border p-6 pl-2">
         <div className="mb-6 flex px-4">
           <h3 className="text-lg font-semibold">{title}</h3>
         </div>

apps/remix/app/components/general/admin-stats-users-with-documents.tsx

@@ -60,7 +60,7 @@ export const AdminStatsUsersWithDocumentsChart = ({
 
   return (
     <div className={className}>
-      <div className="border-border flex flex-1 flex-col justify-center rounded-2xl border p-6 pl-2">
+      <div className="flex flex-1 flex-col justify-center rounded-2xl border border-border p-6 pl-2">
         <div className="mb-6 flex h-12 px-4">
           <h3 className="text-lg font-semibold">{title}</h3>
         </div>

apps/remix/app/components/general/app-header.tsx

@@ -52,7 +52,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
   return (
     <header
       className={cn(
-        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-[60] flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
+        'supports-backdrop-blur:bg-background/60 sticky top-0 z-[60] flex h-16 w-full items-center border-b border-b-transparent bg-background/95 backdrop-blur duration-200',
         scrollY > 5 && 'border-b-border',
         className,
       )}
@@ -61,7 +61,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
       <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:justify-normal md:px-8">
         <Link
           to={getRootHref(params)}
-          className="focus-visible:ring-ring ring-offset-background hidden rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 md:inline"
+          className="hidden rounded-md ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 md:inline"
         >
           <BrandingLogo className="h-6 w-auto" />
         </Link>
@@ -70,10 +70,10 @@ export const Header = ({ className, ...props }: HeaderProps) => {
 
         <Button asChild variant="outline" className="relative hidden h-10 w-10 rounded-lg md:flex">
           <Link to="/inbox" className="relative block h-10 w-10">
-            <InboxIcon className="text-muted-foreground hover:text-foreground h-5 w-5 flex-shrink-0 transition-colors" />
+            <InboxIcon className="h-5 w-5 flex-shrink-0 text-muted-foreground transition-colors hover:text-foreground" />
 
             {unreadCountData && unreadCountData.count > 0 && (
-              <span className="bg-primary text-primary-foreground absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-semibold">
+              <span className="absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-semibold text-primary-foreground">
                 {unreadCountData.count > 99 ? '99+' : unreadCountData.count}
               </span>
             )}
@@ -86,11 +86,11 @@ export const Header = ({ className, ...props }: HeaderProps) => {
 
         <div className="flex flex-row items-center space-x-4 md:hidden">
           <button onClick={() => setIsCommandMenuOpen(true)}>
-            <SearchIcon className="text-muted-foreground h-6 w-6" />
+            <SearchIcon className="h-6 w-6 text-muted-foreground" />
           </button>
 
           <button onClick={() => setIsHamburgerMenuOpen(true)}>
-            <MenuIcon className="text-muted-foreground h-6 w-6" />
+            <MenuIcon className="h-6 w-6 text-muted-foreground" />
           </button>
 
           <AppCommandMenu open={isCommandMenuOpen} onOpenChange={setIsCommandMenuOpen} />

apps/remix/app/components/general/app-nav-desktop.tsx

@@ -86,7 +86,7 @@ export const AppNavDesktop = ({
                   key={href}
                   to={href}
                   className={cn(
-                    'text-muted-foreground dark:text-muted-foreground/60 focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
+                    'rounded-md font-medium leading-5 text-muted-foreground ring-offset-background hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:text-muted-foreground/60',
                     {
                       'text-foreground dark:text-muted-foreground': pathname?.startsWith(href),
                     },
@@ -102,7 +102,7 @@ export const AppNavDesktop = ({
 
       <Button
         variant="outline"
-        className="text-muted-foreground flex w-full max-w-96 items-center justify-between rounded-lg"
+        className="flex w-full max-w-96 items-center justify-between rounded-lg text-muted-foreground"
         onClick={() => setIsCommandMenuOpen(true)}
       >
         <div className="flex items-center">
@@ -111,7 +111,7 @@ export const AppNavDesktop = ({
         </div>
 
         <div>
-          <div className="text-muted-foreground bg-muted flex items-center rounded-md px-1.5 py-0.5 text-xs tracking-wider">
+          <div className="flex items-center rounded-md bg-muted px-1.5 py-0.5 text-xs tracking-wider text-muted-foreground">
             {modifierKey}+K
           </div>
         </div>

apps/remix/app/components/general/app-nav-mobile.tsx

@@ -97,13 +97,13 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
           {menuNavigationLinks.map(({ href, text }) => (
             <Link
               key={href}
-              className="text-foreground hover:text-foreground/80 flex items-center gap-2 text-2xl font-semibold"
+              className="flex items-center gap-2 text-2xl font-semibold text-foreground hover:text-foreground/80"
               to={href}
               onClick={() => handleMenuItemClick()}
             >
               {text}
               {href === '/inbox' && unreadCountData && unreadCountData.count > 0 && (
-                <span className="bg-primary text-primary-foreground flex h-6 min-w-[1.5rem] items-center justify-center rounded-full px-1.5 text-xs font-semibold">
+                <span className="flex h-6 min-w-[1.5rem] items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-primary-foreground">
                   {unreadCountData.count > 99 ? '99+' : unreadCountData.count}
                 </span>
               )}
@@ -111,7 +111,7 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
           ))}
 
           <button
-            className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
+            className="text-2xl font-semibold text-foreground hover:text-foreground/80"
             onClick={async () => authClient.signOut()}
           >
             <Trans>Sign Out</Trans>
@@ -123,7 +123,7 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
             <ThemeSwitcher />
           </div>
 
-          <p className="text-muted-foreground text-sm">
+          <p className="text-sm text-muted-foreground">
             © {new Date().getFullYear()} Documenso, Inc.
             <br />
             <Trans>All rights reserved.</Trans>

apps/remix/app/components/general/direct-template/direct-template-signing-auth-page.tsx

@@ -38,7 +38,7 @@ export const DirectTemplateAuthPageView = () => {
           <Trans>Authentication required</Trans>
         </h1>
 
-        <p className="text-muted-foreground mt-2 text-sm">
+        <p className="mt-2 text-sm text-muted-foreground">
           <Trans>You need to be logged in to view this page.</Trans>
         </p>
 

apps/remix/app/components/general/document-signing/access-auth-2fa-form.tsx

@@ -151,7 +151,7 @@ export const AccessAuth2FAForm = ({ onSubmit, token, error }: AccessAuth2FAFormP
             <h3 className="text-lg font-semibold">
               <Trans>Choose verification method</Trans>
             </h3>
-            <p className="text-muted-foreground text-sm">
+            <p className="text-sm text-muted-foreground">
               <Trans>Please select how you'd like to receive your verification code.</Trans>
             </p>
           </div>
@@ -175,7 +175,7 @@ export const AccessAuth2FAForm = ({ onSubmit, token, error }: AccessAuth2FAFormP
                 <div className="font-medium">
                   <Trans>Email verification</Trans>
                 </div>
-                <div className="text-muted-foreground text-sm">
+                <div className="text-sm text-muted-foreground">
                   <Trans>We'll send a 6-digit code to your email</Trans>
                 </div>
               </div>
@@ -194,7 +194,7 @@ export const AccessAuth2FAForm = ({ onSubmit, token, error }: AccessAuth2FAFormP
                   <div className="font-medium">
                     <Trans>Authenticator app</Trans>
                   </div>
-                  <div className="text-muted-foreground text-sm">
+                  <div className="text-sm text-muted-foreground">
                     <Trans>Use your authenticator app to generate a code</Trans>
                   </div>
                 </div>
@@ -216,7 +216,7 @@ export const AccessAuth2FAForm = ({ onSubmit, token, error }: AccessAuth2FAFormP
             </h3>
           </div>
 
-          <div className="text-muted-foreground text-sm">
+          <div className="text-sm text-muted-foreground">
             {selectedMethod === 'email' ? (
               <Trans>
                 We've sent a 6-digit verification code to your email. Please enter it below to
@@ -262,7 +262,7 @@ export const AccessAuth2FAForm = ({ onSubmit, token, error }: AccessAuth2FAFormP
 
                       {expiresAt && millisecondsRemaining !== null && (
                         <div
-                          className={cn('text-muted-foreground mt-2 text-center text-sm', {
+                          className={cn('mt-2 text-center text-sm text-muted-foreground', {
                             'text-destructive': millisecondsRemaining <= 0,
                           })}
                         >

apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx

@@ -47,7 +47,7 @@ export const DocumentSigningAttachmentsPopover = ({
             <h4 className="font-medium">
               <Trans>Attachments</Trans>
             </h4>
-            <p className="text-muted-foreground mt-1 text-sm">
+            <p className="mt-1 text-sm text-muted-foreground">
               <Trans>Documents and resources related to this envelope.</Trans>
             </p>
           </div>
@@ -60,14 +60,14 @@ export const DocumentSigningAttachmentsPopover = ({
                 title={attachment.data}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="border-border hover:bg-muted/50 group flex items-center justify-between rounded-md border px-3 py-2.5 transition duration-200"
+                className="group flex items-center justify-between rounded-md border border-border px-3 py-2.5 transition duration-200 hover:bg-muted/50"
               >
                 <div className="flex flex-1 items-center gap-2.5">
-                  <div className="bg-muted rounded p-2">
+                  <div className="rounded bg-muted p-2">
                     <PaperclipIcon className="h-4 w-4" />
                   </div>
 
-                  <span className="text-muted-foreground hover:text-foreground block truncate text-sm underline">
+                  <span className="block truncate text-sm text-muted-foreground underline hover:text-foreground">
                     {attachment.label}
                   </span>
                 </div>

apps/remix/app/components/general/document-signing/document-signing-auth-dialog.tsx

@@ -123,7 +123,7 @@ export const DocumentSigningAuthDialog = ({
         {/* Show chooser if no auth type is selected and there are multiple options */}
         {!selectedAuthType && validAuthTypes.length > 1 && (
           <div className="space-y-4">
-            <p className="text-muted-foreground text-sm">
+            <p className="text-sm text-muted-foreground">
               <Trans>Choose your preferred authentication method:</Trans>
             </p>
             <div className="grid gap-2">
@@ -145,7 +145,7 @@ export const DocumentSigningAuthDialog = ({
                         .exhaustive()}
                     </div>
 
-                    <div className="text-muted-foreground text-sm">
+                    <div className="text-sm text-muted-foreground">
                       {match(authType)
                         .with(DocumentAuth.ACCOUNT, () => <Trans>Sign in to your account</Trans>)
                         .with(DocumentAuth.PASSKEY, () => (

apps/remix/app/components/general/document-signing/document-signing-auth-page.tsx

@@ -54,7 +54,7 @@ export const DocumentSigningAuthPageView = ({
           <Trans>Authentication required</Trans>
         </h1>
 
-        <p className="text-muted-foreground mt-2 text-sm">
+        <p className="mt-2 text-sm text-muted-foreground">
           {email ? (
             <Trans>
               You need to be logged in as <strong>{email}</strong> to view this page.

apps/remix/app/components/general/document-signing/document-signing-auth-provider.tsx

@@ -184,9 +184,9 @@ export const DocumentSigningAuthProvider = ({
   // Assume that a user must be logged in for any auth requirements.
   const isAuthRedirectRequired = Boolean(
     derivedRecipientActionAuth &&
-      derivedRecipientActionAuth.length > 0 &&
+    derivedRecipientActionAuth.length > 0 &&
-      !derivedRecipientActionAuth.includes(DocumentAuth.EXPLICIT_NONE) &&
+    !derivedRecipientActionAuth.includes(DocumentAuth.EXPLICIT_NONE) &&
-      user?.email !== recipient.email,
+    user?.email !== recipient.email,
   );
 
   const refetchPasskeys = async () => {

apps/remix/app/components/general/document-signing/document-signing-auto-sign.tsx

@@ -167,7 +167,7 @@ export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAu
           </DialogTitle>
         </DialogHeader>
 
-        <div className="text-muted-foreground max-w-[50ch]">
+        <div className="max-w-[50ch] text-muted-foreground">
           <p>
             <Trans>
               When you sign a document, we can automatically fill in and sign the following fields

apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx

@@ -265,8 +265,8 @@ export const DocumentSigningCheckboxField = ({
       type="Checkbox"
     >
       {isLoading && (
-        <div className="bg-background absolute inset-0 z-20 flex items-center justify-center rounded-md">
+        <div className="absolute inset-0 z-20 flex items-center justify-center rounded-md bg-background">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+          <Loader className="h-5 w-5 animate-spin text-primary md:h-8 md:w-8" />
         </div>
       )}
 
@@ -300,7 +300,7 @@ export const DocumentSigningCheckboxField = ({
                   {!item.value.includes('empty-value-') && item.value && (
                     <Label
                       htmlFor={`checkbox-${field.id}-${item.id}`}
-                      className="text-foreground ml-1.5 text-xs font-normal"
+                      className="ml-1.5 text-xs font-normal text-foreground"
                     >
                       {item.value}
                     </Label>
@@ -334,7 +334,7 @@ export const DocumentSigningCheckboxField = ({
                 {!item.value.includes('empty-value-') && item.value && (
                   <Label
                     htmlFor={`checkbox-${field.id}-${item.id}`}
-                    className="text-foreground ml-1.5 text-xs font-normal"
+                    className="ml-1.5 text-xs font-normal text-foreground"
                   >
                     {item.value}
                   </Label>

apps/remix/app/components/general/document-signing/document-signing-date-field.tsx

@@ -136,13 +136,13 @@ export const DocumentSigningDateField = ({
       tooltipText={isDifferentTime ? tooltipText : undefined}
     >
       {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+        <div className="absolute inset-0 flex items-center justify-center rounded-md bg-background">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+          <Loader className="h-5 w-5 animate-spin text-primary md:h-8 md:w-8" />
         </div>
       )}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-foreground group-hover:text-recipient-green text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+        <p className="text-[clamp(0.425rem,25cqw,0.825rem)] text-foreground duration-200 group-hover:text-primary group-hover:text-recipient-green">
           <Trans>Date</Trans>
         </p>
       )}
@@ -151,7 +151,7 @@ export const DocumentSigningDateField = ({
         <div className="flex h-full w-full items-center">
           <p
             className={cn(
-              'text-foreground w-full whitespace-nowrap text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              'w-full whitespace-nowrap text-left text-[clamp(0.425rem,25cqw,0.825rem)] text-foreground duration-200',
               {
                 '!text-center': parsedFieldMeta?.textAlign === 'center',
                 '!text-right': parsedFieldMeta?.textAlign === 'right',

apps/remix/app/components/general/document-signing/document-signing-disclosure.tsx

@@ -12,7 +12,7 @@ export const DocumentSigningDisclosure = ({
   ...props
 }: DocumentSigningDisclosureProps) => {
   return (
-    <p className={cn('text-muted-foreground text-xs', className)} {...props}>
+    <p className={cn('text-xs text-muted-foreground', className)} {...props}>
       <Trans>
         By proceeding with your electronic signature, you acknowledge and consent that it will be
         used to sign the given document and holds the same legal validity as a handwritten

apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx

@@ -171,17 +171,17 @@ export const DocumentSigningDropdownField = ({
         type="Dropdown"
       >
         {isLoading && (
-          <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <div className="absolute inset-0 flex items-center justify-center rounded-md bg-background">
-            <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+            <Loader className="h-5 w-5 animate-spin text-primary md:h-8 md:w-8" />
           </div>
         )}
 
         {!field.inserted && (
-          <p className="group-hover:text-primary text-foreground flex flex-col items-center justify-center duration-200">
+          <p className="flex flex-col items-center justify-center text-foreground duration-200 group-hover:text-primary">
             <Select value={localChoice} onValueChange={handleSelectItem}>
               <SelectTrigger
                 className={cn(
-                  'text-foreground z-10 h-full w-full border-none ring-0 focus:border-none focus:ring-0',
+                  'z-10 h-full w-full border-none text-foreground ring-0 focus:border-none focus:ring-0',
                 )}
               >
                 <SelectValue
@@ -201,7 +201,7 @@ export const DocumentSigningDropdownField = ({
         )}
 
         {field.inserted && (
-          <p className="text-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+          <p className="text-[clamp(0.425rem,25cqw,0.825rem)] text-foreground duration-200">
             {field.customText}
           </p>
         )}

apps/remix/app/components/general/document-signing/document-signing-field-container.tsx

@@ -180,10 +180,10 @@ export const DocumentSigningFieldContainer = ({
               className={cn(
                 'absolute -top-16 left-0 right-0 rounded-md p-2 text-center text-xs text-gray-700',
                 {
-                  'bg-foreground/5 border-border border': !field.inserted,
+                  'border border-border bg-foreground/5': !field.inserted,
                 },
                 {
-                  'bg-documenso-200 border-primary border': field.inserted,
+                  'border border-primary bg-documenso-200': field.inserted,
                 },
               )}
             >

apps/remix/app/components/general/document-signing/document-signing-fields.tsx

@@ -4,15 +4,15 @@ import { cn } from '@documenso/ui/lib/utils';
 
 export const DocumentSigningFieldsLoader = () => {
   return (
-    <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+    <div className="absolute inset-0 flex items-center justify-center rounded-md bg-background">
-      <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+      <Loader className="h-5 w-5 animate-spin text-primary md:h-8 md:w-8" />
     </div>
   );
 };
 
 export const DocumentSigningFieldsUninserted = ({ children }: { children: React.ReactNode }) => {
   return (
-    <p className="text-foreground group-hover:text-recipient-green whitespace-pre-wrap text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+    <p className="whitespace-pre-wrap text-[clamp(0.425rem,25cqw,0.825rem)] text-foreground duration-200 group-hover:text-recipient-green">
       {children}
     </p>
   );
@@ -37,7 +37,7 @@ export const DocumentSigningFieldsInserted = ({
     <div className="flex h-full w-full items-center overflow-hidden">
       <p
         className={cn(
-          'text-foreground w-full whitespace-pre-wrap text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+          'w-full whitespace-pre-wrap text-left text-[clamp(0.425rem,25cqw,0.825rem)] text-foreground duration-200',
           {
             '!text-center': textAlign === 'center',
             '!text-right': textAlign === 'right',

apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx

@@ -170,7 +170,7 @@ export const DocumentSigningRadioField = ({
               {!item.value.includes('empty-value-') && item.value && (
                 <Label
                   htmlFor={`option-${field.id}-${item.id}`}
-                  className="text-foreground ml-1.5 text-xs font-normal"
+                  className="ml-1.5 text-xs font-normal text-foreground"
                 >
                   {item.value}
                 </Label>
@@ -194,7 +194,7 @@ export const DocumentSigningRadioField = ({
               {!item.value.includes('empty-value-') && item.value && (
                 <Label
                   htmlFor={`option-${field.id}-${item.id}`}
-                  className="text-foreground ml-1.5 text-xs font-normal"
+                  className="ml-1.5 text-xs font-normal text-foreground"
                 >
                   {item.value}
                 </Label>

apps/remix/app/components/general/document-signing/document-signing-text-field.tsx

@@ -279,7 +279,7 @@ export const DocumentSigningTextField = ({
           {parsedFieldMeta?.characterLimit !== undefined &&
             parsedFieldMeta?.characterLimit > 0 &&
             !userInputHasErrors && (
-              <div className="text-muted-foreground text-sm">
+              <div className="text-sm text-muted-foreground">
                 <Plural
                   value={charactersRemaining}
                   one="1 character remaining"

apps/remix/app/components/general/document/document-attachments-popover.tsx

@@ -143,7 +143,7 @@ export const DocumentAttachmentsPopover = ({
             <h4 className="font-medium">
               <Trans>Attachments</Trans>
             </h4>
-            <p className="text-muted-foreground mt-1 text-sm">
+            <p className="mt-1 text-sm text-muted-foreground">
               <Trans>Add links to relevant documents or resources.</Trans>
             </p>
           </div>
@@ -153,7 +153,7 @@ export const DocumentAttachmentsPopover = ({
               {attachments?.data.map((attachment) => (
                 <div
                   key={attachment.id}
-                  className="border-border flex items-center justify-between rounded-md border p-2"
+                  className="flex items-center justify-between rounded-md border border-border p-2"
                 >
                   <div className="min-w-0 flex-1">
                     <p className="truncate text-sm font-medium">{attachment.label}</p>
@@ -161,7 +161,7 @@ export const DocumentAttachmentsPopover = ({
                       href={attachment.data}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-muted-foreground hover:text-foreground truncate text-xs underline"
+                      className="truncate text-xs text-muted-foreground underline hover:text-foreground"
                     >
                       {attachment.data}
                     </a>

apps/remix/app/components/general/document/document-page-view-dropdown.tsx

@@ -69,7 +69,7 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
-        <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+        <MoreHorizontal className="h-5 w-5 text-muted-foreground" />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className="w-52" align="end" forceMount>

apps/remix/app/components/general/document/document-page-view-information.tsx

@@ -50,7 +50,7 @@ export const DocumentPageViewInformation = ({
   }, [isMounted, envelope, userId]);
 
   return (
-    <section className="dark:bg-background text-foreground border-border bg-widget flex flex-col rounded-xl border">
+    <section className="flex flex-col rounded-xl border border-border bg-widget text-foreground dark:bg-background">
       <h1 className="px-4 py-3 font-medium">
         <Trans>Information</Trans>
       </h1>

apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx

@@ -88,7 +88,7 @@ export const DocumentRecipientLinkCopyDialog = ({
           </DialogDescription>
         </DialogHeader>
 
-        <ul className="text-muted-foreground divide-y rounded-lg border">
+        <ul className="divide-y rounded-lg border text-muted-foreground">
           {recipients.length === 0 && (
             <li className="flex flex-col items-center justify-center py-6 text-sm">
               <Trans>No recipients</Trans>
@@ -99,9 +99,9 @@ export const DocumentRecipientLinkCopyDialog = ({
             <li key={recipient.id} className="flex items-center justify-between px-4 py-3 text-sm">
               <AvatarWithText
                 avatarFallback={recipient.email.slice(0, 1).toUpperCase()}
-                primaryText={<p className="text-muted-foreground text-sm">{recipient.email}</p>}
+                primaryText={<p className="text-sm text-muted-foreground">{recipient.email}</p>}
                 secondaryText={
-                  <p className="text-muted-foreground/70 text-xs">
+                  <p className="text-xs text-muted-foreground/70">
                     {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
                   </p>
                 }

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx

@@ -278,13 +278,13 @@ export const EnvelopeEditorFieldDragDrop = ({
             onMouseDown={() => setSelectedField(field.type)}
             data-selected={selectedField === field.type ? true : undefined}
             className={cn(
-              'border-border group flex h-12 cursor-pointer items-center justify-center rounded-lg border px-4 transition-colors',
+              'group flex h-12 cursor-pointer items-center justify-center rounded-lg border border-border px-4 transition-colors',
               RECIPIENT_COLOR_STYLES[selectedRecipientColor].fieldButton,
             )}
           >
             <p
               className={cn(
-                'text-muted-foreground font-noto group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
+                'flex items-center justify-center gap-x-1.5 font-noto text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
                 field.className,
                 {
                   'group-hover:text-recipient-green': selectedRecipientColor === 'green',
@@ -306,7 +306,7 @@ export const EnvelopeEditorFieldDragDrop = ({
       {selectedField && (
         <div
           className={cn(
-            'text-muted-foreground dark:text-muted-background font-noto pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white ring-2 transition duration-200 [container-type:size]',
+            'dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white font-noto text-muted-foreground ring-2 transition duration-200 [container-type:size]',
             RECIPIENT_COLOR_STYLES[selectedRecipientColor].base,
             selectedField === FieldType.SIGNATURE && 'font-signature',
             {

apps/remix/app/components/general/envelope-editor/envelope-editor-title-input.tsx

@@ -72,7 +72,7 @@ export const EnvelopeItemTitleInput = ({
         disabled={disabled}
         style={{ width: `${inputWidth}px` }}
         className={cn(
-          'text-foreground hover:outline-muted-foreground focus:outline-muted-foreground rounded-sm border-0 bg-transparent p-1 text-sm font-medium outline-none hover:outline hover:outline-1 focus:outline focus:outline-1',
+          'rounded-sm border-0 bg-transparent p-1 text-sm font-medium text-foreground outline-none hover:outline hover:outline-1 hover:outline-muted-foreground focus:outline focus:outline-1 focus:outline-muted-foreground',
           className,
           {
             'outline-red-500': isError,

apps/remix/app/components/general/folder/folder-card.tsx

@@ -58,19 +58,19 @@ export const FolderCard = ({ folder, onMove, onSettings, onDelete }: FolderCardP
 
   return (
     <Link to={formatPath()} data-folder-id={folder.id} data-folder-name={folder.name}>
-      <Card className="hover:bg-muted/50 border-border h-full border transition-all">
+      <Card className="h-full border border-border transition-all hover:bg-muted/50">
         <CardContent className="p-4">
           <div className="flex min-w-0 items-center gap-3">
-            <FolderIcon className="text-documenso h-6 w-6 flex-shrink-0" />
+            <FolderIcon className="h-6 w-6 flex-shrink-0 text-documenso" />
 
             <div className="flex w-full min-w-0 items-center justify-between">
               <div className="min-w-0 flex-1">
                 <h3 className="flex min-w-0 items-center gap-2 font-medium">
                   <span className="truncate">{folder.name}</span>
-                  {folder.pinned && <PinIcon className="text-documenso h-3 w-3 flex-shrink-0" />}
+                  {folder.pinned && <PinIcon className="h-3 w-3 flex-shrink-0 text-documenso" />}
                 </h3>
 
-                <div className="text-muted-foreground mt-1 flex space-x-2 truncate text-xs">
+                <div className="mt-1 flex space-x-2 truncate text-xs text-muted-foreground">
                   <span>
                     {folder.type === FolderType.TEMPLATE ? (
                       <Plural
@@ -143,17 +143,17 @@ export const FolderCard = ({ folder, onMove, onSettings, onDelete }: FolderCardP
 
 export const FolderCardEmpty = ({ type }: { type: FolderType }) => {
   return (
-    <Card className="hover:bg-muted/50 border-border h-full border transition-all">
+    <Card className="h-full border border-border transition-all hover:bg-muted/50">
       <CardContent className="p-4">
         <div className="flex items-center gap-3">
-          <FolderPlusIcon className="text-muted-foreground/60 h-6 w-6" />
+          <FolderPlusIcon className="h-6 w-6 text-muted-foreground/60" />
 
           <div>
-            <h3 className="text-muted-foreground flex items-center gap-2 font-medium">
+            <h3 className="flex items-center gap-2 font-medium text-muted-foreground">
               <Trans>Create folder</Trans>
             </h3>
 
-            <div className="text-muted-foreground/60 mt-1 flex space-x-2 truncate text-xs">
+            <div className="mt-1 flex space-x-2 truncate text-xs text-muted-foreground/60">
               {type === FolderType.DOCUMENT ? (
                 <Trans>Organise your documents</Trans>
               ) : (

apps/remix/app/components/general/generic-error-layout.tsx

@@ -81,11 +81,11 @@ export const GenericErrorLayout = ({
 
       <div className="inset-0 mx-auto flex h-full flex-grow items-center justify-center px-6 py-32">
         <div>
-          <p className="text-muted-foreground font-semibold">{_(subHeading)}</p>
+          <p className="font-semibold text-muted-foreground">{_(subHeading)}</p>
 
           <h1 className="mt-3 text-2xl font-bold md:text-3xl">{_(heading)}</h1>
 
-          <p className="text-muted-foreground mt-4 text-sm">{_(message)}</p>
+          <p className="mt-4 text-sm text-muted-foreground">{_(message)}</p>
 
           <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
             {secondaryButton ||

apps/remix/app/components/general/legacy-field-warning-popover.tsx

@@ -83,7 +83,7 @@ export const LegacyFieldWarningPopover = ({
         </Button>
       }
     >
-      <p className="text-muted-foreground text-sm">
+      <p className="text-sm text-muted-foreground">
         {type === 'document' ? (
           <Trans>
             This document is using legacy field insertion, we recommend using the new field

apps/remix/app/components/general/menu-switcher.tsx

@@ -54,7 +54,7 @@ export const MenuSwitcher = () => {
             primaryText={user.name}
             secondaryText={_(msg`Personal Account`)}
             rightSideComponent={
-              <ChevronsUpDown className="text-muted-foreground ml-auto h-4 w-4" />
+              <ChevronsUpDown className="ml-auto h-4 w-4 text-muted-foreground" />
             }
             textSectionClassName="hidden lg:flex"
           />
@@ -66,7 +66,7 @@ export const MenuSwitcher = () => {
         align="end"
         forceMount
       >
-        <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+        <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
           <Link
             to="/settings/organisations?action=add-organisation"
             className="flex items-center justify-between"
@@ -78,34 +78,34 @@ export const MenuSwitcher = () => {
         <DropdownMenuSeparator />
 
         {isUserAdmin && (
-          <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+          <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
             <Link to="/admin">
               <Trans>Admin panel</Trans>
             </Link>
           </DropdownMenuItem>
         )}
 
-        <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+        <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
           <Link to="/inbox">
             <Trans>Personal Inbox</Trans>
           </Link>
         </DropdownMenuItem>
 
-        <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+        <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
           <Link to="/settings/profile">
             <Trans>User settings</Trans>
           </Link>
         </DropdownMenuItem>
 
         <DropdownMenuItem
-          className="text-muted-foreground px-4 py-2"
+          className="px-4 py-2 text-muted-foreground"
           onClick={() => setLanguageSwitcherOpen(true)}
         >
           <Trans>Language</Trans>
         </DropdownMenuItem>
 
         <DropdownMenuItem
-          className="text-destructive/90 hover:!text-destructive px-4 py-2"
+          className="px-4 py-2 text-destructive/90 hover:!text-destructive"
           onSelect={async () => authClient.signOut()}
         >
           <Trans>Sign Out</Trans>

apps/remix/app/components/general/org-menu-switcher.tsx

@@ -130,7 +130,7 @@ export const OrgMenuSwitcher = () => {
             primaryText={dropdownMenuAvatarText.primaryText}
             secondaryText={dropdownMenuAvatarText.secondaryText}
             rightSideComponent={
-              <ChevronsUpDown className="text-muted-foreground ml-auto h-4 w-4" />
+              <ChevronsUpDown className="ml-auto h-4 w-4 text-muted-foreground" />
             }
             textSectionClassName="hidden lg:flex"
           />
@@ -139,7 +139,7 @@ export const OrgMenuSwitcher = () => {
 
       <DropdownMenuContent
         className={cn(
-          'divide-border z-[60] ml-6 flex w-full divide-x p-0 md:ml-0 md:min-w-[40rem]',
+          'z-[60] ml-6 flex w-full divide-x divide-border p-0 md:ml-0 md:min-w-[40rem]',
         )}
         align="end"
         forceMount
@@ -148,7 +148,7 @@ export const OrgMenuSwitcher = () => {
           {/* Organisations column */}
           <div className="flex w-full flex-col md:w-1/3">
             <div className="flex h-12 items-center border-b p-2">
-              <h3 className="text-muted-foreground flex items-center px-2 text-sm font-medium">
+              <h3 className="flex items-center px-2 text-sm font-medium text-muted-foreground">
                 <Building2Icon className="mr-2 h-3.5 w-3.5" />
                 <Trans>Organisations</Trans>
               </h3>
@@ -162,7 +162,7 @@ export const OrgMenuSwitcher = () => {
                 >
                   <DropdownMenuItem
                     className={cn(
-                      'text-muted-foreground w-full px-4 py-2',
+                      'w-full px-4 py-2 text-muted-foreground',
                       org.id === currentOrganisation?.id && !hoveredOrgId && 'bg-accent',
                       org.id === hoveredOrgId && 'bg-accent',
                     )}
@@ -186,7 +186,7 @@ export const OrgMenuSwitcher = () => {
                     <div className="absolute bottom-0 right-0 top-0 flex items-center justify-center">
                       <Link
                         to={`/o/${org.url}/settings`}
-                        className="text-muted-foreground mr-2 rounded-sm border p-1 transition-opacity duration-200 group-hover:opacity-100 md:opacity-0"
+                        className="mr-2 rounded-sm border p-1 text-muted-foreground transition-opacity duration-200 group-hover:opacity-100 md:opacity-0"
                       >
                         <Settings2Icon className="h-3.5 w-3.5" />
                       </Link>
@@ -207,7 +207,7 @@ export const OrgMenuSwitcher = () => {
           {/* Teams column */}
           <div className="hidden w-1/3 flex-col md:flex">
             <div className="flex h-12 items-center border-b p-2">
-              <h3 className="text-muted-foreground flex items-center px-2 text-sm font-medium">
+              <h3 className="flex items-center px-2 text-sm font-medium text-muted-foreground">
                 <UsersIcon className="mr-2 h-3.5 w-3.5" />
                 <Trans>Teams</Trans>
               </h3>
@@ -219,7 +219,7 @@ export const OrgMenuSwitcher = () => {
                     <div className="group relative" key={team.id}>
                       <DropdownMenuItem
                         className={cn(
-                          'text-muted-foreground w-full px-4 py-2',
+                          'w-full px-4 py-2 text-muted-foreground',
                           team.id === currentTeam?.id && 'bg-accent',
                         )}
                         asChild
@@ -239,7 +239,7 @@ export const OrgMenuSwitcher = () => {
                         <div className="absolute bottom-0 right-0 top-0 flex items-center justify-center">
                           <Link
                             to={`/t/${team.url}/settings`}
-                            className="text-muted-foreground mr-2 rounded-sm border p-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+                            className="mr-2 rounded-sm border p-1 text-muted-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100"
                           >
                             <Settings2Icon className="h-3.5 w-3.5" />
                           </Link>
@@ -248,7 +248,7 @@ export const OrgMenuSwitcher = () => {
                     </div>
                   ))
                 ) : (
-                  <div className="text-muted-foreground my-12 flex items-center justify-center px-2 text-center text-sm">
+                  <div className="my-12 flex items-center justify-center px-2 text-center text-sm text-muted-foreground">
                     <Trans>Select an organisation to view teams</Trans>
                   </div>
                 )}
@@ -268,14 +268,14 @@ export const OrgMenuSwitcher = () => {
           {/* Settings column */}
           <div className="hidden w-1/3 flex-col md:flex">
             <div className="flex h-12 items-center border-b p-2">
-              <h3 className="text-muted-foreground flex items-center px-2 text-sm font-medium">
+              <h3 className="flex items-center px-2 text-sm font-medium text-muted-foreground">
                 <SettingsIcon className="mr-2 h-3.5 w-3.5" />
                 <Trans>Settings</Trans>
               </h3>
             </div>
             <div className="flex-1 overflow-y-auto p-1.5">
               {isUserAdmin && (
-                <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+                <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
                   <Link to="/admin">
                     <Trans>Admin panel</Trans>
                   </Link>
@@ -287,7 +287,7 @@ export const OrgMenuSwitcher = () => {
                   'MANAGE_ORGANISATION',
                   currentOrganisation.currentOrganisationRole,
                 ) && (
-                  <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+                  <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
                     <Link to={`/o/${currentOrganisation.url}/settings`}>
                       <Trans>Organisation settings</Trans>
                     </Link>
@@ -295,34 +295,34 @@ export const OrgMenuSwitcher = () => {
                 )}
 
               {currentTeam && canExecuteTeamAction('MANAGE_TEAM', currentTeam.currentTeamRole) && (
-                <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+                <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
                   <Link to={`/t/${currentTeam.url}/settings`}>
                     <Trans>Team settings</Trans>
                   </Link>
                 </DropdownMenuItem>
               )}
 
-              <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+              <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
                 <Link to="/inbox">
                   <Trans>Personal Inbox</Trans>
                 </Link>
               </DropdownMenuItem>
 
-              <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+              <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
                 <Link to="/settings/profile">
                   <Trans>Account</Trans>
                 </Link>
               </DropdownMenuItem>
 
               <DropdownMenuItem
-                className="text-muted-foreground px-4 py-2"
+                className="px-4 py-2 text-muted-foreground"
                 onClick={() => setLanguageSwitcherOpen(true)}
               >
                 <Trans>Language</Trans>
               </DropdownMenuItem>
 
               {currentOrganisation && (
-                <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+                <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
                   <Link
                     to={{
                       pathname: `/o/${currentOrganisation.url}/support`,
@@ -335,7 +335,7 @@ export const OrgMenuSwitcher = () => {
               )}
 
               <DropdownMenuItem
-                className="text-muted-foreground hover:!text-muted-foreground px-4 py-2"
+                className="px-4 py-2 text-muted-foreground hover:!text-muted-foreground"
                 onSelect={async () => authClient.signOut()}
               >
                 <Trans>Sign Out</Trans>

apps/remix/app/components/general/organisations/organisation-invitations.tsx

@@ -90,7 +90,7 @@ export const OrganisationInvitations = ({ className }: { className?: string }) =
                             className="w-full max-w-none py-4"
                             avatarFallback={invitation.organisation.name.slice(0, 1)}
                             primaryText={
-                              <span className="text-foreground/80 font-semibold">
+                              <span className="font-semibold text-foreground/80">
                                 {invitation.organisation.name}
                               </span>
                             }

apps/remix/app/components/general/period-selector.tsx

@@ -47,7 +47,7 @@ export const PeriodSelector = () => {
 
   return (
     <Select defaultValue={period} onValueChange={onPeriodChange}>
-      <SelectTrigger className="text-muted-foreground max-w-[200px]">
+      <SelectTrigger className="max-w-[200px] text-muted-foreground">
         <SelectValue />
       </SelectTrigger>
 

apps/remix/app/components/general/settings-header.tsx

@@ -23,7 +23,7 @@ export const SettingsHeader = ({
         <div>
           <h3 className="text-lg font-medium">{title}</h3>
 
-          <p className="text-muted-foreground text-sm md:mt-2">{subtitle}</p>
+          <p className="text-sm text-muted-foreground md:mt-2">{subtitle}</p>
         </div>
 
         {children}

apps/remix/app/components/general/stack-avatar.tsx

@@ -47,7 +47,7 @@ export const StackAvatar = ({ first, zIndex, fallbackText = '', type }: StackAva
 
   return (
     <Avatar
-      className={` ${zIndexClass} ${firstClass} dark:border-border h-10 w-10 border-2 border-solid border-white`}
+      className={` ${zIndexClass} ${firstClass} h-10 w-10 border-2 border-solid border-white dark:border-border`}
     >
       <AvatarFallback className={classes}>{fallbackText}</AvatarFallback>
     </Avatar>

apps/remix/app/components/general/teams/team-email-dropdown.tsx

@@ -46,7 +46,7 @@ export const TeamEmailDropdown = ({ team }: TeamEmailDropdownProps) => {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
-        <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+        <MoreHorizontal className="h-5 w-5 text-muted-foreground" />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className="w-52" align="start" forceMount>

apps/remix/app/components/general/template/template-page-view-documents-table.tsx

@@ -133,8 +133,8 @@ export const TemplatePageViewDocumentsTable = ({
                 <InfoIcon className="mx-2 h-4 w-4" />
               </TooltipTrigger>
 
-              <TooltipContent className="text-foreground max-w-md space-y-2 !p-0">
+              <TooltipContent className="max-w-md space-y-2 !p-0 text-foreground">
-                <ul className="text-muted-foreground space-y-0.5 divide-y [&>li]:p-4">
+                <ul className="space-y-0.5 divide-y text-muted-foreground [&>li]:p-4">
                   <li>
                     <h2 className="mb-2 flex flex-row items-center font-semibold">
                       <Trans>Template</Trans>

apps/remix/app/components/general/template/template-page-view-information.tsx

@@ -54,7 +54,7 @@ export const TemplatePageViewInformation = ({
   }, [isMounted, template, userId]);
 
   return (
-    <section className="dark:bg-background text-foreground border-border bg-widget flex flex-col rounded-xl border">
+    <section className="flex flex-col rounded-xl border border-border bg-widget text-foreground dark:bg-background">
       <h1 className="px-4 py-3 font-medium">
         <Trans>Information</Trans>
       </h1>

apps/remix/app/components/general/template/template-page-view-recent-activity.tsx

@@ -33,9 +33,9 @@ export const TemplatePageViewRecentActivity = ({
   };
 
   return (
-    <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
+    <section className="flex flex-col rounded-xl border border-border bg-widget dark:bg-background">
       <div className="flex flex-row items-center justify-between border-b px-4 py-3">
-        <h1 className="text-foreground font-medium">
+        <h1 className="font-medium text-foreground">
           <Trans>Recent documents</Trans>
         </h1>
 
@@ -44,18 +44,18 @@ export const TemplatePageViewRecentActivity = ({
 
       {isLoading && (
         <div className="flex h-full items-center justify-center py-16">
-          <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+          <Loader className="h-6 w-6 animate-spin text-muted-foreground" />
         </div>
       )}
 
       {isLoadingError && (
         <div className="flex h-full flex-col items-center justify-center py-16">
-          <p className="text-foreground/80 text-sm">
+          <p className="text-sm text-foreground/80">
             <Trans>Unable to load documents</Trans>
           </p>
           <button
             onClick={async () => refetch()}
-            className="text-foreground/70 hover:text-muted-foreground mt-2 text-sm"
+            className="mt-2 text-sm text-foreground/70 hover:text-muted-foreground"
           >
             <Trans>Click here to retry</Trans>
           </button>
@@ -68,11 +68,11 @@ export const TemplatePageViewRecentActivity = ({
             {data.data.length > 0 && results.totalPages > 1 && (
               <li className="relative flex gap-x-4">
                 <div className="absolute -bottom-6 left-0 top-0 flex w-6 justify-center">
-                  <div className="bg-border w-px" />
+                  <div className="w-px bg-border" />
                 </div>
 
-                <div className="bg-widget relative flex h-6 w-6 flex-none items-center justify-center">
+                <div className="relative flex h-6 w-6 flex-none items-center justify-center bg-widget">
-                  <div className="bg-widget h-1.5 w-1.5 rounded-full ring-1 ring-gray-300 dark:ring-neutral-600" />
+                  <div className="h-1.5 w-1.5 rounded-full bg-widget ring-1 ring-gray-300 dark:ring-neutral-600" />
                 </div>
 
                 <button
@@ -82,7 +82,7 @@ export const TemplatePageViewRecentActivity = ({
                       behavior: 'smooth',
                     });
                   }}
-                  className="text-foreground/70 hover:text-muted-foreground flex items-center text-xs"
+                  className="flex items-center text-xs text-foreground/70 hover:text-muted-foreground"
                 >
                   <Trans>View more</Trans>
                 </button>
@@ -91,7 +91,7 @@ export const TemplatePageViewRecentActivity = ({
 
             {results.data.length === 0 && (
               <div className="flex items-center justify-center py-4">
-                <p className="text-muted-foreground/70 text-sm">
+                <p className="text-sm text-muted-foreground/70">
                   <Trans>No recent documents</Trans>
                 </p>
               </div>
@@ -105,16 +105,16 @@ export const TemplatePageViewRecentActivity = ({
                     'absolute left-0 top-0 flex w-6 justify-center',
                   )}
                 >
-                  <div className="bg-border w-px" />
+                  <div className="w-px bg-border" />
                 </div>
 
-                <div className="bg-widget text-foreground/40 relative flex h-6 w-6 flex-none items-center justify-center">
+                <div className="relative flex h-6 w-6 flex-none items-center justify-center bg-widget text-foreground/40">
-                  <div className="bg-widget h-1.5 w-1.5 rounded-full ring-1 ring-gray-300 dark:ring-neutral-600" />
+                  <div className="h-1.5 w-1.5 rounded-full bg-widget ring-1 ring-gray-300 dark:ring-neutral-600" />
                 </div>
 
                 <Link
                   to={`${documentRootPath}/${document.envelopeId}`}
-                  className="text-muted-foreground dark:text-muted-foreground/70 flex-auto truncate py-0.5 text-xs leading-5"
+                  className="flex-auto truncate py-0.5 text-xs leading-5 text-muted-foreground dark:text-muted-foreground/70"
                 >
                   {match(document.source)
                     .with(DocumentSource.DOCUMENT, DocumentSource.TEMPLATE, () => (
@@ -130,7 +130,7 @@ export const TemplatePageViewRecentActivity = ({
                     .exhaustive()}
                 </Link>
 
-                <time className="text-muted-foreground dark:text-muted-foreground/70 flex-none py-0.5 text-xs leading-5">
+                <time className="flex-none py-0.5 text-xs leading-5 text-muted-foreground dark:text-muted-foreground/70">
                   {DateTime.fromJSDate(document.createdAt).toRelative({ style: 'short' })}
                 </time>
               </li>

apps/remix/app/components/general/template/template-page-view-recipients.tsx

@@ -24,9 +24,9 @@ export const TemplatePageViewRecipients = ({
   const { _ } = useLingui();
 
   return (
-    <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
+    <section className="flex flex-col rounded-xl border border-border bg-widget dark:bg-background">
       <div className="flex flex-row items-center justify-between px-4 py-3">
-        <h1 className="text-foreground font-medium">
+        <h1 className="font-medium text-foreground">
           <Trans>Recipients</Trans>
         </h1>
 
@@ -43,7 +43,7 @@ export const TemplatePageViewRecipients = ({
         </Link>
       </div>
 
-      <ul className="text-muted-foreground divide-y border-t">
+      <ul className="divide-y border-t text-muted-foreground">
         {recipients.length === 0 && (
           <li className="flex flex-col items-center justify-center py-6 text-sm">
             <Trans>No recipients</Trans>
@@ -60,13 +60,13 @@ export const TemplatePageViewRecipients = ({
               }
               primaryText={
                 isTemplateRecipientEmailPlaceholder(recipient.email) ? (
-                  <p className="text-muted-foreground text-sm">{recipient.name}</p>
+                  <p className="text-sm text-muted-foreground">{recipient.name}</p>
                 ) : (
-                  <p className="text-muted-foreground text-sm">{recipient.email}</p>
+                  <p className="text-sm text-muted-foreground">{recipient.email}</p>
                 )
               }
               secondaryText={
-                <p className="text-muted-foreground/70 text-xs">
+                <p className="text-xs text-muted-foreground/70">
                   {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
                 </p>
               }

apps/remix/app/components/general/user-profile-skeleton.tsx

@@ -21,17 +21,17 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk
   return (
     <div
       className={cn(
-        'dark:bg-background flex flex-col items-center rounded-xl bg-neutral-100 p-4',
+        'flex flex-col items-center rounded-xl bg-neutral-100 p-4 dark:bg-background',
         className,
       )}
     >
-      <div className="border-border bg-background text-muted-foreground inline-block max-w-full truncate rounded-md border px-2.5 py-1.5 text-sm lowercase">
+      <div className="inline-block max-w-full truncate rounded-md border border-border bg-background px-2.5 py-1.5 text-sm lowercase text-muted-foreground">
         {baseUrl.host}/u/{user.url}
       </div>
 
       <div className="mt-4">
-        <div className="bg-primary/10 rounded-full p-1.5">
+        <div className="rounded-full bg-primary/10 p-1.5">
-          <div className="bg-background flex h-20 w-20 items-center justify-center rounded-full border-2">
+          <div className="flex h-20 w-20 items-center justify-center rounded-full border-2 bg-background">
             <User2 className="h-12 w-12 text-[hsl(228,10%,90%)]" />
           </div>
         </div>
@@ -41,16 +41,16 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk
         <div className="flex items-center justify-center gap-x-2">
           <h2 className="max-w-[12rem] truncate text-2xl font-semibold">{user.name}</h2>
 
-          <VerifiedIcon className="text-primary h-8 w-8" />
+          <VerifiedIcon className="h-8 w-8 text-primary" />
         </div>
 
-        <div className="dark:bg-foreground/30 mx-auto mt-4 h-2 w-52 rounded-full bg-neutral-300" />
+        <div className="mx-auto mt-4 h-2 w-52 rounded-full bg-neutral-300 dark:bg-foreground/30" />
-        <div className="dark:bg-foreground/20 mx-auto mt-2 h-2 w-36 rounded-full bg-neutral-200" />
+        <div className="mx-auto mt-2 h-2 w-36 rounded-full bg-neutral-200 dark:bg-foreground/20" />
       </div>
 
       <div className="mt-8 w-full">
-        <div className="dark:divide-foreground/30 dark:border-foreground/30 divide-y-2 divide-neutral-200 overflow-hidden rounded-lg border-2 border-neutral-200">
+        <div className="divide-y-2 divide-neutral-200 overflow-hidden rounded-lg border-2 border-neutral-200 dark:divide-foreground/30 dark:border-foreground/30">
-          <div className="text-muted-foreground dark:bg-foreground/20 bg-neutral-50 p-4 font-medium">
+          <div className="bg-neutral-50 p-4 font-medium text-muted-foreground dark:bg-foreground/20">
             <Trans>Documents</Trans>
           </div>
 
@@ -59,14 +59,14 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk
             .map((_, index) => (
               <div
                 key={index}
-                className="bg-background flex items-center justify-between gap-x-6 p-4"
+                className="flex items-center justify-between gap-x-6 bg-background p-4"
               >
                 <div className="flex items-center gap-x-2">
-                  <File className="text-muted-foreground/80 h-8 w-8" strokeWidth={1.5} />
+                  <File className="h-8 w-8 text-muted-foreground/80" strokeWidth={1.5} />
 
                   <div className="space-y-2">
-                    <div className="dark:bg-foreground/30 h-1.5 w-24 rounded-full bg-neutral-300 md:w-36" />
+                    <div className="h-1.5 w-24 rounded-full bg-neutral-300 md:w-36 dark:bg-foreground/30" />
-                    <div className="dark:bg-foreground/20 h-1.5 w-16 rounded-full bg-neutral-200 md:w-24" />
+                    <div className="h-1.5 w-16 rounded-full bg-neutral-200 md:w-24 dark:bg-foreground/20" />
                   </div>
                 </div>
 

apps/remix/app/components/general/user-profile-timur.tsx

@@ -18,11 +18,11 @@ export const UserProfileTimur = ({ className, rows = 2 }: UserProfileTimurProps)
   return (
     <div
       className={cn(
-        'dark:bg-background flex flex-col items-center rounded-xl bg-neutral-100 p-4',
+        'flex flex-col items-center rounded-xl bg-neutral-100 p-4 dark:bg-background',
         className,
       )}
     >
-      <div className="border-border bg-background text-muted-foreground inline-block max-w-full truncate rounded-md border px-2.5 py-1.5 text-sm">
+      <div className="inline-block max-w-full truncate rounded-md border border-border bg-background px-2.5 py-1.5 text-sm text-muted-foreground">
         {baseUrl.host}/u/timur
       </div>
 
@@ -38,21 +38,21 @@ export const UserProfileTimur = ({ className, rows = 2 }: UserProfileTimurProps)
         <div className="flex items-center justify-center gap-x-2">
           <h2 className="text-2xl font-semibold">Timur Ercan</h2>
 
-          <VerifiedIcon className="text-primary h-8 w-8" />
+          <VerifiedIcon className="h-8 w-8 text-primary" />
         </div>
 
-        <p className="text-muted-foreground mt-4 max-w-[40ch] text-center text-sm">
+        <p className="mt-4 max-w-[40ch] text-center text-sm text-muted-foreground">
           <Trans>Hey I’m Timur</Trans>
         </p>
 
-        <p className="text-muted-foreground mt-1 max-w-[40ch] text-center text-sm">
+        <p className="mt-1 max-w-[40ch] text-center text-sm text-muted-foreground">
           <Trans>Pick any of the following agreements below and start signing to get started</Trans>
         </p>
       </div>
 
       <div className="mt-8 w-full">
-        <div className="dark:divide-foreground/30 dark:border-foreground/30 divide-y-2 divide-neutral-200 overflow-hidden rounded-lg border-2 border-neutral-200">
+        <div className="divide-y-2 divide-neutral-200 overflow-hidden rounded-lg border-2 border-neutral-200 dark:divide-foreground/30 dark:border-foreground/30">
-          <div className="text-muted-foreground dark:bg-foreground/20 bg-neutral-50 p-4 font-medium">
+          <div className="bg-neutral-50 p-4 font-medium text-muted-foreground dark:bg-foreground/20">
             <Trans>Documents</Trans>
           </div>
 
@@ -61,14 +61,14 @@ export const UserProfileTimur = ({ className, rows = 2 }: UserProfileTimurProps)
             .map((_, index) => (
               <div
                 key={index}
-                className="bg-background flex items-center justify-between gap-x-6 p-4"
+                className="flex items-center justify-between gap-x-6 bg-background p-4"
               >
                 <div className="flex items-center gap-x-2">
-                  <File className="text-muted-foreground/80 h-8 w-8" strokeWidth={1.5} />
+                  <File className="h-8 w-8 text-muted-foreground/80" strokeWidth={1.5} />
 
                   <div className="space-y-2">
-                    <div className="dark:bg-foreground/30 h-1.5 w-24 rounded-full bg-neutral-300 md:w-36" />
+                    <div className="h-1.5 w-24 rounded-full bg-neutral-300 md:w-36 dark:bg-foreground/30" />
-                    <div className="dark:bg-foreground/20 h-1.5 w-16 rounded-full bg-neutral-200 md:w-24" />
+                    <div className="h-1.5 w-16 rounded-full bg-neutral-200 md:w-24 dark:bg-foreground/20" />
                   </div>
                 </div>
 

apps/remix/app/components/general/webhook-logs-sheet.tsx

@@ -71,14 +71,14 @@ export const WebhookLogsSheet = createCallable<WebhookLogsSheetProps, string | n
             <h2 className="text-lg font-semibold">
               <Trans>Webhook Details</Trans>
             </h2>
-            <p className="text-muted-foreground font-mono text-xs">{webhookCall.id}</p>
+            <p className="font-mono text-xs text-muted-foreground">{webhookCall.id}</p>
           </SheetTitle>
 
           {/* Content */}
           <div className="flex-1 overflow-y-auto">
             <div className="mt-6">
               <div className="flex items-end justify-between">
-                <h4 className="text-muted-foreground mb-3 text-xs font-semibold uppercase tracking-wider">
+                <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                   <Trans>Details</Trans>
                 </h4>
 
@@ -98,15 +98,15 @@ export const WebhookLogsSheet = createCallable<WebhookLogsSheetProps, string | n
                   <Trans>Resend</Trans>
                 </Button>
               </div>
-              <div className="border-border overflow-hidden rounded-lg border">
+              <div className="overflow-hidden rounded-lg border border-border">
                 <table className="w-full text-left text-sm">
-                  <tbody className="divide-border bg-muted/30 divide-y">
+                  <tbody className="divide-y divide-border bg-muted/30">
                     {generalWebhookDetails.map(({ header, value }, index) => (
                       <tr key={index}>
-                        <td className="text-muted-foreground border-border w-1/3 border-r px-4 py-2 font-mono text-xs">
+                        <td className="w-1/3 border-r border-border px-4 py-2 font-mono text-xs text-muted-foreground">
                           {header}
                         </td>
-                        <td className="text-foreground break-all px-4 py-2 font-mono text-xs">
+                        <td className="break-all px-4 py-2 font-mono text-xs text-foreground">
                           {value}
                         </td>
                       </tr>
@@ -118,13 +118,13 @@ export const WebhookLogsSheet = createCallable<WebhookLogsSheetProps, string | n
 
             {/* Payload Tabs */}
             <div className="py-6">
-              <div className="border-border mb-4 flex items-center gap-4 border-b">
+              <div className="mb-4 flex items-center gap-4 border-b border-border">
                 <button
                   onClick={() => setActiveTab('request')}
                   className={cn(
                     'relative pb-2 text-sm font-medium transition-colors',
                     activeTab === 'request'
-                      ? 'text-foreground after:bg-primary after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5'
+                      ? 'text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary'
                       : 'text-muted-foreground hover:text-foreground',
                   )}
                 >
@@ -136,7 +136,7 @@ export const WebhookLogsSheet = createCallable<WebhookLogsSheetProps, string | n
                   className={cn(
                     'relative pb-2 text-sm font-medium transition-colors',
                     activeTab === 'response'
-                      ? 'text-foreground after:bg-primary after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5'
+                      ? 'text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary'
                       : 'text-muted-foreground hover:text-foreground',
                   )}
                 >
@@ -155,7 +155,7 @@ export const WebhookLogsSheet = createCallable<WebhookLogsSheetProps, string | n
                     onCopySuccess={() => toast({ title: t`Copied to clipboard` })}
                   />
                 </div>
-                <pre className="bg-muted/50 border-border text-foreground overflow-x-auto rounded-lg border p-4 font-mono text-xs leading-relaxed">
+                <pre className="overflow-x-auto rounded-lg border border-border bg-muted/50 p-4 font-mono text-xs leading-relaxed text-foreground">
                   {JSON.stringify(
                     activeTab === 'request' ? webhookCall.requestBody : webhookCall.responseBody,
                     null,
@@ -166,19 +166,19 @@ export const WebhookLogsSheet = createCallable<WebhookLogsSheetProps, string | n
 
               {activeTab === 'response' && (
                 <div className="mt-6">
-                  <h4 className="text-muted-foreground mb-3 text-xs font-semibold uppercase tracking-wider">
+                  <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                     <Trans>Response Headers</Trans>
                   </h4>
-                  <div className="border-border overflow-hidden rounded-lg border">
+                  <div className="overflow-hidden rounded-lg border border-border">
                     <table className="w-full text-left text-sm">
-                      <tbody className="divide-border bg-muted/30 divide-y">
+                      <tbody className="divide-y divide-border bg-muted/30">
                         {Object.entries(webhookCall.responseHeaders as Record<string, string>).map(
                           ([key, value]) => (
                             <tr key={key}>
-                              <td className="text-muted-foreground border-border w-1/3 border-r px-4 py-2 font-mono text-xs">
+                              <td className="w-1/3 border-r border-border px-4 py-2 font-mono text-xs text-muted-foreground">
                                 {key}
                               </td>
-                              <td className="text-foreground break-all px-4 py-2 font-mono text-xs">
+                              <td className="break-all px-4 py-2 font-mono text-xs text-foreground">
                                 {value as string}
                               </td>
                             </tr>

apps/remix/app/components/tables/documents-table-action-dropdown.tsx

@@ -76,7 +76,7 @@ export const DocumentsTableActionDropdown = ({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger data-testid="document-table-action-btn">
-        <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+        <MoreHorizontal className="h-5 w-5 text-muted-foreground" />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className="w-52" align="start" forceMount>

apps/remix/app/components/tables/documents-table-empty-state.tsx

@@ -38,7 +38,7 @@ export const DocumentsTableEmptyState = ({ status }: DocumentsTableEmptyStatePro
 
   return (
     <div
-      className="text-muted-foreground/60 flex h-60 flex-col items-center justify-center gap-y-4"
+      className="flex h-60 flex-col items-center justify-center gap-y-4 text-muted-foreground/60"
       data-testid="empty-document-state"
     >
       <Icon className="h-12 w-12" strokeWidth={1.5} />

apps/remix/app/components/tables/documents-table-sender-filter.tsx

@@ -49,7 +49,7 @@ export const DocumentsTableSenderFilter = ({ teamId }: DocumentsTableSenderFilte
   return (
     <MultiSelectCombobox
       emptySelectionPlaceholder={
-        <p className="text-muted-foreground font-normal">
+        <p className="font-normal text-muted-foreground">
           <Trans>
             <span className="text-muted-foreground/70">Sender:</span> All
           </Trans>

apps/remix/app/components/tables/inbox-table.tsx

@@ -130,7 +130,7 @@ export const InboxTable = () => {
           enable: isLoadingError || false,
         }}
         emptyState={
-          <div className="text-muted-foreground/60 flex h-60 flex-col items-center justify-center gap-y-4">
+          <div className="flex h-60 flex-col items-center justify-center gap-y-4 text-muted-foreground/60">
             <p>
               <Trans>Documents that require your attention will appear here</Trans>
             </p>
@@ -170,8 +170,8 @@ export const InboxTable = () => {
       </DataTable>
 
       {isPending && (
-        <div className="bg-background/50 absolute inset-0 flex items-center justify-center">
+        <div className="absolute inset-0 flex items-center justify-center bg-background/50">
-          <Loader className="text-muted-foreground h-8 w-8 animate-spin" />
+          <Loader className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
       )}
     </div>

apps/remix/app/components/tables/organisation-billing-invoices-table.tsx

@@ -59,7 +59,7 @@ export const OrganisationBillingInvoicesTable = ({
           <div className="flex max-w-xs items-center gap-2">
             <File className="h-6 w-6" />
 
-            <div className="text-foreground/80 text-sm font-semibold">
+            <div className="text-sm font-semibold text-foreground/80">
               {DateTime.fromSeconds(row.original.created).toFormat('MMMM yyyy')}
             </div>
           </div>

apps/remix/app/components/tables/organisation-insights-table.tsx

@@ -276,12 +276,12 @@ const SummaryCard = ({
   value: number;
   subtitle?: string;
 }) => (
-  <div className="bg-card flex items-start gap-x-2 rounded-lg border px-4 py-3">
+  <div className="flex items-start gap-x-2 rounded-lg border bg-card px-4 py-3">
-    <Icon className="text-muted-foreground h-4 w-4 items-start" />
+    <Icon className="h-4 w-4 items-start text-muted-foreground" />
     <div className="-mt-0.5 space-y-2">
-      <p className="text-muted-foreground text-sm font-medium">{title}</p>
+      <p className="text-sm font-medium text-muted-foreground">{title}</p>
       <p className="text-2xl font-bold">{value}</p>
-      {subtitle && <p className="text-muted-foreground text-xs">{subtitle}</p>}
+      {subtitle && <p className="text-xs text-muted-foreground">{subtitle}</p>}
     </div>
   </div>
 );