From f7cdd14c756d21590c9541b8db4d41ceaee0ea34 Mon Sep 17 00:00:00 2001
From: Marie <51697796+ijreilly@users.noreply.github.com>
Date: Mon, 3 Jun 2024 17:17:25 +0200
Subject: [PATCH] Use same overlay background for field inputs (#5719)

Fixes #5593
---
 .../modules/ui/field/input/components/FieldInputOverlay.tsx   | 2 +-
 .../ui/field/input/components/FieldTextAreaOverlay.tsx        | 4 ++--
 .../src/modules/ui/field/input/components/TextAreaInput.tsx   | 2 --
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/field/input/components/FieldInputOverlay.tsx b/packages/twenty-front/src/modules/ui/field/input/components/FieldInputOverlay.tsx
index 40c4b3e687..a403e015ff 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/FieldInputOverlay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/FieldInputOverlay.tsx
@@ -4,13 +4,13 @@ import { OVERLAY_BACKGROUND } from 'twenty-ui';
 const StyledFieldInputOverlay = styled.div`
   align-items: center;
   border: ${({ theme }) => `1px solid ${theme.border.color.light}`};
-  ${OVERLAY_BACKGROUND}
   border-radius: ${({ theme }) => theme.border.radius.sm};
   display: flex;
   height: 32px;
   justify-content: space-between;
   margin: -1px;
   width: 100%;
+  ${OVERLAY_BACKGROUND}
 `;
 
 export const FieldInputOverlay = StyledFieldInputOverlay;
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx b/packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx
index 3f88d01d8b..6ebabfc23d 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx
@@ -1,14 +1,14 @@
 import styled from '@emotion/styled';
+import { OVERLAY_BACKGROUND } from 'twenty-ui';
 
 const StyledFieldTextAreaOverlay = styled.div`
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  background: ${({ theme }) => theme.background.transparent.secondary};
-  backdrop-filter: ${({ theme }) => theme.blur.medium};
   align-items: center;
   display: flex;
   height: 32px;
   margin: -1px;
   width: 100%;
+  ${OVERLAY_BACKGROUND}
 `;
 
 export const FieldTextAreaOverlay = StyledFieldTextAreaOverlay;
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
index 9cbddeb3d3..44379c3e2f 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
@@ -34,12 +34,10 @@ const StyledTextArea = styled(TextareaAutosize)`
 `;
 
 const StyledTextAreaContainer = styled.div`
-  box-shadow: ${({ theme }) => theme.boxShadow.strong};
   border: ${({ theme }) => `1px solid ${theme.border.color.light}`};
   position: relative;
   width: 100%;
   padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(1)};
-  background-color: ${({ theme }) => theme.background.primary};
   border-radius: ${({ theme }) => theme.border.radius.sm};
 `;