twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-09-11 23:37:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

Use same overlay background for field inputs (#5719)

Browse Source 
Fixes #5593
This commit is contained in:
Marie 2024-06-03 17:17:25 +02:00 committed by GitHub
parent 09bfb617b2
commit f7cdd14c75
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 3 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/ui/field/input/components/FieldInputOverlay.tsx
View File

@ -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;

4
packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx
View File

@ -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;

2
packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
View File

@ -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};
`;