Use same overlay background for field inputs (twentyhq#5719)

Fixes twentyhq#5593
piyushyadav1617 · Jun 3, 2024 · 50f112c · 50f112c
1 parent e050476
commit 50f112c
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 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
@@ -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
@@ -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
@@ -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};
 `;