houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Re-enable disabled lint rules and right-size CI runners (#18461)

Browse Source 
## Summary

- Re-enable one lint rule that was temporarily disabled during the
ESLint-to-Oxlint migration:
- **`twenty/sort-css-properties-alphabetically`** in twenty-front — 578
violations auto-fixed across 390 files
- Document why **`typescript/consistent-type-imports`** cannot be
auto-fixed in twenty-server: NestJS relies on `emitDecoratorMetadata`
for DI, so converting constructor parameter imports to `import type`
erases them at compile time and breaks dependency injection at runtime
- Right-size CI runners, reducing 8-core usage from 18 jobs to 3:

| Change | Jobs | Rationale |
|--------|------|-----------|
| **Keep 8-core** | `ci-merge-queue/e2e-test`,
`ci-front/front-sb-build`, `ci-front/front-build` | Heavy builds needing
max CPU + memory (10GB NODE_OPTIONS, full Storybook webpack bundling) |
| **8-core → 4-core** | `ci-server` (build, lint-typecheck, validation,
test, integration-test), `ci-front/front-sb-test`,
`ci-zapier/server-setup`, `ci-sdk/sdk-e2e-test` | Already sharded into
10-12 parallel instances, I/O-bound (DB/Redis), or moderate single
builds |
| **8-core → 2-core** | `ci-emails/emails-test` | Trivially lightweight
(build + curl health check) |
| **Removed** | `ci-front/front-chromatic-deployment` | Dead code —
permanently disabled with `if: false` |

- Fix merge queue CI issues:
- **Concurrency**: Use `merge_group.base_ref` instead of unique merge
group ref so new queue entries cancel previous runs
- **Required status checks**: Add `merge_group` trigger to all 6
required CI workflows (front, server, shared, website, docker-compose,
sdk) with `changed-files-check` auto-skipped for merge_group events —
status check jobs auto-pass without re-running full CI
- **Build caching**: Add Nx build cache restore/save to E2E test job
with fallback to `main` branch cache for faster frontend and server
builds

## Test plan

- [ ] CI passes on this PR (verifies lint rule auto-fix works)
- [ ] Verify 4-core runner jobs complete within their 30-minute timeouts
- [ ] Verify merge queue status checks auto-pass (ci-front-status-check,
ci-server-status-check, etc.)
- [ ] Verify merge queue E2E concurrency cancels previous runs when a
new PR enters the queue
This commit is contained in:
Charles Bochet
2026-03-06 14:33:02 +01:00
committed by GitHub
parent 9f9a6a45dd
commit ef499b6d47
404 changed files with 1755 additions and 1738 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx
+8 -8
View File
@@ -57,10 +57,10 @@ const StyledContainer = styled.div`
box-shadow: ${themeCssVariables.boxShadow.strong};
box-sizing: border-box;
cursor: pointer;
margin-top: ${themeCssVariables.spacing[2]};
padding: ${themeCssVariables.spacing[2]};
position: relative;
width: 296px;
margin-top: ${themeCssVariables.spacing[2]};
@media (max-width: ${MOBILE_VIEWPORT}px) {
border-radius: 0;
@@ -72,10 +72,10 @@ const StyledProgressBarContainer = styled.div`
bottom: 0;
height: auto;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
pointer-events: none;
`;
const StyledHeader = styled.div`
@@ -106,22 +106,22 @@ const StyledActions = styled.div`
const StyledDescription = styled.div`
color: ${themeCssVariables.font.color.tertiary};
font-size: ${themeCssVariables.font.size.sm};
padding-left: ${themeCssVariables.spacing[6]};
overflow: hidden;
padding-left: ${themeCssVariables.spacing[6]};
text-overflow: ellipsis;
width: 200px;
`;
const StyledLinkContainer = styled.div`
> a {
display: block;
color: ${themeCssVariables.font.color.tertiary};
display: block;
font-size: ${themeCssVariables.font.size.sm};
padding-left: ${themeCssVariables.spacing[6]};
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 200px;
overflow: hidden;
padding-left: ${themeCssVariables.spacing[6]};
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
color: ${themeCssVariables.font.color.secondary};
}
packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx
+2 -2
View File
@@ -12,9 +12,9 @@ type BooleanDisplayProps = {
};
const StyledContainer = styled.div`
height: 20px;
display: flex;
align-items: center;
display: flex;
height: 20px;
`;
export const BooleanDisplay = ({ value }: BooleanDisplayProps) => {
packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx
+2 -2
View File
@@ -8,9 +8,9 @@ type TextDisplayProps = {
};
const StyledContainer = styled.div<{ fixHeight: boolean }>`
height: ${({ fixHeight }) => (fixHeight ? '20px' : 'auto')};
display: flex;
align-items: center;
display: flex;
height: ${({ fixHeight }) => (fixHeight ? '20px' : 'auto')};
`;
export const TextDisplay = ({ text, displayedMaxRows }: TextDisplayProps) => {
packages/twenty-front/src/modules/ui/field/display/components/UploadFileChip.tsx
+1 -1
View File
@@ -11,8 +11,8 @@ const StyledContainer = styled.div`
display: flex;
gap: ${themeCssVariables.spacing[1]};
height: ${themeCssVariables.spacing[5]};
padding: 0 ${themeCssVariables.spacing[1]};
margin-right: ${themeCssVariables.spacing[1]};
padding: 0 ${themeCssVariables.spacing[1]};
`;
const StyledIconBox = styled.div`
packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
+1 -1
View File
@@ -45,8 +45,8 @@ const StyledAddressContainer = styled.div`
const StyledHalfRowContainer = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
@media (max-width: ${MOBILE_VIEWPORT}px) {
display: block;
packages/twenty-front/src/modules/ui/field/input/components/BooleanInput.tsx
+6 -6
View File
@@ -6,16 +6,16 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledEditableBooleanFieldContainer = styled.div<{ readonly?: boolean }>`
align-items: center;
cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
display: flex;
height: 100%;
width: 100%;
color: ${({ readonly }) =>
readonly
? themeCssVariables.font.color.tertiary
: themeCssVariables.font.color.primary};
cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
display: flex;
height: 100%;
width: 100%;
`;
type BooleanInputProps = {
packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
+2 -2
View File
@@ -12,13 +12,13 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
export const StyledIMaskInput = styled.div`
> input {
margin: 0;
background-color: transparent;
border: none;
color: ${themeCssVariables.font.color.primary};
font-family: ${themeCssVariables.font.family};
font-size: inherit;
font-weight: inherit;
margin: 0;
outline: none;
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[1.5]};
@@ -45,9 +45,9 @@ const StyledIcon = styled.div`
display: flex;
& > svg {
padding-left: ${themeCssVariables.spacing[1]};
color: ${themeCssVariables.font.color.tertiary};
height: ${themeCssVariables.icon.size.md}px;
padding-left: ${themeCssVariables.spacing[1]};
width: ${themeCssVariables.icon.size.md}px;
}
`;
packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
+9 -9
View File
@@ -27,14 +27,14 @@ export type TextAreaInputProps = {
const StyledTextAreaContainer = styled.div`
> textarea {
align-items: center;
background-color: transparent;
border: none;
color: ${themeCssVariables.font.color.primary};
display: flex;
font-family: ${themeCssVariables.font.family};
font-size: inherit;
font-weight: inherit;
outline: none;
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]};
&::placeholder,
&::-webkit-input-placeholder {
@@ -43,23 +43,23 @@ const StyledTextAreaContainer = styled.div`
font-weight: ${themeCssVariables.font.weight.medium};
}
align-items: center;
display: flex;
justify-content: center;
resize: none;
max-height: 400px;
width: calc(100% - ${themeCssVariables.spacing[7]});
line-height: 18px;
max-height: 400px;
outline: none;
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]};
resize: none;
width: calc(100% - ${themeCssVariables.spacing[7]});
}
`;
const StyledLightIconButtonContainer = styled.div`
background: transparent;
position: absolute;
right: 0;
top: 16px;
transform: translateY(-50%);
right: 0;
`;
export const TextAreaInput = ({
packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx
+1 -1
View File
@@ -6,13 +6,13 @@ import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-typ
import { themeCssVariables } from 'twenty-ui/theme-constants';
export const StyledTextInput = styled.input`
margin: 0;
background-color: transparent;
border: none;
color: ${themeCssVariables.font.color.primary};
font-family: ${themeCssVariables.font.family};
font-size: inherit;
font-weight: inherit;
margin: 0;
outline: none;
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]};
packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
+7 -7
View File
@@ -105,20 +105,20 @@ const StyledLightIconButton = ({
);
const StyledLoadingMore = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 40px;
display: flex;
font-size: 14px;
height: 40px;
justify-content: center;
`;
const StyledMatrixItem = styled.div`
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
display: flex;
height: 32px;
justify-content: center;
width: 32px;
`;
const convertIconKeyToLabel = (iconKey: string) =>
packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx
+3 -3
View File
@@ -54,10 +54,10 @@ const StyledContent = styled.div`
display: flex;
flex: 1;
flex-direction: column;
justify-content: start;
margin-left: ${themeCssVariables.spacing[4]};
gap: ${themeCssVariables.spacing[3]};
justify-content: start;
margin-left: ${themeCssVariables.spacing[4]};
`;
const StyledButtonContainer = styled.div`
packages/twenty-front/src/modules/ui/input/components/InputErrorHelper.tsx
+1 -1
View File
@@ -6,8 +6,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledInputErrorHelper = styled.div`
color: ${themeCssVariables.color.red};
font-size: ${themeCssVariables.font.size.xs};
position: absolute;
margin-top: 1px;
position: absolute;
`;
export const InputErrorHelper = ({
packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx
+16 -16
View File
@@ -16,32 +16,20 @@ export const StyledControlContainer = styled.div<{
textAccent: SelectControlTextAccent;
hasRightElement?: boolean;
}>`
display: grid;
grid-template-columns: ${({ hasIcon }) =>
hasIcon ? 'auto 1fr auto' : '1fr auto'};
align-items: center;
gap: ${themeCssVariables.spacing[1]};
box-sizing: border-box;
height: ${({ selectSizeVariant }) =>
selectSizeVariant === 'small'
? themeCssVariables.spacing[6]
: themeCssVariables.spacing[8]};
max-width: 100%;
padding: 0 ${themeCssVariables.spacing[2]};
background-color: ${themeCssVariables.background.transparent.lighter};
border: 1px solid ${themeCssVariables.border.color.medium};
border-top-left-radius: ${themeCssVariables.border.radius.sm};
border-bottom-left-radius: ${themeCssVariables.border.radius.sm};
border-bottom-right-radius: ${({ hasRightElement }) =>
hasRightElement ? '0' : themeCssVariables.border.radius.sm};
border-right: ${({ hasRightElement }) =>
hasRightElement
? 'none'
: `1px solid ${themeCssVariables.border.color.medium}`};
border-bottom-right-radius: ${({ hasRightElement }) =>
hasRightElement ? '0' : themeCssVariables.border.radius.sm};
border-top-left-radius: ${themeCssVariables.border.radius.sm};
border-top-right-radius: ${({ hasRightElement }) =>
hasRightElement ? '0' : themeCssVariables.border.radius.sm};
box-sizing: border-box;
color: ${({ disabled, textAccent }) =>
disabled
? themeCssVariables.font.color.tertiary
@@ -49,6 +37,18 @@ export const StyledControlContainer = styled.div<{
? themeCssVariables.font.color.primary
: themeCssVariables.font.color.tertiary};
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
display: grid;
gap: ${themeCssVariables.spacing[1]};
grid-template-columns: ${({ hasIcon }) =>
hasIcon ? 'auto 1fr auto' : '1fr auto'};
height: ${({ selectSizeVariant }) =>
selectSizeVariant === 'small'
? themeCssVariables.spacing[6]
: themeCssVariables.spacing[8]};
max-width: 100%;
padding: 0 ${themeCssVariables.spacing[2]};
text-align: left;
`;
packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
+21 -21
View File
@@ -22,8 +22,8 @@ const StyledContainer = styled.div<Pick<TextInputComponentProps, 'fullWidth'>>`
box-sizing: border-box;
display: inline-flex;
flex-direction: column;
width: ${({ fullWidth }) => (fullWidth ? `100%` : 'auto')};
position: relative;
width: ${({ fullWidth }) => (fullWidth ? `100%` : 'auto')};
`;
const StyledInputContainer = styled.div`
@@ -43,10 +43,14 @@ const StyledAdornmentContainer = styled.div<StyledAdornmentContainerProps>`
align-items: center;
background-color: ${themeCssVariables.background.transparent.light};
border: 1px solid ${themeCssVariables.border.color.medium};
border-left-style: ${({ position }) =>
position === 'right' ? 'none' : 'solid'};
border-radius: ${({ position }) =>
position === 'left'
? `${themeCssVariables.border.radius.sm} 0 0 ${themeCssVariables.border.radius.sm}`
: `0 ${themeCssVariables.border.radius.sm} ${themeCssVariables.border.radius.sm} 0`};
border-right-style: ${({ position }) =>
position === 'left' ? 'none' : 'solid'};
box-sizing: border-box;
color: ${themeCssVariables.font.color.tertiary};
display: flex;
@@ -61,9 +65,6 @@ const StyledAdornmentContainer = styled.div<StyledAdornmentContainerProps>`
? '28px'
: '32px'};
justify-content: center;
min-width: fit-content;
padding: ${themeCssVariables.spacing[2]};
width: auto;
line-height: ${({ sizeVariant }) =>
sizeVariant === 'xs'
? '20px'
@@ -72,11 +73,10 @@ const StyledAdornmentContainer = styled.div<StyledAdornmentContainerProps>`
: sizeVariant === 'md'
? '28px'
: '32px'};
min-width: fit-content;
border-right-style: ${({ position }) =>
position === 'left' ? 'none' : 'solid'};
border-left-style: ${({ position }) =>
position === 'right' ? 'none' : 'solid'};
padding: ${themeCssVariables.spacing[2]};
width: auto;
`;
const StyledInput = styled.input<
@@ -94,18 +94,18 @@ const StyledInput = styled.input<
>
>`
background-color: ${themeCssVariables.background.transparent.lighter};
border: 1px solid
${({ error }) =>
error
? themeCssVariables.border.color.danger
: themeCssVariables.border.color.medium};
border-radius: ${({ leftAdornment, rightAdornment }) =>
leftAdornment
? `0 ${themeCssVariables.border.radius.sm} ${themeCssVariables.border.radius.sm} 0`
: rightAdornment
? `${themeCssVariables.border.radius.sm} 0 0 ${themeCssVariables.border.radius.sm}`
: themeCssVariables.border.radius.sm};
border: 1px solid
${({ error }) =>
error
? themeCssVariables.border.color.danger
: themeCssVariables.border.color.medium};
box-sizing: border-box;
color: ${themeCssVariables.font.color.primary};
display: flex;
@@ -124,6 +124,7 @@ const StyledInput = styled.input<
: sizeVariant === 'md'
? '28px'
: '32px'};
max-width: ${({ autoGrow }) => (autoGrow ? '100%' : 'none')};
outline: none;
padding: ${({ sizeVariant, autoGrow }) =>
autoGrow
@@ -143,12 +144,11 @@ const StyledInput = styled.input<
: RightIcon
? `calc(${themeCssVariables.spacing[3]} + 16px)`
: themeCssVariables.spacing[2]};
text-overflow: ellipsis;
width: ${({ width }) =>
isDefined(width)
? `calc(${width}px + ${themeCssVariables.spacing[0.5]})`
: '100%'};
max-width: ${({ autoGrow }) => (autoGrow ? '100%' : 'none')};
text-overflow: ellipsis;
&::placeholder,
&::-webkit-input-placeholder {
color: ${themeCssVariables.font.color.light};
@@ -175,8 +175,10 @@ const StyledInput = styled.input<
const StyledLeftIconContainer = styled.div<{ sizeVariant: TextInputSize }>`
align-items: center;
bottom: 0;
display: flex;
justify-content: center;
margin: auto 0;
padding-left: ${({ sizeVariant }) =>
sizeVariant === 'xs'
? themeCssVariables.spacing[0.5]
@@ -185,22 +187,20 @@ const StyledLeftIconContainer = styled.div<{ sizeVariant: TextInputSize }>`
: themeCssVariables.spacing[2]};
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
`;
const StyledTrailingIconContainer = styled.div<
Pick<TextInputComponentProps, 'error'>
>`
align-items: center;
bottom: 0;
display: flex;
justify-content: center;
margin: auto 0;
padding-right: ${themeCssVariables.spacing[2]};
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
top: 0;
`;
const StyledTrailingIcon = styled.div<{
packages/twenty-front/src/modules/ui/input/components/TitleInput.tsx
+4 -4
View File
@@ -34,12 +34,14 @@ const StyledDiv = styled.div<{
sizeVariant: TextInputSize;
disabled?: boolean;
}>`
align-items: center;
background: inherit;
border: none;
border-radius: ${themeCssVariables.border.radius.sm};
box-sizing: border-box;
color: ${themeCssVariables.font.color.primary};
cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
overflow: hidden;
display: flex;
height: ${({ sizeVariant }) =>
sizeVariant === 'xs'
? '20px'
@@ -48,10 +50,8 @@ const StyledDiv = styled.div<{
: sizeVariant === 'md'
? '28px'
: '32px'};
overflow: hidden;
padding: ${themeCssVariables.spacing[0]} 5px;
box-sizing: border-box;
display: flex;
align-items: center;
:hover {
background: ${({ disabled }) =>
disabled ? 'inherit' : themeCssVariables.background.transparent.light};
packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx
+2 -2
View File
@@ -12,10 +12,10 @@ import { CurrencyPickerDropdownSelect } from './CurrencyPickerDropdownSelect';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledDropdownButtonContainer = styled.div`
align-items: center;
border-right: 1px solid ${themeCssVariables.border.color.medium};
color: ${({ color }) => color ?? 'none'};
cursor: pointer;
display: flex;
border-right: 1px solid ${themeCssVariables.border.color.medium};
height: 32px;
padding-left: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[2]};
@@ -29,8 +29,8 @@ const StyledIconContainer = styled.div`
align-items: center;
color: ${themeCssVariables.font.color.tertiary};
display: flex;
gap: ${themeCssVariables.spacing[1]};
font-weight: ${themeCssVariables.font.weight.medium};
gap: ${themeCssVariables.spacing[1]};
justify-content: center;
svg {
packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerHeader.tsx
+2 -2
View File
@@ -22,12 +22,12 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledCustomDatePickerHeader = styled.div`
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[1]};
justify-content: flex-end;
padding-left: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[2]};
padding-top: ${themeCssVariables.spacing[2]};
gap: ${themeCssVariables.spacing[1]};
padding-top: ${themeCssVariables.spacing[2]};
`;
const years = Array.from(
packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerInput.tsx
+5 -5
View File
@@ -28,15 +28,15 @@ const StyledInputContainer = styled.div`
const StyledInput = styled.input<{ hasError?: boolean }>`
background: transparent;
border: none;
outline: none;
padding: 4px 8px 4px 8px;
font-weight: 500;
font-size: ${themeCssVariables.font.size.md};
width: 100%;
color: ${({ hasError }) =>
hasError
? themeCssVariables.color.red
: themeCssVariables.font.color.primary};
font-size: ${themeCssVariables.font.size.md};
font-weight: 500;
outline: none;
padding: 4px 8px 4px 8px;
width: 100%;
`;
type DatePickerInputProps = {
packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePickerHeader.tsx
+2 -2
View File
@@ -20,12 +20,12 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledCustomDatePickerHeader = styled.div`
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[1]};
justify-content: flex-end;
padding-left: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[2]};
padding-top: ${themeCssVariables.spacing[2]};
gap: ${themeCssVariables.spacing[1]};
padding-top: ${themeCssVariables.spacing[2]};
`;
const StyledSeparator = styled.div`
packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePickerInput.tsx
+2 -2
View File
@@ -34,10 +34,10 @@ const StyledInput = styled.input<{ hasError?: boolean }>`
background: transparent;
border: none;
color: ${themeCssVariables.font.color.primary};
font-size: ${themeCssVariables.font.size.md};
font-weight: 500;
outline: none;
padding-left: ${themeCssVariables.spacing[2]};
font-weight: 500;
font-size: ${themeCssVariables.font.size.md};
width: 140px;
`;
packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx
+1 -1
View File
@@ -18,8 +18,8 @@ import {
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div<{ noPadding: boolean }>`
display: flex;
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[1]};
padding: ${({ noPadding }) =>
noPadding ? '0' : themeCssVariables.spacing[2]};
packages/twenty-front/src/modules/ui/input/components/internal/date/components/TimeZoneAbbreviation.tsx
+2 -2
View File
@@ -10,9 +10,9 @@ const StyledTimezoneAbbreviation = styled.span<{ hasError?: boolean }>`
color: ${themeCssVariables.font.color.tertiary};
font-size: ${themeCssVariables.font.size.sm};
width: fit-content;
user-select: none;
width: fit-content;
`;
export const TimeZoneAbbreviation = ({
packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
+5 -5
View File
@@ -24,17 +24,17 @@ const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>`
background: none;
border-radius: ${themeCssVariables.border.radius.xs} 0 0
${themeCssVariables.border.radius.xs};
border-right: 1px solid ${themeCssVariables.border.color.medium};
color: ${({ color }) => color ?? 'none'};
cursor: pointer;
display: flex;
height: 32px;
padding-left: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[1]};
user-select: none;
border-right: 1px solid ${themeCssVariables.border.color.medium};
user-select: none;
&:hover {
background-color: ${themeCssVariables.background.transparent.light};
@@ -52,8 +52,8 @@ const StyledIconContainer = styled.div`
align-items: center;
display: flex;
height: 12px;
width: 16px;
justify-content: center;
width: 16px;
}
`;
@@ -62,8 +62,8 @@ const StyledCheveronIconContainer = styled.div`
align-items: center;
display: flex;
height: 14px;
width: 14px;
justify-content: center;
width: 14px;
}
`;
packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx
+4 -4
View File
@@ -9,15 +9,15 @@ const StyledDropdownMenuSkeletonContainer = styled.div`
--vertical-padding: ${themeCssVariables.spacing[2]};
border-radius: ${themeCssVariables.border.radius.sm};
gap: ${themeCssVariables.spacing[2]};
box-sizing: border-box;
flex-shrink: 0;
padding-left: var(--horizontal-padding);
padding-right: var(--horizontal-padding);
gap: ${themeCssVariables.spacing[2]};
height: ${themeCssVariables.spacing[8]};
padding-left: var(--horizontal-padding);
padding-right: var(--horizontal-padding);
`;
export const DropdownMenuSkeletonItem = ({
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx
+8 -8
View File
@@ -5,39 +5,39 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledHeader = styled.li`
align-items: center;
border-bottom: 1px solid ${themeCssVariables.border.color.light};
border-top-left-radius: ${themeCssVariables.border.radius.sm};
border-top-right-radius: ${themeCssVariables.border.radius.sm};
color: ${themeCssVariables.font.color.primary};
cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
display: flex;
flex-shrink: 0;
font-size: ${({ onClick }) =>
onClick ? themeCssVariables.font.size.sm : themeCssVariables.font.size.md};
font-weight: ${themeCssVariables.font.weight.medium};
border-top-left-radius: ${themeCssVariables.border.radius.sm};
border-top-right-radius: ${themeCssVariables.border.radius.sm};
padding: ${themeCssVariables.spacing[1]};
border-bottom: 1px solid ${themeCssVariables.border.color.light};
height: ${themeCssVariables.spacing[6]};
user-select: none;
padding: ${themeCssVariables.spacing[1]};
&:hover {
background: ${({ onClick }) =>
onClick ? themeCssVariables.background.transparent.light : 'none'};
}
flex-shrink: 0;
user-select: none;
`;
const StyledChildrenWrapper = styled.span`
overflow: hidden;
padding: 0 ${themeCssVariables.spacing[1]};
white-space: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
`;
const StyledEndComponent = styled.div`
display: inline-flex;
color: ${themeCssVariables.font.color.tertiary};
display: inline-flex;
margin-left: auto;
margin-right: 0;
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent.tsx
+3 -3
View File
@@ -19,10 +19,10 @@ const StyledNonClickableStartIcon = styled.div`
font-family: ${themeCssVariables.font.family};
font-weight: ${themeCssVariables.font.weight.regular};
gap: ${themeCssVariables.spacing[1]};
justify-content: center;
white-space: nowrap;
height: ${themeCssVariables.spacing[6]};
justify-content: center;
white-space: nowrap;
width: ${themeCssVariables.spacing[6]};
`;
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInnerSelect.tsx
+5 -5
View File
@@ -12,21 +12,21 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledDropdownMenuInnerSelectDropdownButton = styled.div`
align-items: center;
box-sizing: border-box;
color: ${themeCssVariables.font.color.secondary};
cursor: pointer;
display: flex;
font-size: ${themeCssVariables.font.size.sm};
font-weight: ${themeCssVariables.font.weight.medium};
height: ${themeCssVariables.spacing[7]};
justify-content: space-between;
padding-left: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[2]};
width: 100%;
box-sizing: border-box;
cursor: pointer;
`;
export type DropdownMenuInnerSelectProps = {
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
+7 -7
View File
@@ -18,12 +18,12 @@ const StyledInput = styled.input<{
}>`
background-color: transparent;
border: none;
box-sizing: border-box;
color: ${themeCssVariables.font.color.primary};
font-family: ${themeCssVariables.font.family};
font-size: inherit;
font-weight: ${themeCssVariables.font.weight.medium};
font-weight: inherit;
outline: none;
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]};
&::placeholder,
&::-webkit-input-placeholder {
@@ -32,14 +32,14 @@ const StyledInput = styled.input<{
font-weight: ${themeCssVariables.font.weight.medium};
}
box-sizing: border-box;
font-weight: ${themeCssVariables.font.weight.medium};
height: 32px;
position: relative;
width: 100%;
outline: none;
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]};
padding-right: ${({ withRightComponent }) =>
withRightComponent ? '32px' : '0'};
position: relative;
width: 100%;
`;
const StyledInputContainer = styled.div`
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
+7 -7
View File
@@ -8,17 +8,17 @@ const StyledExternalContainer = styled.div<{
--padding: ${themeCssVariables.spacing[1]};
align-items: flex-start;
box-sizing: border-box;
display: flex;
flex-direction: column;
max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'none')};
width: 100%;
height: fit-content;
max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'none')};
padding: var(--padding);
box-sizing: border-box;
width: 100%;
`;
const StyledScrollableContainer = styled.div<{ maxHeight?: number }>`
@@ -26,11 +26,11 @@ const StyledScrollableContainer = styled.div<{ maxHeight?: number }>`
display: flex;
max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'none')};
width: 100%;
overflow-y: auto;
scrollbar-color: ${themeCssVariables.border.color.medium} transparent;
scrollbar-width: 4px;
width: 100%;
*::-webkit-scrollbar-thumb {
border-radius: ${themeCssVariables.border.radius.sm};
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx
+5 -5
View File
@@ -6,8 +6,8 @@ import { forwardRef, type InputHTMLAttributes } from 'react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledDropdownMenuSearchInputContainer = styled.div`
align-items: center;
--vertical-padding: ${themeCssVariables.spacing[2]};
align-items: center;
display: flex;
flex-direction: row;
min-height: calc(36px - 2 * var(--vertical-padding));
@@ -17,14 +17,14 @@ const StyledDropdownMenuSearchInputContainer = styled.div`
`;
const StyledInput = styled.input`
background-color: transparent;
background-color: transparent;
border: none;
color: ${themeCssVariables.font.color.primary};
font-family: ${themeCssVariables.font.family};
font-size: ${themeCssVariables.font.size.sm};
font-size: inherit;
font-weight: inherit;
outline: none;
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]};
&::placeholder,
&::-webkit-input-placeholder {
@@ -33,8 +33,8 @@ const StyledInput = styled.input`
font-weight: ${themeCssVariables.font.weight.medium};
}
font-size: ${themeCssVariables.font.size.sm};
background-color: transparent;
outline: none;
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]};
width: 100%;
&[type='number']::-webkit-outer-spin-button,
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSectionLabel.tsx
+4 -4
View File
@@ -2,16 +2,16 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
import { styled } from '@linaria/react';
const StyledDropdownMenuSectionLabel = styled.div`
align-items: center;
background-color: ${themeCssVariables.background.transparent.lighter};
color: ${themeCssVariables.font.color.tertiary};
min-height: 20px;
width: auto;
font-size: ${themeCssVariables.font.size.xxs};
display: flex;
align-items: center;
font-size: ${themeCssVariables.font.size.xxs};
justify-content: flex-start;
min-height: 20px;
padding-left: ${themeCssVariables.spacing[1]};
user-select: none;
width: auto;
`;
export type DropdownMenuSectionLabelProps = {
packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx
+7 -7
View File
@@ -7,8 +7,11 @@ type StyledDropdownButtonProps = {
};
export const StyledHeaderDropdownButton = styled.button<StyledDropdownButtonProps>`
font-family: inherit;
align-items: center;
background: ${({ isUnfolded }) =>
isUnfolded
? themeCssVariables.background.transparent.light
: themeCssVariables.background.primary};
border: none;
border-radius: ${themeCssVariables.border.radius.sm};
color: ${({ isActive }) =>
@@ -18,16 +21,13 @@ export const StyledHeaderDropdownButton = styled.button<StyledDropdownButtonProp
cursor: pointer;
display: flex;
font-family: inherit;
padding: ${themeCssVariables.spacing[1]};
padding-left: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[2]};
user-select: none;
background: ${({ isUnfolded }) =>
isUnfolded
? themeCssVariables.background.transparent.light
: themeCssVariables.background.primary};
user-select: none;
&:hover {
background: ${({ isUnfolded }) =>
packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedFieldDisplay.tsx
+5 -5
View File
@@ -13,16 +13,16 @@ type ExpandedFieldDisplayProps = {
};
const StyledExpandedFieldContainer = styled.div`
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[1]};
padding: ${themeCssVariables.spacing[2]};
overflow: auto;
box-sizing: border-box;
height: 300px;
width: 400px;
position: relative;
overflow: auto;
overflow-y: auto;
padding: ${themeCssVariables.spacing[2]};
position: relative;
width: 400px;
`;
const StyledContainer = styled.div`
packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx
+5 -5
View File
@@ -7,18 +7,18 @@ export const OverlayContainer = styled.div<{
hasDangerBorder?: boolean;
}>`
align-items: center;
display: flex;
backdrop-filter: ${themeCssVariables.blur.medium};
border-radius: ${({ borderRadius }) =>
themeCssVariables.border.radius[borderRadius ?? 'md']};
background: ${themeCssVariables.background.transparent.primary};
border: 1px solid
${({ hasDangerBorder }) =>
themeCssVariables.border.color[hasDangerBorder ? 'danger' : 'medium']};
border-radius: ${({ borderRadius }) =>
themeCssVariables.border.radius[borderRadius ?? 'md']};
box-shadow: ${themeCssVariables.boxShadow.strong};
display: flex;
overflow: hidden;
packages/twenty-front/src/modules/ui/layout/page/components/PageBody.tsx
+1 -1
View File
@@ -18,8 +18,8 @@ const StyledMainContainer = styled.div`
gap: ${themeCssVariables.spacing[2]};
min-height: 0;
padding-bottom: ${themeCssVariables.spacing[3]};
padding-right: ${themeCssVariables.spacing[3]};
padding-left: 0;
padding-right: ${themeCssVariables.spacing[3]};
width: 100%;
`;
packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
+7 -7
View File
@@ -29,14 +29,14 @@ const StyledTopBarContainer = styled.div<{ isMobile: boolean }>`
display: flex;
flex-direction: row;
font-size: ${themeCssVariables.font.size.lg};
gap: ${themeCssVariables.spacing[2]};
justify-content: space-between;
min-height: ${PAGE_BAR_MIN_HEIGHT}px;
padding-top: ${themeCssVariables.spacing[3]};
padding-bottom: ${themeCssVariables.spacing[3]};
padding-left: ${({ isMobile }) =>
isMobile ? themeCssVariables.spacing[3] : 0};
padding-right: ${themeCssVariables.spacing[3]};
gap: ${themeCssVariables.spacing[2]};
padding-top: ${themeCssVariables.spacing[3]};
`;
const StyledLeftContainer = styled.div`
@@ -52,28 +52,28 @@ const StyledLeftContainer = styled.div`
`;
const StyledTitleContainer = styled.div`
align-items: center;
display: flex;
font-size: ${themeCssVariables.font.size.md};
font-weight: ${themeCssVariables.font.weight.medium};
margin-right: ${themeCssVariables.spacing[1]};
width: 100%;
overflow: hidden;
align-items: center;
width: 100%;
`;
const StyledTopBarIconStyledTitleContainer = styled.div`
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[1]};
flex-direction: row;
width: 100%;
gap: ${themeCssVariables.spacing[1]};
overflow: hidden;
width: 100%;
`;
const StyledPageActionContainer = styled.div`
display: inline-flex;
gap: ${themeCssVariables.spacing[2]};
flex: 1 0 auto;
gap: ${themeCssVariables.spacing[2]};
`;
const StyledIconContainer = styled.div`
packages/twenty-front/src/modules/ui/layout/page/components/PagePanel.tsx
+2 -2
View File
@@ -6,12 +6,12 @@ const StyledPanel = styled.div`
background: ${themeCssVariables.background.primary};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${themeCssVariables.border.radius.md};
display: flex;
flex-direction: column;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
display: flex;
flex-direction: column;
`;
type PagePanelProps = {
packages/twenty-front/src/modules/ui/layout/page/components/ShowPageContainer.tsx
+1 -1
View File
@@ -15,8 +15,8 @@ const StyledOuterContainer = styled.div`
const StyledInnerContainer = styled.div`
display: flex;
flex-direction: var(--show-page-direction, row);
width: 100%;
height: 100%;
width: 100%;
`;
const StyledScrollWrapperContainer = styled.div`
packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelEdge.tsx
+5 -5
View File
@@ -29,20 +29,20 @@ const StyledEdge = styled.div<StyledEdgeProps>`
`;
const StyledHandle = styled.div<{ isActive: boolean; isHovered: boolean }>`
width: 4px;
height: 48px;
border-radius: ${themeCssVariables.border.radius.pill};
background-color: ${({ isActive, isHovered }) =>
isActive
? themeCssVariables.color.blue
: isHovered
? themeCssVariables.font.color.tertiary
: themeCssVariables.background.quaternary};
border-radius: ${themeCssVariables.border.radius.pill};
height: 48px;
transform: ${({ isHovered, isActive }) =>
isHovered || isActive ? 'scaleY(1.2)' : 'scaleY(1)'};
transition:
background-color ${themeCssVariables.animation.duration.fast}s,
transform ${themeCssVariables.animation.duration.fast}s;
transform: ${({ isHovered, isActive }) =>
isHovered || isActive ? 'scaleY(1.2)' : 'scaleY(1)'};
width: 4px;
`;
type ResizablePanelEdgeProps = {
packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelGap.tsx
+1 -1
View File
@@ -8,8 +8,8 @@ const StyledGap = styled.div<{ gapWidth: number }>`
cursor: col-resize;
flex-shrink: 0;
height: 100%;
width: ${({ gapWidth }) => gapWidth}px;
transition: width 0.15s ease;
width: ${({ gapWidth }) => gapWidth}px;
`;
type ResizablePanelGapProps = {
packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableListItem.tsx
+2 -2
View File
@@ -7,11 +7,11 @@ import { styled } from '@linaria/react';
import { isDefined } from 'twenty-shared/utils';
const StyledListItemContainer = styled.div`
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
box-sizing: border-box;
width: 100%;
`;
export type SelectableListItemProps = {
packages/twenty-front/src/modules/ui/layout/show-page/components/FieldRichTextCard.tsx
+3 -3
View File
@@ -17,10 +17,10 @@ const ActivityRichTextEditor = lazy(() =>
);
const StyledShowPageActivityContainer = styled.div`
margin-top: ${themeCssVariables.spacing[6]};
width: 100%;
padding-inline: 44px;
box-sizing: border-box;
margin-top: ${themeCssVariables.spacing[6]};
padding-inline: 44px;
width: 100%;
`;
const StyledSkeletonContainer = styled.div`
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
+3 -3
View File
@@ -37,15 +37,15 @@ export const StyledShowPageSummaryCard = styled.div<{
isMobile: boolean;
}>`
align-items: center;
border-bottom: 1px solid ${themeCssVariables.border.color.light};
box-sizing: border-box;
display: flex;
flex-direction: ${({ isMobile }) => (isMobile ? 'row' : 'column')};
gap: ${({ isMobile }) =>
isMobile ? themeCssVariables.spacing[2] : themeCssVariables.spacing[3]};
height: ${({ isMobile }) => (isMobile ? '77px' : '127px')};
justify-content: ${({ isMobile }) => (isMobile ? 'flex-start' : 'center')};
padding: ${themeCssVariables.spacing[4]};
border-bottom: 1px solid ${themeCssVariables.border.color.light};
height: ${({ isMobile }) => (isMobile ? '77px' : '127px')};
box-sizing: border-box;
`;
const StyledInfoContainer = styled.div<{ isMobile: boolean }>`
packages/twenty-front/src/modules/ui/layout/side-panel/components/SidePanelFooter.tsx
+1 -1
View File
@@ -9,9 +9,9 @@ const StyledContainer = styled.div`
bottom: 0;
box-sizing: border-box;
display: flex;
gap: ${themeCssVariables.spacing[2]};
justify-content: flex-end;
padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[3]};
gap: ${themeCssVariables.spacing[2]};
width: 100%;
`;
packages/twenty-front/src/modules/ui/layout/tab-list/components/TabList.tsx
+2 -2
View File
@@ -42,9 +42,9 @@ const StyledDropdownContainer = styled.div`
const StyledTabContainer = styled.div`
display: flex;
gap: ${TAB_LIST_GAP}px;
position: relative;
overflow: hidden;
max-width: 100%;
overflow: hidden;
position: relative;
`;
export const TabList = ({
packages/twenty-front/src/modules/ui/layout/table/components/TableHeader.tsx
+2 -2
View File
@@ -6,12 +6,13 @@ const StyledTableHeader = styled.div<{
onClick?: () => void;
padding?: string;
}>`
gap: ${themeCssVariables.spacing[1]};
align-items: center;
border-bottom: 1px solid ${themeCssVariables.border.color.light};
color: ${themeCssVariables.font.color.tertiary};
cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
display: flex;
font-weight: ${themeCssVariables.font.weight.medium};
gap: ${themeCssVariables.spacing[1]};
height: ${themeCssVariables.spacing[8]};
justify-content: ${({ align }) =>
align === 'right'
@@ -21,7 +22,6 @@ const StyledTableHeader = styled.div<{
: 'flex-start'};
padding: ${({ padding }) => padding ?? `0 ${themeCssVariables.spacing[2]}`};
text-align: ${({ align }) => align ?? 'left'};
cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
`;
export { StyledTableHeader as TableHeader };
packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx
+4 -4
View File
@@ -24,20 +24,20 @@ const StyledTableRow = styled.div<{
cursor: ${({ cursor }) => cursor ?? 'default'};
display: grid;
grid-auto-columns: ${({ gridAutoColumns }) => gridAutoColumns ?? '1fr'};
grid-template-columns: ${({ gridTemplateColumns }) =>
gridTemplateColumns ?? 'none'};
grid-auto-flow: column;
@media (max-width: ${MOBILE_VIEWPORT}px) {
grid-auto-columns: ${({ mobileGridAutoColumns, gridAutoColumns }) =>
mobileGridAutoColumns ?? gridAutoColumns ?? '1fr'};
}
grid-template-columns: ${({ gridTemplateColumns }) =>
gridTemplateColumns ?? 'none'};
height: ${({ height }) => height ?? 'auto'};
grid-auto-flow: column;
text-decoration: none;
transition: background-color
calc(${themeCssVariables.animation.duration.normal} * 1s);
width: 100%;
text-decoration: none;
&:hover {
background-color: ${({ onClick, to, hoverBackgroundColor }) =>
packages/twenty-front/src/modules/ui/layout/top-bar/components/TopBar.tsx
+2 -2
View File
@@ -13,9 +13,9 @@ type TopBarProps = {
const StyledContainer = styled.div`
border-bottom: 1px solid ${themeCssVariables.border.color.light};
display: flex;
margin-left: ${themeCssVariables.spacing[3]};
flex-direction: column;
margin-left: ${themeCssVariables.spacing[3]};
`;
const StyledTopBar = styled.div`
packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx
+2 -2
View File
@@ -17,16 +17,16 @@ const StyledWrapper = styled.nav`
font-size: ${themeCssVariables.font.size.md};
grid-auto-flow: column;
grid-column-gap: ${themeCssVariables.spacing[1]};
height: ${themeCssVariables.spacing[8]};
max-width: 100%;
min-width: 0;
height: ${themeCssVariables.spacing[8]};
`;
const StyledLinkContainer = styled.div`
> a {
color: inherit;
text-decoration: none;
overflow: hidden;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx
+2 -2
View File
@@ -19,16 +19,16 @@ const StyledWrapper = styled.nav`
font-size: ${themeCssVariables.font.size.md};
grid-auto-flow: column;
grid-column-gap: ${themeCssVariables.spacing[1]};
height: ${themeCssVariables.spacing[8]};
max-width: 100%;
min-width: 0;
height: ${themeCssVariables.spacing[8]};
`;
const StyledLinkContainer = styled.div`
> a {
color: inherit;
text-decoration: none;
overflow: hidden;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx
+6 -6
View File
@@ -6,18 +6,18 @@ export const StyledContainer = styled.div<{
isNavigationDrawerExpanded: boolean;
}>`
align-items: center;
cursor: pointer;
color: ${themeCssVariables.font.color.primary};
border-radius: ${themeCssVariables.border.radius.sm};
border: 1px solid transparent;
border-radius: ${themeCssVariables.border.radius.sm};
color: ${themeCssVariables.font.color.primary};
cursor: pointer;
display: flex;
justify-content: space-between;
gap: ${({ isNavigationDrawerExpanded }) =>
isNavigationDrawerExpanded ? themeCssVariables.spacing[1] : '0'};
height: ${themeCssVariables.spacing[5]};
justify-content: space-between;
padding: calc(${themeCssVariables.spacing[1]} - 1px);
width: ${({ isNavigationDrawerExpanded }) =>
isNavigationDrawerExpanded ? '100%' : 'auto'};
gap: ${({ isNavigationDrawerExpanded }) =>
isNavigationDrawerExpanded ? themeCssVariables.spacing[1] : '0'};
&:hover {
background-color: ${themeCssVariables.background.transparent.lighter};
border: 1px solid ${themeCssVariables.border.color.medium};
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
+6 -6
View File
@@ -36,14 +36,14 @@ const StyledAnimatedContainer = styled.div<{
max-height: 100vh;
overflow: hidden;
position: relative;
width: ${({ isExpanded }) =>
isExpanded
? `var(${NAVIGATION_DRAWER_WIDTH_VAR})`
: `${NAVIGATION_DRAWER_COLLAPSED_WIDTH}px`};
transition: ${({ isResizing }) =>
isResizing
? 'none'
: `width calc(${themeCssVariables.animation.duration.normal} * 1s)`};
width: ${({ isExpanded }) =>
isExpanded
? `var(${NAVIGATION_DRAWER_WIDTH_VAR})`
: `${NAVIGATION_DRAWER_COLLAPSED_WIDTH}px`};
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: ${({ isExpanded }) => (isExpanded ? '100%' : '0')};
@@ -58,8 +58,6 @@ const StyledContainer = styled.div<{
box-sizing: border-box;
display: flex;
flex-direction: column;
width: ${({ isExpanded }) =>
isExpanded ? `var(${NAVIGATION_DRAWER_WIDTH_VAR})` : '100%'};
gap: ${themeCssVariables.spacing[3]};
height: 100%;
padding: ${({ isSettings, isMobile }) =>
@@ -68,6 +66,8 @@ const StyledContainer = styled.div<{
? `${themeCssVariables.spacing[3]} 0 0 ${themeCssVariables.spacing[8]}`
: `${themeCssVariables.spacing[3]} 0 ${themeCssVariables.spacing[4]} 0`
: `${themeCssVariables.spacing[3]} 0 ${themeCssVariables.spacing[4]} ${themeCssVariables.spacing[2]}`};
width: ${({ isExpanded }) =>
isExpanded ? `var(${NAVIGATION_DRAWER_WIDTH_VAR})` : '100%'};
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: 100%;
padding-left: ${themeCssVariables.spacing[5]};
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx
+1 -1
View File
@@ -24,11 +24,11 @@ const StyledIconAndButtonContainer = styled.button`
cursor: pointer;
display: flex;
flex-direction: row;
font-family: ${themeCssVariables.font.family};
font-weight: ${themeCssVariables.font.weight.medium};
gap: ${themeCssVariables.spacing[2]};
padding: ${themeCssVariables.spacing['1.5']} ${themeCssVariables.spacing[1]};
width: 100%;
font-family: ${themeCssVariables.font.family};
&:hover {
background: ${themeCssVariables.background.transparent.light};
border-radius: ${themeCssVariables.border.radius.sm};
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
+4 -4
View File
@@ -17,10 +17,10 @@ const StyledContainer = styled.div<{ isExpanded: boolean }>`
display: flex;
flex-direction: ${({ isExpanded }) => (isExpanded ? 'row' : 'column')};
gap: ${({ isExpanded }) => (isExpanded ? '0' : themeCssVariables.spacing[4])};
user-select: none;
padding-right: ${themeCssVariables.spacing[2]};
min-height: ${PAGE_BAR_MIN_HEIGHT}px;
padding-right: ${themeCssVariables.spacing[2]};
transition: gap calc(${themeCssVariables.animation.duration.normal} * 1s) ease;
user-select: none;
`;
const StyledRightActions = styled.div<{ isExpanded: boolean }>`
@@ -42,10 +42,10 @@ const StyledNavigationDrawerCollapseButtonContainer = styled.div`
`;
const StyledWorkspaceDropdownContainer = styled.div`
min-height: ${themeCssVariables.spacing[8]};
display: flex;
align-items: center;
display: flex;
justify-content: center;
min-height: ${themeCssVariables.spacing[8]};
`;
type NavigationDrawerHeaderProps = {
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
+37 -37
View File
@@ -84,17 +84,15 @@ type StyledItemProps = Pick<
};
const StyledItem = styled.button<StyledItemProps>`
box-sizing: border-box;
align-items: center;
background: ${({ active }) =>
active ? themeCssVariables.background.transparent.light : 'transparent'};
height: ${themeCssVariables.spacing[7]};
border: ${({ isSelectedInEditMode }) =>
isSelectedInEditMode
? `1px solid ${themeCssVariables.color.blue}`
: '1px solid transparent'};
border-radius: ${themeCssVariables.border.radius.sm};
text-decoration: none;
box-sizing: border-box;
color: ${({ active, danger, soon }) => {
if (active === true) {
return themeCssVariables.font.color.primary;
@@ -112,6 +110,9 @@ const StyledItem = styled.button<StyledItemProps>`
display: flex;
font-family: ${themeCssVariables.font.family};
font-size: ${themeCssVariables.font.size.md};
height: ${themeCssVariables.spacing[7]};
margin-top: ${({ indentationLevel }) =>
indentationLevel === 2 ? '2px' : '0'};
padding-bottom: ${themeCssVariables.spacing[1]};
padding-left: ${themeCssVariables.spacing[1]};
@@ -121,15 +122,11 @@ const StyledItem = styled.button<StyledItemProps>`
: themeCssVariables.spacing[1]};
padding-top: ${themeCssVariables.spacing[1]};
margin-top: ${({ indentationLevel }) =>
indentationLevel === 2 ? '2px' : '0'};
pointer-events: ${({ soon }) => (soon ? 'none' : 'auto')};
width: ${({ isNavigationDrawerExpanded, hasRightOptions }) =>
!isNavigationDrawerExpanded
? `calc(${NAVIGATION_DRAWER_COLLAPSED_WIDTH}px - ${themeCssVariables.spacing[6]} + ${themeCssVariables.spacing[1]} + ${hasRightOptions ? themeCssVariables.spacing['0.5'] : themeCssVariables.spacing[1]})`
: `calc(100% - ${themeCssVariables.spacing['1.5']} + ${themeCssVariables.spacing[1]} + ${hasRightOptions ? themeCssVariables.spacing['0.5'] : themeCssVariables.spacing[1]})`};
text-decoration: none;
user-select: none;
&:hover {
background: ${themeCssVariables.background.transparent.light};
@@ -143,7 +140,10 @@ const StyledItem = styled.button<StyledItemProps>`
visibility: visible;
}
user-select: none;
width: ${({ isNavigationDrawerExpanded, hasRightOptions }) =>
!isNavigationDrawerExpanded
? `calc(${NAVIGATION_DRAWER_COLLAPSED_WIDTH}px - ${themeCssVariables.spacing[6]} + ${themeCssVariables.spacing[1]} + ${hasRightOptions ? themeCssVariables.spacing['0.5'] : themeCssVariables.spacing[1]})`
: `calc(100% - ${themeCssVariables.spacing['1.5']} + ${themeCssVariables.spacing[1]} + ${hasRightOptions ? themeCssVariables.spacing['0.5'] : themeCssVariables.spacing[1]})`};
@media (max-width: ${MOBILE_VIEWPORT}px) {
font-size: ${themeCssVariables.font.size.lg};
@@ -157,13 +157,13 @@ const StyledItemElementsContainer = styled.div`
`;
const StyledLabelParent = styled.div`
display: flex;
align-items: center;
display: flex;
flex: 1 1 auto;
white-space: nowrap;
min-width: 0px;
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
`;
const StyledItemLabel = styled.span`
@@ -191,17 +191,17 @@ const StyledItemCount = styled.span`
const StyledKeyBoardShortcut = styled.span`
align-items: center;
background: ${themeCssVariables.background.transparent.lighter};
border: 1px solid ${themeCssVariables.border.color.strong};
border-radius: ${themeCssVariables.border.radius.sm};
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[2]};
height: ${themeCssVariables.spacing[4]};
justify-content: center;
width: ${themeCssVariables.spacing[4]};
box-sizing: border-box;
border-radius: ${themeCssVariables.border.radius.sm};
border: 1px solid ${themeCssVariables.border.color.strong};
background: ${themeCssVariables.background.transparent.lighter};
`;
const StyledNavigationDrawerItemContainer = styled.div`
@@ -218,44 +218,44 @@ const StyledIcon = styled.div<{
$borderColor?: string;
}>`
align-items: center;
display: flex;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
margin-right: ${themeCssVariables.spacing[2]};
background-color: ${({ $backgroundColor }) =>
$backgroundColor || 'transparent'};
border: ${({ $backgroundColor, $borderColor }) =>
$backgroundColor && $borderColor ? `1px solid ${$borderColor}` : 'none'};
border-radius: ${({ $backgroundColor }) => ($backgroundColor ? '4px' : '0')};
box-sizing: ${({ $backgroundColor }) =>
$backgroundColor ? 'border-box' : 'content-box'};
display: flex;
flex-grow: 0;
flex-shrink: 0;
height: ${({ $backgroundColor }) =>
$backgroundColor ? themeCssVariables.spacing[4] : 'auto'};
justify-content: center;
margin-right: ${themeCssVariables.spacing[2]};
width: ${({ $backgroundColor }) =>
$backgroundColor ? themeCssVariables.spacing[4] : 'auto'};
border: ${({ $backgroundColor, $borderColor }) =>
$backgroundColor && $borderColor ? `1px solid ${$borderColor}` : 'none'};
`;
const StyledRightOptionsContainer = styled.div`
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
flex-grow: 0;
height: ${themeCssVariables.spacing[6]};
border-radius: ${themeCssVariables.border.radius.sm};
display: flex;
flex-grow: 0;
flex-shrink: 0;
height: ${themeCssVariables.spacing[6]};
justify-content: center;
`;
const StyledRightOptionsVisbility = styled.div`
display: block;
opacity: 0;
transition: opacity 150ms;
position: absolute;
padding-left: ${themeCssVariables.spacing[2]};
overflow: hidden;
clip-path: inset(1px);
white-space: nowrap;
display: block;
height: 1px;
opacity: 0;
overflow: hidden;
padding-left: ${themeCssVariables.spacing[2]};
position: absolute;
transition: opacity 150ms;
white-space: nowrap;
width: 1px;
&[data-visible='true'],
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemBreadcrumb.tsx
+4 -4
View File
@@ -20,10 +20,10 @@ const StyledGapVerticalLine = styled.div<{ darker: boolean }>`
? themeCssVariables.font.color.tertiary
: themeCssVariables.border.color.strong};
position: relative;
top: -2px;
height: 2px;
position: relative;
top: -2px;
width: 1px;
`;
@@ -33,9 +33,9 @@ const StyledSecondaryFullVerticalBar = styled.div<{ darker: boolean }>`
? themeCssVariables.font.color.tertiary
: themeCssVariables.border.color.strong};
height: 28px;
position: relative;
top: -17px;
height: 28px;
width: 1px;
`;
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent.tsx
+1 -1
View File
@@ -7,10 +7,10 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledItemsContainer = styled.div`
display: flex;
flex: 1;
flex-direction: column;
margin-bottom: auto;
overflow: hidden;
flex: 1;
`;
const StyledScrollableInnerContainer = styled.div<{ isMobile?: boolean }>`
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx
+3 -3
View File
@@ -16,15 +16,15 @@ const StyledTitle = styled.div`
border-radius: ${themeCssVariables.border.radius.sm};
display: flex;
height: ${themeCssVariables.spacing[5]};
justify-content: space-between;
padding-bottom: ${themeCssVariables.spacing[1]};
padding-left: ${themeCssVariables.spacing[1]};
padding-right: ${themeCssVariables.spacing['0.5']};
padding-top: ${themeCssVariables.spacing[1]};
padding-bottom: ${themeCssVariables.spacing[1]};
justify-content: space-between;
&:hover {
cursor: pointer;
background-color: ${themeCssVariables.background.transparent.light};
cursor: pointer;
}
`;
packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx
+3 -3
View File
@@ -21,13 +21,13 @@ const StyledContainer = styled.div<{ isLast: boolean }>`
const StyledStepCircleBase = styled.div<{ isInNextSteps: boolean }>`
align-items: center;
border-radius: 50%;
border-style: solid;
border-width: 1px;
border-color: ${({ isInNextSteps }) =>
isInNextSteps
? themeCssVariables.border.color.medium
: themeCssVariables.border.color.inverted} !important;
border-radius: 50%;
border-style: solid;
border-width: 1px;
display: flex;
flex-basis: auto;
flex-shrink: 0;
packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx
+7 -7
View File
@@ -26,15 +26,15 @@ type Position = {
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledDragSelection = styled.div<SelectionBox>`
position: absolute;
z-index: 99;
opacity: 0.2;
border: 1px solid ${themeCssVariables.color.blue3};
background: ${themeCssVariables.color.blue7};
top: ${({ top }) => top}px;
left: ${({ left }) => left}px;
width: ${({ width }) => width}px;
border: 1px solid ${themeCssVariables.color.blue3};
height: ${({ height }) => height}px;
left: ${({ left }) => left}px;
opacity: 0.2;
position: absolute;
top: ${({ top }) => top}px;
width: ${({ width }) => width}px;
z-index: 99;
`;
export const DragSelect = ({
packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
+1 -1
View File
@@ -14,10 +14,10 @@ const StyledScrollWrapper = styled.div<{ autoHeight?: boolean }>`
&.scroll-wrapper-y-enabled {
overflow-y: overlay;
}
height: ${({ autoHeight }) => (autoHeight ? 'auto' : '100%')};
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
height: ${({ autoHeight }) => (autoHeight ? 'auto' : '100%')};
`;
export type ScrollWrapperProps = {