Fix dark mode text color on permissions tab empty stat (#19336) (#19340)

Before: black text in dark mode
<img width="1224" height="860" alt="image"
src="https://github.com/user-attachments/assets/a419ef77-9358-4588-ad19-a15b57448682"
/>


After updated styling: the correct grey text in dark mode
<img width="638" height="249" alt="Screenshot 2026-04-05 at 2 47 24 PM"
src="https://github.com/user-attachments/assets/bf736464-d33c-40f1-8244-2cf5d93b7e9c"
/>

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminQueueJobsTable.tsx

@@ -1,3 +1,4 @@
+import { SettingsEmptyPlaceholder } from '@/settings/components/SettingsEmptyPlaceholder';
 import { SettingsAdminDeleteJobsConfirmationModal } from '@/settings/admin-panel/health-status/components/SettingsAdminDeleteJobsConfirmationModal';
 import { SettingsAdminJobDetailsExpandable } from '@/settings/admin-panel/health-status/components/SettingsAdminJobDetailsExpandable';
 import { SettingsAdminJobStateBadge } from '@/settings/admin-panel/health-status/components/SettingsAdminJobStateBadge';
@@ -49,12 +50,6 @@ const StyledControlsContainer = styled.div`
   justify-content: space-between;
 `;
 
-const StyledEmptyState = styled.div`
-  color: ${themeCssVariables.font.color.tertiary};
-  padding: ${themeCssVariables.spacing[8]};
-  text-align: center;
-`;
-
 const StyledPaginationContainer = styled.div`
   align-items: center;
   display: flex;
@@ -261,9 +256,9 @@ export const SettingsAdminQueueJobsTable = ({
       </StyledControlsContainer>
 
       {loading && jobs.length === 0 ? (
-        <StyledEmptyState>{t`Loading jobs...`}</StyledEmptyState>
+        <SettingsEmptyPlaceholder>{t`Loading jobs...`}</SettingsEmptyPlaceholder>
       ) : jobs.length === 0 ? (
-        <StyledEmptyState>{t`No jobs found`}</StyledEmptyState>
+        <SettingsEmptyPlaceholder>{t`No jobs found`}</SettingsEmptyPlaceholder>
       ) : (
         <>
           <Table>

packages/twenty-front/src/modules/settings/components/SettingsEmptyPlaceholder.tsx

@@ -0,0 +1,35 @@
+import { styled } from '@linaria/react';
+import { type ReactNode } from 'react';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+
+type ThemeSpacingKey = keyof typeof themeCssVariables.spacing;
+
+type SettingsEmptyPlaceholderProps = {
+  children: ReactNode;
+  padding?: ThemeSpacingKey;
+  textAlign?: 'left' | 'center' | 'right';
+};
+
+const StyledPlaceholder = styled.div<{
+  placeholderPadding: string;
+  placeholderTextAlign: string;
+}>`
+  color: ${themeCssVariables.font.color.tertiary};
+  padding: ${({ placeholderPadding }) => placeholderPadding};
+  text-align: ${({ placeholderTextAlign }) => placeholderTextAlign};
+`;
+
+export const SettingsEmptyPlaceholder = ({
+  children,
+  padding = '8',
+  textAlign = 'center',
+}: SettingsEmptyPlaceholderProps) => {
+  return (
+    <StyledPlaceholder
+      placeholderPadding={themeCssVariables.spacing[padding]}
+      placeholderTextAlign={textAlign}
+    >
+      {children}
+    </StyledPlaceholder>
+  );
+};

packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentEntityPickerDropdown.tsx

@@ -1,3 +1,4 @@
+import { SettingsEmptyPlaceholder } from '@/settings/components/SettingsEmptyPlaceholder';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
@@ -35,12 +36,6 @@ const StyledItemName = styled.div`
   font-weight: ${themeCssVariables.font.weight.medium};
 `;
 
-const StyledEmptyState = styled.div`
-  color: ${themeCssVariables.font.color.tertiary};
-  padding: ${themeCssVariables.spacing[2]};
-  text-align: center;
-`;
-
 type EntityData = Agent | ApiKeyForRole;
 
 type SettingsRoleAssignmentEntityPickerDropdownProps = {
@@ -138,7 +133,9 @@ export const SettingsRoleAssignmentEntityPickerDropdown = ({
             </StyledDropdownItem>
           ))
         ) : (
-          <StyledEmptyState>{getEmptyStateMessage()}</StyledEmptyState>
+          <SettingsEmptyPlaceholder padding="2">
+            {getEmptyStateMessage()}
+          </SettingsEmptyPlaceholder>
         )}
       </DropdownMenuItemsContainer>
     </DropdownContent>