Fix boolean field in table view (#5728)

Boolean field was not working in display (unfocused) mode.

Before fix
<img width="269" alt="Capture d’écran 2024-06-04 à 11 50 55"
src="https://github.com/twentyhq/twenty/assets/51697796/9140f71c-41e4-44b4-9514-933edab33dd6">

https://github.com/twentyhq/twenty/assets/51697796/831c34a7-b91c-4df9-81d8-ced01cc7b9b6

After fix
<img width="284" alt="Capture d’écran 2024-06-04 à 11 51 01"
src="https://github.com/twentyhq/twenty/assets/51697796/7e4a089d-0c55-4624-a5d3-44c00681c6ca">

https://github.com/twentyhq/twenty/assets/51697796/b5103f39-64c1-4ace-ab32-353aba364471

packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx

@@ -0,0 +1,36 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { IconCheck, IconX } from 'twenty-ui';
+
+import { isDefined } from '~/utils/isDefined';
+
+const StyledBooleanFieldValue = styled.div`
+  margin-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+type BooleanDisplayProps = {
+  value: boolean | null;
+};
+
+export const BooleanDisplay = ({ value }: BooleanDisplayProps) => {
+  const theme = useTheme();
+
+  return (
+    <>
+      {isDefined(value) ? (
+        <>
+          {value ? (
+            <IconCheck size={theme.icon.size.sm} />
+          ) : (
+            <IconX size={theme.icon.size.sm} />
+          )}
+          <StyledBooleanFieldValue>
+            {value ? 'True' : 'False'}
+          </StyledBooleanFieldValue>
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};