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
.github/actions/nx-affected/action.yaml
+5
View File
@@ -19,7 +19,12 @@ runs:
shell: bash
run: git fetch origin main --depth=1
- name: Get last successful commit
if: env.NX_BASE == ''
uses: nrwl/nx-set-shas@v4
- name: Fallback to origin/main if no base found
if: env.NX_BASE == ''
shell: bash
run: echo "NX_BASE=$(git rev-parse origin/main)" >> $GITHUB_ENV
- name: Run affected command
shell: bash
env:
.github/workflows/ci-emails.yaml
+1 -1
View File
@@ -25,7 +25,7 @@ jobs:
needs: changed-files-check
if: needs.changed-files-check.outputs.any_changed == 'true'
timeout-minutes: 10
runs-on: ubuntu-latest-8-cores
runs-on: ubuntu-latest
steps:
- name: Fetch custom Github Actions and base branch history
uses: actions/checkout@v4
.github/workflows/ci-front.yaml
+3 -27
View File
@@ -2,6 +2,7 @@ name: CI Front
on:
pull_request:
merge_group:
permissions:
contents: read
@@ -17,6 +18,7 @@ env:
jobs:
changed-files-check:
if: github.event_name != 'merge_group'
uses: ./.github/workflows/changed-files.yaml
with:
files: |
@@ -63,7 +65,7 @@ jobs:
key: ${{ env.STORYBOOK_BUILD_CACHE_KEY_FOR_SAVE_ACTION }}
front-sb-test:
timeout-minutes: 30
runs-on: ubuntu-latest-8-cores
runs-on: ubuntu-latest-4-cores
needs: front-sb-build
strategy:
fail-fast: false
@@ -149,32 +151,6 @@ jobs:
# npx nyc merge coverage-artifacts ${{ env.PATH_TO_COVERAGE }}/coverage-storybook.json
# - name: Checking coverage
# run: npx nx storybook:coverage twenty-front --checkCoverage=true --configuration=${{ matrix.storybook_scope }}
front-chromatic-deployment:
timeout-minutes: 30
if: false
needs: front-sb-build
runs-on: ubuntu-latest-8-cores
env:
REACT_APP_SERVER_BASE_URL: http://127.0.0.1:3000
CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 10
- name: Install dependencies
uses: ./.github/actions/yarn-install
- name: Restore storybook build cache
uses: ./.github/actions/restore-cache
with:
key: ${{ env.STORYBOOK_BUILD_CACHE_KEY_FOR_RESTORE_ACTION }}
- name: Front / Write .env
run: |
cd packages/twenty-front
touch .env
echo "" >> .env
echo "REACT_APP_SERVER_BASE_URL=$REACT_APP_SERVER_BASE_URL" >> .env
- name: Publish to Chromatic
run: npx nx run twenty-front:chromatic:ci
front-task:
needs: changed-files-check
if: needs.changed-files-check.outputs.any_changed == 'true'
.github/workflows/ci-merge-queue.yaml
+23 -1
View File
@@ -10,7 +10,7 @@ permissions:
contents: read
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
group: ${{ github.workflow }}-${{ github.event_name == 'merge_group' && github.event.merge_group.base_ref || github.ref }}
cancel-in-progress: true
jobs:
@@ -54,6 +54,18 @@ jobs:
- name: Install dependencies
uses: ./.github/actions/yarn-install
- name: Restore Nx build cache
uses: actions/cache/restore@v4
with:
key: v4-e2e-build-${{ github.ref_name }}-${{ github.sha }}
restore-keys: |
v4-e2e-build-${{ github.ref_name }}-
v4-e2e-build-main-
path: |
.nx
node_modules/.cache
packages/*/node_modules/.cache
- name: Build twenty-shared
run: npx nx build twenty-shared
@@ -71,6 +83,16 @@ jobs:
- name: Build server
run: npx nx build twenty-server
- name: Save Nx build cache
if: always()
uses: actions/cache/save@v4
with:
key: v4-e2e-build-${{ github.ref_name }}-${{ github.sha }}
path: |
.nx
node_modules/.cache
packages/*/node_modules/.cache
- name: Create and setup database
run: |
PGPASSWORD=postgres psql -h localhost -p 5432 -U postgres -d postgres -c 'CREATE DATABASE "default";'
.github/workflows/ci-sdk.yaml
+3 -1
View File
@@ -2,6 +2,7 @@ name: CI SDK
on:
pull_request:
merge_group:
permissions:
contents: read
@@ -12,6 +13,7 @@ concurrency:
jobs:
changed-files-check:
if: github.event_name != 'merge_group'
uses: ./.github/workflows/changed-files.yaml
with:
files: |
@@ -48,7 +50,7 @@ jobs:
tasks: ${{ matrix.task }}
sdk-e2e-test:
timeout-minutes: 30
runs-on: ubuntu-latest-8-cores
runs-on: ubuntu-latest-4-cores
needs: [changed-files-check, sdk-test]
if: needs.changed-files-check.outputs.any_changed == 'true'
services:
.github/workflows/ci-server.yaml
+7 -5
View File
@@ -2,6 +2,7 @@ name: CI Server
on:
pull_request:
merge_group:
permissions:
contents: read
@@ -15,6 +16,7 @@ env:
jobs:
changed-files-check:
if: github.event_name != 'merge_group'
uses: ./.github/workflows/changed-files.yaml
with:
files: |
@@ -30,7 +32,7 @@ jobs:
needs: changed-files-check
if: needs.changed-files-check.outputs.any_changed == 'true'
timeout-minutes: 30
runs-on: ubuntu-latest-8-cores
runs-on: ubuntu-latest-4-cores
steps:
- name: Fetch custom Github Actions and base branch history
uses: actions/checkout@v4
@@ -58,7 +60,7 @@ jobs:
needs: changed-files-check
if: needs.changed-files-check.outputs.any_changed == 'true'
timeout-minutes: 30
runs-on: ubuntu-latest-8-cores
runs-on: ubuntu-latest-4-cores
steps:
- name: Fetch custom Github Actions and base branch history
uses: actions/checkout@v4
@@ -77,7 +79,7 @@ jobs:
server-validation:
needs: server-build
timeout-minutes: 30
runs-on: ubuntu-latest-8-cores
runs-on: ubuntu-latest-4-cores
services:
postgres:
image: twentycrm/twenty-postgres-spilo
@@ -177,7 +179,7 @@ jobs:
server-test:
needs: server-build
timeout-minutes: 30
runs-on: ubuntu-latest-8-cores
runs-on: ubuntu-latest-4-cores
steps:
- name: Fetch custom Github Actions and base branch history
uses: actions/checkout@v4
@@ -199,7 +201,7 @@ jobs:
server-integration-test:
timeout-minutes: 30
runs-on: ubuntu-latest-8-cores
runs-on: ubuntu-latest-4-cores
needs: server-build
strategy:
fail-fast: false
.github/workflows/ci-shared.yaml
+2
View File
@@ -2,6 +2,7 @@ name: CI Shared
on:
pull_request:
merge_group:
permissions:
contents: read
@@ -12,6 +13,7 @@ concurrency:
jobs:
changed-files-check:
if: github.event_name != 'merge_group'
uses: ./.github/workflows/changed-files.yaml
with:
files: |
.github/workflows/ci-test-docker-compose.yaml
+2
View File
@@ -5,6 +5,7 @@ permissions:
on:
pull_request:
merge_group:
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
@@ -12,6 +13,7 @@ concurrency:
jobs:
changed-files-check:
if: github.event_name != 'merge_group'
uses: ./.github/workflows/changed-files.yaml
with:
files: |
.github/workflows/ci-website.yaml
+2
View File
@@ -5,6 +5,7 @@ permissions:
on:
pull_request:
merge_group:
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
@@ -12,6 +13,7 @@ concurrency:
jobs:
changed-files-check:
if: github.event_name != 'merge_group'
uses: ./.github/workflows/changed-files.yaml
with:
files: |
.github/workflows/ci-zapier.yaml
+1 -1
View File
@@ -26,7 +26,7 @@ jobs:
needs: changed-files-check
if: needs.changed-files-check.outputs.any_changed == 'true'
timeout-minutes: 30
runs-on: ubuntu-latest-8-cores
runs-on: ubuntu-latest-4-cores
services:
postgres:
image: twentycrm/twenty-postgres-spilo
packages/twenty-e2e-testing/lib/pom/loginPage.ts
+1 -1
View File
@@ -106,7 +106,7 @@ export class LoginPage {
}
async typeEmail(email: string) {
await this.emailField.fill(email, { timeout: 10000 });
await this.emailField.fill(email, { timeout: 30000 });
}
async typePassword(email: string) {
packages/twenty-e2e-testing/tests/authentication/return-to-path.spec.ts
+15 -14
View File
@@ -9,18 +9,18 @@ const test = base.extend<{ loginPage: LoginPage }>({
});
const loginAndSelectWorkspace = async (loginPage: LoginPage, page: any) => {
await page.waitForLoadState('networkidle');
await page.waitForLoadState('domcontentloaded');
await loginPage.clickLoginWithEmailIfVisible();
await loginPage.typeEmail(process.env.DEFAULT_LOGIN!);
await loginPage.clickContinueButton();
await loginPage.typePassword(process.env.DEFAULT_PASSWORD!);
await page.waitForLoadState('networkidle');
await page.waitForLoadState('domcontentloaded');
await loginPage.clickSignInButton();
await page.waitForLoadState('networkidle');
await page.waitForLoadState('domcontentloaded');
const workspaceButton = page.getByText('Apple', { exact: true });
await workspaceButton.waitFor({ state: 'visible', timeout: 15000 }).catch(
await workspaceButton.waitFor({ state: 'visible', timeout: 30000 }).catch(
() => {
// Single workspace mode — no workspace selection
},
@@ -34,7 +34,7 @@ const loginAndSelectWorkspace = async (loginPage: LoginPage, page: any) => {
() =>
!window.location.href.includes('verify') &&
!window.location.href.includes('welcome'),
{ timeout: 15000 },
{ timeout: 30000 },
);
};
@@ -82,13 +82,13 @@ test.describe('Return-to-path after login', () => {
page,
loginPage,
}) => {
const targetPath =
'/authorize?clientId=test-client-id&redirectUrl=https%3A%2F%2Fexample.com%2Fcallback';
const targetPath = '/settings/accounts';
const targetPathWithParams = `${targetPath}?tab=emails&filter=unread`;
await test.step(
'Navigate to path with query params while logged out',
async () => {
await page.goto(targetPath);
await page.goto(targetPathWithParams);
await page.waitForURL('**/welcome');
await page.waitForLoadState('domcontentloaded');
},
@@ -101,14 +101,15 @@ test.describe('Return-to-path after login', () => {
await test.step(
'Verify redirected to original path with query params',
async () => {
await page.waitForURL('**/authorize**', { timeout: 15000 });
await page.waitForURL(`**${targetPath}**`, {
timeout: 30000,
waitUntil: 'commit',
});
const url = new URL(page.url());
expect(url.pathname).toBe('/authorize');
expect(url.searchParams.get('clientId')).toBe('test-client-id');
expect(url.searchParams.get('redirectUrl')).toBe(
'https://example.com/callback',
);
expect(url.pathname).toBe(targetPath);
expect(url.searchParams.get('tab')).toBe('emails');
expect(url.searchParams.get('filter')).toBe('unread');
},
);
});
packages/twenty-front/.oxlintrc.json
+1 -1
View File
@@ -97,7 +97,7 @@
"twenty/effect-components": "error",
"twenty/no-hardcoded-colors": "error",
"twenty/matching-state-variable": "error",
"twenty/sort-css-properties-alphabetically": "off",
"twenty/sort-css-properties-alphabetically": "error",
"twenty/styled-components-prefixed-with-styled": "error",
"twenty/no-state-useref": "error",
"twenty/component-props-naming": "error",
packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx
+2 -2
View File
@@ -35,12 +35,12 @@ const StyledSkeletonContainer = styled.div`
`;
const StyledSkeletonTitleContainer = styled.div`
align-items: flex-start;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 10px;
height: 32px;
justify-content: center;
max-width: 196px;
min-width: 196px;
packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx
+1 -1
View File
@@ -10,8 +10,8 @@ const StyledSkeletonContainer = styled.div`
display: flex;
flex-direction: column;
gap: 6px;
min-width: 196px;
max-width: 196px;
min-width: 196px;
`;
export const MainNavigationDrawerItemsSkeletonLoader = ({
packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx
+2 -2
View File
@@ -44,11 +44,11 @@ const StyledRightPanelContainer = styled.div`
`;
const StyledRightPanelFlexContainer = styled.div`
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
height: 32px;
justify-content: flex-end;
margin-bottom: 12px;
`;
packages/twenty-front/src/loading/components/SidePanelSkeletonLoader.tsx
+1 -1
View File
@@ -7,8 +7,8 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledSidePanelContainer = styled.div`
display: flex;
flex-direction: column;
width: 100%;
padding: ${themeCssVariables.spacing[4]};
width: 100%;
`;
const StyledSkeletonLoader = () => {
packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx
+2 -2
View File
@@ -16,9 +16,9 @@ const StyledContainer = styled.div`
gap: 12px;
height: 100dvh;
min-width: ${NAVIGATION_DRAWER_CONSTRAINTS.default}px;
width: 100%;
padding: 12px 8px 12px 8px;
overflow: hidden;
padding: 12px 8px 12px 8px;
width: 100%;
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: 100%;
packages/twenty-front/src/modules/action-menu/components/PageHeaderActionMenuButtons.tsx
+1 -1
View File
@@ -6,8 +6,8 @@ import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme-constants';
const StyledActionContainer = styled(motion.div)`
display: flex;
align-items: center;
display: flex;
justify-content: center;
`;
packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx
+6 -6
View File
@@ -23,13 +23,13 @@ import { IconLayoutSidebarRightExpand } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
const StyledDropdownMenuContainer = styled.div`
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
width: 100%;
`;
export const RecordIndexActionMenuDropdown = () => {
packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx
+2 -2
View File
@@ -42,15 +42,15 @@ type CalendarEventDetailsProps = {
const INPUT_ID_PREFIX = 'calendar-event-details';
const StyledContainer = styled.div`
background: ${themeCssVariables.background.secondary};
align-items: flex-start;
background: ${themeCssVariables.background.secondary};
border-bottom: 1px solid ${themeCssVariables.border.color.medium};
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[6]};
padding: ${themeCssVariables.spacing[6]};
width: 100%;
box-sizing: border-box;
`;
const StyledEventChipWrapper = styled.span`
packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx
+2 -2
View File
@@ -12,13 +12,13 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledInlineCellBaseContainer = styled.div`
align-items: center;
box-sizing: border-box;
width: 100%;
display: flex;
gap: ${themeCssVariables.spacing[1]};
position: relative;
user-select: none;
width: 100%;
`;
const StyledPropertyBoxContainer = styled.div`
packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
+5 -5
View File
@@ -25,11 +25,11 @@ type CalendarEventRowProps = {
const StyledContainer = styled.div<{ showTitle?: boolean }>`
align-items: center;
cursor: ${({ showTitle }) => (showTitle ? 'pointer' : 'not-allowed')};
display: inline-flex;
gap: ${themeCssVariables.spacing[3]};
height: ${themeCssVariables.spacing[6]};
position: relative;
cursor: ${({ showTitle }) => (showTitle ? 'pointer' : 'not-allowed')};
`;
const StyledAttendanceIndicator = styled.div<{ active?: boolean }>`
@@ -37,23 +37,23 @@ const StyledAttendanceIndicator = styled.div<{ active?: boolean }>`
active
? themeCssVariables.tag.background.red
: themeCssVariables.tag.background.gray};
border-radius: ${themeCssVariables.border.radius.xs};
height: 100%;
width: ${themeCssVariables.spacing[1]};
border-radius: ${themeCssVariables.border.radius.xs};
`;
const StyledLabels = styled.div`
align-items: center;
display: flex;
color: ${themeCssVariables.font.color.primary};
gap: ${themeCssVariables.spacing[2]};
display: flex;
flex: 1 0 auto;
gap: ${themeCssVariables.spacing[2]};
`;
const StyledTime = styled.div`
align-items: center;
display: flex;
color: ${themeCssVariables.font.color.tertiary};
display: flex;
gap: ${themeCssVariables.spacing[1]};
width: ${themeCssVariables.spacing[26]};
`;
packages/twenty-front/src/modules/activities/calendar/components/CalendarEventsCard.tsx
+1 -1
View File
@@ -34,9 +34,9 @@ const StyledContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[8]};
overflow: scroll;
padding: ${themeCssVariables.spacing[6]};
width: 100%;
overflow: scroll;
`;
const StyledYear = styled.span`
packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx
+4 -4
View File
@@ -29,12 +29,12 @@ const StyledContainer = styled.div`
const StyledChip = styled.div`
align-items: center;
display: flex;
padding: ${themeCssVariables.spacing[1]};
height: 20px;
box-sizing: border-box;
white-space: nowrap;
display: flex;
gap: ${themeCssVariables.spacing[1]};
height: 20px;
padding: ${themeCssVariables.spacing[1]};
white-space: nowrap;
`;
type ParticipantChipVariant = 'default' | 'bold';
packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx
+4 -4
View File
@@ -4,14 +4,14 @@ import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledSkeletonContainer = styled.div`
align-content: flex-start;
align-items: center;
width: 100%;
padding: ${themeCssVariables.spacing[8]};
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[4]};
flex-wrap: wrap;
align-content: flex-start;
gap: ${themeCssVariables.spacing[4]};
padding: ${themeCssVariables.spacing[8]};
width: 100%;
`;
const StyledSkeletonSubSection = styled.div`
packages/twenty-front/src/modules/activities/emails/components/EmailThreadHeader.tsx
+4 -4
View File
@@ -13,12 +13,12 @@ type EmailThreadHeaderProps = {
const StyledContainer = styled.div`
align-items: flex-start;
background: ${themeCssVariables.background.secondary};
border-bottom: 1px solid ${themeCssVariables.border.color.medium};
display: flex;
flex-direction: column;
padding: ${themeCssVariables.spacing[6]};
gap: ${themeCssVariables.spacing[6]};
border-bottom: 1px solid ${themeCssVariables.border.color.medium};
background: ${themeCssVariables.background.secondary};
padding: ${themeCssVariables.spacing[6]};
`;
const StyledHead = styled.div`
@@ -26,10 +26,10 @@ const StyledHead = styled.div`
`;
const StyledHeading = styled.h2`
color: ${themeCssVariables.font.color.primary};
margin: 0;
margin-bottom: ${themeCssVariables.spacing[3]};
max-width: 100%;
color: ${themeCssVariables.font.color.primary};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx
+1 -1
View File
@@ -21,8 +21,8 @@ const StyledThreadMessage = styled.div`
`;
const StyledThreadMessageHeader = styled.div`
display: flex;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: ${themeCssVariables.spacing[2]};
packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx
+1 -1
View File
@@ -9,8 +9,8 @@ const StyledThreadMessageBody = styled(motion.div)`
display: flex;
flex-direction: column;
margin-top: ${themeCssVariables.spacing[4]};
white-space: pre-line;
overflow-wrap: break-word;
white-space: pre-line;
a {
color: ${themeCssVariables.font.color.primary};
packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBodyPreview.tsx
+1 -1
View File
@@ -4,10 +4,10 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledThreadMessageBodyPreview = styled.div`
color: ${themeCssVariables.font.color.tertiary};
font-size: ${themeCssVariables.font.size.sm};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: ${themeCssVariables.font.size.sm};
`;
type EmailThreadMessageBodyPreviewProps = {
packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx
+1 -1
View File
@@ -18,8 +18,8 @@ const StyledEmailThreadMessageSender = styled.div`
const StyledThreadMessageSentAt = styled.div`
align-items: flex-end;
display: flex;
color: ${themeCssVariables.font.color.tertiary};
display: flex;
font-size: ${themeCssVariables.font.size.sm};
`;
packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx
+10 -10
View File
@@ -7,23 +7,23 @@ import { MessageChannelVisibility } from '~/generated/graphql';
const StyledContainer = styled.div<{ isCompact?: boolean }>`
align-items: center;
background: ${themeCssVariables.background.transparent.lighter};
border: 1px solid ${themeCssVariables.border.color.light};
border-radius: 4px;
color: ${themeCssVariables.font.color.tertiary};
display: flex;
flex: 1;
flex: ${({ isCompact }) => (isCompact ? '0 0 auto' : '1 0 0')};
font-size: ${themeCssVariables.font.size.sm};
font-weight: ${themeCssVariables.font.weight.regular};
gap: ${themeCssVariables.spacing[1]};
height: 20px;
margin-left: auto;
width: ${({ isCompact }) => (isCompact ? 'auto' : '100%')};
min-width: ${themeCssVariables.spacing[21]};
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[1]};
border-radius: 4px;
border: 1px solid ${themeCssVariables.border.color.light};
background: ${themeCssVariables.background.transparent.lighter};
color: ${themeCssVariables.font.color.tertiary};
font-weight: ${themeCssVariables.font.weight.regular};
font-size: ${themeCssVariables.font.size.sm};
flex: 1;
width: ${({ isCompact }) => (isCompact ? 'auto' : '100%')};
`;
type EmailThreadNotSharedProps = {
packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
+3 -3
View File
@@ -16,9 +16,9 @@ import { formatToHumanReadableDate } from '~/utils/date-utils';
const StyledHeading = styled.div<{ unread: boolean }>`
display: flex;
max-width: 20%;
overflow: hidden;
width: fit-content;
max-width: 20%;
`;
const StyledParticipantsContainer = styled.div`
@@ -52,17 +52,17 @@ const StyledSubjectAndBody = styled.div`
const StyledSubject = styled.span`
color: ${themeCssVariables.font.color.primary};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
const StyledBody = styled.span`
color: ${themeCssVariables.font.color.tertiary};
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
`;
const StyledReceivedAt = styled.div`
packages/twenty-front/src/modules/activities/emails/components/EmailsCard.tsx
+2 -2
View File
@@ -32,10 +32,10 @@ const StyledContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[6]};
padding: ${themeCssVariables.spacing[6]} ${themeCssVariables.spacing[6]}
${themeCssVariables.spacing[2]};
height: 100%;
overflow: auto;
padding: ${themeCssVariables.spacing[6]} ${themeCssVariables.spacing[6]}
${themeCssVariables.spacing[2]};
`;
const StyledH1TitleWrapper = styled.div`
packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx
+3 -3
View File
@@ -47,11 +47,11 @@ const StyledContainer = styled.div`
align-self: stretch;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[6]}
${themeCssVariables.spacing[6]};
width: calc(100% - ${themeCssVariables.spacing[12]});
height: 100%;
`;
const StyledTitleBar = styled.h3`
@@ -75,8 +75,8 @@ const StyledCount = styled.span`
const StyledDropZoneContainer = styled.div`
height: 100%;
width: 100%;
overflow: auto;
width: 100%;
`;
const StyledLoadingContainer = styled.div`
@@ -98,8 +98,8 @@ const StyledHeader = styled.div`
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
min-height: 40px;
width: 100%;
`;
const StyledModalTitle = styled.span`
packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx
+4 -4
View File
@@ -27,11 +27,11 @@ import { getFileNameAndExtension } from '~/utils/file/getFileNameAndExtension';
const StyledLeftContent = styled.div`
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[3]};
width: 100%;
overflow: auto;
flex: 1;
gap: ${themeCssVariables.spacing[3]};
overflow: auto;
width: 100%;
`;
const StyledRightContent = styled.div`
packages/twenty-front/src/modules/activities/files/components/DocumentViewer.tsx
+6 -6
View File
@@ -27,12 +27,12 @@ const MS_OFFICE_EXTENSIONS = [
];
const StyledDocumentViewerContainer = styled.div`
background: ${themeCssVariables.background.secondary};
display: flex;
flex-direction: column;
height: calc(100vh - 200px);
min-height: 500px;
width: 100%;
background: ${themeCssVariables.background.secondary};
#react-doc-viewer #header-bar {
display: none;
@@ -45,22 +45,22 @@ const StyledDocumentViewerContainer = styled.div`
#react-doc-viewer,
#proxy-renderer,
#msdoc-renderer {
background: none;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
overflow: auto;
background: none;
width: 100%;
}
`;
const StyledUnavailablePreviewContainer = styled.div`
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: ${themeCssVariables.spacing[4]};
height: 100%;
justify-content: center;
padding: ${themeCssVariables.spacing[8]};
text-align: center;
`;
packages/twenty-front/src/modules/activities/notes/components/NoteTile.tsx
+1 -1
View File
@@ -26,6 +26,7 @@ const StyledCard = styled.div<{ isSingleNote: boolean }>`
const StyledCardDetailsContainer = styled.div`
align-items: flex-start;
align-self: stretch;
box-sizing: border-box;
cursor: pointer;
display: flex;
flex-direction: column;
@@ -34,7 +35,6 @@ const StyledCardDetailsContainer = styled.div`
justify-content: start;
padding: ${themeCssVariables.spacing[4]};
width: calc(100% - ${themeCssVariables.spacing[8]});
box-sizing: border-box;
`;
const StyledNoteTitle = styled.div`
packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx
+2 -2
View File
@@ -14,14 +14,14 @@ type TaskListProps = {
const StyledContainer = styled.div`
align-items: flex-start;
width: 100%;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px ${themeCssVariables.spacing[6]};
width: calc(100% - ${themeCssVariables.spacing[12]});
width: 100%;
`;
const StyledTitleBar = styled.div`
packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
+4 -4
View File
@@ -23,24 +23,24 @@ const StyledTaskBody = styled.div`
color: ${themeCssVariables.font.color.tertiary};
display: flex;
max-width: calc(80% - ${themeCssVariables.spacing[2]});
text-overflow: ellipsis;
overflow: hidden;
padding-bottom: 1px;
text-overflow: ellipsis;
`;
const StyledTaskTitle = styled.div<{
completed: boolean;
}>`
align-items: center;
color: ${themeCssVariables.font.color.primary};
font-weight: ${themeCssVariables.font.weight.medium};
overflow: hidden;
padding: 0 ${themeCssVariables.spacing[2]};
padding-bottom: 1px;
text-decoration: ${({ completed }) => (completed ? 'line-through' : 'none')};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
align-items: center;
white-space: nowrap;
`;
const StyledDueDate = styled.div<{
packages/twenty-front/src/modules/activities/timeline-activities/components/EventRow.tsx
+7 -7
View File
@@ -36,30 +36,30 @@ const StyledLeftContainer = styled.div`
`;
const StyledIconContainer = styled.div`
display: flex;
align-items: center;
justify-content: center;
color: ${themeCssVariables.font.color.tertiary};
display: flex;
height: 16px;
width: 16px;
justify-content: center;
margin: 5px;
user-select: none;
text-decoration-line: underline;
user-select: none;
width: 16px;
z-index: 2;
`;
const StyledVerticalLineContainer = styled.div`
display: flex;
flex-shrink: 0;
height: 100%;
justify-content: center;
z-index: 2;
height: 100%;
`;
const StyledVerticalLine = styled.div`
background: ${themeCssVariables.border.color.light};
width: 2px;
height: 100%;
width: 2px;
`;
const StyledSummary = styled.summary`
@@ -77,10 +77,10 @@ const StyledItemContainer = styled.div<{ isMarginBottom?: boolean }>`
flex: 1;
flex-direction: column;
gap: ${themeCssVariables.spacing[1]};
overflow: hidden;
margin-bottom: ${({ isMarginBottom }) =>
isMarginBottom ? themeCssVariables.spacing[3] : '0'};
min-height: 26px;
overflow: hidden;
`;
type EventRowProps = {
packages/twenty-front/src/modules/activities/timeline-activities/components/EventsGroup.tsx
+2 -2
View File
@@ -45,9 +45,9 @@ const StyledMonthSeperator = styled.div`
align-self: stretch;
color: ${themeCssVariables.font.color.light};
display: flex;
gap: ${themeCssVariables.spacing[4]};
font-weight: ${themeCssVariables.font.weight.semiBold};
font-size: ${themeCssVariables.font.size.xs};
font-weight: ${themeCssVariables.font.weight.semiBold};
gap: ${themeCssVariables.spacing[4]};
`;
const StyledMonthSeperatorLine = styled.div`
background: ${themeCssVariables.border.color.light};
packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineCard.tsx
+4 -4
View File
@@ -23,13 +23,13 @@ const StyledMainContainer = styled.div`
border-top: none;
display: flex;
flex-direction: column;
overflow: auto;
gap: ${themeCssVariables.spacing[4]};
justify-content: center;
padding-top: ${themeCssVariables.spacing[6]};
padding-right: ${themeCssVariables.spacing[6]};
overflow: auto;
padding-left: ${themeCssVariables.spacing[6]};
gap: ${themeCssVariables.spacing[4]};
padding-right: ${themeCssVariables.spacing[6]};
padding-top: ${themeCssVariables.spacing[6]};
@media (max-width: ${MOBILE_VIEWPORT}px) {
border-top: 1px solid ${themeCssVariables.border.color.medium};
packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx
+2 -2
View File
@@ -19,11 +19,11 @@ type EventRowActivityProps = EventRowDynamicComponentProps;
const StyledLinkedActivity = styled.span`
color: ${themeCssVariables.font.color.primary};
cursor: pointer;
text-decoration: underline;
width: 100%;
overflow: hidden;
text-decoration: underline;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
`;
const StyledRowContainer = styled.div`
packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent.tsx
+7 -7
View File
@@ -43,9 +43,9 @@ const StyledCalendarEventContent = styled.div`
const StyledCalendarEventTop = styled.div`
align-items: center;
display: flex;
width: 100%;
gap: ${themeCssVariables.spacing[2]};
justify-content: space-between;
width: 100%;
`;
const StyledCalendarEventTitle = styled.div`
@@ -68,15 +68,15 @@ const StyledCalendarEventBody = styled.div`
`;
const StyledCalendarEventDateCard = styled.div`
display: flex;
padding: ${themeCssVariables.spacing[1]};
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${themeCssVariables.spacing[1]};
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[1]};
border-radius: ${themeCssVariables.spacing[1]};
border: 1px solid ${themeCssVariables.border.color.medium};
justify-content: center;
padding: ${themeCssVariables.spacing[1]};
`;
const StyledCalendarEventDateCardMonth = styled.div`
packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx
+4 -4
View File
@@ -12,9 +12,9 @@ const StyledCardContainer = styled.div`
flex-direction: column;
flex-grow: 1;
gap: ${themeCssVariables.spacing[2]};
width: 400px;
padding: ${themeCssVariables.spacing[2]} 0px ${themeCssVariables.spacing[1]}
0px;
width: 400px;
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: 300px;
@@ -22,17 +22,17 @@ const StyledCardContainer = styled.div`
`;
const StyledCardInnerContainer = styled.div`
align-items: flex-start;
align-self: stretch;
background: ${themeCssVariables.background.secondary};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${themeCssVariables.border.radius.md};
box-sizing: border-box;
display: flex;
padding: ${themeCssVariables.spacing[2]};
flex-direction: column;
align-items: flex-start;
gap: ${themeCssVariables.spacing[2]};
justify-content: center;
align-self: stretch;
padding: ${themeCssVariables.spacing[2]};
`;
export const EventCard = ({ children, isOpen }: EventCardProps) => {
packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffLabel.tsx
+1 -1
View File
@@ -10,9 +10,9 @@ type EventFieldDiffLabelProps = {
const StyledUpdatedFieldContainer = styled.div`
align-items: center;
color: ${themeCssVariables.font.color.tertiary};
display: flex;
gap: ${themeCssVariables.spacing[1]};
color: ${themeCssVariables.font.color.tertiary};
`;
const StyledUpdatedFieldIconContainer = styled.div`
packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffValue.tsx
+1 -1
View File
@@ -15,11 +15,11 @@ type EventFieldDiffValueProps = {
const StyledEventFieldDiffValue = styled.div`
align-items: center;
color: ${themeCssVariables.font.color.primary};
display: flex;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: ${themeCssVariables.font.color.primary};
`;
export const EventFieldDiffValue = ({
packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessageBodyNotShared.tsx
+7 -7
View File
@@ -8,25 +8,25 @@ const StyledEmailBodyNotSharedContainer = styled.div`
background: ${themeCssVariables.background.transparent.lighter};
border: 1px solid ${themeCssVariables.border.color.light};
border-radius: ${themeCssVariables.spacing[1]};
color: ${themeCssVariables.font.color.light};
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[3]};
height: 80px;
justify-content: center;
color: ${themeCssVariables.font.color.light};
font-size: ${themeCssVariables.font.size.sm};
font-weight: ${themeCssVariables.font.weight.medium};
gap: ${themeCssVariables.spacing[3]};
height: 80px;
justify-content: center;
width: 100%;
`;
const StyledEmailBodyNotSharedIconContainer = styled.div`
align-items: center;
display: flex;
width: calc(${themeCssVariables.icon.size.sm} * 1px);
height: calc(${themeCssVariables.icon.size.sm} * 1px);
justify-content: center;
align-items: center;
width: calc(${themeCssVariables.icon.size.sm} * 1px);
`;
const StyledEmailBodyNotShared = styled.div`
packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessageForbidden.tsx
+1 -1
View File
@@ -19,9 +19,9 @@ const StyledEmailContent = styled.div`
const StyledEmailTitle = styled.div`
color: ${themeCssVariables.font.color.primary};
font-weight: ${themeCssVariables.font.weight.medium};
display: flex;
flex-direction: column;
font-weight: ${themeCssVariables.font.weight.medium};
margin-top: ${themeCssVariables.spacing[2]};
`;
packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx
+7 -7
View File
@@ -11,23 +11,22 @@ const StyledEditorContainer = styled.div<{
minHeight: number;
maxWidth: number;
}>`
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
box-sizing: border-box;
.editor-content {
flex-grow: 1;
width: 100%;
height: 100%;
min-height: ${({ minHeight }) => minHeight}px;
width: 100%;
}
.tiptap {
padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]};
border: none !important;
box-sizing: border-box;
height: 100%;
color: ${({ readonly }) =>
readonly
? themeCssVariables.font.color.light
@@ -35,7 +34,8 @@ const StyledEditorContainer = styled.div<{
font-family: ${themeCssVariables.font.family};
font-size: ${themeCssVariables.font.size.sm};
font-weight: ${themeCssVariables.font.weight.regular};
border: none !important;
height: 100%;
padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]};
p.is-editor-empty:first-of-type::before {
${FORM_FIELD_PLACEHOLDER_STYLES}
@@ -70,8 +70,8 @@ const StyledEditorContainer = styled.div<{
}
li {
margin-bottom: ${themeCssVariables.spacing[2]};
line-height: 1.5;
margin-bottom: ${themeCssVariables.spacing[2]};
}
}
packages/twenty-front/src/modules/advanced-text-editor/components/BubbleMenuIconButton.tsx
+1 -1
View File
@@ -16,8 +16,8 @@ type BubbleMenuIconButtonProps = {
const StyledBubbleMenuIconButtonContainer = styled.div`
border: none;
border-radius: ${themeCssVariables.spacing[1.5]};
width: ${themeCssVariables.spacing[6]};
height: ${themeCssVariables.spacing[6]};
width: ${themeCssVariables.spacing[6]};
`;
export const BubbleMenuIconButton = ({
packages/twenty-front/src/modules/advanced-text-editor/components/TurnIntoBlockDropdown.tsx
+2 -2
View File
@@ -15,6 +15,7 @@ const StyledMenuItem = styled.button`
align-items: center;
background: none;
border: none;
border-radius: ${themeCssVariables.spacing[1.5]};
color: ${themeCssVariables.font.color.tertiary};
cursor: pointer;
display: flex;
@@ -22,10 +23,9 @@ const StyledMenuItem = styled.button`
font-weight: ${themeCssVariables.font.weight.regular};
gap: 4px;
height: ${themeCssVariables.spacing[6]};
padding: 0 ${themeCssVariables.spacing[1.5]};
padding: 0;
width: 100%;
padding: 0 ${themeCssVariables.spacing[1.5]};
border-radius: ${themeCssVariables.spacing[1.5]};
:hover {
background: ${themeCssVariables.background.transparent.medium};
packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowAttachmentChip.tsx
+12 -12
View File
@@ -36,22 +36,22 @@ const StyledLabel = styled.span`
`;
const StyledDelete = styled.button`
height: 20px;
width: 20px;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
cursor: pointer;
font-size: ${themeCssVariables.font.size.sm};
user-select: none;
flex-shrink: 0;
background: none;
border: none;
color: ${themeCssVariables.font.color.tertiary};
border-top-right-radius: ${themeCssVariables.border.radius.sm};
border-bottom-right-radius: ${themeCssVariables.border.radius.sm};
border-top-right-radius: ${themeCssVariables.border.radius.sm};
color: ${themeCssVariables.font.color.tertiary};
cursor: pointer;
display: flex;
flex-shrink: 0;
font-size: ${themeCssVariables.font.size.sm};
height: 20px;
justify-content: center;
margin: 0;
padding: 0;
user-select: none;
width: 20px;
&:hover {
background-color: ${themeCssVariables.background.transparent.medium};
packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowSendEmailAttachments.tsx
+4 -4
View File
@@ -31,12 +31,12 @@ const StyledUploadArea = styled.div<{ hasFiles: boolean }>`
border-radius: ${themeCssVariables.border.radius.sm};
display: flex;
flex-direction: column;
min-height: ${({ hasFiles }) => (hasFiles ? 'auto' : '24px')};
justify-content: center;
padding-top: ${themeCssVariables.spacing[1]};
min-height: ${({ hasFiles }) => (hasFiles ? 'auto' : '24px')};
padding-bottom: ${themeCssVariables.spacing[1]};
padding-left: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[2]};
padding-top: ${themeCssVariables.spacing[1]};
&:hover {
background-color: ${themeCssVariables.background.transparent.light};
@@ -52,13 +52,13 @@ const StyledChipsContainer = styled.div`
`;
const StyledUploadAreaLabel = styled.div`
justify-content: center;
color: ${themeCssVariables.font.color.secondary};
color: ${themeCssVariables.font.color.tertiary};
display: flex;
font-size: ${themeCssVariables.font.size.sm};
font-weight: ${themeCssVariables.font.weight.medium};
color: ${themeCssVariables.font.color.secondary};
gap: ${themeCssVariables.spacing[1]};
justify-content: center;
`;
export const WorkflowSendEmailAttachments = ({
packages/twenty-front/src/modules/advanced-text-editor/extensions/resizable-image/ResizableImageView.tsx
+7 -7
View File
@@ -32,21 +32,21 @@ const StyledImage = styled.img`
`;
const StyledImageHandle = styled.div<{ handle: 'left' | 'right' }>`
border-radius: ${themeCssVariables.border.radius.md};
background-color: ${themeCssVariables.background.primaryInverted};
border: 1px solid ${themeCssVariables.background.primary};
border-radius: ${themeCssVariables.border.radius.md};
cursor: col-resize;
height: ${themeCssVariables.spacing[8]};
position: absolute;
top: 50%;
transform: translateY(-50%);
width: ${themeCssVariables.spacing[2]};
z-index: 1;
left: ${({ handle }) =>
handle === 'left' ? themeCssVariables.spacing[1] : 'auto'};
position: absolute;
right: ${({ handle }) =>
handle === 'right' ? themeCssVariables.spacing[1] : 'auto'};
top: 50%;
transform: translateY(-50%);
width: ${themeCssVariables.spacing[2]};
z-index: 1;
`;
type ResizeParams = {
packages/twenty-front/src/modules/ai/components/AIChatEmptyState.tsx
+2 -2
View File
@@ -11,10 +11,10 @@ import { isDefined } from 'twenty-shared/utils';
const StyledEmptyState = styled.div`
display: flex;
flex-direction: column;
flex: 1;
justify-content: flex-end;
flex-direction: column;
height: 100%;
justify-content: flex-end;
`;
type AIChatEmptyStateProps = {
packages/twenty-front/src/modules/ai/components/AIChatErrorMessage.tsx
+1 -1
View File
@@ -27,9 +27,9 @@ const StyledErrorIcon = styled.div`
const StyledErrorContent = styled.div`
display: flex;
flex: 1;
flex-direction: column;
gap: ${themeCssVariables.spacing['0.5']};
flex: 1;
`;
const StyledErrorTitle = styled.div`
packages/twenty-front/src/modules/ai/components/AIChatMessage.tsx
+15 -15
View File
@@ -45,44 +45,44 @@ const StyledMessageText = styled.div<{ isUser?: boolean }>`
font-weight: ${({ isUser }) => (isUser ? 500 : 400)};
line-height: 1.4em;
max-width: 100%;
overflow-wrap: break-word;
padding: ${({ isUser }) =>
isUser ? `0 ${themeCssVariables.spacing[2]}` : '0'};
white-space: normal;
width: fit-content;
word-wrap: break-word;
overflow-wrap: break-word;
/* Pre-wrap within the whole container turns every newline between block
elements into extra spacing; keep normal flow and only pre-wrap code. */
white-space: normal;
word-wrap: break-word;
code {
background: ${themeCssVariables.background.tertiary};
border-radius: ${themeCssVariables.border.radius.sm};
line-height: 1.4;
max-width: 100%;
overflow: auto;
padding: 1px 3px;
white-space: pre-wrap;
word-wrap: break-word;
max-width: 100%;
line-height: 1.4;
padding: 1px 3px;
border-radius: ${themeCssVariables.border.radius.sm};
background: ${themeCssVariables.background.tertiary};
}
pre {
background: ${themeCssVariables.background.tertiary};
padding: ${themeCssVariables.spacing[2]};
border-radius: ${themeCssVariables.border.radius.sm};
overflow-x: auto;
max-width: 100%;
overflow-x: auto;
padding: ${themeCssVariables.spacing[2]};
code {
padding: 0;
border-radius: 0;
background: none;
border-radius: 0;
padding: 0;
}
}
p {
line-height: 1.4em;
margin-block: ${({ isUser }) =>
isUser ? '0' : themeCssVariables.spacing[1]};
line-height: 1.4em;
}
ul,
@@ -105,9 +105,9 @@ const StyledMessageText = styled.div<{ isUser?: boolean }>`
blockquote {
border-left: 3px solid ${themeCssVariables.border.color.medium};
color: ${themeCssVariables.font.color.secondary};
margin: ${themeCssVariables.spacing[2]} 0;
padding-left: ${themeCssVariables.spacing[2]};
color: ${themeCssVariables.font.color.secondary};
}
`;
@@ -138,8 +138,8 @@ const StyledMessageContainer = styled.div<{ isUser?: boolean }>`
const StyledFilesContainer = styled.div`
display: flex;
flex-direction: row;
gap: ${themeCssVariables.spacing[2]};
flex-wrap: wrap;
gap: ${themeCssVariables.spacing[2]};
margin-top: ${themeCssVariables.spacing[2]};
`;
packages/twenty-front/src/modules/ai/components/AIChatStandaloneError.tsx
+1 -1
View File
@@ -9,9 +9,9 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
import { isDefined } from 'twenty-shared/utils';
const StyledErrorContainer = styled.div`
align-items: flex-start;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
`;
packages/twenty-front/src/modules/ai/components/AIChatTab.tsx
+8 -8
View File
@@ -23,36 +23,36 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
const StyledContainer = styled.div<{ isDraggingFile: boolean }>`
background: ${themeCssVariables.background.primary};
display: flex;
flex-direction: column;
height: ${({ isDraggingFile }) =>
isDraggingFile ? `calc(100% - 24px)` : '100%'};
padding: ${({ isDraggingFile }) =>
isDraggingFile ? themeCssVariables.spacing[3] : '0'};
display: flex;
flex-direction: column;
`;
const StyledInputArea = styled.div<{ isMobile: boolean }>`
align-items: flex-end;
background: ${themeCssVariables.background.primary};
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[2]};
padding-inline: ${themeCssVariables.spacing[3]};
padding-block: ${({ isMobile }) =>
isMobile ? '0' : themeCssVariables.spacing[3]};
background: ${themeCssVariables.background.primary};
padding-inline: ${themeCssVariables.spacing[3]};
`;
const StyledInputBox = styled.div`
background-color: ${themeCssVariables.background.transparent.lighter};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${themeCssVariables.border.radius.sm};
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[2]};
min-height: 140px;
padding: ${themeCssVariables.spacing[2]};
width: 100%;
box-sizing: border-box;
&:focus-within {
border-color: ${themeCssVariables.color.blue};
@@ -75,11 +75,11 @@ const StyledEditorWrapper = styled.div`
font-size: ${themeCssVariables.font.size.md};
font-weight: ${themeCssVariables.font.weight.regular};
line-height: 16px;
outline: none;
padding: 0;
min-height: 48px;
max-height: 320px;
min-height: 48px;
outline: none;
overflow-y: auto;
padding: 0;
p {
margin: 0;
packages/twenty-front/src/modules/ai/components/AIChatThreadGroup.tsx
+7 -7
View File
@@ -24,17 +24,17 @@ const StyledDateHeader = styled.div`
`;
const StyledThreadItem = styled.div<{ isSelected?: boolean }>`
display: flex;
align-items: center;
gap: ${themeCssVariables.spacing[2]};
border-radius: ${themeCssVariables.border.radius.sm};
transition: all 0.2s ease;
margin-bottom: ${themeCssVariables.spacing[1]};
border-left: 3px solid transparent;
border-radius: ${themeCssVariables.border.radius.sm};
cursor: pointer;
display: flex;
gap: ${themeCssVariables.spacing[2]};
margin-bottom: ${themeCssVariables.spacing[1]};
padding: ${themeCssVariables.spacing[1]} 1px;
right: 3px;
position: relative;
right: 3px;
transition: all 0.2s ease;
width: calc(100% + 1px);
&:hover {
@@ -47,8 +47,8 @@ const StyledSparkleIcon = styled.div`
background: ${themeCssVariables.background.transparent.blue};
border-radius: ${themeCssVariables.border.radius.sm};
display: flex;
padding: ${themeCssVariables.spacing[1]};
justify-content: center;
padding: ${themeCssVariables.spacing[1]};
`;
const StyledThreadContent = styled.div`
packages/twenty-front/src/modules/ai/components/AIChatThreadsList.tsx
+3 -3
View File
@@ -29,10 +29,10 @@ const StyledThreadsContainer = styled.div`
`;
const StyledButtonsContainer = styled.div`
display: flex;
padding: ${themeCssVariables.spacing[2]} 10px;
justify-content: flex-end;
border-top: 1px solid ${themeCssVariables.border.color.medium};
display: flex;
justify-content: flex-end;
padding: ${themeCssVariables.spacing[2]} 10px;
`;
export const AIChatThreadsList = () => {
packages/twenty-front/src/modules/ai/components/LazyMarkdownRendererStyledComponents.tsx
+2 -2
View File
@@ -6,17 +6,17 @@ export const StyledMarkdownContainer = styled.div`
line-height: 150%;
margin: ${themeCssVariables.spacing['1.5']} 0;
position: relative;
scroll-margin-top: ${themeCssVariables.spacing[10]};
scroll-margin-bottom: ${themeCssVariables.spacing[10]};
scroll-margin-top: ${themeCssVariables.spacing[10]};
&:empty {
display: none;
}
.markdown-link {
-webkit-text-decoration: none;
color: ${themeCssVariables.accent.accent11};
text-decoration: none;
-webkit-text-decoration: none;
}
.markdown-link:visited {
packages/twenty-front/src/modules/ai/components/NavigationDrawerAIChatThreadsList.tsx
+1 -1
View File
@@ -14,8 +14,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledScrollableList = styled.div`
display: flex;
flex-direction: column;
flex: 1;
flex-direction: column;
min-height: 0;
overflow-y: auto;
padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[0]};
packages/twenty-front/src/modules/ai/components/ReasoningSummaryDisplay.tsx
+2 -2
View File
@@ -23,9 +23,9 @@ const StyledThinkingText = styled.div`
const StyledReasoningContainer = styled.div`
background: ${themeCssVariables.background.transparent.lighter};
border: 1px solid ${themeCssVariables.border.color.light};
border-radius: ${themeCssVariables.border.radius.sm};
padding: ${themeCssVariables.spacing[3]};
border: 1px solid ${themeCssVariables.border.color.light};
`;
const StyledReasoningText = styled.div`
@@ -54,8 +54,8 @@ const StyledToggleButton = styled.div`
`;
const StyledIconContainer = styled.div`
display: flex;
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[1]};
`;
packages/twenty-front/src/modules/ai/components/RoutingDebugDisplay.tsx
+4 -4
View File
@@ -22,13 +22,13 @@ const StyledToggleButton = styled.div`
align-items: center;
background: none;
border: none;
color: ${themeCssVariables.font.color.tertiary};
cursor: pointer;
display: flex;
color: ${themeCssVariables.font.color.tertiary};
font-size: ${themeCssVariables.font.size.sm};
gap: ${themeCssVariables.spacing[1]};
padding: ${themeCssVariables.spacing[1]} 0;
transition: color calc(${themeCssVariables.animation.duration.normal} * 1s);
font-size: ${themeCssVariables.font.size.sm};
&:hover {
color: ${themeCssVariables.font.color.secondary};
@@ -63,14 +63,14 @@ const StyledTab = styled.div<{ isActive: boolean }>`
isActive
? themeCssVariables.font.color.primary
: themeCssVariables.font.color.tertiary};
cursor: pointer;
font-size: ${themeCssVariables.font.size.sm};
font-weight: ${({ isActive }) =>
isActive
? themeCssVariables.font.weight.medium
: themeCssVariables.font.weight.regular};
cursor: pointer;
transition: color calc(${themeCssVariables.animation.duration.normal} * 1s);
padding-bottom: ${themeCssVariables.spacing[2]};
transition: color calc(${themeCssVariables.animation.duration.normal} * 1s);
&:hover {
color: ${themeCssVariables.font.color.secondary};
packages/twenty-front/src/modules/ai/components/RoutingStatusDisplay.tsx
+2 -2
View File
@@ -18,9 +18,9 @@ const StyledToggleButton = styled.div<{ isExpandable: boolean }>`
align-items: center;
background: none;
border: none;
color: ${themeCssVariables.font.color.tertiary};
cursor: ${({ isExpandable }) => (isExpandable ? 'pointer' : 'auto')};
display: flex;
color: ${themeCssVariables.font.color.tertiary};
gap: ${themeCssVariables.spacing[1]};
padding: ${themeCssVariables.spacing[1]} 0;
transition: color calc(${themeCssVariables.animation.duration.normal} * 1s);
@@ -40,8 +40,8 @@ const StyledDisplayMessage = styled.span`
`;
const StyledIconTextContainer = styled.div`
display: flex;
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[1]};
svg {
packages/twenty-front/src/modules/ai/components/ShimmeringText.tsx
+5 -5
View File
@@ -2,6 +2,9 @@ import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledShimmeringText = styled.div`
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer-wave 1s infinite linear;
background: ${themeCssVariables.font.color.light}
linear-gradient(
90deg,
@@ -9,13 +12,10 @@ const StyledShimmeringText = styled.div`
${themeCssVariables.font.color.primary} 50%,
${themeCssVariables.font.color.light} 100%
);
background-size: 200% 100%;
background-clip: text;
background-position: -200% top;
background-repeat: no-repeat;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer-wave 1s infinite linear;
background-size: 200% 100%;
@keyframes shimmer-wave {
0% {
packages/twenty-front/src/modules/ai/components/TerminalOutput.tsx
+1 -1
View File
@@ -7,9 +7,9 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';
const StyledContainer = styled.div`
border-radius: ${themeCssVariables.border.radius.sm};
display: flex;
flex-direction: column;
border-radius: ${themeCssVariables.border.radius.sm};
overflow: hidden;
`;
packages/twenty-front/src/modules/ai/components/ThinkingStepsDisplay.tsx
+1 -1
View File
@@ -41,8 +41,8 @@ const StyledStepsContentContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[1]};
padding-top: ${themeCssVariables.spacing[1]};
padding-bottom: ${themeCssVariables.spacing[2]};
padding-top: ${themeCssVariables.spacing[1]};
`;
const StyledSummaryText = styled.span`
packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx
+7 -7
View File
@@ -48,14 +48,14 @@ const StyledToggleButton = styled.div<{ isExpandable: boolean }>`
align-items: center;
background: none;
border: none;
color: ${themeCssVariables.font.color.tertiary};
cursor: ${({ isExpandable }) => (isExpandable ? 'pointer' : 'auto')};
display: flex;
color: ${themeCssVariables.font.color.tertiary};
gap: ${themeCssVariables.spacing[1]};
justify-content: space-between;
padding: ${themeCssVariables.spacing[1]} 0;
transition: color calc(${themeCssVariables.animation.duration.fast} * 1s)
ease-in-out;
justify-content: space-between;
width: 100%;
&:hover {
@@ -73,14 +73,14 @@ const StyledToolName = styled.span`
`;
const StyledLeftContent = styled.div`
display: flex;
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[1]};
`;
const StyledRightContent = styled.div`
display: flex;
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[2]};
`;
@@ -91,8 +91,8 @@ const StyledDisplayMessage = styled.span`
`;
const StyledIconTextContainer = styled.div`
display: flex;
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[1]};
svg {
@@ -112,15 +112,15 @@ const StyledTab = styled.div<{ isActive: boolean }>`
isActive
? themeCssVariables.font.color.primary
: themeCssVariables.font.color.tertiary};
cursor: pointer;
font-size: ${themeCssVariables.font.size.sm};
font-weight: ${({ isActive }) =>
isActive
? themeCssVariables.font.weight.medium
: themeCssVariables.font.weight.regular};
cursor: pointer;
padding-bottom: ${themeCssVariables.spacing[2]};
transition: color calc(${themeCssVariables.animation.duration.fast} * 1s)
ease-in-out;
padding-bottom: ${themeCssVariables.spacing[2]};
&:hover {
color: ${themeCssVariables.font.color.primary};
packages/twenty-front/src/modules/ai/components/internal/AIChatContextUsageButton.tsx
+2 -2
View File
@@ -43,11 +43,11 @@ const StyledHoverCard = styled.div`
background: ${themeCssVariables.background.primary};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${themeCssVariables.border.radius.md};
bottom: calc(100% + 8px);
box-shadow: ${themeCssVariables.boxShadow.strong};
left: 0;
min-width: 280px;
position: absolute;
left: 0;
bottom: calc(100% + 8px);
z-index: ${themeCssVariables.lastLayerZIndex};
`;
packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx
+7 -7
View File
@@ -21,17 +21,17 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
import { AnimatedEaseIn } from 'twenty-ui/utilities';
const StyledContainer = styled.div`
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
gap: ${themeCssVariables.spacing[8]};
width: 100%;
`;
const StyledTextContainer = styled.div`
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
`;
@@ -40,12 +40,12 @@ const StyledEmail = styled.span`
`;
const StyledButtonsContainer = styled.div`
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
gap: ${themeCssVariables.spacing[3]};
width: 100%;
max-width: 240px;
width: 100%;
`;
const StyledBottomLinks = styled.div`
@@ -59,20 +59,20 @@ const StyledBottomLinks = styled.div`
const StyledLinkButton = styled.button`
background: none;
border: none;
color: ${themeCssVariables.font.color.tertiary};
cursor: pointer;
font-family: ${themeCssVariables.font.family};
font-size: ${themeCssVariables.font.size.xs};
font-weight: ${themeCssVariables.font.weight.regular};
line-height: 140%;
color: ${themeCssVariables.font.color.tertiary};
cursor: pointer;
&:hover {
color: ${themeCssVariables.font.color.secondary};
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
opacity: 0.5;
}
`;
packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx
+12 -12
View File
@@ -61,16 +61,16 @@ const StyledWorkspaceContainer = styled.div`
`;
const StyledWorkspaceItem = styled.div`
align-items: center;
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: ${themeCssVariables.spacing[15]};
padding: 0;
justify-content: space-between;
overflow: hidden;
cursor: pointer;
justify-content: space-between;
padding: 0;
width: 100%;
&:hover {
background-color: ${themeCssVariables.background.transparent.light};
@@ -85,8 +85,8 @@ const StyledWorkspaceContent = styled.div`
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[4]};
width: 100%;
padding: 0 ${themeCssVariables.spacing[4]};
width: 100%;
`;
const StyledWorkspaceTextContainer = styled.div`
@@ -96,13 +96,13 @@ const StyledWorkspaceTextContainer = styled.div`
`;
const StyledWorkspaceLogo = styled.div`
border-radius: ${themeCssVariables.border.radius.sm};
height: ${themeCssVariables.spacing[6]};
width: ${themeCssVariables.spacing[6]};
background-color: ${themeCssVariables.background.transparent.light};
display: flex;
justify-content: center;
align-items: center;
background-color: ${themeCssVariables.background.transparent.light};
border-radius: ${themeCssVariables.border.radius.sm};
display: flex;
height: ${themeCssVariables.spacing[6]};
justify-content: center;
width: ${themeCssVariables.spacing[6]};
`;
const StyledWorkspaceName = styled.div`
packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationProvision.tsx
+4 -4
View File
@@ -25,12 +25,12 @@ const StyledMainContentContainer = styled.div`
const StyledTextContainer = styled.div`
align-items: center;
margin-bottom: ${themeCssVariables.spacing[4]};
color: ${themeCssVariables.font.color.tertiary};
font-size: ${themeCssVariables.font.size.sm};
margin-bottom: ${themeCssVariables.spacing[4]};
max-width: 280px;
text-align: center;
font-size: ${themeCssVariables.font.size.sm};
& > a {
color: ${themeCssVariables.font.color.tertiary};
@@ -50,14 +50,14 @@ const StyledForm = styled.div`
`;
const StyledCopySetupKeyLink = styled.button`
align-items: center;
background: none;
border: none;
color: ${themeCssVariables.font.color.secondary};
cursor: pointer;
display: flex;
align-items: center;
gap: ${themeCssVariables.spacing[1]};
font-size: ${themeCssVariables.font.size.sm};
gap: ${themeCssVariables.spacing[1]};
margin-top: ${themeCssVariables.spacing[2]};
padding: 0;
text-decoration: underline;
packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationVerification.tsx
+24 -24
View File
@@ -39,27 +39,30 @@ const StyledForm = styled.form`
`;
const StyledSlot = styled.div<{ isActive: boolean }>`
position: relative;
width: 2.5rem;
height: 3.5rem;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
border-top: 1px solid ${themeCssVariables.border.color.medium};
border-bottom: 1px solid ${themeCssVariables.border.color.medium};
border-right: 1px solid ${themeCssVariables.border.color.medium};
border-top: 1px solid ${themeCssVariables.border.color.medium};
display: flex;
font-size: 2rem;
height: 3.5rem;
justify-content: center;
outline-color: ${({ isActive }) =>
isActive
? themeCssVariables.border.color.strong
: themeCssVariables.border.color.medium};
outline-style: ${({ isActive }) => (isActive ? 'solid' : 'none')};
outline-width: ${({ isActive }) => (isActive ? '1px' : '0')};
&:first-of-type {
border-bottom-left-radius: 0.375rem;
border-left: 1px solid ${themeCssVariables.border.color.medium};
border-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
}
&:last-of-type {
border-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
border-top-right-radius: 0.375rem;
}
.group:hover &,
@@ -67,12 +70,9 @@ const StyledSlot = styled.div<{ isActive: boolean }>`
border-color: ${themeCssVariables.border.color.medium};
}
outline-width: ${({ isActive }) => (isActive ? '1px' : '0')};
outline-style: ${({ isActive }) => (isActive ? 'solid' : 'none')};
outline-color: ${({ isActive }) =>
isActive
? themeCssVariables.border.color.strong
: themeCssVariables.border.color.medium};
position: relative;
transition: all 0.3s;
width: 2.5rem;
`;
const StyledPlaceholderChar = styled.div`
@@ -113,9 +113,9 @@ const StyledCaretContainer = styled.div`
`;
const StyledCaret = styled.div`
width: 1px;
height: 2rem;
background-color: ${themeCssVariables.font.color.light};
height: 2rem;
width: 1px;
`;
const FakeCaret = () => {
@@ -127,10 +127,10 @@ const FakeCaret = () => {
};
const StyledDashContainer = styled.div`
display: flex;
width: 2.5rem;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
width: 2.5rem;
`;
const StyledDash = styled.div`
@@ -149,8 +149,8 @@ const FakeDash = () => {
};
const StyledOTPContainer = styled.div`
display: flex;
align-items: center;
display: flex;
&:has(:disabled) {
opacity: 0.3;
@@ -162,12 +162,12 @@ const StyledSlotGroup = styled.div`
`;
const StyledTextContainer = styled.div`
align-items: center;
margin-bottom: ${themeCssVariables.spacing[4]};
color: ${themeCssVariables.font.color.tertiary};
font-size: ${themeCssVariables.font.size.sm};
margin-bottom: ${themeCssVariables.spacing[4]};
max-width: 280px;
text-align: center;
font-size: ${themeCssVariables.font.size.sm};
`;
const StyledActionBackLinkContainer = styled.div`
packages/twenty-front/src/modules/billing/components/TrialCard.tsx
+2 -2
View File
@@ -14,15 +14,15 @@ const StyledTrialCardContainer = styled.div`
const StyledTrialDurationContainer = styled.div`
color: ${themeCssVariables.font.color.secondary};
font-size: ${themeCssVariables.font.size.md};
display: flex;
font-size: ${themeCssVariables.font.size.md};
margin-bottom: ${themeCssVariables.spacing[2]};
`;
const StyledCreditCardRequirementContainer = styled.div`
color: ${themeCssVariables.font.color.tertiary};
font-size: ${themeCssVariables.font.size.md};
display: flex;
font-size: ${themeCssVariables.font.size.md};
`;
export const TrialCard = ({ duration, withCreditCard }: TrialCardProps) => {
packages/twenty-front/src/modules/billing/components/internal/SubscriptionInfoRowContainer.tsx
+3 -3
View File
@@ -13,22 +13,22 @@ type SubscriptionInfoRowContainerProps = {
const StyledContainer = styled.div`
align-items: center;
gap: ${themeCssVariables.spacing[1]};
color: ${themeCssVariables.font.color.primary};
display: grid;
gap: ${themeCssVariables.spacing[1]};
grid-template-columns: repeat(3, 1fr);
`;
const StyledIconLabelContainer = styled.div`
align-items: center;
gap: ${themeCssVariables.spacing[1]};
color: ${themeCssVariables.font.color.tertiary};
display: flex;
gap: ${themeCssVariables.spacing[1]};
`;
const StyledLabelContainer = styled.div`
text-overflow: ellipsis;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx
+27 -27
View File
@@ -29,8 +29,8 @@ const StyledEditor = styled.div`
& .editor {
background: transparent;
font-size: 13px;
color: ${themeCssVariables.font.color.primary};
font-size: 13px;
min-height: 400px;
}
& .editor [class^='_inlineContent']:before {
@@ -41,30 +41,30 @@ const StyledEditor = styled.div`
font-style: normal;
}
& .mantine-ActionIcon-icon {
background: transparent;
height: 20px;
width: 20px;
background: transparent;
}
& .bn-container .bn-drag-handle {
width: 20px;
height: 20px;
width: 20px;
}
& .bn-block-content[data-content-type='checkListItem'] > div > div {
display: flex;
align-items: center;
display: flex;
}
& .bn-drag-handle-menu {
background: ${themeCssVariables.background.transparent.secondary};
backdrop-filter: ${themeCssVariables.blur.medium};
background: ${themeCssVariables.background.transparent.secondary};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: 8px;
box-shadow:
0px 2px 4px rgba(0, 0, 0, 0.04),
2px 4px 16px rgba(0, 0, 0, 0.12);
min-width: 160px;
min-height: 96px;
padding: 4px;
border-radius: 8px;
border: 1px solid ${themeCssVariables.border.color.medium};
left: 26px;
min-height: 96px;
min-width: 160px;
padding: 4px;
}
& .bn-editor {
@@ -80,30 +80,30 @@ const StyledEditor = styled.div`
}
& .bn-suggestion-menu {
padding: 4px;
border-radius: 8px;
border: 1px solid ${themeCssVariables.border.color.medium};
background: ${themeCssVariables.background.transparent.secondary};
backdrop-filter: ${themeCssVariables.blur.medium};
background: ${themeCssVariables.background.transparent.secondary};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: 8px;
padding: 4px;
}
& .mantine-Menu-item {
background-color: transparent;
min-width: 152px;
min-height: 32px;
color: ${themeCssVariables.font.color.secondary};
font-family: ${themeCssVariables.font.family};
font-style: normal;
font-family: ${themeCssVariables.font.family};
font-weight: ${themeCssVariables.font.weight.regular};
color: ${themeCssVariables.font.color.secondary};
min-height: 32px;
min-width: 152px;
}
& .mantine-ActionIcon-root:hover {
backdrop-filter: blur(20px);
background: ${themeCssVariables.background.transparent.primary};
border: 1px solid ${themeCssVariables.border.color.light};
box-shadow:
0px 0px 4px rgba(0, 0, 0, 0.08),
0px 2px 4px rgba(0, 0, 0, 0.04);
background: ${themeCssVariables.background.transparent.primary};
backdrop-filter: blur(20px);
border: 1px solid ${themeCssVariables.border.color.light};
}
& .bn-side-menu .mantine-UnstyledButton-root:not(.mantine-Menu-item) svg {
height: 16px;
@@ -122,13 +122,13 @@ const StyledEditor = styled.div`
}
& .bn-inline-content code {
font-family: monospace;
color: ${themeCssVariables.font.color.danger};
padding: 2px 4px;
border-radius: 4px;
border: 1px solid ${themeCssVariables.font.color.extraLight};
font-size: 0.9rem;
background-color: ${themeCssVariables.background.transparent.light};
border: 1px solid ${themeCssVariables.font.color.extraLight};
border-radius: 4px;
color: ${themeCssVariables.font.color.danger};
font-family: monospace;
font-size: 0.9rem;
padding: 2px 4px;
}
`;
packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenuOptions.tsx
+1 -1
View File
@@ -4,9 +4,9 @@ import { type IconComponent } from 'twenty-ui/display';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div<{ Variant: Variants }>`
align-items: center;
color: ${({ Variant }) =>
Variant === 'danger' ? themeCssVariables.color.red : 'inherit'};
align-items: center;
display: flex;
flex-direction: row;
gap: ${themeCssVariables.spacing[2]};
packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx
+2 -2
View File
@@ -28,6 +28,8 @@ const StyledCommandMenuBase = styled.div`
background: ${themeCssVariables.background.primary};
border-left: 1px solid ${themeCssVariables.border.color.medium};
box-shadow: ${themeCssVariables.boxShadow.strong};
display: flex;
flex-direction: column;
font-family: ${themeCssVariables.font.family};
height: 100%;
overflow: hidden;
@@ -36,8 +38,6 @@ const StyledCommandMenuBase = styled.div`
right: 0%;
top: 0%;
z-index: ${RootStackingContextZIndices.SidePanel};
display: flex;
flex-direction: column;
`;
const StyledCommandMenu = motion.create(StyledCommandMenuBase);
packages/twenty-front/src/modules/error-handler/components/AppFullScreenErrorFallback.tsx
+2 -2
View File
@@ -12,9 +12,9 @@ const StyledContainer = styled.div`
box-sizing: border-box;
display: flex;
height: 100vh;
width: 100vw;
padding-top: ${themeCssVariables.spacing[3]};
padding-left: ${themeCssVariables.spacing[3]};
padding-top: ${themeCssVariables.spacing[3]};
width: 100vw;
`;
export const AppFullScreenErrorFallback = ({
packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx
+7 -7
View File
@@ -12,8 +12,8 @@ const StyledContainer = styled.div`
box-sizing: border-box;
display: flex;
height: 100vh;
width: 100vw;
padding: 12px;
width: 100vw;
`;
const StyledPanel = styled.div`
@@ -28,18 +28,18 @@ const StyledPanel = styled.div`
const StyledEmptyContainer = styled.div`
align-items: center;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 24px;
height: 100%;
justify-content: center;
text-align: center;
width: 100%;
`;
const StyledImageContainer = styled.div`
display: flex;
align-items: center;
display: flex;
justify-content: center;
position: relative;
`;
@@ -51,8 +51,8 @@ const StyledBackgroundImage = styled.img`
const StyledInnerImage = styled.img`
max-height: 130px;
position: absolute;
max-width: 130px;
position: absolute;
`;
const StyledEmptyTextContainer = styled.div`
@@ -85,12 +85,12 @@ const StyledButton = styled.button`
align-items: center;
background: ${themeCssVariables.grayScale.gray1};
border: 1px solid ${themeCssVariables.grayScale.gray5};
color: ${themeCssVariables.grayScale.gray12};
border-radius: 8px;
color: ${themeCssVariables.grayScale.gray12};
cursor: pointer;
display: flex;
padding: 8px 16px;
padding: 8px;
padding: 8px 16px;
`;
const StyledIconContainer = styled.span`
packages/twenty-front/src/modules/favorites/components/FavoritesBackButton.tsx
+9 -9
View File
@@ -6,21 +6,21 @@ import { useContext } from 'react';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledBackButton = styled.button`
display: flex;
align-items: center;
gap: ${themeCssVariables.spacing[2]};
padding-left: ${themeCssVariables.spacing[1]};
padding-right: ${themeCssVariables.spacing[0.5]};
padding-top: ${themeCssVariables.spacing[1]};
padding-bottom: ${themeCssVariables.spacing[1]};
width: 100%;
background: transparent;
border: none;
color: ${themeCssVariables.font.color.secondary};
font-weight: ${themeCssVariables.font.weight.medium};
font-family: ${themeCssVariables.font.family};
cursor: pointer;
display: flex;
font-family: ${themeCssVariables.font.family};
font-weight: ${themeCssVariables.font.weight.medium};
gap: ${themeCssVariables.spacing[2]};
padding-bottom: ${themeCssVariables.spacing[1]};
padding-left: ${themeCssVariables.spacing[1]};
padding-right: ${themeCssVariables.spacing[0.5]};
padding-top: ${themeCssVariables.spacing[1]};
text-align: left;
width: 100%;
&:hover {
background: ${themeCssVariables.background.transparent.light};
packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx
+2 -2
View File
@@ -25,11 +25,11 @@ const StyledCloseButtonContainer = styled.div`
const StyledContent = styled.div<{ hasCloseButton: boolean }>`
align-items: center;
justify-content: center;
display: flex;
flex: 1;
margin-left: ${({ hasCloseButton }) => (hasCloseButton ? '24px' : '0')};
gap: ${themeCssVariables.spacing[3]};
justify-content: center;
margin-left: ${({ hasCloseButton }) => (hasCloseButton ? '24px' : '0')};
`;
export const InformationBanner = ({
packages/twenty-front/src/modules/navigation-menu-item/components/AddToNavigationDragHandle.tsx
+1 -1
View File
@@ -16,9 +16,9 @@ const StyledIconSlot = styled.div<{ $hasFixedSize: boolean }>`
cursor: grab;
display: flex;
flex-shrink: 0;
justify-content: center;
height: ${({ $hasFixedSize }) =>
$hasFixedSize ? themeCssVariables.spacing[4] : 'auto'};
justify-content: center;
width: ${({ $hasFixedSize }) =>
$hasFixedSize ? themeCssVariables.spacing[4] : 'auto'};
packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemBackButton.tsx
+9 -9
View File
@@ -7,21 +7,21 @@ import { currentNavigationMenuItemFolderIdState } from '@/ui/navigation/navigati
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
const StyledBackButton = styled.button`
display: flex;
align-items: center;
gap: ${themeCssVariables.spacing[2]};
padding-left: ${themeCssVariables.spacing[1]};
padding-right: ${themeCssVariables.spacing[0.5]};
padding-top: ${themeCssVariables.spacing[1]};
padding-bottom: ${themeCssVariables.spacing[1]};
width: 100%;
background: transparent;
border: none;
color: ${themeCssVariables.font.color.secondary};
font-weight: ${themeCssVariables.font.weight.medium};
font-family: ${themeCssVariables.font.family};
cursor: pointer;
display: flex;
font-family: ${themeCssVariables.font.family};
font-weight: ${themeCssVariables.font.weight.medium};
gap: ${themeCssVariables.spacing[2]};
padding-bottom: ${themeCssVariables.spacing[1]};
padding-left: ${themeCssVariables.spacing[1]};
padding-right: ${themeCssVariables.spacing[0.5]};
padding-top: ${themeCssVariables.spacing[1]};
text-align: left;
width: 100%;
&:hover {
background: ${themeCssVariables.background.transparent.light};
packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemIconContainer.tsx
+5 -5
View File
@@ -6,16 +6,16 @@ export const StyledNavigationMenuItemIconContainer = styled.div<{
$borderColor?: string;
}>`
align-items: center;
background-color: ${({ $backgroundColor }) =>
$backgroundColor ?? 'transparent'};
border: ${({ $borderColor }) =>
$borderColor ? `1px solid ${$borderColor}` : 'none'};
border-radius: 4px;
box-sizing: border-box;
display: flex;
flex-shrink: 0;
height: ${themeCssVariables.spacing[4]};
justify-content: center;
width: ${themeCssVariables.spacing[4]};
background-color: ${({ $backgroundColor }) =>
$backgroundColor ?? 'transparent'};
border: ${({ $borderColor }) =>
$borderColor ? `1px solid ${$borderColor}` : 'none'};
`;
packages/twenty-front/src/modules/navigation-menu-item/components/ObjectIconWithViewOverlay.tsx
+7 -7
View File
@@ -21,16 +21,16 @@ const StyledObjectIconWrapper = styled.div<{
$backgroundColor: string;
$borderColor?: string;
}>`
position: absolute;
inset: 0;
border-radius: 4px;
box-sizing: border-box;
background-color: ${({ $backgroundColor }) => $backgroundColor};
display: flex;
align-items: center;
justify-content: center;
background-color: ${({ $backgroundColor }) => $backgroundColor};
border: ${({ $borderColor }) =>
$borderColor ? `1px solid ${$borderColor}` : 'none'};
border-radius: 4px;
box-sizing: border-box;
display: flex;
inset: 0;
justify-content: center;
position: absolute;
`;
const StyledViewOverlay = styled.div<{ $backgroundColor: string }>`
packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerAIChatContent.tsx
+1 -1
View File
@@ -4,8 +4,8 @@ import { NavigationDrawerAIChatThreadsList } from '@/ai/components/NavigationDra
const StyledAIChatThreadsListWrapper = styled.div`
display: flex;
flex-direction: column;
flex: 1;
flex-direction: column;
min-height: 0;
`;
packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx
+20 -20
View File
@@ -27,40 +27,40 @@ import { FeatureFlagKey } from '~/generated-metadata/graphql';
const StyledRow = styled.div<{ isExpanded: boolean }>`
align-items: center;
display: flex;
gap: ${({ isExpanded }) => (isExpanded ? themeCssVariables.spacing[2] : 0)};
justify-content: ${({ isExpanded }) =>
isExpanded ? 'space-between' : 'center'};
gap: ${({ isExpanded }) => (isExpanded ? themeCssVariables.spacing[2] : 0)};
width: 100%;
transition: gap calc(${themeCssVariables.animation.duration.normal} * 1s) ease;
width: 100%;
`;
const StyledTabsPill = styled.div`
align-items: center;
border: 1px solid ${themeCssVariables.border.color.medium};
background: ${themeCssVariables.background.secondary};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${themeCssVariables.border.radius.pill};
padding: 3px;
height: ${themeCssVariables.spacing[7]};
display: flex;
width: ${themeCssVariables.spacing[18]};
gap: ${themeCssVariables.spacing[0.5]};
box-sizing: border-box;
display: flex;
gap: ${themeCssVariables.spacing[0.5]};
height: ${themeCssVariables.spacing[7]};
padding: 3px;
width: ${themeCssVariables.spacing[18]};
`;
const StyledTabWrapper = styled.div<{ isActive: boolean }>`
border-radius: ${themeCssVariables.border.radius.pill};
align-items: center;
background: ${({ isActive }) =>
isActive ? themeCssVariables.background.transparent.light : 'transparent'};
border-radius: ${themeCssVariables.border.radius.pill};
color: ${({ isActive }) =>
isActive
? themeCssVariables.font.color.primary
: themeCssVariables.font.color.tertiary};
cursor: pointer;
display: flex;
justify-content: center;
height: 100%;
flex: 1;
height: 100%;
justify-content: center;
&:hover {
background: ${({ isActive }) =>
@@ -73,15 +73,15 @@ const StyledTabWrapper = styled.div<{ isActive: boolean }>`
const StyledTabIcon = styled.div`
align-items: center;
display: flex;
justify-content: center;
height: ${themeCssVariables.spacing[5]};
justify-content: center;
width: ${themeCssVariables.spacing[5]};
`;
const StyledNewChatButtonWrapper = styled.div<{ isExpanded: boolean }>`
align-items: center;
border: 1px solid ${themeCssVariables.border.color.medium};
background: ${themeCssVariables.background.secondary};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${themeCssVariables.border.radius.pill};
box-sizing: border-box;
display: flex;
@@ -90,28 +90,28 @@ const StyledNewChatButtonWrapper = styled.div<{ isExpanded: boolean }>`
justify-content: center;
padding: ${({ isExpanded }) =>
isExpanded ? '3px' : themeCssVariables.spacing[0.5]};
width: ${({ isExpanded }) =>
isExpanded ? '103px' : themeCssVariables.spacing[6]};
transition:
height calc(${themeCssVariables.animation.duration.normal} * 1s) ease,
padding calc(${themeCssVariables.animation.duration.normal} * 1s) ease;
width: ${({ isExpanded }) =>
isExpanded ? '103px' : themeCssVariables.spacing[6]};
`;
const StyledNewChatButton = styled.div`
align-items: center;
justify-content: center;
display: flex;
border-radius: inherit;
color: ${themeCssVariables.font.color.secondary};
cursor: pointer;
display: flex;
font-size: ${themeCssVariables.font.size.sm};
font-weight: ${themeCssVariables.font.weight.medium};
gap: ${themeCssVariables.spacing[1]};
height: 100%;
width: 100%;
border-radius: inherit;
color: ${themeCssVariables.font.color.secondary};
justify-content: center;
transition:
background calc(${themeCssVariables.animation.duration.fast} * 1s) ease,
color calc(${themeCssVariables.animation.duration.fast} * 1s) ease;
width: 100%;
&:hover {
background: ${themeCssVariables.background.transparent.light};
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownRow.tsx
+1 -1
View File
@@ -3,8 +3,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledRow = styled.div`
display: flex;
width: 100%;
gap: ${themeCssVariables.spacing[1]};
width: 100%;
`;
export const AdvancedFilterDropdownRow = StyledRow;
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectSearchInput.tsx
+6 -6
View File
@@ -7,22 +7,22 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
export const StyledInput = styled.input`
background: transparent;
border: none;
border-top: none;
border-bottom: 1px solid ${themeCssVariables.border.color.light};
border-radius: 0;
border-top: none;
border-top-left-radius: ${themeCssVariables.border.radius.md};
border-top-right-radius: ${themeCssVariables.border.radius.md};
color: ${themeCssVariables.font.color.primary};
margin: 0;
outline: none;
padding: ${themeCssVariables.spacing[2]};
min-height: 19px;
font-family: inherit;
font-size: ${themeCssVariables.font.size.sm};
font-weight: inherit;
margin: 0;
max-width: 100%;
min-height: 19px;
outline: none;
overflow: hidden;
padding: ${themeCssVariables.spacing[2]};
text-decoration: none;
&::placeholder {
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell.tsx
+3 -3
View File
@@ -7,18 +7,18 @@ import { capitalize } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledText = styled.div`
height: ${themeCssVariables.spacing[8]};
display: flex;
align-items: center;
display: flex;
height: ${themeCssVariables.spacing[8]};
padding-left: 9px;
`;
const StyledContainer = styled.div`
align-items: start;
color: ${themeCssVariables.font.color.tertiary};
display: flex;
min-width: ${themeCssVariables.spacing[20]};
color: ${themeCssVariables.font.color.tertiary};
`;
type AdvancedFilterLogicalOperatorCellProps = {
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInputDropdownButtonClickableSelect.tsx
+6 -6
View File
@@ -15,18 +15,18 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
// TODO: factorize this with https://github.com/twentyhq/core-team-issues/issues/752
const StyledControlContainer = styled.div`
display: flex;
align-items: center;
gap: ${themeCssVariables.spacing[1]};
box-sizing: border-box;
height: ${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-radius: ${themeCssVariables.border.radius.sm};
box-sizing: border-box;
color: ${themeCssVariables.font.color.primary};
cursor: pointer;
display: flex;
gap: ${themeCssVariables.spacing[1]};
height: ${themeCssVariables.spacing[8]};
max-width: 100%;
padding: 0 ${themeCssVariables.spacing[2]};
text-align: left;
`;
packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelColumn.tsx
+1 -1
View File
@@ -4,8 +4,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledColumn = styled.div`
display: flex;
flex-direction: column;
width: 100%;
gap: ${themeCssVariables.spacing[1]};
width: 100%;
`;
export const AdvancedFilterSidePanelColumn = StyledColumn;
packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelLogicalOperatorCell.tsx
+1 -1
View File
@@ -21,9 +21,9 @@ const StyledText = styled.div`
const StyledContainer = styled.div`
align-items: start;
color: ${themeCssVariables.font.color.tertiary};
display: flex;
min-width: ${themeCssVariables.spacing[20]};
color: ${themeCssVariables.font.color.tertiary};
`;
type AdvancedFilterSidePanelLogicalOperatorCellProps = {
packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterColumn.tsx
+1 -1
View File
@@ -18,8 +18,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
gap: ${themeCssVariables.spacing[1]};
justify-content: space-between;
`;
type AdvancedFilterSidePanelRecordFilterColumnProps = {
packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterGroupColumn.tsx
+1 -1
View File
@@ -12,8 +12,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
gap: ${themeCssVariables.spacing[1]};
justify-content: space-between;
`;
export const AdvancedFilterSidePanelRecordFilterGroupColumn = ({

Some files were not shown because too many files have changed in this diff Show More