From ef499b6d475be85c3f24002d6d0b90c030ca19e1 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Fri, 6 Mar 2026 14:33:02 +0100 Subject: [PATCH] Re-enable disabled lint rules and right-size CI runners (#18461) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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 --- .github/actions/nx-affected/action.yaml | 5 ++ .github/workflows/ci-emails.yaml | 2 +- .github/workflows/ci-front.yaml | 30 +------- .github/workflows/ci-merge-queue.yaml | 24 +++++- .github/workflows/ci-sdk.yaml | 4 +- .github/workflows/ci-server.yaml | 12 +-- .github/workflows/ci-shared.yaml | 2 + .github/workflows/ci-test-docker-compose.yaml | 2 + .github/workflows/ci-website.yaml | 2 + .github/workflows/ci-zapier.yaml | 2 +- .../twenty-e2e-testing/lib/pom/loginPage.ts | 2 +- .../authentication/return-to-path.spec.ts | 29 ++++---- packages/twenty-front/.oxlintrc.json | 2 +- .../components/LeftPanelSkeletonLoader.tsx | 4 +- ...ainNavigationDrawerItemsSkeletonLoader.tsx | 2 +- .../components/RightPanelSkeletonLoader.tsx | 4 +- .../components/SidePanelSkeletonLoader.tsx | 2 +- .../components/UserOrMetadataLoader.tsx | 4 +- .../PageHeaderActionMenuButtons.tsx | 2 +- .../RecordIndexActionMenuDropdown.tsx | 12 +-- .../components/CalendarEventDetails.tsx | 4 +- ...arEventParticipantsResponseStatusField.tsx | 4 +- .../calendar/components/CalendarEventRow.tsx | 10 +-- .../components/CalendarEventsCard.tsx | 2 +- .../activities/components/ParticipantChip.tsx | 8 +- .../activities/components/SkeletonLoader.tsx | 8 +- .../emails/components/EmailThreadHeader.tsx | 8 +- .../emails/components/EmailThreadMessage.tsx | 2 +- .../components/EmailThreadMessageBody.tsx | 2 +- .../EmailThreadMessageBodyPreview.tsx | 2 +- .../components/EmailThreadMessageSender.tsx | 2 +- .../components/EmailThreadNotShared.tsx | 20 ++--- .../emails/components/EmailThreadPreview.tsx | 6 +- .../emails/components/EmailsCard.tsx | 4 +- .../files/components/AttachmentList.tsx | 6 +- .../files/components/AttachmentRow.tsx | 8 +- .../files/components/DocumentViewer.tsx | 12 +-- .../activities/notes/components/NoteTile.tsx | 2 +- .../activities/tasks/components/TaskList.tsx | 4 +- .../activities/tasks/components/TaskRow.tsx | 8 +- .../components/EventRow.tsx | 14 ++-- .../components/EventsGroup.tsx | 4 +- .../components/TimelineCard.tsx | 8 +- .../activity/components/EventRowActivity.tsx | 4 +- .../components/EventCardCalendarEvent.tsx | 14 ++-- .../rows/components/EventCard.tsx | 8 +- .../components/EventFieldDiffLabel.tsx | 2 +- .../components/EventFieldDiffValue.tsx | 2 +- .../EventCardMessageBodyNotShared.tsx | 14 ++-- .../components/EventCardMessageForbidden.tsx | 2 +- .../components/AdvancedTextEditor.tsx | 14 ++-- .../components/BubbleMenuIconButton.tsx | 2 +- .../components/TurnIntoBlockDropdown.tsx | 4 +- .../components/WorkflowAttachmentChip.tsx | 24 +++--- .../WorkflowSendEmailAttachments.tsx | 8 +- .../resizable-image/ResizableImageView.tsx | 14 ++-- .../ai/components/AIChatEmptyState.tsx | 4 +- .../ai/components/AIChatErrorMessage.tsx | 2 +- .../modules/ai/components/AIChatMessage.tsx | 30 ++++---- .../ai/components/AIChatStandaloneError.tsx | 2 +- .../src/modules/ai/components/AIChatTab.tsx | 16 ++-- .../ai/components/AIChatThreadGroup.tsx | 14 ++-- .../ai/components/AIChatThreadsList.tsx | 6 +- .../LazyMarkdownRendererStyledComponents.tsx | 4 +- .../NavigationDrawerAIChatThreadsList.tsx | 2 +- .../ai/components/ReasoningSummaryDisplay.tsx | 4 +- .../ai/components/RoutingDebugDisplay.tsx | 8 +- .../ai/components/RoutingStatusDisplay.tsx | 4 +- .../modules/ai/components/ShimmeringText.tsx | 10 +-- .../modules/ai/components/TerminalOutput.tsx | 2 +- .../ai/components/ThinkingStepsDisplay.tsx | 2 +- .../ai/components/ToolStepRenderer.tsx | 14 ++-- .../internal/AIChatContextUsageButton.tsx | 4 +- .../components/EmailVerificationSent.tsx | 14 ++-- .../components/SignInUpGlobalScopeForm.tsx | 24 +++--- ...gnInUpTwoFactorAuthenticationProvision.tsx | 8 +- ...nUpTwoFactorAuthenticationVerification.tsx | 48 ++++++------ .../modules/billing/components/TrialCard.tsx | 4 +- .../internal/SubscriptionInfoRowContainer.tsx | 6 +- .../components/BlockEditor.tsx | 54 +++++++------- .../components/CustomSideMenuOptions.tsx | 2 +- .../components/CommandMenuOpenContainer.tsx | 4 +- .../components/AppFullScreenErrorFallback.tsx | 4 +- .../components/AppRootErrorFallback.tsx | 14 ++-- .../components/FavoritesBackButton.tsx | 18 ++--- .../components/InformationBanner.tsx | 4 +- .../components/AddToNavigationDragHandle.tsx | 2 +- .../NavigationMenuItemBackButton.tsx | 18 ++--- .../NavigationMenuItemIconContainer.tsx | 10 +-- .../components/ObjectIconWithViewOverlay.tsx | 14 ++-- .../MainNavigationDrawerAIChatContent.tsx | 2 +- .../MainNavigationDrawerTabsRow.tsx | 40 +++++----- .../components/AdvancedFilterDropdownRow.tsx | 2 +- .../AdvancedFilterFieldSelectSearchInput.tsx | 12 +-- .../AdvancedFilterLogicalOperatorCell.tsx | 6 +- ...alueInputDropdownButtonClickableSelect.tsx | 12 +-- .../AdvancedFilterSidePanelColumn.tsx | 2 +- ...ncedFilterSidePanelLogicalOperatorCell.tsx | 2 +- ...ancedFilterSidePanelRecordFilterColumn.tsx | 2 +- ...FilterSidePanelRecordFilterGroupColumn.tsx | 2 +- .../ObjectFilterDropdownBooleanSelect.tsx | 6 +- .../ObjectOptionsDropdownMenuViewName.tsx | 6 +- .../record-board/components/RecordBoard.tsx | 4 +- .../components/RecordBoardHeader.tsx | 4 +- .../RecordBoardCardMultiDragCounterChip.tsx | 2 +- .../RecordBoardCardMultiDragStack.tsx | 10 +-- .../components/RecordBoardColumn.tsx | 10 +-- ...BoardColumnCardContainerSkeletonLoader.tsx | 4 +- .../components/RecordBoardColumnHeader.tsx | 2 +- .../components/RecordCalendar.tsx | 2 +- .../components/RecordCalendarAddNew.tsx | 4 +- .../components/RecordCalendarTopBar.tsx | 4 +- .../components/RecordCalendarMonthBody.tsx | 6 +- .../components/RecordCalendarMonthBodyDay.tsx | 24 +++--- .../RecordCalendarMonthBodyWeek.tsx | 2 +- .../record-card/components/RecordCard.tsx | 8 +- .../components/RecordCardHeaderContainer.tsx | 2 +- .../RecordDetailRecordsListItemContainer.tsx | 4 +- .../RecordDetailSectionContainer.tsx | 2 +- .../ui/form-types/components/BaseChip.tsx | 42 +++++------ .../components/FormAdvancedTextFieldInput.tsx | 14 ++-- .../components/FormArrayFieldInput.tsx | 6 +- .../FormBooleanFieldToggleInput.tsx | 10 +-- .../components/FormDateFieldInput.tsx | 10 +-- .../FormFieldInputInnerContainer.tsx | 4 +- .../components/FormFieldInputRowContainer.tsx | 4 +- .../components/FormMultiSelectFieldInput.tsx | 4 +- .../FormNestedFieldInputContainer.tsx | 4 +- .../components/FormSingleRecordPicker.tsx | 4 +- .../components/TextVariableEditor.tsx | 26 +++---- .../components/ForbiddenFieldDisplay.tsx | 14 ++-- .../input/components/MultiItemBaseInput.tsx | 34 ++++----- .../input/components/RawJsonFieldInput.tsx | 6 +- .../input/components/RichTextFieldInput.tsx | 8 +- .../components/RecordIndexContainer.tsx | 6 +- .../components/RecordInlineCellContainer.tsx | 12 +-- .../RecordInlineCellDisplayMode.tsx | 32 ++++---- .../components/RecordInlineCellEditMode.tsx | 10 +-- .../RecordInlineCellHoveredPortalContent.tsx | 16 ++-- .../components/RecordInlineCellValue.tsx | 4 +- .../property-box/components/PropertyBox.tsx | 2 +- .../components/PropertyBoxSkeletonLoader.tsx | 2 +- .../components/MergeRecordsContainer.tsx | 6 +- .../components/MergeRecordsFooter.tsx | 2 +- .../PageLayoutRecordPageRenderer.tsx | 4 +- .../components/RecordTableStyleWrapper.tsx | 52 ++++++------- ...cordTableBodyVirtualizedDraggableClone.tsx | 28 +++---- .../RecordTableCellBaseContainer.tsx | 10 +-- .../components/RecordTableCellButtons.tsx | 4 +- .../components/RecordTableCellCheckbox.tsx | 2 +- .../RecordTableCellCheckboxPlaceholder.tsx | 2 +- .../RecordTableCellDisplayContainer.tsx | 2 +- .../components/RecordTableCellDragAndDrop.tsx | 2 +- .../RecordTableCellFirstRowFirstColumn.tsx | 10 +-- .../components/RecordTableCellLoading.tsx | 2 +- .../RecordTableCellStyleWrapper.tsx | 10 +-- .../RecordTableDragAndDropPlaceholderCell.tsx | 12 +-- .../components/RecordTableAggregateFooter.tsx | 12 +-- .../RecordTableAggregateFooterCell.tsx | 32 ++++---- .../RecordTableColumnAggregateFooterValue.tsx | 26 +++---- ...ordTableColumnAggregateFooterValueCell.tsx | 18 ++--- .../RecordTableHeaderAddColumnButton.tsx | 14 ++-- .../RecordTableHeaderCellContainer.tsx | 26 +++---- .../RecordTableHeaderCheckboxColumn.tsx | 14 ++-- .../RecordTableHeaderDragDropColumn.tsx | 16 ++-- .../components/RecordTableHeaderFirstCell.tsx | 2 +- .../RecordTableHeaderLastEmptyColumn.tsx | 4 +- .../RecordTableHeaderResizeHandler.tsx | 2 +- .../components/RecordTableActionRow.tsx | 16 ++-- .../components/RecordTableRowDiv.tsx | 28 +++---- .../RecordTableRowMultiDragCounterChip.tsx | 2 +- .../RecordTableRecordGroupSection.tsx | 24 +++--- ...ecordTableRowVirtualizedDebugRowHelper.tsx | 26 +++---- .../RecordTitleCellTextFieldDisplay.tsx | 10 +-- .../RecordTitleFullNameFieldDisplay.tsx | 10 +-- .../UpdateMultipleRecordsContainer.tsx | 6 +- .../UpdateMultipleRecordsFooter.tsx | 2 +- .../OnboardingModalCircularIcon.tsx | 4 +- .../components/PageLayoutGridLayout.tsx | 4 +- .../components/PageLayoutGridOverlay.tsx | 12 +-- .../components/PageLayoutGridResizeHandle.tsx | 28 +++---- .../components/PageLayoutLeftPanel.tsx | 2 +- .../components/PageLayoutTabList.tsx | 2 +- ...youtTabListReorderableOverflowDropdown.tsx | 2 +- .../PageLayoutTabListVisibleTabs.tsx | 4 +- .../PageLayoutTabMenuItemSelectAvatar.tsx | 6 +- .../components/PageLayoutTabRenderClone.tsx | 2 +- .../FieldWidgetInlineCellContainer.tsx | 12 +-- .../FieldWidgetMorphRelationField.tsx | 2 +- .../components/FieldWidgetRelationField.tsx | 2 +- .../components/FieldWidgetShowMoreButton.tsx | 16 ++-- .../FieldsConfigurationGroupRenameInput.tsx | 2 +- .../fields/components/FieldsWidget.tsx | 4 +- .../components/FieldsWidgetGroupContainer.tsx | 2 +- .../graph/components/GraphWidgetLegend.tsx | 22 +++--- .../graph/components/GraphWidgetLegendDot.tsx | 2 +- .../graph/components/GraphWidgetTooltip.tsx | 24 +++--- .../components/GraphWidgetAggregateChart.tsx | 2 +- .../components/BarChartBaseLayer.tsx | 2 +- .../components/BarChartHoverLayer.tsx | 2 +- .../iframe/components/IframeWidget.tsx | 26 +++---- .../components/DashboardsBlockEditor.tsx | 50 ++++++------- .../components/StandaloneRichTextWidget.tsx | 2 +- .../widget-card/components/WidgetCard.tsx | 70 +++++++++--------- .../components/WidgetCardContent.tsx | 22 +++--- .../components/WidgetCardHeader.tsx | 12 +-- .../widget-card/components/WidgetGrip.tsx | 14 ++-- .../SettingsAccountsRadioSettingsCard.tsx | 4 +- .../SettingsAccountsToggleSettingCard.tsx | 6 +- .../SettingsAdminConfigVariablesRow.tsx | 4 +- ...ingsAdminJsonDataIndicatorHealthStatus.tsx | 6 +- .../SettingsAdminWorkerMetricsGraph.tsx | 2 +- .../SettingsAdminWorkerMetricsTooltip.tsx | 4 +- .../AdvancedSettingsContentWrapperWithDot.tsx | 10 +-- .../settings/components/SettingsCounter.tsx | 4 +- .../components/SettingsDatabaseEventsForm.tsx | 4 +- .../components/SettingsDnsRecordsTable.tsx | 2 +- .../components/SettingsItemTypeTag.tsx | 2 +- .../settings/components/SettingsListCard.tsx | 6 +- .../SettingsListItemCardContent.tsx | 4 +- .../SettingsCardContentBase.tsx | 10 +-- .../SettingsOptionCardContentToggle.tsx | 6 +- .../SettingsOptionIconCustomizer.tsx | 2 +- .../components/SettingsPageContainer.tsx | 2 +- .../settings/components/SettingsRadioCard.tsx | 6 +- .../components/SettingsSummaryCard.tsx | 2 +- .../SettingsDataModelFieldIconLabelForm.tsx | 2 +- .../SettingsObjectNewFieldSelector.tsx | 2 +- ...gsDataModelFieldRelationPreviewContent.tsx | 2 +- ...DataModelFieldRelationPreviewImageCard.tsx | 2 +- .../SettingsDataModelFieldSelectForm.tsx | 16 ++-- ...tingsDataModelFieldSelectFormOptionRow.tsx | 20 ++--- .../SettingsDataModelFieldPreview.tsx | 6 +- .../SettingsDataModelRelationFieldPreview.tsx | 6 +- .../components/SettingsDataModelOverview.tsx | 2 +- .../SettingsDataModelOverviewField.tsx | 2 +- ...sDataModelOverviewFieldWithoutRelation.tsx | 2 +- .../SettingsDataModelOverviewObject.tsx | 20 ++--- .../SettingsObjectFieldItemTableRow.tsx | 16 ++-- .../components/SettingsObjectItemTableRow.tsx | 16 ++-- .../SettingsObjectRelationItemTableRow.tsx | 20 ++--- .../components/SettingsObjectCoverImage.tsx | 4 +- .../SettingsDataModelObjectAboutForm.tsx | 4 +- .../SettingsApiKeysFieldItemTableRow.tsx | 4 +- .../lab/components/SettingsLabContent.tsx | 6 +- .../SettingsLogicFunctionLabelContainer.tsx | 4 +- .../components/PlaygroundSetupForm.tsx | 4 +- .../playground/components/RestPlayground.tsx | 2 +- .../SettingsPlaygroundCoverImage.tsx | 4 +- .../profile/components/EmailField.tsx | 8 +- .../roles/components/SettingsRolesList.tsx | 2 +- ...ingsRoleAssignmentEntityPickerDropdown.tsx | 2 +- .../SettingsRoleAssignmentTableRow.tsx | 2 +- ...RolePermissionsObjectLevelObjectPicker.tsx | 2 +- ...tingsRolePermissionsObjectLevelSection.tsx | 2 +- ...ingsRolePermissionsObjectLevelTableRow.tsx | 4 +- ...jectLevelObjectFieldPermissionTableRow.tsx | 6 +- ...ectLevelRecordLevelPermissionFilterRow.tsx | 2 +- ...cordLevelPermissionLogicalOperatorCell.tsx | 2 +- ...ctLevelRecordLevelPermissionValueInput.tsx | 36 ++++----- ...velRecordLevelPermissionVariablePicker.tsx | 6 +- .../components/PermissionIcon.tsx | 2 +- ...ettingsRolePermissionsSettingsTableRow.tsx | 2 +- .../components/SettingsRoleApplicability.tsx | 8 +- .../components/SettingsRoleSettings.tsx | 2 +- .../components/SettingsRoleLabelContainer.tsx | 4 +- .../SettingsSSOIdentitiesProvidersForm.tsx | 2 +- ...ctorAuthenticationVerificationCodeDash.tsx | 6 +- ...ctorAuthenticationVerificationCodeSlot.tsx | 32 ++++---- .../components/SidePanelContainer.tsx | 6 +- .../components/SidePanelContextChip.tsx | 28 +++---- .../SidePanelContextRecordChipAvatars.tsx | 4 +- .../components/SidePanelForDesktop.tsx | 4 +- .../components/SidePanelPageInfoLayout.tsx | 6 +- .../components/SidePanelSubViewWithSearch.tsx | 4 +- .../side-panel/components/SidePanelTopBar.tsx | 24 +++--- .../SidePanelSubPageNavigationHeader.tsx | 2 +- .../components/SidePanelMessageThreadPage.tsx | 4 +- .../SidePanelPageLayoutFieldsLayout.tsx | 2 +- .../SidePanelPageLayoutFieldsSettings.tsx | 2 +- .../SubMatchingSelectControlContainer.tsx | 2 +- .../SubMatchingSelectRowLeftSelect.tsx | 2 +- .../components/UnmatchColumnBanner.tsx | 12 +-- .../UploadStep/components/DropZone.tsx | 8 +- .../ValidationStep/ValidationStep.tsx | 8 +- .../snack-bar-manager/components/SnackBar.tsx | 16 ++-- .../display/components/BooleanDisplay.tsx | 4 +- .../field/display/components/TextDisplay.tsx | 4 +- .../display/components/UploadFileChip.tsx | 2 +- .../field/input/components/AddressInput.tsx | 2 +- .../field/input/components/BooleanInput.tsx | 12 +-- .../field/input/components/CurrencyInput.tsx | 4 +- .../field/input/components/TextAreaInput.tsx | 18 ++--- .../ui/field/input/components/TextInput.tsx | 2 +- .../ui/input/components/IconPicker.tsx | 14 ++-- .../ui/input/components/ImageInput.tsx | 6 +- .../ui/input/components/InputErrorHelper.tsx | 2 +- .../ui/input/components/SelectControl.tsx | 32 ++++---- .../modules/ui/input/components/TextInput.tsx | 42 +++++------ .../ui/input/components/TitleInput.tsx | 8 +- .../CurrencyPickerDropdownButton.tsx | 4 +- .../date/components/DatePickerHeader.tsx | 4 +- .../date/components/DatePickerInput.tsx | 10 +-- .../date/components/DateTimePickerHeader.tsx | 4 +- .../date/components/DateTimePickerInput.tsx | 4 +- .../components/RelativeDatePickerHeader.tsx | 2 +- .../date/components/TimeZoneAbbreviation.tsx | 4 +- .../PhoneCountryPickerDropdownButton.tsx | 10 +-- .../skeletons/DropdownMenuSkeletonItem.tsx | 8 +- .../DropdownMenuHeader/DropdownMenuHeader.tsx | 16 ++-- .../DropdownMenuHeaderLeftComponent.tsx | 6 +- .../components/DropdownMenuInnerSelect.tsx | 10 +-- .../dropdown/components/DropdownMenuInput.tsx | 14 ++-- .../components/DropdownMenuItemsContainer.tsx | 14 ++-- .../components/DropdownMenuSearchInput.tsx | 10 +-- .../components/DropdownMenuSectionLabel.tsx | 8 +- .../components/StyledHeaderDropdownButton.tsx | 14 ++-- .../components/ExpandedFieldDisplay.tsx | 10 +-- .../overlay/components/OverlayContainer.tsx | 10 +-- .../ui/layout/page/components/PageBody.tsx | 2 +- .../ui/layout/page/components/PageHeader.tsx | 14 ++-- .../ui/layout/page/components/PagePanel.tsx | 4 +- .../page/components/ShowPageContainer.tsx | 2 +- .../components/ResizablePanelEdge.tsx | 10 +-- .../components/ResizablePanelGap.tsx | 2 +- .../components/SelectableListItem.tsx | 4 +- .../components/FieldRichTextCard.tsx | 6 +- .../components/ShowPageSummaryCard.tsx | 6 +- .../side-panel/components/SidePanelFooter.tsx | 2 +- .../ui/layout/tab-list/components/TabList.tsx | 4 +- .../layout/table/components/TableHeader.tsx | 4 +- .../ui/layout/table/components/TableRow.tsx | 8 +- .../ui/layout/top-bar/components/TopBar.tsx | 4 +- .../bread-crumb/components/Breadcrumb.tsx | 4 +- .../components/MobileBreadcrumb.tsx | 4 +- .../MultiWorkspacesDropdownStyles.tsx | 12 +-- .../components/NavigationDrawer.tsx | 12 +-- .../components/NavigationDrawerBackButton.tsx | 2 +- .../components/NavigationDrawerHeader.tsx | 8 +- .../components/NavigationDrawerItem.tsx | 74 +++++++++---------- .../NavigationDrawerItemBreadcrumb.tsx | 8 +- .../NavigationDrawerScrollableContent.tsx | 2 +- .../NavigationDrawerSectionTitle.tsx | 6 +- .../navigation/step-bar/components/Step.tsx | 6 +- .../drag-select/components/DragSelect.tsx | 14 ++-- .../scroll/components/ScrollWrapper.tsx | 2 +- .../views/components/SortOrFilterChip.tsx | 26 +++---- .../views/components/ViewBarDetails.tsx | 2 +- .../ViewBarFilterDropdownBottomMenu.tsx | 2 +- .../ViewBarFilterDropdownFieldSelectMenu.tsx | 12 +-- .../ViewPickerIconAndNameContainer.tsx | 2 +- .../components/ViewPickerSelectContainer.tsx | 6 +- .../WorkflowStepExecutionResult.tsx | 10 +-- .../components/WorkflowDiagramCanvasBase.tsx | 18 ++--- .../WorkflowDiagramRightClickCommandMenu.tsx | 2 +- .../WorkflowDiagramEdgeLabelContainer.tsx | 4 +- .../WorkflowDiagramEdgeV2Container.tsx | 2 +- .../WorkflowDiagramHandleSource.tsx | 28 +++---- .../WorkflowDiagramHandleTarget.tsx | 6 +- ...WorkflowDiagramStepNodeEditableContent.tsx | 12 +-- .../components/WorkflowNodeContainer.tsx | 28 +++---- .../WorkflowNodeLabelWithCounterPart.tsx | 2 +- .../components/WorkflowNodeRightPart.tsx | 2 +- .../components/WorkflowRunDiagramStepNode.tsx | 8 +- .../SidePanelWorkflowSelectStepTitle.tsx | 2 +- .../components/WorkflowStepBody.tsx | 2 +- .../components/WorkflowStepFilterColumn.tsx | 2 +- .../WorkflowStepFilterGroupColumn.tsx | 2 +- .../WorkflowStepFilterLogicalOperatorCell.tsx | 2 +- .../WorkflowAiAgentPermissionsStyles.tsx | 16 ++-- .../WorkflowAiAgentPermissionsTab.tsx | 10 +-- .../WorkflowOutputSchemaBuilder.tsx | 10 +-- .../components/WorkflowCodeEditor.tsx | 6 +- .../WorkflowEditActionCodeFields.tsx | 2 +- .../WorkflowEditActionFormBuilder.tsx | 10 +-- .../WorkflowEditActionFormFieldSettings.tsx | 4 +- .../WorkflowEditActionHttpRequest.tsx | 10 +-- .../WorkflowIteratorSubStepSwitcher.tsx | 2 +- .../components/WorkflowVariablePicker.tsx | 10 +-- .../components/WorkspaceInviteTeam.tsx | 2 +- .../twenty-front/src/pages/auth/Authorize.tsx | 24 +++--- .../src/pages/auth/PasswordReset.tsx | 4 +- .../twenty-front/src/pages/auth/SignInUp.tsx | 2 +- .../src/pages/onboarding/CreateWorkspace.tsx | 6 +- .../src/pages/onboarding/InviteTeam.tsx | 4 +- .../src/pages/onboarding/PaymentSuccess.tsx | 2 +- .../src/pages/onboarding/SyncEmails.tsx | 4 +- .../internal/ChooseYourPlanContent.tsx | 10 +-- .../SettingsTwoFactorAuthenticationMethod.tsx | 8 +- .../SettingsAdminConfigVariableDetails.tsx | 2 +- .../pages/settings/ai/SettingsSkillForm.tsx | 4 +- .../settings/ai/components/SettingsAIMCP.tsx | 2 +- .../SettingsAgentModelCapabilities.tsx | 8 +- .../ai/components/SettingsSkillsTable.tsx | 2 +- .../ai/components/SettingsToolsTable.tsx | 2 +- ...SettingsApplicationRegistrationDetails.tsx | 2 +- .../data-model/SettingsObjectDetailPage.tsx | 2 +- .../developers/api-keys/SettingsApiKeys.tsx | 2 +- .../webhooks/components/SettingsWebhooks.tsx | 2 +- .../members/SettingsWorkspaceMembers.tsx | 2 +- .../event-logs/components/EventLogFilters.tsx | 2 +- .../workspace/SettingsApiWebhooks.tsx | 2 +- .../OXLINT_MIGRATION_TODO.md | 31 ++++---- packages/twenty-server/src/app.module.ts | 2 +- 404 files changed, 1755 insertions(+), 1738 deletions(-) diff --git a/.github/actions/nx-affected/action.yaml b/.github/actions/nx-affected/action.yaml index 8dcb4fa0f1..d2d8771922 100644 --- a/.github/actions/nx-affected/action.yaml +++ b/.github/actions/nx-affected/action.yaml @@ -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: diff --git a/.github/workflows/ci-emails.yaml b/.github/workflows/ci-emails.yaml index 941eae5232..f46cdf85b5 100644 --- a/.github/workflows/ci-emails.yaml +++ b/.github/workflows/ci-emails.yaml @@ -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 diff --git a/.github/workflows/ci-front.yaml b/.github/workflows/ci-front.yaml index 6fcae86839..aabc6c5e5f 100644 --- a/.github/workflows/ci-front.yaml +++ b/.github/workflows/ci-front.yaml @@ -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' diff --git a/.github/workflows/ci-merge-queue.yaml b/.github/workflows/ci-merge-queue.yaml index 00ddb3e543..722b4d56b0 100644 --- a/.github/workflows/ci-merge-queue.yaml +++ b/.github/workflows/ci-merge-queue.yaml @@ -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";' diff --git a/.github/workflows/ci-sdk.yaml b/.github/workflows/ci-sdk.yaml index d8a1cc7acd..15121d91cd 100644 --- a/.github/workflows/ci-sdk.yaml +++ b/.github/workflows/ci-sdk.yaml @@ -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: diff --git a/.github/workflows/ci-server.yaml b/.github/workflows/ci-server.yaml index e88ea91085..5b10c359ec 100644 --- a/.github/workflows/ci-server.yaml +++ b/.github/workflows/ci-server.yaml @@ -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 diff --git a/.github/workflows/ci-shared.yaml b/.github/workflows/ci-shared.yaml index 313fc93746..73a4735d1f 100644 --- a/.github/workflows/ci-shared.yaml +++ b/.github/workflows/ci-shared.yaml @@ -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: | diff --git a/.github/workflows/ci-test-docker-compose.yaml b/.github/workflows/ci-test-docker-compose.yaml index 1b4309b939..162aa159b9 100644 --- a/.github/workflows/ci-test-docker-compose.yaml +++ b/.github/workflows/ci-test-docker-compose.yaml @@ -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: | diff --git a/.github/workflows/ci-website.yaml b/.github/workflows/ci-website.yaml index 712f97ded2..3878b24f0f 100644 --- a/.github/workflows/ci-website.yaml +++ b/.github/workflows/ci-website.yaml @@ -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: | diff --git a/.github/workflows/ci-zapier.yaml b/.github/workflows/ci-zapier.yaml index 05c2004a34..4be30a93c3 100644 --- a/.github/workflows/ci-zapier.yaml +++ b/.github/workflows/ci-zapier.yaml @@ -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 diff --git a/packages/twenty-e2e-testing/lib/pom/loginPage.ts b/packages/twenty-e2e-testing/lib/pom/loginPage.ts index ccd1ab22ef..1d51a8e14c 100644 --- a/packages/twenty-e2e-testing/lib/pom/loginPage.ts +++ b/packages/twenty-e2e-testing/lib/pom/loginPage.ts @@ -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) { diff --git a/packages/twenty-e2e-testing/tests/authentication/return-to-path.spec.ts b/packages/twenty-e2e-testing/tests/authentication/return-to-path.spec.ts index b3b1e54f8f..d81b23c8fe 100644 --- a/packages/twenty-e2e-testing/tests/authentication/return-to-path.spec.ts +++ b/packages/twenty-e2e-testing/tests/authentication/return-to-path.spec.ts @@ -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'); }, ); }); diff --git a/packages/twenty-front/.oxlintrc.json b/packages/twenty-front/.oxlintrc.json index 98e2194d5d..dc2ceb361b 100644 --- a/packages/twenty-front/.oxlintrc.json +++ b/packages/twenty-front/.oxlintrc.json @@ -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", diff --git a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx index c151bdf5b1..f4e7b6a1a1 100644 --- a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx @@ -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; diff --git a/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx index 760599d99d..334f9d608a 100644 --- a/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx @@ -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 = ({ diff --git a/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx index b6ec13f2c4..bd14d6f9cd 100644 --- a/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx @@ -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; `; diff --git a/packages/twenty-front/src/loading/components/SidePanelSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/SidePanelSkeletonLoader.tsx index f794f6b634..60ac5054a5 100644 --- a/packages/twenty-front/src/loading/components/SidePanelSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/SidePanelSkeletonLoader.tsx @@ -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 = () => { diff --git a/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx b/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx index aba9881ac6..e49c4407df 100644 --- a/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx +++ b/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx @@ -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%; diff --git a/packages/twenty-front/src/modules/action-menu/components/PageHeaderActionMenuButtons.tsx b/packages/twenty-front/src/modules/action-menu/components/PageHeaderActionMenuButtons.tsx index a6811eaaa2..8150264d7e 100644 --- a/packages/twenty-front/src/modules/action-menu/components/PageHeaderActionMenuButtons.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/PageHeaderActionMenuButtons.tsx @@ -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; `; diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx index d649b9182e..2a788c73e5 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx @@ -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 = () => { diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx index e867707f2b..c538eb7b7a 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index 094c124771..4a1257785b 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx index 96a208dc1d..9e846267eb 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx @@ -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]}; `; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventsCard.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventsCard.tsx index 25a660a873..349e44833b 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventsCard.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventsCard.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx index dd4672d24d..4f69b35f44 100644 --- a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx +++ b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx @@ -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'; diff --git a/packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx b/packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx index 14cfaf2e13..1d98bcac36 100644 --- a/packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadHeader.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadHeader.tsx index e9b2a362f8..3d25d8d193 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadHeader.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadHeader.tsx @@ -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; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx index 3cefc85587..b219ab94a3 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx @@ -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]}; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx index 20e94c4019..0bf2b32297 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx @@ -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}; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBodyPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBodyPreview.tsx index 3c2a044f33..6809f884b1 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBodyPreview.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBodyPreview.tsx @@ -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 = { diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx index a0a920677e..4831dc7743 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx @@ -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}; `; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx index 3e67b81b40..9d84f81eb1 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx @@ -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 = { diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx index 030203b85a..bc9e0a6e32 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailsCard.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailsCard.tsx index 1ffe4b129c..e2c7bffb05 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailsCard.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailsCard.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx index 90a3849789..4b37629473 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx index 9fb36786cb..0d938c5725 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/activities/files/components/DocumentViewer.tsx b/packages/twenty-front/src/modules/activities/files/components/DocumentViewer.tsx index 1c68bc8fb0..4d7e062890 100644 --- a/packages/twenty-front/src/modules/activities/files/components/DocumentViewer.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/DocumentViewer.tsx @@ -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; `; diff --git a/packages/twenty-front/src/modules/activities/notes/components/NoteTile.tsx b/packages/twenty-front/src/modules/activities/notes/components/NoteTile.tsx index b64bf407a8..60663bd9b4 100644 --- a/packages/twenty-front/src/modules/activities/notes/components/NoteTile.tsx +++ b/packages/twenty-front/src/modules/activities/notes/components/NoteTile.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx index 7a13d50fcb..b2c0c90517 100644 --- a/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx +++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx index 9b483fd6ea..3d8a9a33a2 100644 --- a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx +++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx @@ -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<{ diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/components/EventRow.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/components/EventRow.tsx index 45c955a018..3307a0d26e 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/components/EventRow.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/components/EventRow.tsx @@ -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 = { diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/components/EventsGroup.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/components/EventsGroup.tsx index f241d539a0..fdea67c18c 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/components/EventsGroup.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/components/EventsGroup.tsx @@ -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}; diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineCard.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineCard.tsx index 37e866e7a3..d0b83e1088 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineCard.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineCard.tsx @@ -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}; diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx index 6c31332514..25a427b048 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent.tsx index f28a34c5ac..498fb27c7e 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx index e2d6c94260..274bb6b142 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx @@ -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) => { diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffLabel.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffLabel.tsx index 57f86569db..720e1260df 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffLabel.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffLabel.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffValue.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffValue.tsx index cb4f4258f4..9ff62e4eeb 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffValue.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffValue.tsx @@ -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 = ({ diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessageBodyNotShared.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessageBodyNotShared.tsx index 42268b5b3d..b2c2309f7a 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessageBodyNotShared.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessageBodyNotShared.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessageForbidden.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessageForbidden.tsx index 92a15f8601..7bd5fa288e 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessageForbidden.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessageForbidden.tsx @@ -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]}; `; diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx index b472124ac1..84ca3e9d3a 100644 --- a/packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx +++ b/packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx @@ -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]}; } } diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/BubbleMenuIconButton.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/BubbleMenuIconButton.tsx index acf2e9969e..0c1c229146 100644 --- a/packages/twenty-front/src/modules/advanced-text-editor/components/BubbleMenuIconButton.tsx +++ b/packages/twenty-front/src/modules/advanced-text-editor/components/BubbleMenuIconButton.tsx @@ -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 = ({ diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/TurnIntoBlockDropdown.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/TurnIntoBlockDropdown.tsx index 9c4b399119..1ce9d6dc16 100644 --- a/packages/twenty-front/src/modules/advanced-text-editor/components/TurnIntoBlockDropdown.tsx +++ b/packages/twenty-front/src/modules/advanced-text-editor/components/TurnIntoBlockDropdown.tsx @@ -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}; diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowAttachmentChip.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowAttachmentChip.tsx index 704c235683..358d94505b 100644 --- a/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowAttachmentChip.tsx +++ b/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowAttachmentChip.tsx @@ -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}; diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowSendEmailAttachments.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowSendEmailAttachments.tsx index 999d45e1f4..e1695847f6 100644 --- a/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowSendEmailAttachments.tsx +++ b/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowSendEmailAttachments.tsx @@ -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 = ({ diff --git a/packages/twenty-front/src/modules/advanced-text-editor/extensions/resizable-image/ResizableImageView.tsx b/packages/twenty-front/src/modules/advanced-text-editor/extensions/resizable-image/ResizableImageView.tsx index 067ac29b22..1ab42451db 100644 --- a/packages/twenty-front/src/modules/advanced-text-editor/extensions/resizable-image/ResizableImageView.tsx +++ b/packages/twenty-front/src/modules/advanced-text-editor/extensions/resizable-image/ResizableImageView.tsx @@ -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 = { diff --git a/packages/twenty-front/src/modules/ai/components/AIChatEmptyState.tsx b/packages/twenty-front/src/modules/ai/components/AIChatEmptyState.tsx index eb6537e736..6432e83f4e 100644 --- a/packages/twenty-front/src/modules/ai/components/AIChatEmptyState.tsx +++ b/packages/twenty-front/src/modules/ai/components/AIChatEmptyState.tsx @@ -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 = { diff --git a/packages/twenty-front/src/modules/ai/components/AIChatErrorMessage.tsx b/packages/twenty-front/src/modules/ai/components/AIChatErrorMessage.tsx index 96c70e5ce1..5745cebdbc 100644 --- a/packages/twenty-front/src/modules/ai/components/AIChatErrorMessage.tsx +++ b/packages/twenty-front/src/modules/ai/components/AIChatErrorMessage.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/ai/components/AIChatMessage.tsx b/packages/twenty-front/src/modules/ai/components/AIChatMessage.tsx index b12172e210..d5bc9df84c 100644 --- a/packages/twenty-front/src/modules/ai/components/AIChatMessage.tsx +++ b/packages/twenty-front/src/modules/ai/components/AIChatMessage.tsx @@ -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]}; `; diff --git a/packages/twenty-front/src/modules/ai/components/AIChatStandaloneError.tsx b/packages/twenty-front/src/modules/ai/components/AIChatStandaloneError.tsx index 965c09c20e..7d5e8d685f 100644 --- a/packages/twenty-front/src/modules/ai/components/AIChatStandaloneError.tsx +++ b/packages/twenty-front/src/modules/ai/components/AIChatStandaloneError.tsx @@ -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%; `; diff --git a/packages/twenty-front/src/modules/ai/components/AIChatTab.tsx b/packages/twenty-front/src/modules/ai/components/AIChatTab.tsx index 7b149e614f..d125a4c298 100644 --- a/packages/twenty-front/src/modules/ai/components/AIChatTab.tsx +++ b/packages/twenty-front/src/modules/ai/components/AIChatTab.tsx @@ -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; diff --git a/packages/twenty-front/src/modules/ai/components/AIChatThreadGroup.tsx b/packages/twenty-front/src/modules/ai/components/AIChatThreadGroup.tsx index 8e0d066d2d..6371568e66 100644 --- a/packages/twenty-front/src/modules/ai/components/AIChatThreadGroup.tsx +++ b/packages/twenty-front/src/modules/ai/components/AIChatThreadGroup.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/ai/components/AIChatThreadsList.tsx b/packages/twenty-front/src/modules/ai/components/AIChatThreadsList.tsx index 091686a0bf..7f0703247c 100644 --- a/packages/twenty-front/src/modules/ai/components/AIChatThreadsList.tsx +++ b/packages/twenty-front/src/modules/ai/components/AIChatThreadsList.tsx @@ -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 = () => { diff --git a/packages/twenty-front/src/modules/ai/components/LazyMarkdownRendererStyledComponents.tsx b/packages/twenty-front/src/modules/ai/components/LazyMarkdownRendererStyledComponents.tsx index 644c45f7e0..8a40807ac0 100644 --- a/packages/twenty-front/src/modules/ai/components/LazyMarkdownRendererStyledComponents.tsx +++ b/packages/twenty-front/src/modules/ai/components/LazyMarkdownRendererStyledComponents.tsx @@ -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 { diff --git a/packages/twenty-front/src/modules/ai/components/NavigationDrawerAIChatThreadsList.tsx b/packages/twenty-front/src/modules/ai/components/NavigationDrawerAIChatThreadsList.tsx index 48d3f13dc3..a5963453fa 100644 --- a/packages/twenty-front/src/modules/ai/components/NavigationDrawerAIChatThreadsList.tsx +++ b/packages/twenty-front/src/modules/ai/components/NavigationDrawerAIChatThreadsList.tsx @@ -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]}; diff --git a/packages/twenty-front/src/modules/ai/components/ReasoningSummaryDisplay.tsx b/packages/twenty-front/src/modules/ai/components/ReasoningSummaryDisplay.tsx index 78550b6970..f735b9a3ad 100644 --- a/packages/twenty-front/src/modules/ai/components/ReasoningSummaryDisplay.tsx +++ b/packages/twenty-front/src/modules/ai/components/ReasoningSummaryDisplay.tsx @@ -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]}; `; diff --git a/packages/twenty-front/src/modules/ai/components/RoutingDebugDisplay.tsx b/packages/twenty-front/src/modules/ai/components/RoutingDebugDisplay.tsx index b9ae08d87b..3f5da38ed0 100644 --- a/packages/twenty-front/src/modules/ai/components/RoutingDebugDisplay.tsx +++ b/packages/twenty-front/src/modules/ai/components/RoutingDebugDisplay.tsx @@ -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}; diff --git a/packages/twenty-front/src/modules/ai/components/RoutingStatusDisplay.tsx b/packages/twenty-front/src/modules/ai/components/RoutingStatusDisplay.tsx index 5bb1734062..d609e732d3 100644 --- a/packages/twenty-front/src/modules/ai/components/RoutingStatusDisplay.tsx +++ b/packages/twenty-front/src/modules/ai/components/RoutingStatusDisplay.tsx @@ -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 { diff --git a/packages/twenty-front/src/modules/ai/components/ShimmeringText.tsx b/packages/twenty-front/src/modules/ai/components/ShimmeringText.tsx index 21bf49041c..75f999178b 100644 --- a/packages/twenty-front/src/modules/ai/components/ShimmeringText.tsx +++ b/packages/twenty-front/src/modules/ai/components/ShimmeringText.tsx @@ -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% { diff --git a/packages/twenty-front/src/modules/ai/components/TerminalOutput.tsx b/packages/twenty-front/src/modules/ai/components/TerminalOutput.tsx index d21cba6804..ae1504917a 100644 --- a/packages/twenty-front/src/modules/ai/components/TerminalOutput.tsx +++ b/packages/twenty-front/src/modules/ai/components/TerminalOutput.tsx @@ -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; `; diff --git a/packages/twenty-front/src/modules/ai/components/ThinkingStepsDisplay.tsx b/packages/twenty-front/src/modules/ai/components/ThinkingStepsDisplay.tsx index afe19c0b49..d407e41b59 100644 --- a/packages/twenty-front/src/modules/ai/components/ThinkingStepsDisplay.tsx +++ b/packages/twenty-front/src/modules/ai/components/ThinkingStepsDisplay.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx b/packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx index 2e69dfa2fb..2b5378d5cb 100644 --- a/packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx +++ b/packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx @@ -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}; diff --git a/packages/twenty-front/src/modules/ai/components/internal/AIChatContextUsageButton.tsx b/packages/twenty-front/src/modules/ai/components/internal/AIChatContextUsageButton.tsx index eabf08ea75..5732232a66 100644 --- a/packages/twenty-front/src/modules/ai/components/internal/AIChatContextUsageButton.tsx +++ b/packages/twenty-front/src/modules/ai/components/internal/AIChatContextUsageButton.tsx @@ -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}; `; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx index 12e7e1ea08..d164df585a 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx @@ -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; } `; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx index 195e4aa45e..dad28239e0 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationProvision.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationProvision.tsx index 0612361f92..5981920a09 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationProvision.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationProvision.tsx @@ -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; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationVerification.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationVerification.tsx index 10b5144fa3..4ab2e519e4 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationVerification.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationVerification.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/billing/components/TrialCard.tsx b/packages/twenty-front/src/modules/billing/components/TrialCard.tsx index b215930db0..5ed876ec1f 100644 --- a/packages/twenty-front/src/modules/billing/components/TrialCard.tsx +++ b/packages/twenty-front/src/modules/billing/components/TrialCard.tsx @@ -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) => { diff --git a/packages/twenty-front/src/modules/billing/components/internal/SubscriptionInfoRowContainer.tsx b/packages/twenty-front/src/modules/billing/components/internal/SubscriptionInfoRowContainer.tsx index 3b304490cc..f034de2b44 100644 --- a/packages/twenty-front/src/modules/billing/components/internal/SubscriptionInfoRowContainer.tsx +++ b/packages/twenty-front/src/modules/billing/components/internal/SubscriptionInfoRowContainer.tsx @@ -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; `; diff --git a/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx b/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx index 0ac13ab41e..9b70cf2452 100644 --- a/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx +++ b/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx @@ -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; } `; diff --git a/packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenuOptions.tsx b/packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenuOptions.tsx index bd62af3512..332a33212a 100644 --- a/packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenuOptions.tsx +++ b/packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenuOptions.tsx @@ -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]}; diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx index dac0ba9b98..c62c806efb 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx @@ -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); diff --git a/packages/twenty-front/src/modules/error-handler/components/AppFullScreenErrorFallback.tsx b/packages/twenty-front/src/modules/error-handler/components/AppFullScreenErrorFallback.tsx index 9598cc6eca..ecdaaea0b2 100644 --- a/packages/twenty-front/src/modules/error-handler/components/AppFullScreenErrorFallback.tsx +++ b/packages/twenty-front/src/modules/error-handler/components/AppFullScreenErrorFallback.tsx @@ -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 = ({ diff --git a/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx b/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx index dcdf2edd93..5f86d2a38e 100644 --- a/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx +++ b/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/favorites/components/FavoritesBackButton.tsx b/packages/twenty-front/src/modules/favorites/components/FavoritesBackButton.tsx index f0b9e38611..4064f6875a 100644 --- a/packages/twenty-front/src/modules/favorites/components/FavoritesBackButton.tsx +++ b/packages/twenty-front/src/modules/favorites/components/FavoritesBackButton.tsx @@ -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}; diff --git a/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx b/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx index 314c41989f..57dce27f32 100644 --- a/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx +++ b/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx @@ -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 = ({ diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/AddToNavigationDragHandle.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/AddToNavigationDragHandle.tsx index bf223a3fd8..d5bace190a 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/AddToNavigationDragHandle.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/AddToNavigationDragHandle.tsx @@ -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'}; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemBackButton.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemBackButton.tsx index ad27b19a89..a9c9946682 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemBackButton.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemBackButton.tsx @@ -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}; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemIconContainer.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemIconContainer.tsx index 26397cbd1d..bc917d4023 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemIconContainer.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemIconContainer.tsx @@ -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'}; `; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/ObjectIconWithViewOverlay.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/ObjectIconWithViewOverlay.tsx index 52cd576950..676dda5f82 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/ObjectIconWithViewOverlay.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/ObjectIconWithViewOverlay.tsx @@ -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 }>` diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerAIChatContent.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerAIChatContent.tsx index 0739dc9420..00551ce48d 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerAIChatContent.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerAIChatContent.tsx @@ -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; `; diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx index 30a4cce475..953525278d 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx @@ -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}; diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownRow.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownRow.tsx index d511e661b9..84f469596b 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownRow.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownRow.tsx @@ -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; diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectSearchInput.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectSearchInput.tsx index 8d34eb2f39..b1064edfbe 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectSearchInput.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectSearchInput.tsx @@ -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 { diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell.tsx index 66ebbe45a6..fb8db210e7 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell.tsx @@ -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 = { diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInputDropdownButtonClickableSelect.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInputDropdownButtonClickableSelect.tsx index 701f5d5ca7..cdb62c0635 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInputDropdownButtonClickableSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInputDropdownButtonClickableSelect.tsx @@ -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; `; diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelColumn.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelColumn.tsx index f50afda9c0..cef1b4b74e 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelColumn.tsx @@ -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; diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelLogicalOperatorCell.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelLogicalOperatorCell.tsx index 381902574b..666d22db85 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelLogicalOperatorCell.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelLogicalOperatorCell.tsx @@ -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 = { diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterColumn.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterColumn.tsx index b21c4d616e..eaf399507b 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterColumn.tsx @@ -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 = { diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterGroupColumn.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterGroupColumn.tsx index b1c598c55f..fdf3243a91 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterGroupColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterGroupColumn.tsx @@ -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 = ({ diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx index c1f94ff6cf..f162dddbb3 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx @@ -15,20 +15,20 @@ import { IconCheck } from 'twenty-ui/display'; const StyledBooleanSelectContainer = styled.div<{ selected?: boolean }>` align-items: center; + border-radius: ${themeCssVariables.border.radius.sm}; + color: ${themeCssVariables.font.color.primary}; cursor: pointer; display: flex; padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[1]}; - border-radius: ${themeCssVariables.border.radius.sm}; - color: ${themeCssVariables.font.color.primary}; &:hover { background: ${themeCssVariables.background.transparent.light}; } `; const StyledIconCheckContainer = styled.div` - flex: 1; display: flex; + flex: 1; justify-content: flex-end; `; diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx index 11bf2aead4..2a4f1aa7f7 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx @@ -22,9 +22,9 @@ import { useDebouncedCallback } from 'use-debounce'; const StyledDropdownMenuIconAndNameContainer = styled.div` align-items: center; display: flex; + gap: ${themeCssVariables.spacing[1]}; margin-left: 0; margin-right: 0; - gap: ${themeCssVariables.spacing[1]}; `; const StyledMenuTitleContainer = styled.div` @@ -35,8 +35,8 @@ const StyledMenuTitleContainer = styled.div` `; const StyledMenuIconContainer = styled.div` - color: ${themeCssVariables.font.color.primary}; align-items: center; + color: ${themeCssVariables.font.color.primary}; display: flex; height: ${themeCssVariables.spacing[6]}; justify-content: center; @@ -46,10 +46,10 @@ const StyledMenuIconContainer = styled.div` const StyledMainText = styled.div` color: ${themeCssVariables.font.color.primary}; flex-shrink: 0; + max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - max-width: 100%; `; type ObjectOptionsDropdownMenuViewNameProps = { diff --git a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx index 742dc8d2c8..fe8366738f 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx @@ -23,14 +23,14 @@ const StyledContainer = styled.div` const StyledContainerContainer = styled.div` display: flex; flex-direction: column; - min-height: calc(100% - ${themeCssVariables.spacing[2]}); height: min-content; + min-height: calc(100% - ${themeCssVariables.spacing[2]}); `; const StyledBoardContentContainer = styled.div` display: flex; - flex-direction: column; flex: 1; + flex-direction: column; `; export const RecordBoard = () => { diff --git a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardHeader.tsx b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardHeader.tsx index a7f6acc1cc..73292095e6 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardHeader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardHeader.tsx @@ -11,10 +11,10 @@ const StyledHeaderContainer = styled.div` display: flex; flex-direction: row; height: 40px; - z-index: 10; - overflow: visible; + width: 100%; + z-index: 10; &.header-sticky { position: sticky; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardMultiDragCounterChip.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardMultiDragCounterChip.tsx index faf8746574..b855379a98 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardMultiDragCounterChip.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardMultiDragCounterChip.tsx @@ -5,8 +5,8 @@ import { NotificationCounter } from 'twenty-ui/navigation'; const StyledNotificationCounterContainer = styled.div` position: absolute; - top: -7px; right: -7px; + top: -7px; z-index: 1000; `; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardMultiDragStack.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardMultiDragStack.tsx index d49bf7a4d3..e8c4502614 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardMultiDragStack.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardMultiDragStack.tsx @@ -4,14 +4,14 @@ import { styled } from '@linaria/react'; import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledRecordBoardCardStackCard = styled.div<{ offset: number }>` - position: absolute; - top: ${({ offset }) => (offset === 1 ? 2 : (offset - 1) * 4 + 2)}px; - left: 0; - right: 0; - height: 100%; background-color: ${themeCssVariables.accent.tertiary}; border: 1px solid ${themeCssVariables.border.color.medium}; border-radius: ${themeCssVariables.border.radius.sm}; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: ${({ offset }) => (offset === 1 ? 2 : (offset - 1) * 4 + 2)}px; z-index: ${({ offset }) => -offset}; `; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx index 7a3eebe9e3..4f5f11c192 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx @@ -15,15 +15,15 @@ import { isDefined } from 'twenty-shared/utils'; const StyledColumn = styled.div` background-color: ${themeCssVariables.background.primary}; display: flex; - flex-direction: column; - max-width: 200px; - min-width: 200px; - min-height: 100%; flex: 1; + flex-direction: column; + height: 100%; + max-width: 200px; + min-height: 100%; + min-width: 200px; padding: ${themeCssVariables.spacing[2]}; padding-top: 0px; position: relative; - height: 100%; `; type RecordBoardColumnProps = { diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx index 21b3b061af..fff4fbb5f7 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx @@ -23,16 +23,16 @@ const StyledBodyContainer = styled.div` display: flex; flex-direction: column; gap: ${themeCssVariables.spacing['0.5']}; - padding-top: 4px; padding-bottom: 4px; + padding-top: 4px; `; const StyledStaticCellSkeleton = styled.div<{ width: number; height: number }>` background-color: ${themeCssVariables.background.tertiary}; border-radius: ${themeCssVariables.border.radius.sm}; - width: ${({ width }) => width}px; height: ${({ height }) => height}px; + width: ${({ width }) => width}px; `; export const RecordBoardColumnCardContainerSkeletonLoader = () => { diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx index 944356f5e5..f506cd4a14 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx @@ -28,9 +28,9 @@ const StyledHeader = styled.div` cursor: pointer; display: flex; flex-direction: row; + height: 100%; justify-content: left; width: 100%; - height: 100%; `; const StyledHeaderActions = styled.div` diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendar.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendar.tsx index f6fdc46622..7982ab4b43 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendar.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendar.tsx @@ -20,8 +20,8 @@ const StyledContainerContainer = styled.div` box-sizing: border-box; display: flex; flex-direction: column; - height: 100%; gap: ${themeCssVariables.spacing[2]}; + height: 100%; padding: ${themeCssVariables.spacing[2]}; padding-left: ${themeCssVariables.spacing[1]}; `; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx index 6ef907099b..070b3c4077 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx @@ -15,9 +15,9 @@ import { Button } from 'twenty-ui/input'; import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledButtonContainer = styled.div` - padding: ${themeCssVariables.spacing['0.5']}; - min-width: unset; height: auto; + min-width: unset; + padding: ${themeCssVariables.spacing['0.5']}; `; type RecordCalendarAddNewProps = { diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx index 8366e060e2..b008bd49f3 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx @@ -35,14 +35,14 @@ const StyledNavigationButtonContainer = styled.div` `; const StyledLeftSection = styled.div` - display: flex; align-items: center; + display: flex; gap: ${themeCssVariables.spacing[2]}; `; const StyledNavigationSection = styled.div` - display: flex; align-items: center; + display: flex; gap: ${themeCssVariables.spacing[1]}; justify-content: flex-end; `; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx index 2f88be9a3c..7095b9d96e 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx @@ -4,11 +4,11 @@ import { styled } from '@linaria/react'; import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` - display: flex; - flex-direction: column; - flex: 1; border: 1px solid ${themeCssVariables.border.color.light}; border-radius: 4px; + display: flex; + flex: 1; + flex-direction: column; overflow: hidden; `; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx index 9902bcfdc2..f944ce0ab1 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx @@ -21,12 +21,6 @@ const StyledContainer = styled.div<{ isOtherMonth: boolean; isDayOfWeekend: boolean; }>` - display: flex; - width: calc(100% / 7); - flex-direction: column; - min-height: 122px; - padding: ${themeCssVariables.spacing[1]}; - min-width: 0; background: ${({ isOtherMonth, isDayOfWeekend }) => isOtherMonth || isDayOfWeekend ? themeCssVariables.background.secondary @@ -35,6 +29,12 @@ const StyledContainer = styled.div<{ isOtherMonth ? themeCssVariables.font.color.light : themeCssVariables.font.color.primary}; + display: flex; + flex-direction: column; + min-height: 122px; + min-width: 0; + padding: ${themeCssVariables.spacing[1]}; + width: calc(100% / 7); &:not(:last-child) { border-right: 1px solid ${themeCssVariables.border.color.light}; @@ -60,20 +60,20 @@ const StyledDayHeaderDayContainer = styled.div` const StyledDayHeaderDay = styled.span<{ isToday: boolean }>` align-items: center; - display: flex; - font-size: ${themeCssVariables.font.size.sm}; - justify-content: center; - line-height: 140%; - width: 20px; - border-radius: ${({ isToday }) => (isToday ? '4px' : '0')}; background: ${({ isToday }) => isToday ? themeCssVariables.color.blue : 'transparent'}; + border-radius: ${({ isToday }) => (isToday ? '4px' : '0')}; color: ${({ isToday }) => isToday ? themeCssVariables.font.color.inverted : themeCssVariables.font.color.primary}; + display: flex; + font-size: ${themeCssVariables.font.size.sm}; font-weight: ${({ isToday }) => isToday ? themeCssVariables.font.weight.medium : 'normal'}; + justify-content: center; + line-height: 140%; + width: 20px; `; const StyledCardsContainer = styled.div<{ isDraggedOver?: boolean }>` diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx index 07fadf9eee..73cc0668d6 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx @@ -10,8 +10,8 @@ import { } from 'twenty-shared/utils'; const StyledContainer = styled.div` - display: flex; align-items: stretch; + display: flex; flex: 1; &:not(:last-of-type) { diff --git a/packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx index b9be38398e..06b0f6142e 100644 --- a/packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx @@ -11,10 +11,10 @@ const StyledBoardCard = styled.div<{ border-radius: ${themeCssVariables.border.radius.sm}; color: ${themeCssVariables.font.color.primary}; cursor: pointer; - width: 100%; - opacity: ${({ isSecondaryDragged }) => (isSecondaryDragged ? '0.3' : '1')}; + width: 100%; + &[data-selected='true'] { background-color: ${themeCssVariables.accent.quaternary}; } @@ -37,8 +37,8 @@ const StyledBoardCard = styled.div<{ } .checkbox-container { - transition: all ease-in-out 160ms; opacity: 0; + transition: all ease-in-out 160ms; } &[data-selected='true'] .checkbox-container { @@ -50,8 +50,8 @@ const StyledBoardCard = styled.div<{ } .compact-icon-container { - transition: all ease-in-out 160ms; opacity: 0; + transition: all ease-in-out 160ms; } &:hover .compact-icon-container { opacity: 1; diff --git a/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardHeaderContainer.tsx b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardHeaderContainer.tsx index 58d26ba674..5a9c38d764 100644 --- a/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardHeaderContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardHeaderContainer.tsx @@ -8,9 +8,9 @@ export const StyledBoardCardHeaderContainer = styled.div<{ align-items: center; display: flex; flex-direction: row; - justify-content: space-between; font-weight: ${themeCssVariables.font.weight.medium}; height: 24px; + justify-content: space-between; padding: ${({ padding, isCompact }) => padding ?? `${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[2]} ${isCompact ? themeCssVariables.spacing[2] : themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]}`}; diff --git a/packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/components/RecordDetailRecordsListItemContainer.tsx b/packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/components/RecordDetailRecordsListItemContainer.tsx index 63afc960a7..d7c921ce47 100644 --- a/packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/components/RecordDetailRecordsListItemContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/components/RecordDetailRecordsListItemContainer.tsx @@ -8,10 +8,10 @@ const StyledListItem = styled.div<{ isDropdownOpen?: boolean; }>` align-items: center; - justify-content: space-between; - gap: ${themeCssVariables.spacing[1]}; display: flex; + gap: ${themeCssVariables.spacing[1]}; height: ${themeCssVariables.spacing[10]}; + justify-content: space-between; padding-left: ${({ noHorizontalPadding }) => noHorizontalPadding ? 0 : themeCssVariables.spacing[3]}; padding-right: ${({ noHorizontalPadding }) => diff --git a/packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/components/RecordDetailSectionContainer.tsx b/packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/components/RecordDetailSectionContainer.tsx index 089795978f..f628b4e48a 100644 --- a/packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/components/RecordDetailSectionContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/components/RecordDetailSectionContainer.tsx @@ -6,8 +6,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledRecordDetailSectionWrapper = styled.div` border-top: 1px solid ${themeCssVariables.border.color.light}; - padding-top: ${themeCssVariables.spacing[3]}; padding-bottom: ${themeCssVariables.spacing[3]}; + padding-top: ${themeCssVariables.spacing[3]}; width: auto; `; diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/BaseChip.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/BaseChip.tsx index 7ff8ad10d3..d2065e6c31 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/BaseChip.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/BaseChip.tsx @@ -4,27 +4,27 @@ import { IconX } from 'twenty-ui/display'; import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledChip = styled.div<{ deletable: boolean; danger: boolean }>` + align-items: center; background-color: ${({ danger }) => danger ? themeCssVariables.color.red3 : themeCssVariables.color.blue3}; - border-width: 1px; - border-style: solid; border-color: ${({ danger }) => danger ? themeCssVariables.color.red5 : themeCssVariables.color.blue5}; border-radius: 4px; - height: 20px; + border-style: solid; + border-width: 1px; box-sizing: border-box; + column-gap: ${themeCssVariables.spacing[1]}; + cursor: ${({ deletable }) => (deletable ? 'pointer' : 'default')}; display: inline-flex; - align-items: center; flex-direction: row; flex-shrink: 0; - column-gap: ${themeCssVariables.spacing[1]}; + height: 20px; padding-left: ${themeCssVariables.spacing[1]}; - user-select: none; - white-space: nowrap; - - cursor: ${({ deletable }) => (deletable ? 'pointer' : 'default')}; padding-right: ${({ deletable }) => deletable ? '0' : themeCssVariables.spacing[1]}; + + user-select: none; + white-space: nowrap; `; const StyledLabel = styled.span<{ danger: boolean }>` @@ -34,23 +34,23 @@ const StyledLabel = styled.span<{ danger: boolean }>` `; const StyledDelete = styled.button<{ danger: boolean }>` - box-sizing: border-box; - height: 20px; - width: 20px; - display: flex; - justify-content: center; align-items: center; - cursor: pointer; - font-size: ${themeCssVariables.font.size.sm}; - user-select: none; - padding: 0; - margin: 0; background: none; border: none; + border-bottom-right-radius: ${themeCssVariables.border.radius.sm}; + border-top-right-radius: ${themeCssVariables.border.radius.sm}; + box-sizing: border-box; color: ${({ danger }) => danger ? themeCssVariables.color.red : themeCssVariables.color.blue}; - border-top-right-radius: ${themeCssVariables.border.radius.sm}; - border-bottom-right-radius: ${themeCssVariables.border.radius.sm}; + cursor: pointer; + display: flex; + font-size: ${themeCssVariables.font.size.sm}; + height: 20px; + justify-content: center; + margin: 0; + padding: 0; + user-select: none; + width: 20px; &:hover { background-color: ${({ danger }) => diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx index 3a071783be..5a38d6195d 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx @@ -27,29 +27,29 @@ const StyledAdvancedTextFieldContainerWrapper = styled.div` `; const StyledAdvancedTextFieldFieldContainer = styled.div` - position: relative; display: flex; flex-direction: column; - gap: ${themeCssVariables.spacing[2]}; flex-grow: 1; + gap: ${themeCssVariables.spacing[2]}; + position: relative; `; const StyledAdvancedTextFieldInnerContainer = styled.div` - flex-grow: 1; 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-grow: 1; overflow: auto; width: 100%; `; const StyledEditorActionButtonContainer = styled.div` position: absolute; - top: ${themeCssVariables.spacing[0]}; right: 30px; + top: ${themeCssVariables.spacing[0]}; z-index: 1; `; @@ -59,8 +59,8 @@ const StyledFullScreenEditorContainer = styled.div` border-radius: ${themeCssVariables.border.radius.sm}; flex: 1; min-height: 0; - padding: ${themeCssVariables.spacing[2]}; overflow-y: auto; + padding: ${themeCssVariables.spacing[2]}; `; const StyledFullScreenButtonContainerWrapper = styled.div` @@ -70,8 +70,8 @@ const StyledFullScreenButtonContainerWrapper = styled.div` padding: ${themeCssVariables.spacing[2]}; :hover { - cursor: pointer; background-color: ${themeCssVariables.background.transparent.light}; + cursor: pointer; } } `; diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx index b6b3c7dfc2..11fefb120a 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx @@ -56,13 +56,13 @@ const StyledDisplayModeContainer = styled.div` align-items: center; background: transparent; border: none; + box-sizing: border-box; + cursor: pointer; display: flex; font-family: inherit; + height: 30px; padding-inline: ${themeCssVariables.spacing[2]}; width: 100%; - height: 30px; - cursor: pointer; - box-sizing: border-box; &:hover, &[data-open='true'] { diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormBooleanFieldToggleInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormBooleanFieldToggleInput.tsx index e9eedc10c1..8056f0fc7a 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormBooleanFieldToggleInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormBooleanFieldToggleInput.tsx @@ -22,23 +22,23 @@ const StyledDescription = styled.span` color: ${themeCssVariables.font.color.secondary}; display: flex; font-size: ${themeCssVariables.font.size.md}; - padding-left: ${themeCssVariables.spacing[2]}; - white-space: nowrap; overflow: hidden; + padding-left: ${themeCssVariables.spacing[2]}; text-overflow: ellipsis; + white-space: nowrap; `; const StyledToggleContainer = styled.div` background-color: ${themeCssVariables.background.transparent.lighter}; - 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-bottom-right-radius: ${themeCssVariables.border.radius.sm}; + border-right: 1px solid ${themeCssVariables.border.color.medium}; + border-top: 1px solid ${themeCssVariables.border.color.medium}; border-top-right-radius: ${themeCssVariables.border.radius.sm}; display: flex; + padding-bottom: ${themeCssVariables.spacing[2]}; padding-right: ${themeCssVariables.spacing[2]}; padding-top: ${themeCssVariables.spacing[2]}; - padding-bottom: ${themeCssVariables.spacing[2]}; `; export const FormBooleanFieldToggleInput = ({ diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateFieldInput.tsx index 0b147d33a5..65bb572145 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateFieldInput.tsx @@ -49,12 +49,15 @@ const StyledDateInputAbsoluteContainer = styled.div` const StyledDateInput = styled.input<{ hasError?: boolean }>` background-color: transparent; border: none; + color: ${({ hasError }) => + hasError + ? themeCssVariables.color.red + : themeCssVariables.font.color.primary}; color: ${themeCssVariables.font.color.primary}; font-family: ${themeCssVariables.font.family}; font-size: inherit; font-weight: inherit; outline: none; - padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]}; &::placeholder, &::-webkit-input-placeholder { @@ -67,10 +70,7 @@ const StyledDateInput = styled.input<{ hasError?: boolean }>` color: ${themeCssVariables.font.color.tertiary}; } - color: ${({ hasError }) => - hasError - ? themeCssVariables.color.red - : themeCssVariables.font.color.primary}; + padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]}; `; const StyledDateInputContainer = styled.div` diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputInnerContainer.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputInnerContainer.tsx index 0a2efe5301..0b330df0fd 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputInnerContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputInnerContainer.tsx @@ -18,13 +18,13 @@ const StyledFormFieldInputInnerContainer = styled.div< >` 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: ${({ multiline, hasRightElement }) => multiline || !hasRightElement ? themeCssVariables.border.radius.sm : '0'}; + border-right: ${({ multiline, hasRightElement }) => multiline || !hasRightElement ? 'auto' : 'none'}; + border-top-left-radius: ${themeCssVariables.border.radius.sm}; border-top-right-radius: ${({ multiline, hasRightElement }) => multiline || !hasRightElement ? themeCssVariables.border.radius.sm : '0'}; box-sizing: border-box; diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputRowContainer.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputRowContainer.tsx index 36ceb9c163..09a8749578 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputRowContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputRowContainer.tsx @@ -8,15 +8,15 @@ const StyledFormFieldInputRowContainer = styled.div<{ }>` display: flex; flex-direction: row; - position: relative; - height: ${({ multiline }) => (multiline ? 'auto' : '32px')}; + line-height: ${({ multiline }) => multiline ? `${LINE_HEIGHT}px` : 'normal'}; max-height: ${({ multiline, maxHeight }) => multiline ? `${maxHeight ?? 5 * LINE_HEIGHT}px` : 'none'}; min-height: ${({ multiline }) => multiline ? `${3 * LINE_HEIGHT}px` : 'auto'}; + position: relative; `; export const FormFieldInputRowContainer = StyledFormFieldInputRowContainer; diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormMultiSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormMultiSelectFieldInput.tsx index b4bc148e05..c8b858de30 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormMultiSelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormMultiSelectFieldInput.tsx @@ -54,11 +54,11 @@ const StyledDisplayModeContainer = styled.div` align-items: center; background: transparent; border: none; + cursor: pointer; display: flex; font-family: inherit; padding-inline: ${themeCssVariables.spacing[2]}; width: 100%; - cursor: pointer; &:hover, &[data-open='true'] { @@ -68,8 +68,8 @@ const StyledDisplayModeContainer = styled.div` const StyledSelectInputContainer = styled.div` position: absolute; - z-index: 1; top: ${themeCssVariables.spacing[9]}; + z-index: 1; `; const StyledPlaceholderContainer = styled.div` diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNestedFieldInputContainer.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNestedFieldInputContainer.tsx index e216bbe50a..c2313d8af1 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNestedFieldInputContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNestedFieldInputContainer.tsx @@ -2,11 +2,11 @@ import { styled } from '@linaria/react'; import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledFormNestedFieldInputContainer = styled.div` - display: flex; - flex-direction: column; background: ${themeCssVariables.background.secondary}; border: 1px solid ${themeCssVariables.border.color.medium}; border-radius: ${themeCssVariables.border.radius.sm}; + display: flex; + flex-direction: column; gap: ${themeCssVariables.spacing[2]}; padding: ${themeCssVariables.spacing[2]}; `; diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSingleRecordPicker.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSingleRecordPicker.tsx index 1a2a517d4a..75052fcd1b 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSingleRecordPicker.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSingleRecordPicker.tsx @@ -24,11 +24,11 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledFormSelectContainerWrapper = styled.div<{ readonly?: boolean }>` align-items: center; + cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')}; height: 32px; justify-content: space-between; - padding-right: ${themeCssVariables.spacing[2]}; - cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')}; + padding-right: ${themeCssVariables.spacing[2]}; &:hover, &[data-open='true'] { diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/TextVariableEditor.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/TextVariableEditor.tsx index c32121ca8a..49f85ae2b6 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/TextVariableEditor.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/TextVariableEditor.tsx @@ -7,35 +7,35 @@ const StyledEditor = styled.div<{ multiline?: boolean; readonly?: boolean; }>` - width: 100%; - display: flex; box-sizing: border-box; + display: flex; padding-right: ${({ multiline }) => multiline ? themeCssVariables.spacing[4] : '0'}; + width: 100%; .editor-content { width: 100%; } .tiptap { - padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]}; + align-items: ${({ multiline }) => (multiline ? 'top' : 'center')}; + border: none !important; box-sizing: border-box; - display: flex; - height: 100%; - overflow-x: auto; - overflow-y: ${({ multiline }) => (multiline ? 'auto' : 'hidden')}; - scrollbar-width: none; - &::-webkit-scrollbar { - display: none; - } color: ${({ readonly }) => readonly ? themeCssVariables.font.color.light : themeCssVariables.font.color.primary}; + display: flex; font-family: ${themeCssVariables.font.family}; font-weight: ${themeCssVariables.font.weight.regular}; - border: none !important; - align-items: ${({ multiline }) => (multiline ? 'top' : 'center')}; + &::-webkit-scrollbar { + display: none; + } + height: 100%; + overflow-x: auto; + overflow-y: ${({ multiline }) => (multiline ? 'auto' : 'hidden')}; + padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]}; + scrollbar-width: none; white-space: ${({ multiline }) => (multiline ? 'pre' : 'nowrap')}; p.is-editor-empty:first-of-type::before { diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ForbiddenFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ForbiddenFieldDisplay.tsx index 574d01a98f..a5a6742e3d 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ForbiddenFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ForbiddenFieldDisplay.tsx @@ -6,16 +6,16 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` align-items: center; - display: inline-flex; - background: ${themeCssVariables.background.transparent.light}; - color: ${themeCssVariables.font.color.tertiary}; - font-weight: ${themeCssVariables.font.weight.regular}; - font-size: ${themeCssVariables.font.size.md}; - padding: ${themeCssVariables.spacing[1]}; - gap: ${themeCssVariables.spacing[1]}; border-radius: 4px; + color: ${themeCssVariables.font.color.tertiary}; + display: inline-flex; + font-size: ${themeCssVariables.font.size.md}; + font-weight: ${themeCssVariables.font.weight.regular}; + gap: ${themeCssVariables.spacing[1]}; + + padding: ${themeCssVariables.spacing[1]}; `; export const ForbiddenFieldDisplay = () => { diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/MultiItemBaseInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/MultiItemBaseInput.tsx index 187085ba98..4990d5b5f8 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/MultiItemBaseInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/MultiItemBaseInput.tsx @@ -15,14 +15,20 @@ const StyledInput = styled.input<{ hasError?: boolean; hasItem: boolean; }>` + background-color: ${({ hasItem }) => + hasItem ? themeCssVariables.background.transparent.lighter : 'transparent'}; background-color: transparent; + border: ${({ hasItem, hasError }) => + hasItem + ? hasError + ? `1px solid ${themeCssVariables.border.color.danger}` + : `1px solid ${themeCssVariables.border.color.medium}` + : 'none'}; border: none; + border-radius: ${({ hasItem }) => (hasItem ? '4px' : '0')}; + box-sizing: border-box; color: ${themeCssVariables.font.color.primary}; font-family: ${themeCssVariables.font.family}; - font-size: inherit; - font-weight: inherit; - outline: none; - padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]}; &::placeholder, &::-webkit-input-placeholder { @@ -31,23 +37,17 @@ const StyledInput = styled.input<{ font-weight: ${themeCssVariables.font.weight.medium}; } - background-color: ${({ hasItem }) => - hasItem ? themeCssVariables.background.transparent.lighter : 'transparent'}; - border: ${({ hasItem, hasError }) => - hasItem - ? hasError - ? `1px solid ${themeCssVariables.border.color.danger}` - : `1px solid ${themeCssVariables.border.color.medium}` - : 'none'}; - border-radius: ${({ hasItem }) => (hasItem ? '4px' : '0')}; - box-sizing: border-box; + font-size: inherit; font-weight: ${themeCssVariables.font.weight.medium}; + font-weight: inherit; 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` diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RawJsonFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RawJsonFieldInput.tsx index 4768e75881..e431d5adf8 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RawJsonFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RawJsonFieldInput.tsx @@ -21,15 +21,15 @@ const CONTAINER_HEIGHT = 300; const StyledContainer = styled.div` box-sizing: border-box; height: ${CONTAINER_HEIGHT}px; - width: 400px; - position: relative; overflow-y: auto; + position: relative; + width: 400px; `; const StyledSwitchModeButtonContainer = styled.div` position: fixed; - top: ${themeCssVariables.spacing[1]}; right: ${themeCssVariables.spacing[1]}; + top: ${themeCssVariables.spacing[1]}; `; const StyledCodeEditorContainer = styled.div` diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RichTextFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RichTextFieldInput.tsx index 97cfcf7a20..9100a70caa 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RichTextFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RichTextFieldInput.tsx @@ -24,13 +24,13 @@ const ActivityRichTextEditor = lazy(() => const StyledContainer = styled.div` background-color: ${themeCssVariables.background.primary}; - width: 480px; + box-sizing: border-box; + display: flex; + margin: 0 0 0 calc(-1 * ${themeCssVariables.spacing[5]}); padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[12]}; - margin: 0 0 0 calc(-1 * ${themeCssVariables.spacing[5]}); - display: flex; - box-sizing: border-box; position: relative; + width: 480px; `; const StyledCollapseButton = styled.div` diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx index 24323569b6..2f940d4df0 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx @@ -21,16 +21,16 @@ const StyledContainer = styled.div` display: flex; flex-direction: column; height: 100%; - width: 100%; - overflow: hidden; + + width: 100%; `; const StyledContainerWithPadding = styled.div` box-sizing: border-box; flex: 1; - min-height: 0; margin-left: ${themeCssVariables.spacing[2]}; + min-height: 0; `; export const RecordIndexContainer = () => { diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx index b41eba6593..60a7639b44 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx @@ -55,14 +55,14 @@ const StyledLabelContainer = styled.div<{ width?: number }>` `; const StyledInlineCellBaseContainer = styled.div<{ readonly: boolean }>` - box-sizing: border-box; - width: 100%; - display: flex; - height: fit-content; - gap: ${themeCssVariables.spacing[1]}; - user-select: none; align-items: center; + box-sizing: border-box; cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')}; + display: flex; + gap: ${themeCssVariables.spacing[1]}; + height: fit-content; + user-select: none; + width: 100%; `; export const StyledSkeletonDiv = styled.div` diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx index e5a12663bb..e64daaefa5 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx @@ -18,26 +18,26 @@ const StyledRecordInlineCellNormalModeOuterContainer = styled.div< 'isDisplayModeFixHeight' | 'disableHoverEffect' | 'readonly' > & { isHovered?: boolean } >` + align-items: center; + background-color: ${({ isHovered, readonly, disableHoverEffect }) => + isHovered && !readonly && !disableHoverEffect + ? themeCssVariables.background.transparent.light + : 'transparent'}; + border-radius: ${themeCssVariables.border.radius.sm}; + cursor: ${({ isHovered, readonly }) => + isHovered && !readonly ? 'pointer' : 'default'}; + display: flex; + height: ${({ isDisplayModeFixHeight }) => + isDisplayModeFixHeight ? '16px' : 'auto'}; + min-height: 16px; outline: 1px solid ${({ isHovered, readonly }) => isHovered && readonly ? themeCssVariables.border.color.medium : 'transparent'}; - align-items: center; - border-radius: ${themeCssVariables.border.radius.sm}; - display: flex; - height: ${({ isDisplayModeFixHeight }) => - isDisplayModeFixHeight ? '16px' : 'auto'}; - min-height: 16px; overflow: hidden; - padding-right: ${themeCssVariables.spacing[1]}; padding-left: ${themeCssVariables.spacing[1]}; - background-color: ${({ isHovered, readonly, disableHoverEffect }) => - isHovered && !readonly && !disableHoverEffect - ? themeCssVariables.background.transparent.light - : 'transparent'}; - cursor: ${({ isHovered, readonly }) => - isHovered && !readonly ? 'pointer' : 'default'}; + padding-right: ${themeCssVariables.spacing[1]}; `; const StyledRecordInlineCellNormalModeInnerContainer = styled.div` @@ -47,11 +47,11 @@ const StyledRecordInlineCellNormalModeInnerContainer = styled.div` height: fit-content; overflow: hidden; + padding-bottom: 2px; + padding-top: 2px; + text-overflow: ellipsis; white-space: nowrap; - - padding-top: 2px; - padding-bottom: 2px; `; const StyledEmptyField = styled.div` diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx index 3462661ae1..87ffb3a9ed 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx @@ -21,12 +21,12 @@ import { createPortal } from 'react-dom'; const StyledInlineCellEditModeContainer = styled.div` align-items: center; - display: flex; - width: 100%; - position: absolute; - height: 24px; - background: transparent; + display: flex; + height: 24px; + position: absolute; + + width: 100%; `; type RecordInlineCellEditModeProps = { diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent.tsx index 5b921bfc09..a19274bc58 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent.tsx @@ -9,20 +9,20 @@ const StyledRecordTableCellHoveredPortalContent = styled.div<{ align-items: center; display: flex; gap: ${themeCssVariables.spacing[1]}; - width: 100%; - justify-content: ${({ isCentered }) => isCentered === true ? 'center' : 'normal'}; + + width: 100%; `; const StyledInlineCellBaseContainer = styled.div<{ readonly: boolean }>` - box-sizing: border-box; - width: 100%; - display: flex; - height: fit-content; - gap: ${themeCssVariables.spacing[1]}; - user-select: none; align-items: center; + box-sizing: border-box; + display: flex; + gap: ${themeCssVariables.spacing[1]}; + height: fit-content; + user-select: none; + width: 100%; `; type RecordInlineCellHoveredPortalContentProps = { diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx index 745fb24292..a2e4e22868 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx @@ -12,13 +12,13 @@ const StyledClickableContainer = styled.div<{ isCentered?: boolean; }>` align-items: center; + cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')}; display: flex; gap: ${themeCssVariables.spacing[1]}; - width: 100%; justify-content: ${({ isCentered }) => isCentered === true ? 'center' : 'normal'}; - cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')}; + width: 100%; `; export const RecordInlineCellValue = () => { diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx index d697638fef..1983be89ac 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx @@ -17,12 +17,12 @@ const StyledPropertyBoxContainer = styled.div<{ display: flex; flex-direction: column; gap: ${themeCssVariables.spacing[2]}; - padding-top: ${themeCssVariables.spacing[3]}; padding-bottom: ${themeCssVariables.spacing[3]}; padding-left: ${({ noHorizontalPadding }) => noHorizontalPadding ? 0 : themeCssVariables.spacing[3]}; padding-right: ${({ noHorizontalPadding }) => noHorizontalPadding ? 0 : themeCssVariables.spacing[2]}; + padding-top: ${themeCssVariables.spacing[3]}; `; export const PropertyBox = ({ diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBoxSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBoxSkeletonLoader.tsx index e0a04dd150..a4b8ead4c5 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBoxSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBoxSkeletonLoader.tsx @@ -8,8 +8,8 @@ const StyledSkeletonDiv = styled.div` align-items: center; display: flex; gap: ${themeCssVariables.spacing[1]}; - width: 100%; height: 24px; + width: 100%; `; export const PropertyBoxSkeletonLoader = () => { const { theme } = useContext(ThemeContext); diff --git a/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordsContainer.tsx b/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordsContainer.tsx index 75ff275bba..b5c0a8a6c8 100644 --- a/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordsContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordsContainer.tsx @@ -21,10 +21,10 @@ import { MergeSettingsTab } from './MergeSettingsTab'; const StyledShowPageRightContainer = styled.div` display: flex; flex-direction: column; - justify-content: start; - width: 100%; height: 100%; + justify-content: start; overflow: auto; + width: 100%; `; const StyledTabListContainer = styled.div` @@ -33,9 +33,9 @@ const StyledTabListContainer = styled.div` `; const StyledContentContainer = styled.div` + background: ${themeCssVariables.background.primary}; flex: 1; overflow-y: auto; - background: ${themeCssVariables.background.primary}; padding-bottom: ${themeCssVariables.spacing[16]}; `; diff --git a/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordsFooter.tsx b/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordsFooter.tsx index b4bb7e2c58..bd02997a6d 100644 --- a/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordsFooter.tsx +++ b/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordsFooter.tsx @@ -19,8 +19,8 @@ const StyledFooterContainer = styled.div` `; const StyledFooterActions = styled.div` - display: flex; align-items: flex-end; + display: flex; gap: ${themeCssVariables.spacing[2]}; `; diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutRecordPageRenderer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutRecordPageRenderer.tsx index 5607ad67ef..8558e453b5 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutRecordPageRenderer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutRecordPageRenderer.tsx @@ -25,14 +25,14 @@ const StyledShowPageRightContainer = styled.div` flex-direction: column; height: 100%; justify-content: start; - width: 100%; overflow: auto; + width: 100%; `; const StyledContentContainer = styled.div<{ isInSidePanel: boolean }>` + background: ${themeCssVariables.background.primary}; flex: 1; overflow-y: auto; - background: ${themeCssVariables.background.primary}; padding-bottom: ${({ isInSidePanel }) => isInSidePanel ? themeCssVariables.spacing[16] : 0}; `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx index ee38f68d64..a8a327a203 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx @@ -53,10 +53,10 @@ const StyledTable = styled.div<{ display: flex; flex-wrap: wrap; - width: 100%; - position: relative; + width: 100%; + div.header-cell { position: sticky; top: 0; @@ -72,10 +72,10 @@ const StyledTable = styled.div<{ } div.header-cell:nth-of-type(1) { - left: 0px; - background-color: ${themeCssVariables.background.primary}; + left: 0px; + z-index: ${({ hasRecordGroups }) => hasRecordGroups ? TABLE_Z_INDEX.headerColumns.withGroups.headerColumnsSticky @@ -83,10 +83,10 @@ const StyledTable = styled.div<{ } div.header-cell:nth-of-type(2) { - left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; - top: 0; - background-color: ${themeCssVariables.background.primary}; + left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; + + top: 0; z-index: ${({ hasRecordGroups }) => hasRecordGroups @@ -95,10 +95,10 @@ const StyledTable = styled.div<{ } div.header-cell:nth-of-type(3) { - left: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`}; - right: 0; - background-color: ${themeCssVariables.background.primary}; + left: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`}; + + right: 0; z-index: ${({ hasRecordGroups }) => hasRecordGroups @@ -109,8 +109,8 @@ const StyledTable = styled.div<{ } div.table-cell:nth-of-type(1) { - position: sticky; left: 0px; + position: sticky; z-index: ${({ hasRecordGroups }) => hasRecordGroups ? TABLE_Z_INDEX.cell.withGroups.sticky @@ -118,8 +118,8 @@ const StyledTable = styled.div<{ } div.table-cell:nth-of-type(2) { - position: sticky; left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; + position: sticky; z-index: ${({ hasRecordGroups }) => hasRecordGroups ? TABLE_Z_INDEX.cell.withGroups.sticky @@ -127,15 +127,15 @@ const StyledTable = styled.div<{ } div.table-cell-0-0 { - position: sticky; left: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`}; + position: sticky; ${HorizontalScrollBoxShadowCSS} } div.table-cell:nth-of-type(3) { - position: sticky; left: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`}; + position: sticky; z-index: ${({ hasRecordGroups }) => hasRecordGroups ? TABLE_Z_INDEX.cell.withGroups.sticky @@ -145,43 +145,43 @@ const StyledTable = styled.div<{ } div.${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH_CLASS_NAME} { - width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; - min-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; max-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; + min-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; + width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; } div.${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH_CLASS_NAME} { - width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; - min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; max-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; + min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; + width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; } div.${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH_CLASS_NAME} { - width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px; - min-width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px; max-width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px; + min-width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px; + width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px; } ${columnFieldWidthRules} div.${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME} { - width: var(${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}); - min-width: var( - ${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME} - ); max-width: var( ${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME} ); + min-width: var( + ${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME} + ); + width: var(${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}); } div.${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME} { - width: var( + max-width: var( ${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME} ); min-width: var( ${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME} ); - max-width: var( + width: var( ${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME} ); } diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyVirtualizedDraggableClone.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyVirtualizedDraggableClone.tsx index 184107b410..c6d190c520 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyVirtualizedDraggableClone.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyVirtualizedDraggableClone.tsx @@ -66,60 +66,60 @@ const cloneColumnFieldWidthRules = Array.from( const StyledRowDraggableCloneCSSBridge = styled.div` div.table-cell:nth-of-type(1) { - position: sticky; left: 0px; + position: sticky; z-index: ${TABLE_Z_INDEX.cell.withGroups.sticky}; } div.table-cell:nth-of-type(2) { - position: sticky; left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; + position: sticky; z-index: ${TABLE_Z_INDEX.cell.withoutGroups.sticky}; } div.table-cell-0-0 { - position: sticky; left: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`}; + position: sticky; ${HorizontalScrollBoxShadowCSS} } div.table-cell:nth-of-type(3) { - position: sticky; left: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`}; + position: sticky; z-index: ${TABLE_Z_INDEX.cell.withoutGroups.sticky}; ${HorizontalScrollBoxShadowCSS} } div.${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH_CLASS_NAME} { - width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; - min-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; max-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; + min-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; + width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; } div.${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH_CLASS_NAME} { - width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; - min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; max-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; + min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; + width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; } div.${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH_CLASS_NAME} { - width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px; - min-width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px; max-width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px; + min-width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px; + width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px; } ${cloneColumnFieldWidthRules} div.${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME} { - width: var(${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}); - min-width: var( - ${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME} - ); max-width: var( ${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME} ); + min-width: var( + ${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME} + ); + width: var(${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}); } `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx index 8d095bab85..f6edb38078 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx @@ -19,18 +19,18 @@ const StyledBaseContainer = styled.div<{ cursor: ${({ isReadOnly }) => (isReadOnly ? 'default' : 'pointer')}; display: flex; height: 32px; - user-select: none; - position: relative; + user-select: none; + &:hover { - outline: ${({ isReadOnly, fontColorMedium }) => - isReadOnly ? `1px solid ${fontColorMedium}` : 'unset'}; - border-radius: ${({ isReadOnly }) => (isReadOnly ? '0px' : 'unset')}; background-color: ${({ isReadOnly, backgroundColorSecondary }) => isReadOnly ? backgroundColorSecondary : 'unset'}; + border-radius: ${({ isReadOnly }) => (isReadOnly ? '0px' : 'unset')}; color: ${({ isReadOnly, fontColorSecondary }) => isReadOnly ? fontColorSecondary : 'unset'}; + outline: ${({ isReadOnly, fontColorMedium }) => + isReadOnly ? `1px solid ${fontColorMedium}` : 'unset'}; svg { color: ${({ isReadOnly, fontColorSecondary }) => diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButtons.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButtons.tsx index ca0585fdfa..9a243f34e6 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButtons.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButtons.tsx @@ -5,13 +5,13 @@ import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants'; import { AnimatedContainer } from 'twenty-ui/utilities'; const StyledButtonContainer = styled.div` - margin: ${themeCssVariables.spacing[1]}; + border: 1px solid ${themeCssVariables.border.color.strong}; @media (max-width: ${MOBILE_VIEWPORT}px) { position: relative; right: 7px; } border-radius: ${themeCssVariables.border.radius.sm}; - border: 1px solid ${themeCssVariables.border.color.strong}; + margin: ${themeCssVariables.spacing[1]}; `; type RecordTableCellButtonsProps = { diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx index 6f311a5ea6..2336a27196 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx @@ -18,8 +18,8 @@ const StyledContainer = styled.div` height: ${RECORD_TABLE_ROW_HEIGHT}px; justify-content: center; min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}; - width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}; padding-right: ${themeCssVariables.spacing[1]}; + width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}; `; const StyledRecordTableTdContainer = styled.div` diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckboxPlaceholder.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckboxPlaceholder.tsx index 6b7638a9eb..b111317a0f 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckboxPlaceholder.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckboxPlaceholder.tsx @@ -15,8 +15,8 @@ const StyledContainer = styled.div` height: ${RECORD_TABLE_ROW_HEIGHT}px; justify-content: center; min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}; - width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}; padding-right: ${themeCssVariables.spacing[1]}; + width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}; `; const StyledRecordTableTdContainer = styled.div` diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx index f68ff053b5..3fe442e02d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx @@ -17,8 +17,8 @@ const StyledInnerContainer = styled.div` display: flex; height: 100%; overflow: hidden; - width: 100%; white-space: nowrap; + width: 100%; `; const StyledEmptyPlaceholderField = styled.div` diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDragAndDrop.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDragAndDrop.tsx index 4003f98797..4644b26f00 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDragAndDrop.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDragAndDrop.tsx @@ -9,10 +9,10 @@ import { RecordTableCellStyleWrapper } from '@/object-record/record-table/record import { IconListViewGrip } from 'twenty-ui/input'; const StyledContainer = styled.div` - height: ${RECORD_TABLE_ROW_HEIGHT}px; border-color: transparent; cursor: grab; display: flex; + height: ${RECORD_TABLE_ROW_HEIGHT}px; &:hover .icon { opacity: 1; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFirstRowFirstColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFirstRowFirstColumn.tsx index 6e5dc33d7f..6e5bbf5d5f 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFirstRowFirstColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFirstRowFirstColumn.tsx @@ -15,21 +15,21 @@ const StyledRecordTableTd = styled.div<{ hasBottomBorder?: boolean; zIndex: number; }>` + background: ${({ backgroundColor, isDragging }) => + isDragging ? 'transparent' : backgroundColor}; + border-bottom: 1px solid ${({ borderColor, hasBottomBorder, isDragging }) => hasBottomBorder && !isDragging ? borderColor : 'transparent'}; - - color: ${({ fontColor }) => fontColor}; border-right: ${({ borderColor, hasRightBorder }) => hasRightBorder ? `1px solid ${borderColor}` : 'none'}; + color: ${({ fontColor }) => fontColor}; + padding: 0; text-align: left; - background: ${({ backgroundColor, isDragging }) => - isDragging ? 'transparent' : backgroundColor}; - z-index: ${({ zIndex }) => zIndex}; `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx index e74377da75..fc994f123e 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx @@ -6,8 +6,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledStaticCellSkeleton = styled.div` background-color: ${themeCssVariables.background.tertiary}; border-radius: ${themeCssVariables.border.radius.sm}; - padding: 8px; margin: 8px; + padding: 8px; `; export const RecordTableCellLoading = ({ diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellStyleWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellStyleWrapper.tsx index 335ca32ba5..6010329e53 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellStyleWrapper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellStyleWrapper.tsx @@ -12,20 +12,20 @@ export const StyledCell = styled.div<{ hasRightBorder?: boolean; hasBottomBorder?: boolean; }>` + background: ${({ backgroundColor, isDragging }) => + isDragging ? 'transparent' : backgroundColor}; + border-bottom: 1px solid ${({ borderColor, hasBottomBorder, isDragging }) => hasBottomBorder && !isDragging ? borderColor : 'transparent'}; - - color: ${({ fontColor }) => fontColor}; border-right: ${({ borderColor, hasRightBorder }) => hasRightBorder ? `1px solid ${borderColor}` : 'none'}; + color: ${({ fontColor }) => fontColor}; + padding: 0; text-align: left; - - background: ${({ backgroundColor, isDragging }) => - isDragging ? 'transparent' : backgroundColor}; `; export const RecordTableCellStyleWrapper = ({ diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableDragAndDropPlaceholderCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableDragAndDropPlaceholderCell.tsx index 17bd659de8..accaca7884 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableDragAndDropPlaceholderCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableDragAndDropPlaceholderCell.tsx @@ -5,16 +5,16 @@ import { cx } from '@linaria/core'; import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledPlaceholderDragAndDropCell = styled.div` + background-color: ${themeCssVariables.background.primary}; + border-bottom: 1px solid ${themeCssVariables.background.primary}; height: ${RECORD_TABLE_ROW_HEIGHT}px; - width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; + + left: 0; + min-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; - background-color: ${themeCssVariables.background.primary}; - - border-bottom: 1px solid ${themeCssVariables.background.primary}; - position: sticky; - left: 0; + width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; `; export const RecordTableDragAndDropPlaceholderCell = ({ diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx index 68b4128dd9..91aaab3b1f 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx @@ -15,10 +15,10 @@ const StyledPlaceholderDragAndDropFooterCell = styled.div<{ isTableWithGroups: boolean; }>` background-color: ${themeCssVariables.background.primary}; - width: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`}; - position: sticky; - left: 0px; bottom: 0; + left: 0px; + position: sticky; + width: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`}; z-index: ${({ isTableWithGroups }) => isTableWithGroups @@ -30,9 +30,9 @@ const StyledPlaceholderAddButtonPlaceholderFooterCell = styled.div<{ isTableWithGroups: boolean; }>` background-color: ${themeCssVariables.background.primary}; - width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px; - position: sticky; bottom: 0; + position: sticky; + width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px; z-index: ${({ isTableWithGroups }) => isTableWithGroups ? TABLE_Z_INDEX.footer.tableWithGroups.default @@ -43,8 +43,8 @@ const StyledPlaceholderLastColumnEmptyFooterCell = styled.div<{ isTableWithGroups: boolean; }>` background-color: ${themeCssVariables.background.primary}; - position: sticky; bottom: 0; + position: sticky; z-index: ${({ isTableWithGroups }) => isTableWithGroups ? TABLE_Z_INDEX.footer.tableWithGroups.default diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx index a4bff55078..0195e3cf75 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx @@ -20,29 +20,29 @@ const StyledColumnFooterCell = styled.div<{ isTableWithGroups: boolean; }>` background-color: ${themeCssVariables.background.primary}; - color: ${themeCssVariables.font.color.tertiary}; - border-right: solid 1px ${themeCssVariables.background.primary}; - padding: 0; - - min-width: ${({ columnWidth }) => columnWidth}px; - width: ${({ columnWidth }) => columnWidth}px; - text-align: left; - &:hover { - background: ${themeCssVariables.background.secondary}; - } - height: ${RECORD_TABLE_ROW_HEIGHT}px; - - overflow: hidden; - - position: sticky; bottom: 0; + color: ${themeCssVariables.font.color.tertiary}; + + height: ${RECORD_TABLE_ROW_HEIGHT}px; left: ${({ isFirstCell }) => isFirstCell ? `${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px` : 'auto'}; + min-width: ${({ columnWidth }) => columnWidth}px; + &:hover { + background: ${themeCssVariables.background.secondary}; + } + overflow: hidden; + + padding: 0; + + position: sticky; + text-align: left; + + width: ${({ columnWidth }) => columnWidth}px; z-index: ${({ isFirstCell, isTableWithGroups }) => isFirstCell ? isTableWithGroups @@ -70,8 +70,8 @@ const StyledColumnFooterCell = styled.div<{ const StyledColumnFootContainer = styled.div` position: relative; - z-index: 1; width: 100%; + z-index: 1; `; export const RecordTableAggregateFooterCell = ({ diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx index 30e3f839fc..e14ce49963 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx @@ -7,35 +7,35 @@ import { isDefined } from 'twenty-shared/utils'; import { OverflowingTextWithTooltip } from 'twenty-ui/display'; const StyledText = styled.span` - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - display: flex; - height: 20px; align-items: center; - gap: 4px; + display: flex; flex-grow: 1; - + gap: 4px; + height: 20px; + overflow: hidden; padding-left: ${themeCssVariables.spacing[2]}; + text-overflow: ellipsis; + + white-space: nowrap; z-index: 1; `; const StyledValueContainer = styled.div` - overflow-x: auto; - white-space: nowrap; - scrollbar-width: none; -ms-overflow-style: none; + align-items: center; + display: flex; + gap: 4px; &::-webkit-scrollbar { display: none; } - align-items: center; - display: flex; - gap: 4px; height: ${RECORD_TABLE_ROW_HEIGHT}px; justify-content: flex-end; + overflow-x: auto; padding: 0 8px; + scrollbar-width: none; + white-space: nowrap; `; const StyledValue = styled.div` diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx index 0113f29e6a..a30d25b706 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx @@ -15,22 +15,22 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledCell = styled.div<{ isUnfolded: boolean; isFirstCell: boolean }>` align-items: center; + background: ${({ isUnfolded }) => + isUnfolded ? themeCssVariables.background.tertiary : 'none'}; + cursor: pointer; display: flex; flex-direction: row; + + flex-grow: 1; flex-shrink: 0; font-weight: ${themeCssVariables.font.weight.medium}; - gap: ${themeCssVariables.spacing[1]}; height: ${themeCssVariables.spacing[8]}; justify-content: space-between; - min-width: ${themeCssVariables.spacing[7]}; - flex-grow: 1; + max-width: 100%; - cursor: pointer; - - background: ${({ isUnfolded }) => - isUnfolded ? themeCssVariables.background.tertiary : 'none'}; + min-width: ${themeCssVariables.spacing[7]}; padding-left: ${({ isFirstCell }) => isFirstCell @@ -41,10 +41,10 @@ const StyledCell = styled.div<{ isUnfolded: boolean; isFirstCell: boolean }>` const StyledIconContainer = styled.div` align-items: center; display: flex; - height: 20px; - justify-content: center; flex-grow: 0; flex-shrink: 0; + height: 20px; + justify-content: center; padding-right: ${themeCssVariables.spacing[2]}; `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderAddColumnButton.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderAddColumnButton.tsx index 447063226c..23077819e7 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderAddColumnButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderAddColumnButton.tsx @@ -24,24 +24,24 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledPlusIconHeaderCell = styled.div<{ shouldDisplayBorderBottom: boolean; }>` + background-color: ${themeCssVariables.background.primary}; border-bottom: ${({ shouldDisplayBorderBottom }) => shouldDisplayBorderBottom ? `1px solid ${themeCssVariables.border.color.light}` : 'none'}; - background-color: ${themeCssVariables.background.primary}; - color: ${themeCssVariables.font.color.tertiary}; border-right: ${themeCssVariables.border.color.light} !important; + color: ${themeCssVariables.font.color.tertiary}; cursor: pointer; - width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px; - - z-index: 1; - height: ${RECORD_TABLE_ROW_HEIGHT}px; + max-height: ${RECORD_TABLE_ROW_HEIGHT}px; + width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px; + z-index: 1; + &:hover { background: ${themeCssVariables.background.secondary}; } @@ -51,8 +51,8 @@ const StyledPlusIconContainer = styled.div` align-items: center; display: flex; height: ${RECORD_TABLE_ROW_HEIGHT}px; - width: 100%; justify-content: center; + width: 100%; `; const StyledDropdownContainer = styled.div` diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCellContainer.tsx index 6a003f469b..35c4641003 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCellContainer.tsx @@ -7,24 +7,24 @@ const StyledHeaderCell = styled.div<{ shouldDisplayBorderBottom: boolean; isResizing: boolean; }>` - color: ${themeCssVariables.font.color.tertiary}; - padding: 0; - text-align: left; - - position: relative; - - height: ${RECORD_TABLE_ROW_HEIGHT}px; - max-height: ${RECORD_TABLE_ROW_HEIGHT}px; - background-color: ${themeCssVariables.background.primary}; - border-right: 1px solid ${themeCssVariables.border.color.light}; - border-bottom: ${({ shouldDisplayBorderBottom }) => shouldDisplayBorderBottom ? `1px solid ${themeCssVariables.border.color.light}` : 'none'}; + border-right: 1px solid ${themeCssVariables.border.color.light}; - user-select: none; + color: ${themeCssVariables.font.color.tertiary}; + + cursor: ${({ isResizing }) => (isResizing ? 'col-resize' : 'pointer')}; + height: ${RECORD_TABLE_ROW_HEIGHT}px; + + max-height: ${RECORD_TABLE_ROW_HEIGHT}px; + padding: 0; + + position: relative; + + text-align: left; &:hover { background: ${({ isResizing }) => @@ -40,7 +40,7 @@ const StyledHeaderCell = styled.div<{ : themeCssVariables.background.tertiary}; } - cursor: ${({ isResizing }) => (isResizing ? 'col-resize' : 'pointer')}; + user-select: none; z-index: ${({ zIndex }) => zIndex ?? 'auto'}; `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx index 9760a6c083..3b1a67f04d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx @@ -26,27 +26,27 @@ const StyledContainer = styled.div<{ shouldDisplayBorderBottom: boolean; }>` align-items: center; - display: flex; - height: ${RECORD_TABLE_ROW_HEIGHT}px; - justify-content: center; - min-width: 24px; - padding-right: ${themeCssVariables.spacing[1]}; background-color: ${themeCssVariables.background.primary}; border-bottom: ${({ shouldDisplayBorderBottom }) => shouldDisplayBorderBottom ? `1px solid ${themeCssVariables.border.color.light}` : 'none'}; + display: flex; + height: ${RECORD_TABLE_ROW_HEIGHT}px; + justify-content: center; + min-width: 24px; + padding-right: ${themeCssVariables.spacing[1]}; `; const StyledColumnHeaderCell = styled.div` background-color: ${themeCssVariables.background.primary}; - min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; box-sizing: border-box; - cursor: pointer; max-height: ${RECORD_TABLE_ROW_HEIGHT}px; + + min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; `; export const RecordTableHeaderCheckboxColumn = () => { diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx index cac4c178b5..d370ae5a52 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx @@ -19,18 +19,18 @@ const StyledDragDropHeaderCell = styled.div<{ backgroundColor: string; }>` background-color: ${({ backgroundColor }) => backgroundColor}; - min-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; - width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; - max-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; - min-height: ${RECORD_TABLE_ROW_HEIGHT}px; - max-height: ${RECORD_TABLE_ROW_HEIGHT}px; - - cursor: pointer; - border-bottom: ${({ shouldDisplayBorderBottom }) => shouldDisplayBorderBottom ? `1px solid ${themeCssVariables.background.primary}` : 'none'}; + cursor: pointer; + max-height: ${RECORD_TABLE_ROW_HEIGHT}px; + max-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; + min-height: ${RECORD_TABLE_ROW_HEIGHT}px; + + min-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; + + width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; `; export const RecordTableHeaderDragDropColumn = () => { diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderFirstCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderFirstCell.tsx index 84177df26a..931430b866 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderFirstCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderFirstCell.tsx @@ -25,8 +25,8 @@ import { isDefined } from 'twenty-shared/utils'; const StyledPlusButtonWrapper = styled.div` position: absolute; - top: 0; right: 0; + top: 0; z-index: ${TABLE_Z_INDEX.headerColumns.withoutGroups.headerColumnsSticky}; `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastEmptyColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastEmptyColumn.tsx index c13e27e0dc..9bcb6841aa 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastEmptyColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastEmptyColumn.tsx @@ -15,12 +15,12 @@ import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledLastColumnHeader = styled.div<{ shouldDisplayBorderBottom: boolean; }>` + background-color: ${themeCssVariables.background.primary}; + border-bottom: ${({ shouldDisplayBorderBottom }) => shouldDisplayBorderBottom ? `1px solid ${themeCssVariables.border.color.light}` : 'none'}; - - background-color: ${themeCssVariables.background.primary}; border-left: none !important; color: ${themeCssVariables.font.color.tertiary}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderResizeHandler.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderResizeHandler.tsx index 92e5ac6fad..73903edcc7 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderResizeHandler.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderResizeHandler.tsx @@ -13,8 +13,8 @@ const StyledResizeHandler = styled.div<{ }>` bottom: 0; cursor: col-resize; - position: absolute; left: ${({ position }) => (position === 'left' ? '-1px' : 'auto')}; + position: absolute; right: ${({ position }) => (position === 'right' ? '-1px' : 'auto')}; top: 0; width: 10px; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx index d9feb2ace7..ab60a04fe6 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx @@ -27,14 +27,14 @@ const StyledFieldPlaceholderCell = styled.div<{ widthOfFields: number }>` `; const StyledRecordTableDraggableTr = styled.div` - cursor: pointer; + align-items: center; - border: none; background: ${themeCssVariables.background.primary}; + border: none; + cursor: pointer; display: flex; flex-direction: row; - align-items: center; &:hover { div:not(:first-of-type) { @@ -57,10 +57,10 @@ const StyledIconContainer = styled.div` display: flex; height: ${RECORD_TABLE_ROW_HEIGHT}px; justify-content: center; - width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; + left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; position: sticky; - left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; + width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; `; const StyledActionTextContainer = styled.div<{ width: number }>` @@ -79,13 +79,13 @@ const StyledActionTextContainer = styled.div<{ width: number }>` const StyledText = styled.span` color: ${themeCssVariables.font.color.tertiary}; - margin-left: ${themeCssVariables.spacing[2]}; font-size: ${themeCssVariables.font.size.md}; + margin-left: ${themeCssVariables.spacing[2]}; + position: absolute; text-align: left; vertical-align: middle; - white-space: nowrap; - position: absolute; + white-space: nowrap; `; type RecordTableActionRowProps = { diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowDiv.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowDiv.tsx index 3789291de6..01af5eab48 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowDiv.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowDiv.tsx @@ -7,18 +7,6 @@ const StyledTr = styled.div<{ isFirstRowOfGroup?: boolean; isScrolledVertically?: boolean; }>` - --z-index-for-sticky-cells: ${({ - isFirstRowOfGroup, - isScrolledVertically, - }) => - isFirstRowOfGroup === true - ? isScrolledVertically - ? TABLE_Z_INDEX.activeRows.firstRow.sticky.scrolledVertically - : TABLE_Z_INDEX.activeRows.firstRow.sticky.noVerticalScroll - : isScrolledVertically - ? TABLE_Z_INDEX.activeRows.afterFirstRow.sticky.scrolledVertically - : TABLE_Z_INDEX.activeRows.afterFirstRow.sticky.noVerticalScroll}; - --z-index-for-normal-cells: ${({ isFirstRowOfGroup, isScrolledVertically, @@ -31,6 +19,18 @@ const StyledTr = styled.div<{ ? TABLE_Z_INDEX.activeRows.afterFirstRow.normal.scrolledVertically : TABLE_Z_INDEX.activeRows.afterFirstRow.normal.noVerticalScroll}; + --z-index-for-sticky-cells: ${({ + isFirstRowOfGroup, + isScrolledVertically, + }) => + isFirstRowOfGroup === true + ? isScrolledVertically + ? TABLE_Z_INDEX.activeRows.firstRow.sticky.scrolledVertically + : TABLE_Z_INDEX.activeRows.firstRow.sticky.noVerticalScroll + : isScrolledVertically + ? TABLE_Z_INDEX.activeRows.afterFirstRow.sticky.scrolledVertically + : TABLE_Z_INDEX.activeRows.afterFirstRow.sticky.noVerticalScroll}; + border-top: ${({ isDragging }) => isDragging ? `1px solid ${themeCssVariables.border.color.medium}` : 'none'}; @@ -42,9 +42,9 @@ const StyledTr = styled.div<{ div.table-cell, div.table-cell-0-0 { &:not(:first-of-type) { + background-color: ${themeCssVariables.background.tertiary}; border-bottom: 1px solid ${themeCssVariables.border.color.medium}; border-color: ${themeCssVariables.border.color.medium}; - background-color: ${themeCssVariables.background.tertiary}; } &:nth-of-type(2) { border-left: 1px solid ${themeCssVariables.border.color.medium}; @@ -56,9 +56,9 @@ const StyledTr = styled.div<{ } } &:last-of-type { - border-right: 1px solid ${themeCssVariables.border.color.medium}; border-radius: 0 ${themeCssVariables.border.radius.sm} ${themeCssVariables.border.radius.sm} 0; + border-right: 1px solid ${themeCssVariables.border.color.medium}; } } } diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowMultiDragCounterChip.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowMultiDragCounterChip.tsx index c269045807..fad9578d91 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowMultiDragCounterChip.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowMultiDragCounterChip.tsx @@ -4,9 +4,9 @@ import { styled } from '@linaria/react'; import { NotificationCounter } from 'twenty-ui/navigation'; const StyledNotificationCounterContainer = styled.div` + left: -7px; position: absolute; top: -7px; - left: -7px; z-index: 1000; `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx index 06ad870f19..4f6a1b72c7 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx @@ -53,13 +53,13 @@ const StyledChevronContainer = styled.div` border-right: none; color: ${themeCssVariables.font.color.secondary}; display: flex; + left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; + min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; + position: sticky; text-align: center; + vertical-align: middle; width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; - min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; - - position: sticky; - left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; z-index: ${TABLE_Z_INDEX.groupSection.stickyCell}; `; @@ -78,11 +78,11 @@ const StyledRecordGroupSection = styled.div<{ width: number }>` flex-direction: row; gap: ${themeCssVariables.spacing[1]}; height: ${RECORD_TABLE_ROW_HEIGHT}px; - width: ${({ width }) => width}px; + left: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`}; min-width: ${({ width }) => width}px; position: sticky; - left: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`}; + width: ${({ width }) => width}px; z-index: ${TABLE_Z_INDEX.groupSection.stickyCell}; `; @@ -100,16 +100,16 @@ const StyledFieldPlaceholderCell = styled.div<{ widthOfFields: number }>` `; const StyledRecordTableDragAndDropPlaceholderCell = styled.div` + background-color: ${themeCssVariables.background.primary}; + border-bottom: 1px solid ${themeCssVariables.background.primary}; height: ${RECORD_TABLE_ROW_HEIGHT}px; - width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; + + left: 0; + min-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; - background-color: ${themeCssVariables.background.primary}; - - border-bottom: 1px solid ${themeCssVariables.background.primary}; - position: sticky; - left: 0; + width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; z-index: ${TABLE_Z_INDEX.groupSection.stickyCell}; `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableRowVirtualizedDebugRowHelper.tsx b/packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableRowVirtualizedDebugRowHelper.tsx index 55eac7a598..f1af6a6fa6 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableRowVirtualizedDebugRowHelper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableRowVirtualizedDebugRowHelper.tsx @@ -15,29 +15,29 @@ import { isDefined } from 'twenty-shared/utils'; import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledDebugRow = styled.div` - position: absolute; - left: 250px; - top: 5px; - z-index: 20; - color: ${themeCssVariables.font.color.primary}; background-color: ${themeCssVariables.color.gray3}; border: 1px solid ${themeCssVariables.color.blue8}; - padding: ${themeCssVariables.spacing['0.5']}; + color: ${themeCssVariables.font.color.primary}; display: flex; + left: 250px; max-height: ${themeCssVariables.spacing[4]}; - overflow: hidden; + padding: ${themeCssVariables.spacing['0.5']}; + position: absolute; + top: 5px; + + z-index: 20; `; const StyledDebugColumn = styled.div<{ width: number }>` - min-width: ${({ width }) => width}px; - max-width: ${({ width }) => width}px; - overflow: hidden; - display: flex; - text-wrap-mode: nowrap; - padding-right: ${themeCssVariables.spacing['0.5']}; + max-width: ${({ width }) => width}px; + min-width: ${({ width }) => width}px; + + overflow: hidden; padding-left: ${themeCssVariables.spacing['0.5']}; + padding-right: ${themeCssVariables.spacing['0.5']}; + text-wrap-mode: nowrap; `; type RecordTableRowVirtualizedDebugRowHelperProps = { diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx index 73c92b3df6..0bae542df1 100644 --- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx @@ -11,18 +11,18 @@ import { OverflowingTextWithTooltip } from 'twenty-ui/display'; import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledDiv = styled.div` + align-items: center; background: inherit; border: none; border-radius: ${themeCssVariables.border.radius.sm}; + box-sizing: border-box; color: ${themeCssVariables.font.color.primary}; cursor: pointer; - overflow: hidden; - height: 24px; - padding: ${themeCssVariables.spacing[0]} 5px; - box-sizing: border-box; display: flex; - align-items: center; + height: 24px; justify-content: center; + overflow: hidden; + padding: ${themeCssVariables.spacing[0]} 5px; :hover { background: ${themeCssVariables.background.transparent.light}; } diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx index 951b2bd115..75c1762148 100644 --- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx @@ -12,18 +12,18 @@ import { OverflowingTextWithTooltip } from 'twenty-ui/display'; import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledDiv = styled.div` + align-items: center; background: inherit; border: none; border-radius: ${themeCssVariables.border.radius.sm}; + box-sizing: border-box; color: ${themeCssVariables.font.color.primary}; cursor: pointer; - overflow: hidden; - height: 24px; - padding: ${themeCssVariables.spacing[0]} 5px; - box-sizing: border-box; display: flex; - align-items: center; + height: 24px; justify-content: center; + overflow: hidden; + padding: ${themeCssVariables.spacing[0]} 5px; :hover { background: ${themeCssVariables.background.transparent.light}; } diff --git a/packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsContainer.tsx b/packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsContainer.tsx index 74562a1eeb..1ef9fd39ce 100644 --- a/packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsContainer.tsx @@ -13,16 +13,16 @@ import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledShowPageRightContainer = styled.div` display: flex; flex-direction: column; - justify-content: start; - width: 100%; height: 100%; + justify-content: start; overflow: auto; + width: 100%; `; const StyledContentContainer = styled.div` + background: ${themeCssVariables.background.primary}; flex: 1; overflow-y: auto; - background: ${themeCssVariables.background.primary}; padding-bottom: ${themeCssVariables.spacing[16]}; `; diff --git a/packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsFooter.tsx b/packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsFooter.tsx index 2300e6c537..457272e9a9 100644 --- a/packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsFooter.tsx +++ b/packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsFooter.tsx @@ -21,8 +21,8 @@ const StyledFooterContainer = styled.div` `; const StyledFooterActions = styled.div` - display: flex; align-items: flex-end; + display: flex; gap: ${themeCssVariables.spacing[2]}; `; diff --git a/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx b/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx index 6bea820ce3..e57b829147 100644 --- a/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx +++ b/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx @@ -5,12 +5,12 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledCheckContainer = styled.div<{ color: string }>` align-items: center; - display: flex; - justify-content: center; border: 2px solid ${({ color }) => color}; border-radius: ${themeCssVariables.border.radius.rounded}; box-shadow: ${({ color }) => color && `-4px 4px 0 -2px ${color}`}; + display: flex; height: 36px; + justify-content: center; width: 36px; `; diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx index 714a7a2998..c70f822ba9 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx @@ -57,10 +57,10 @@ const StyledGridContainer = styled.div` box-sizing: border-box; flex: 1; min-height: 100%; - position: relative; padding: ${themeCssVariables.spacing[2]}; - width: 100%; + position: relative; user-select: none; + width: 100%; .react-grid-placeholder { background: ${themeCssVariables.color.blue7} !important; diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridOverlay.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridOverlay.tsx index d49e5d6338..db9e35af7c 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridOverlay.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridOverlay.tsx @@ -17,18 +17,18 @@ const StyledGridOverlay = styled.div<{ isDragSelecting?: boolean; breakpoint: PageLayoutBreakpoint; }>` - position: absolute; - top: ${themeCssVariables.spacing[2]}; - left: ${themeCssVariables.spacing[2]}; - right: ${themeCssVariables.spacing[2]}; bottom: ${themeCssVariables.spacing[2]}; display: grid; + gap: ${themeCssVariables.spacing[2]}; + grid-auto-rows: 55px; grid-template-columns: ${({ breakpoint }) => breakpoint === 'mobile' ? '1fr' : 'repeat(12, 1fr)'}; - grid-auto-rows: 55px; - gap: ${themeCssVariables.spacing[2]}; + left: ${themeCssVariables.spacing[2]}; pointer-events: ${({ isDragSelecting }) => isDragSelecting ? 'auto' : 'none'}; + position: absolute; + right: ${themeCssVariables.spacing[2]}; + top: ${themeCssVariables.spacing[2]}; z-index: ${PAGE_LAYOUT_GRID_OVERLAY_Z_INDEX}; `; diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx index f4e40877ea..f4b7d5f2ea 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx @@ -25,12 +25,12 @@ const StyledCornerIconWrapper = styled.div<{ cursor: 'nwse-resize' | 'nesw-resize'; position: 'ne' | 'nw' | 'se' | 'sw'; }>` - display: flex; - justify-content: center; align-items: center; cursor: ${({ cursor }) => cursor}; - width: ${themeCssVariables.spacing[4]}; + display: flex; height: ${themeCssVariables.spacing[4]}; + justify-content: center; + width: ${themeCssVariables.spacing[4]}; & svg { color: transparent; @@ -69,11 +69,11 @@ const StyledVerticalHandle = styled.div` const StyledVerticalHandleWrapper = styled.div<{ widgetHandleAxis: WidgetVerticalHandleAxis; }>` - cursor: col-resize; border-radius: ${themeCssVariables.border.radius.sm}; + cursor: col-resize; + padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[2]}; transform: ${({ widgetHandleAxis }) => widgetHandleAxis === 'w' ? 'translateX(-50%)' : 'translateX(50%)'}; - padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[2]}; :hover { & > div { @@ -85,15 +85,6 @@ const StyledVerticalHandleWrapper = styled.div<{ const StyledResizeHandleWrapper = styled.div<{ widgetHandleAxis?: WidgetHandleAxis; }>` - position: absolute; - - top: ${({ widgetHandleAxis }) => { - if (widgetHandleAxis === 'w' || widgetHandleAxis === 'e') return '50%'; - if (widgetHandleAxis === 'n') return themeCssVariables.spacing[1.5]; - if (widgetHandleAxis === 'ne' || widgetHandleAxis === 'nw') return '0'; - return 'auto'; - }}; - bottom: ${({ widgetHandleAxis }) => { if (widgetHandleAxis === 's') return themeCssVariables.spacing[1.5]; if (widgetHandleAxis === 'se' || widgetHandleAxis === 'sw') return '0'; @@ -107,12 +98,21 @@ const StyledResizeHandleWrapper = styled.div<{ return 'auto'; }}; + position: absolute; + right: ${({ widgetHandleAxis }) => { if (widgetHandleAxis === 'e') return themeCssVariables.spacing[1.5]; if (widgetHandleAxis === 'se' || widgetHandleAxis === 'ne') return '0'; return 'auto'; }}; + top: ${({ widgetHandleAxis }) => { + if (widgetHandleAxis === 'w' || widgetHandleAxis === 'e') return '50%'; + if (widgetHandleAxis === 'n') return themeCssVariables.spacing[1.5]; + if (widgetHandleAxis === 'ne' || widgetHandleAxis === 'nw') return '0'; + return 'auto'; + }}; + transform: ${({ widgetHandleAxis }) => { switch (widgetHandleAxis) { case 'w': diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutLeftPanel.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutLeftPanel.tsx index dfd73f9543..b3bf87fefa 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutLeftPanel.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutLeftPanel.tsx @@ -18,8 +18,8 @@ const StyledContainer = styled.div` border-top-left-radius: 8px; box-sizing: border-box; display: grid; - grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); + grid-template-rows: auto 1fr; height: 100%; `; diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx index 9403b76ac5..f095c1aafb 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx @@ -74,8 +74,8 @@ const StyledDropdownContainer = styled.div` `; const StyledAddButton = styled.div` - display: flex; align-items: center; + display: flex; height: ${themeCssVariables.spacing[10]}; margin-left: ${TAB_LIST_GAP}px; `; diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableOverflowDropdown.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableOverflowDropdown.tsx index a43030dc84..b386308bc2 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableOverflowDropdown.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableOverflowDropdown.tsx @@ -32,8 +32,8 @@ import { type PageLayoutType } from '~/generated-metadata/graphql'; import { ThemeContext } from 'twenty-ui/theme-constants'; const StyledOverflowDropdownListDraggableWrapper = styled.div` - display: flex; cursor: grab; + display: flex; &:active { cursor: grabbing; diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListVisibleTabs.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListVisibleTabs.tsx index 7265285115..4d4184cd4f 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListVisibleTabs.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListVisibleTabs.tsx @@ -27,9 +27,9 @@ type PageLayoutTabListVisibleTabsProps = { const StyledTabContainer = styled.div` display: flex; - position: relative; - overflow: hidden; max-width: 100%; + overflow: hidden; + position: relative; > *:not(:last-child) { margin-right: ${TAB_LIST_GAP}px; diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabMenuItemSelectAvatar.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabMenuItemSelectAvatar.tsx index e7c8078818..eff6a12ae8 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabMenuItemSelectAvatar.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabMenuItemSelectAvatar.tsx @@ -13,18 +13,18 @@ import { } from 'twenty-ui/navigation'; import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants'; const StyledTextContainer = styled.div` - display: flex; align-items: center; + display: flex; flex: 1 0 0; gap: ${themeCssVariables.spacing[1]}; max-width: 100%; - text-overflow: ellipsis; overflow: hidden; + text-overflow: ellipsis; `; const StyledRightContent = styled.div` - display: flex; align-items: center; + display: flex; gap: ${themeCssVariables.spacing[1]}; `; diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabRenderClone.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabRenderClone.tsx index 8d4ff67a0d..ef1f7dbaac 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabRenderClone.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabRenderClone.tsx @@ -12,8 +12,8 @@ import { MenuItemSelectAvatar } from 'twenty-ui/navigation'; import { ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; const StyledDraggableWrapper = styled.div` - display: flex; cursor: grab; + display: flex; &:active { cursor: grabbing; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetInlineCellContainer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetInlineCellContainer.tsx index 453c9f0bfa..454f8673dd 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetInlineCellContainer.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetInlineCellContainer.tsx @@ -15,14 +15,14 @@ const StyledValueContainer = styled.div<{ readonly: boolean }>` `; const StyledInlineCellBaseContainer = styled.div<{ readonly: boolean }>` - box-sizing: border-box; - width: 100%; - display: flex; - height: fit-content; - gap: ${themeCssVariables.spacing[1]}; - user-select: none; align-items: center; + box-sizing: border-box; cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')}; + display: flex; + gap: ${themeCssVariables.spacing[1]}; + height: fit-content; + user-select: none; + width: 100%; `; export const FieldWidgetInlineCellContainer = () => { diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetMorphRelationField.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetMorphRelationField.tsx index 5448250791..c46b2122e1 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetMorphRelationField.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetMorphRelationField.tsx @@ -14,8 +14,8 @@ const StyledContainer = styled.div` const StyledRelationChipsContainer = styled.div` display: flex; - gap: ${themeCssVariables.spacing[1]}; flex-wrap: wrap; + gap: ${themeCssVariables.spacing[1]}; `; type FieldWidgetMorphRelationFieldProps = { diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationField.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationField.tsx index 32bbe3c7e1..548e4ceebd 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationField.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationField.tsx @@ -14,8 +14,8 @@ const StyledContainer = styled.div` const StyledRelationChipsContainer = styled.div` display: flex; - gap: ${themeCssVariables.spacing[1]}; flex-wrap: wrap; + gap: ${themeCssVariables.spacing[1]}; `; type FieldWidgetRelationFieldProps = { diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetShowMoreButton.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetShowMoreButton.tsx index b5578cdc69..44d7ff94bc 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetShowMoreButton.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetShowMoreButton.tsx @@ -10,20 +10,20 @@ type FieldWidgetShowMoreButtonProps = { }; const StyledButton = styled.button` - display: flex; - width: 100%; align-items: center; - gap: ${themeCssVariables.spacing[1]}; - height: 24px; - box-sizing: border-box; - padding: 0; - border: none; background: transparent; + border: none; + box-sizing: border-box; color: ${themeCssVariables.font.color.tertiary}; + cursor: pointer; + display: flex; font-family: ${themeCssVariables.font.family}; font-weight: ${themeCssVariables.font.weight.regular}; - cursor: pointer; + gap: ${themeCssVariables.spacing[1]}; + height: 24px; + padding: 0; transition: color ${themeCssVariables.animation.duration.instant}s ease; + width: 100%; &:hover { color: ${themeCssVariables.font.color.primary}; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupRenameInput.tsx b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupRenameInput.tsx index 543ae8f26d..984b97c13e 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupRenameInput.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupRenameInput.tsx @@ -9,11 +9,11 @@ import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` align-items: center; + box-sizing: border-box; display: flex; gap: ${themeCssVariables.spacing[1]}; padding: ${themeCssVariables.spacing[1]}; width: 100%; - box-sizing: border-box; `; type FieldsConfigurationGroupRenameInputProps = { diff --git a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx index 0eed5ab7f0..bb058ba5d2 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx @@ -36,8 +36,8 @@ const StyledPropertyBox = styled.div` display: flex; flex-direction: column; gap: ${themeCssVariables.spacing[2]}; - padding-top: ${themeCssVariables.spacing[3]}; padding-bottom: ${themeCssVariables.spacing[3]}; + padding-top: ${themeCssVariables.spacing[3]}; `; const StyledInlineFieldsPropertyBox = styled.div` @@ -46,8 +46,8 @@ const StyledInlineFieldsPropertyBox = styled.div` display: flex; flex-direction: column; gap: ${themeCssVariables.spacing[2]}; - padding-top: 0; padding-bottom: 0; + padding-top: 0; `; type FieldsWidgetProps = { diff --git a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidgetGroupContainer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidgetGroupContainer.tsx index f17bf8d6c3..402efa21e0 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidgetGroupContainer.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidgetGroupContainer.tsx @@ -19,11 +19,11 @@ const StyledTitleLabel = styled.div` const StyledChevronWrapper = styled.div<{ isExpanded: boolean }>` color: ${themeCssVariables.font.color.tertiary}; + display: flex; transform: ${({ isExpanded }) => isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'}; transition: transform calc(${themeCssVariables.animation.duration.normal} * 1s) ease; - display: flex; `; type FieldsWidgetGroupContainerProps = { diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx index bc0b032d43..4749655458 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx @@ -49,24 +49,24 @@ const StyledLegendMotionWrapper = motion.create(StyledLegendMotionWrapperBase); const StyledItemsWrapperBase = styled.div<{ centered?: boolean }>` display: flex; - gap: ${themeCssVariables.spacing[3]}; - flex-wrap: nowrap; flex: 1; - min-width: 0; + flex-wrap: nowrap; + gap: ${themeCssVariables.spacing[3]}; justify-content: ${({ centered }) => (centered ? 'center' : 'flex-start')}; + min-width: 0; `; const StyledItemsWrapper = motion.create(StyledItemsWrapperBase); const StyledLegendContainer = styled.div<{ needsPagination: boolean }>` + align-items: center; display: flex; flex-wrap: nowrap; gap: ${themeCssVariables.spacing[3]}; justify-content: ${({ needsPagination }) => needsPagination ? 'flex-start' : 'center'}; - padding-top: ${themeCssVariables.spacing[3]}; overflow: hidden; + padding-top: ${themeCssVariables.spacing[3]}; width: 100%; - align-items: center; `; const StyledLegendItem = styled.div<{ @@ -77,10 +77,10 @@ const StyledLegendItem = styled.div<{ align-items: center; cursor: ${({ isInteractive }) => (isInteractive ? 'pointer' : 'default')}; display: flex; - gap: ${themeCssVariables.spacing[1]}; + flex-shrink: ${({ canShrink }) => (canShrink ? 1 : 0)}; font-size: ${themeCssVariables.font.size.xs}; font-weight: ${themeCssVariables.font.weight.semiBold}; - flex-shrink: ${({ canShrink }) => (canShrink ? 1 : 0)}; + gap: ${themeCssVariables.spacing[1]}; min-width: 0; `; @@ -89,12 +89,12 @@ const StyledLegendLabel = styled.div<{ isHidden?: boolean; }>` color: ${themeCssVariables.font.color.secondary}; - width: ${({ fixedWidth }) => - fixedWidth ? `${LEGEND_LABEL_MAX_WIDTH}px` : 'auto'}; - overflow: hidden; - text-decoration: ${({ isHidden }) => (isHidden ? 'line-through' : 'none')}; opacity: ${({ isHidden }) => isHidden ? LEGEND_HIGHLIGHT_DIMMED_OPACITY : 1}; + overflow: hidden; + text-decoration: ${({ isHidden }) => (isHidden ? 'line-through' : 'none')}; + width: ${({ fixedWidth }) => + fixedWidth ? `${LEGEND_LABEL_MAX_WIDTH}px` : 'auto'}; :hover { opacity: 1; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegendDot.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegendDot.tsx index 31d7762de7..f26af1facc 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegendDot.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegendDot.tsx @@ -8,9 +8,9 @@ type GraphWidgetLegendDotProps = { const StyledDot = styled.div<{ color: string }>` background: ${({ color }) => color}; border-radius: 2px; + flex-shrink: 0; height: 8px; width: 8px; - flex-shrink: 0; `; export const GraphWidgetLegendDot = ({ diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetTooltip.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetTooltip.tsx index 62d5186267..be773c6379 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetTooltip.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetTooltip.tsx @@ -50,11 +50,11 @@ const StyledTooltipLink = styled.div` color: ${themeCssVariables.font.color.light}; cursor: pointer; display: flex; - justify-content: space-between; - height: ${themeCssVariables.spacing[6]}; font-weight: ${themeCssVariables.font.weight.regular}; - padding-inline: ${themeCssVariables.spacing[2]}; + height: ${themeCssVariables.spacing[6]}; + justify-content: space-between; line-height: 140%; + padding-inline: ${themeCssVariables.spacing[2]}; `; const StyledTooltipSeparator = styled.div` @@ -75,12 +75,12 @@ const StyledTooltipHeader = styled.div` const StyledTooltipRowRightContent = styled.div` align-items: center; - display: flex; - justify-content: space-between; - font-size: ${themeCssVariables.font.size.xs}; color: ${themeCssVariables.font.color.extraLight}; + display: flex; + font-size: ${themeCssVariables.font.size.xs}; font-weight: ${themeCssVariables.font.weight.regular}; gap: ${themeCssVariables.spacing[2]}; + justify-content: space-between; min-width: 0; width: 100%; `; @@ -91,14 +91,14 @@ const StyledTooltipLabel = styled.span<{ isHighlighted?: boolean }>` ? themeCssVariables.font.color.secondary : themeCssVariables.font.color.tertiary}; flex: 1; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; font-weight: ${({ isHighlighted }) => isHighlighted ? themeCssVariables.font.weight.medium : themeCssVariables.font.weight.regular}; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; `; const StyledNoDataMessage = styled.span` @@ -123,10 +123,10 @@ const StyledHorizontalSectionPadding = styled.div<{ addTop?: boolean; addBottom?: boolean; }>` - padding-inline: ${themeCssVariables.spacing[1]}; - margin-top: ${({ addTop }) => (addTop ? themeCssVariables.spacing[1] : 0)}; margin-bottom: ${({ addBottom }) => addBottom ? themeCssVariables.spacing[1] : 0}; + margin-top: ${({ addTop }) => (addTop ? themeCssVariables.spacing[1] : 0)}; + padding-inline: ${themeCssVariables.spacing[1]}; `; export type GraphWidgetTooltipItem = { diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx index fa9a3ce94a..d6062355b2 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx @@ -32,8 +32,8 @@ const StyledContainer = styled.div` `; const StyledTrendIconContainer = styled.div` - display: flex; align-items: center; + display: flex; justify-content: center; `; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChartBaseLayer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChartBaseLayer.tsx index 5b4415a8ae..ea33b1fb32 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChartBaseLayer.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChartBaseLayer.tsx @@ -20,10 +20,10 @@ type BarChartBaseLayerProps = { const StyledBaseCanvas = styled.canvas` display: block; + left: 0; pointer-events: none; position: absolute; top: 0; - left: 0; `; export const BarChartBaseLayer = ({ diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChartHoverLayer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChartHoverLayer.tsx index f085387d6c..0e7d0e2c63 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChartHoverLayer.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChartHoverLayer.tsx @@ -15,9 +15,9 @@ type BarChartHoverLayerProps = { const StyledHoverCanvas = styled.canvas` display: block; + left: 0; position: absolute; top: 0; - left: 0; `; export const BarChartHoverLayer = ({ diff --git a/packages/twenty-front/src/modules/page-layout/widgets/iframe/components/IframeWidget.tsx b/packages/twenty-front/src/modules/page-layout/widgets/iframe/components/IframeWidget.tsx index bc815fb03f..7b22afd374 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/iframe/components/IframeWidget.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/iframe/components/IframeWidget.tsx @@ -9,45 +9,45 @@ import { isDefined } from 'twenty-shared/utils'; import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div<{ $isEditMode: boolean }>` - box-sizing: border-box; - border-radius: ${themeCssVariables.border.radius.md}; background: ${themeCssVariables.background.primary}; + border-radius: ${themeCssVariables.border.radius.md}; + box-sizing: border-box; display: flex; flex-direction: column; height: 100%; overflow: hidden; + pointer-events: ${({ $isEditMode }) => ($isEditMode ? 'none' : 'auto')}; position: relative; width: 100%; - pointer-events: ${({ $isEditMode }) => ($isEditMode ? 'none' : 'auto')}; `; const StyledIframe = styled.iframe<{ $isEditMode: boolean }>` border: none; flex: 1; height: 100%; - width: 100%; pointer-events: ${({ $isEditMode }) => ($isEditMode ? 'none' : 'auto')}; + width: 100%; `; const StyledLoadingContainer = styled.div` - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - padding-top: ${themeCssVariables.spacing[2]}; - padding-left: ${themeCssVariables.spacing[2]}; background: ${themeCssVariables.background.primary}; + bottom: 0; + left: 0; + padding-left: ${themeCssVariables.spacing[2]}; + padding-top: ${themeCssVariables.spacing[2]}; pointer-events: none; + position: absolute; + right: 0; + top: 0; z-index: 1; `; const StyledErrorContainer = styled.div` + align-items: center; display: flex; flex-direction: column; - align-items: center; - justify-content: center; height: 100%; + justify-content: center; padding: ${themeCssVariables.spacing[4]}; text-align: center; `; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx b/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx index e2d84d3cfc..504d1df7fc 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx @@ -32,8 +32,8 @@ const StyledEditor = styled.div` & .editor { background: transparent; - font-size: 13px; color: ${themeCssVariables.font.color.primary}; + font-size: 13px; user-select: text; } & .editor [class^='_inlineContent']:before { @@ -44,32 +44,32 @@ 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-outer { line-height: 1.4; } & .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; + min-width: 160px; padding: 4px; - border-radius: 8px; - border: 1px solid ${themeCssVariables.border.color.medium}; } & .bn-editor { @@ -85,30 +85,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; @@ -127,13 +127,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; } `; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/StandaloneRichTextWidget.tsx b/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/StandaloneRichTextWidget.tsx index 729db0d54a..5339695658 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/StandaloneRichTextWidget.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/StandaloneRichTextWidget.tsx @@ -26,10 +26,10 @@ const StyledContainer = styled.div<{ isPageLayoutInEditMode?: boolean }>` display: flex; flex-direction: column; height: 100%; - width: 100%; overflow: hidden; padding-left: ${({ isPageLayoutInEditMode }) => isPageLayoutInEditMode ? themeCssVariables.spacing[5] : 0}; + width: 100%; `; type StandaloneRichTextWidgetProps = { diff --git a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCard.tsx b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCard.tsx index 4441a286fe..fbd553dec8 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCard.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCard.tsx @@ -30,13 +30,6 @@ const computeBorderColor = ( }; const StyledWidgetCard = styled.div` - box-sizing: border-box; - display: flex; - flex-direction: column; - position: relative; - height: 100%; - width: 100%; - background: ${(props) => { if (props.isEditable && props.isDragging) { return `linear-gradient(0deg, ${themeCssVariables.background.transparent.lighter} 0%, ${themeCssVariables.background.transparent.lighter} 100%), ${themeCssVariables.background.secondary}`; @@ -52,34 +45,6 @@ const StyledWidgetCard = styled.div` } return 'none'; }}; - - border-style: ${({ variant, isEditable }) => - variant === 'dashboard' || variant === 'record-page' || isEditable - ? 'solid' - : 'none'}; - - border-width: ${({ variant, isEditable }) => - variant === 'dashboard' || variant === 'record-page' || isEditable - ? '1px' - : '0'}; - - border-color: ${(props) => computeBorderColor(props)}; - - border-radius: ${({ variant, isEditable }) => - variant === 'dashboard' || variant === 'record-page' || isEditable - ? themeCssVariables.border.radius.md - : '0'}; - - padding: ${({ variant, isEditable, headerLess }) => { - if (variant === 'dashboard' && headerLess === true) return '0'; - if (variant === 'dashboard') return themeCssVariables.spacing[2]; - if (variant === 'side-column' && !isEditable) - return themeCssVariables.spacing[3]; - if (variant === 'record-page' || isEditable) - return themeCssVariables.spacing[2]; - return '0'; - }}; - border-bottom: ${(props) => { const { variant, isEditable, isLastWidget } = props; if (variant === 'side-column' && !isEditable) { @@ -89,6 +54,21 @@ const StyledWidgetCard = styled.div` } return `1px solid ${computeBorderColor(props)}`; }}; + border-color: ${(props) => computeBorderColor(props)}; + border-radius: ${({ variant, isEditable }) => + variant === 'dashboard' || variant === 'record-page' || isEditable + ? themeCssVariables.border.radius.md + : '0'}; + border-style: ${({ variant, isEditable }) => + variant === 'dashboard' || variant === 'record-page' || isEditable + ? 'solid' + : 'none'}; + border-width: ${({ variant, isEditable }) => + variant === 'dashboard' || variant === 'record-page' || isEditable + ? '1px' + : '0'}; + + box-sizing: border-box; cursor: ${({ isEditable, @@ -101,6 +81,26 @@ const StyledWidgetCard = styled.div` ? 'pointer' : 'default'}; + display: flex; + + flex-direction: column; + + height: 100%; + + padding: ${({ variant, isEditable, headerLess }) => { + if (variant === 'dashboard' && headerLess === true) return '0'; + if (variant === 'dashboard') return themeCssVariables.spacing[2]; + if (variant === 'side-column' && !isEditable) + return themeCssVariables.spacing[3]; + if (variant === 'record-page' || isEditable) + return themeCssVariables.spacing[2]; + return '0'; + }}; + + position: relative; + + width: 100%; + &:hover { border-color: ${(props) => { if ( diff --git a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardContent.tsx b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardContent.tsx index e79cde2f31..cd68776d5e 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardContent.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardContent.tsx @@ -9,15 +9,25 @@ type WidgetCardContentStyledProps = { }; const StyledWidgetCardContent = styled.div` + border: ${({ variant, isEditable }) => + variant === 'record-page' || (variant === 'side-column' && isEditable) + ? `1px solid ${themeCssVariables.border.color.medium}` + : 'none'}; + border-radius: ${({ variant, isEditable }) => + variant === 'record-page' || (variant === 'side-column' && isEditable) + ? themeCssVariables.border.radius.md + : '0'}; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); + height: 100%; - overflow: hidden; margin-top: ${({ hasHeader }) => hasHeader ? themeCssVariables.spacing[2] : '0'}; + overflow: hidden; + padding: ${({ variant, isEditable }) => { if (variant === 'dashboard') return themeCssVariables.spacing[2]; if ( @@ -29,16 +39,6 @@ const StyledWidgetCardContent = styled.div` return '0'; }}; - border: ${({ variant, isEditable }) => - variant === 'record-page' || (variant === 'side-column' && isEditable) - ? `1px solid ${themeCssVariables.border.color.medium}` - : 'none'}; - - border-radius: ${({ variant, isEditable }) => - variant === 'record-page' || (variant === 'side-column' && isEditable) - ? themeCssVariables.border.radius.md - : '0'}; - &:empty { margin-top: ${({ hasHeader, variant, isEditable }) => { if (hasHeader && variant === 'side-column' && !isEditable) return '0'; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardHeader.tsx b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardHeader.tsx index 5a0f1739aa..ffe5fb3c6c 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardHeader.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardHeader.tsx @@ -31,8 +31,8 @@ export type WidgetCardHeaderProps = { const StyledWidgetCardHeader = styled.div` align-items: center; display: flex; - height: ${themeCssVariables.spacing[6]}; flex-shrink: 0; + height: ${themeCssVariables.spacing[6]}; `; const StyledTitleContainer = styled.div<{ variant: WidgetCardVariant }>` @@ -40,28 +40,28 @@ const StyledTitleContainer = styled.div<{ variant: WidgetCardVariant }>` flex: 1; font-size: ${themeCssVariables.font.size.md}; font-weight: ${themeCssVariables.font.weight.medium}; - user-select: none; overflow: hidden; - padding-inline: ${({ variant }) => variant === 'side-column' ? '0' : themeCssVariables.spacing[1]}; + + user-select: none; `; const StyledRightContainer = styled.div` - display: flex; align-items: center; + display: flex; gap: ${themeCssVariables.spacing[0.5]}; `; const StyledActionsContainer = styled.div` - display: flex; align-items: center; + display: flex; gap: ${themeCssVariables.spacing[1]}; `; const StyledIconButtonContainerBase = styled.div` - display: flex; align-items: center; + display: flex; justify-content: center; `; const StyledIconButtonContainer = motion.create(StyledIconButtonContainerBase); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetGrip.tsx b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetGrip.tsx index e240e41138..db47ad1355 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetGrip.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetGrip.tsx @@ -5,19 +5,19 @@ import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; const StyledGripContainerBase = styled.div` - width: 20px; - height: 20px; - display: flex; align-items: center; - justify-content: center; - cursor: grab; - user-select: none; border-radius: ${themeCssVariables.border.radius.sm}; box-sizing: border-box; + cursor: grab; + display: flex; + height: 20px; + justify-content: center; + user-select: none; + width: 20px; &:active { - cursor: grabbing; background: ${themeCssVariables.background.tertiary}; + cursor: grabbing; } &:hover { diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx index fc3a3f9aac..3ce9ee7978 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx @@ -43,9 +43,9 @@ const StyledDescription = styled.div` `; const StyledRadioContainer = styled.span` - margin-left: auto; - display: flex; align-items: center; + display: flex; + margin-left: auto; `; const StyledExpandedContent = styled.div` diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx index 306c3784fc..2e609f7fe3 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx @@ -17,9 +17,9 @@ type SettingsAccountsToggleSettingCardProps = { const StyledCardContentContainer = styled.div` > * { align-items: center; + cursor: pointer; display: flex; gap: ${themeCssVariables.spacing[4]}; - cursor: pointer; &:hover { background: ${themeCssVariables.background.transparent.lighter}; @@ -39,9 +39,9 @@ const StyledDescription = styled.div` `; const StyledToggleContainer = styled.span` - margin-left: auto; - display: flex; align-items: center; + display: flex; + margin-left: auto; `; export const SettingsAccountsToggleSettingCard = ({ diff --git a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesRow.tsx b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesRow.tsx index bd6081ef75..10efaf630d 100644 --- a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesRow.tsx +++ b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesRow.tsx @@ -21,9 +21,9 @@ const StyledTableRowContainer = styled.div` `; const StyledEllipsisLabel = styled.div` - white-space: nowrap; - text-overflow: ellipsis; overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; `; export const SettingsAdminConfigVariablesRow = ({ diff --git a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminJsonDataIndicatorHealthStatus.tsx b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminJsonDataIndicatorHealthStatus.tsx index 1b24e8d253..7531d54a88 100644 --- a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminJsonDataIndicatorHealthStatus.tsx +++ b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminJsonDataIndicatorHealthStatus.tsx @@ -10,17 +10,17 @@ import { useCopyToClipboard } from '~/hooks/useCopyToClipboard'; const StyledDetailsContainer = styled.div` background-color: ${themeCssVariables.background.secondary}; - padding: ${themeCssVariables.spacing[4]}; - border-radius: ${themeCssVariables.border.radius.md}; border: 1px solid ${themeCssVariables.border.color.medium}; + border-radius: ${themeCssVariables.border.radius.md}; font-size: ${themeCssVariables.font.size.sm}; overflow-x: auto; + padding: ${themeCssVariables.spacing[4]}; `; const StyledErrorMessage = styled.div` color: ${themeCssVariables.color.red}; - margin-top: ${themeCssVariables.spacing[2]}; margin-bottom: ${themeCssVariables.spacing[4]}; + margin-top: ${themeCssVariables.spacing[2]}; `; export const SettingsAdminJsonDataIndicatorHealthStatus = () => { diff --git a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsGraph.tsx b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsGraph.tsx index 36712ed970..ec57dafe6e 100644 --- a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsGraph.tsx +++ b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsGraph.tsx @@ -14,9 +14,9 @@ import { const StyledGraphContainer = styled.div` background-color: ${themeCssVariables.background.secondary}; + border: 1px solid ${themeCssVariables.border.color.medium}; border-radius: ${themeCssVariables.border.radius.md}; height: 240px; - border: 1px solid ${themeCssVariables.border.color.medium}; margin-bottom: ${themeCssVariables.spacing[4]}; padding-top: 10px; width: 100%; diff --git a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsTooltip.tsx b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsTooltip.tsx index 19b4cfc1f3..d0bc69aae4 100644 --- a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsTooltip.tsx +++ b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsTooltip.tsx @@ -32,10 +32,10 @@ const StyledTooltipColorCircle = styled.div<{ color: string }>` const StyledTooltipDataRow = styled.div` align-items: center; - display: flex; - justify-content: space-between; color: ${themeCssVariables.font.color.tertiary}; + display: flex; gap: ${themeCssVariables.spacing[2]}; + justify-content: space-between; width: 100%; `; diff --git a/packages/twenty-front/src/modules/settings/components/AdvancedSettingsContentWrapperWithDot.tsx b/packages/twenty-front/src/modules/settings/components/AdvancedSettingsContentWrapperWithDot.tsx index b804c521eb..c7f4a55256 100644 --- a/packages/twenty-front/src/modules/settings/components/AdvancedSettingsContentWrapperWithDot.tsx +++ b/packages/twenty-front/src/modules/settings/components/AdvancedSettingsContentWrapperWithDot.tsx @@ -16,20 +16,20 @@ type AdvancedSettingsContentWrapperWithDotProps = { }; const StyledDotContainer = styled.div<{ dotPosition: DotPosition }>` + align-items: ${({ dotPosition }) => + dotPosition === 'top' ? 'stretch' : 'center'}; display: flex; - position: absolute; height: 100%; left: calc(-1 * ${themeCssVariables.spacing[5]}); + position: absolute; top: ${({ dotPosition }) => (dotPosition === 'top' ? '0' : 'auto')}; - align-items: ${({ dotPosition }) => - dotPosition === 'top' ? 'stretch' : 'center'}; `; const StyledIconPointContainer = styled.span` - margin-right: 0; - display: flex; align-items: center; + display: flex; + margin-right: 0; `; export const AdvancedSettingsContentWrapperWithDot = ({ diff --git a/packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx b/packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx index bfa44671c3..5383ff74b1 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx @@ -29,10 +29,10 @@ const StyledTextInputContainer = styled.div` width: ${themeCssVariables.spacing[16]}; > * input { - width: ${themeCssVariables.spacing[16]}; + font-weight: ${themeCssVariables.font.weight.medium}; height: ${themeCssVariables.spacing[6]}; text-align: center; - font-weight: ${themeCssVariables.font.weight.medium}; + width: ${themeCssVariables.spacing[16]}; } `; diff --git a/packages/twenty-front/src/modules/settings/components/SettingsDatabaseEventsForm.tsx b/packages/twenty-front/src/modules/settings/components/SettingsDatabaseEventsForm.tsx index 0e36c4f3ef..1d46bf4385 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsDatabaseEventsForm.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsDatabaseEventsForm.tsx @@ -14,14 +14,14 @@ const OBJECT_MOBILE_WIDTH = 150; const ACTION_MOBILE_WIDTH = 140; const StyledFilterRow = styled.div<{ isMobile: boolean }>` + align-items: center; display: grid; + gap: ${themeCssVariables.spacing[2]}; grid-template-columns: ${({ isMobile }) => isMobile ? `${OBJECT_MOBILE_WIDTH}px ${ACTION_MOBILE_WIDTH}px auto` : `${OBJECT_DROPDOWN_WIDTH}px ${ACTION_DROPDOWN_WIDTH}px auto`}; - gap: ${themeCssVariables.spacing[2]}; margin-bottom: ${themeCssVariables.spacing[2]}; - align-items: center; `; const StyledPlaceholder = styled.div` diff --git a/packages/twenty-front/src/modules/settings/components/SettingsDnsRecordsTable.tsx b/packages/twenty-front/src/modules/settings/components/SettingsDnsRecordsTable.tsx index a1dbf5216d..5ba3ae853b 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsDnsRecordsTable.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsDnsRecordsTable.tsx @@ -30,8 +30,8 @@ type SettingsDnsRecordsTableProps = { const StyledTableRowContainer = styled.div` > * > * { - min-width: 0; max-width: 100%; + min-width: 0; overflow: hidden; } `; diff --git a/packages/twenty-front/src/modules/settings/components/SettingsItemTypeTag.tsx b/packages/twenty-front/src/modules/settings/components/SettingsItemTypeTag.tsx index 935c2141bf..ab020b93a7 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsItemTypeTag.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsItemTypeTag.tsx @@ -17,10 +17,10 @@ type SettingsItemTypeTagProps = { const StyledContainer = styled.div` align-items: center; + color: ${themeCssVariables.font.color.secondary}; display: flex; font-size: ${themeCssVariables.font.size.sm}; gap: ${themeCssVariables.spacing[1]}; - color: ${themeCssVariables.font.color.secondary}; `; export const SettingsItemTypeTag = ({ diff --git a/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx index ecd692c8bc..8325af9596 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx @@ -22,13 +22,13 @@ const StyledButton = styled.button` border: none; border-radius: ${themeCssVariables.border.radius.sm}; color: ${themeCssVariables.font.color.secondary}; - gap: ${themeCssVariables.spacing[2]}; - padding: 0 ${themeCssVariables.spacing[1]}; - padding-left: ${themeCssVariables.spacing[2]}; cursor: pointer; display: flex; flex: 1 0 0; + gap: ${themeCssVariables.spacing[2]}; height: ${themeCssVariables.spacing[8]}; + padding: 0 ${themeCssVariables.spacing[1]}; + padding-left: ${themeCssVariables.spacing[2]}; width: 100%; &:hover { diff --git a/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx b/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx index 948d41f0e9..c7ece98191 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx @@ -13,9 +13,9 @@ const StyledRowContainer = styled.div` font-size: ${themeCssVariables.font.size.sm}; font-weight: ${themeCssVariables.font.weight.medium}; gap: ${themeCssVariables.spacing[2]}; + min-height: ${themeCssVariables.spacing[6]}; padding: ${themeCssVariables.spacing[2]}; padding-left: ${themeCssVariables.spacing[3]}; - min-height: ${themeCssVariables.spacing[6]}; } `; @@ -26,8 +26,8 @@ const StyledRightContainer = styled.div` `; const StyledContent = styled.div` - flex: 1 1 0; display: flex; + flex: 1 1 0; gap: ${themeCssVariables.spacing[1]}; min-width: 0; overflow: hidden; diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsCardContentBase.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsCardContentBase.tsx index cc33dc7443..210464c3af 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsCardContentBase.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsCardContentBase.tsx @@ -9,22 +9,22 @@ type StyledCardContentProps = { export const StyledSettingsCardContent = styled.div` align-items: ${({ alignItems }) => alignItems ?? 'center'}; + background-color: ${themeCssVariables.background.secondary}; display: flex; gap: ${themeCssVariables.spacing[3]}; - background-color: ${themeCssVariables.background.secondary}; height: ${({ fullHeight }) => (fullHeight ? '100%' : 'auto')}; padding: ${themeCssVariables.spacing[4]}; `; export const StyledSettingsCardIcon = styled.div` align-items: center; + background-color: ${themeCssVariables.background.primary}; border: 2px solid ${themeCssVariables.border.color.light}; border-radius: ${themeCssVariables.border.radius.sm}; - background-color: ${themeCssVariables.background.primary}; display: flex; height: ${themeCssVariables.spacing[7]}; justify-content: center; - width: ${themeCssVariables.spacing[7]}; min-width: ${themeCssVariables.icon.size.md}; + width: ${themeCssVariables.spacing[7]}; `; export const StyledSettingsCardTitle = styled.div` @@ -41,13 +41,13 @@ export const StyledSettingsCardTextContainer = styled.div` export const StyledSettingsCardDescription = styled.div` color: ${themeCssVariables.font.color.secondary}; font-size: ${themeCssVariables.font.size.sm}; - overflow: hidden; line-height: 1.5; + overflow: hidden; a { + pointer-events: auto; position: relative; z-index: 1; - pointer-events: auto; } `; diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx index 795be2e3a0..2c1fe297dd 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx @@ -17,13 +17,13 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSettingsCardToggleContent = styled.div<{ disabled?: boolean }>` align-items: center; + background-color: ${themeCssVariables.background.secondary}; + cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')}; display: flex; gap: ${themeCssVariables.spacing[3]}; - background-color: ${themeCssVariables.background.secondary}; padding: ${themeCssVariables.spacing[4]}; - cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')}; - position: relative; pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')}; + position: relative; &:hover { background: ${themeCssVariables.background.transparent.lighter}; diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionIconCustomizer.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionIconCustomizer.tsx index 6a84c2f23f..9a28858c60 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionIconCustomizer.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionIconCustomizer.tsx @@ -10,8 +10,8 @@ type SettingsOptionIconCustomizerProps = { }; const StyledIconCustomizer = styled.div<{ zoom: number; rotate: number }>` - display: inline-flex; align-items: center; + display: inline-flex; justify-content: center; transform: scale(${({ zoom }) => zoom}) rotate(${({ rotate }) => rotate}deg); `; diff --git a/packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx b/packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx index 56f1ad4c03..a210d25136 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx @@ -19,6 +19,7 @@ const StyledSettingsPageContainer = styled.div<{ overflow: auto; padding: ${themeCssVariables.spacing[6]} ${themeCssVariables.spacing[8]} ${themeCssVariables.spacing[8]}; + padding-bottom: ${themeCssVariables.spacing[20]}; width: ${({ width, isMobile }) => { if (isDefined(width)) { return width + 'px'; @@ -28,7 +29,6 @@ const StyledSettingsPageContainer = styled.div<{ } return OBJECT_SETTINGS_WIDTH + 'px'; }}; - padding-bottom: ${themeCssVariables.spacing[20]}; `; export const SettingsPageContainer = ({ diff --git a/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx index deccf22129..68f8944ee4 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx @@ -7,14 +7,14 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledRadioCardContentContainer = styled.div` > * { - display: flex; align-items: center; - padding: ${themeCssVariables.spacing[2]}; border: 1px solid ${themeCssVariables.border.color.medium}; border-radius: ${themeCssVariables.border.radius.sm}; + cursor: pointer; + display: flex; flex-grow: 1; gap: ${themeCssVariables.spacing[2]}; - cursor: pointer; + padding: ${themeCssVariables.spacing[2]}; &:hover { background: ${themeCssVariables.background.transparent.lighter}; diff --git a/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx index e1fce173fe..2a37b249e7 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx @@ -13,8 +13,8 @@ const StyledCardContentContainer = styled.div` align-items: center; display: flex; gap: ${themeCssVariables.spacing[2]}; - padding: ${themeCssVariables.spacing[2]}; min-height: ${themeCssVariables.spacing[6]}; + padding: ${themeCssVariables.spacing[2]}; } `; diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx index 06ec88fbee..74d2b51446 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx @@ -56,10 +56,10 @@ const StyledInputsContainer = styled.div` const StyledAdvancedSettingsSectionInputWrapper = styled.div` display: flex; + flex: 1; flex-direction: column; gap: ${themeCssVariables.spacing[4]}; width: 100%; - flex: 1; `; const StyledAdvancedSettingsOuterContainer = styled.div` diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx index a6073125b8..bf91ea43a4 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx @@ -43,9 +43,9 @@ const StyledTypeSelectContainer = styled.div` const StyledContainer = styled.div` display: flex; + flex-wrap: wrap; gap: ${themeCssVariables.spacing[2]}; justify-content: flex-start; - flex-wrap: wrap; width: 100%; `; diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/morph-relation/components/SettingsDataModelFieldRelationPreviewContent.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/morph-relation/components/SettingsDataModelFieldRelationPreviewContent.tsx index 476dc78b20..f71fe98a41 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/morph-relation/components/SettingsDataModelFieldRelationPreviewContent.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/morph-relation/components/SettingsDataModelFieldRelationPreviewContent.tsx @@ -3,8 +3,8 @@ import { type ReactNode } from 'react'; const StyledPreviewContent = styled.div<{ isMobile: boolean }>` display: flex; - gap: 6px; flex-direction: ${({ isMobile }) => (isMobile ? 'column' : 'row')}; + gap: 6px; `; export const SettingsDataModelFieldRelationPreviewContent = ({ diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/morph-relation/components/SettingsDataModelFieldRelationPreviewImageCard.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/morph-relation/components/SettingsDataModelFieldRelationPreviewImageCard.tsx index 1554d0d04d..27defd5500 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/morph-relation/components/SettingsDataModelFieldRelationPreviewImageCard.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/morph-relation/components/SettingsDataModelFieldRelationPreviewImageCard.tsx @@ -4,6 +4,7 @@ const StyledRelationImage = styled.img<{ flip?: boolean; isMobile: boolean; }>` + margin: auto; transform: ${({ flip, isMobile }) => { let transform = ''; if (isMobile) { @@ -14,7 +15,6 @@ const StyledRelationImage = styled.img<{ } return transform.trim(); }}; - margin: auto; width: 54px; `; diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx index a7c1a77d4a..2c654d3051 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx @@ -81,12 +81,12 @@ const StyledOptionsLabel = styled.div<{ font-size: ${themeCssVariables.font.size.xs}; font-weight: ${themeCssVariables.font.weight.semiBold}; margin-bottom: ${themeCssVariables.spacing['1.5']}; - margin-top: ${themeCssVariables.spacing[1]}; - width: 100%; margin-left: ${({ isAdvancedModeEnabled, isBulkInputMode }) => isAdvancedModeEnabled && !isBulkInputMode ? themeCssVariables.spacing[10] : themeCssVariables.spacing[0]}; + margin-top: ${themeCssVariables.spacing[1]}; + width: 100%; `; const StyledApiKeyContainer = styled.div` @@ -101,9 +101,9 @@ const StyledApiKey = styled.span` font-weight: ${themeCssVariables.font.weight.semiBold}; margin-bottom: ${themeCssVariables.spacing['1.5']}; margin-top: ${themeCssVariables.spacing[1]}; - width: 100%; - white-space: nowrap; + + width: 100%; `; const StyledLabelContainer = styled.div` @@ -122,9 +122,9 @@ const StyledIconContainer = styled.div` `; const StyledIconPointContainer = styled.span` - margin-right: ${themeCssVariables.spacing['0.5']}; - display: flex; align-items: center; + display: flex; + margin-right: ${themeCssVariables.spacing['0.5']}; `; const StyledFooterContainer = styled.div` @@ -142,8 +142,8 @@ const StyledButtonContainer = styled.div` `; const StyledOptionsHeaderContainer = styled.div` - display: flex; align-items: center; + display: flex; justify-content: space-between; margin-bottom: ${themeCssVariables.spacing['1.5']}; margin-top: ${themeCssVariables.spacing[1]}; @@ -157,8 +157,8 @@ const StyledTextAreaContainer = styled.div` const StyledHelpText = styled.div` color: ${themeCssVariables.font.color.light}; font-size: ${themeCssVariables.font.size.xs}; - margin-top: ${themeCssVariables.spacing[1]}; margin-bottom: ${themeCssVariables.spacing[2]}; + margin-top: ${themeCssVariables.spacing[1]}; `; export const SettingsDataModelFieldSelectForm = ({ diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx index e63be1ea93..977543bcfa 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx @@ -76,13 +76,13 @@ const StyledRow = styled.div` `; const StyledColorSampleContainer = styled.span` - cursor: pointer; - margin-top: ${themeCssVariables.spacing[1]}; - margin-bottom: ${themeCssVariables.spacing[1]}; - margin-right: 14px; - margin-left: 14px; - display: flex; align-items: center; + cursor: pointer; + display: flex; + margin-bottom: ${themeCssVariables.spacing[1]}; + margin-left: 14px; + margin-right: 14px; + margin-top: ${themeCssVariables.spacing[1]}; `; const StyledOptionInputContainer = styled.div` @@ -95,15 +95,15 @@ const StyledOptionInputContainer = styled.div` `; const StyledIconGripVerticalContainer = styled.span` - margin-right: 3px; - display: flex; align-items: center; + display: flex; + margin-right: 3px; `; const StyledLightIconButtonContainer = styled.span` - margin-left: ${themeCssVariables.spacing[2]}; - display: flex; align-items: center; + display: flex; + margin-left: ${themeCssVariables.spacing[2]}; `; export const SettingsDataModelFieldSelectFormOptionRow = ({ diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx index 995fbcf9f7..374c49247a 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx @@ -35,14 +35,14 @@ const StyledFieldPreview = styled.div<{ shrink?: boolean }>` gap: ${themeCssVariables.spacing[2]}; height: fit-content; line-height: 24px; + margin-top: ${themeCssVariables.spacing[2]}; overflow: hidden; padding: 0 ${({ shrink }) => shrink ? themeCssVariables.spacing[1] : themeCssVariables.spacing[2]}; - white-space: nowrap; - margin-top: ${themeCssVariables.spacing[2]}; - padding-top: ${themeCssVariables.spacing[2]}; padding-bottom: ${themeCssVariables.spacing[2]}; + padding-top: ${themeCssVariables.spacing[2]}; + white-space: nowrap; `; const StyledFieldLabel = styled.div` diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreview.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreview.tsx index 44d52ff6ae..4d275b558e 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreview.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreview.tsx @@ -34,14 +34,14 @@ const StyledFieldPreview = styled.div<{ shrink?: boolean }>` gap: ${themeCssVariables.spacing[2]}; height: fit-content; line-height: 24px; + margin-top: ${themeCssVariables.spacing[2]}; overflow: hidden; padding: 0 ${({ shrink }) => shrink ? themeCssVariables.spacing[1] : themeCssVariables.spacing[2]}; - white-space: nowrap; - margin-top: ${themeCssVariables.spacing[2]}; - padding-top: ${themeCssVariables.spacing[2]}; padding-bottom: ${themeCssVariables.spacing[2]}; + padding-top: ${themeCssVariables.spacing[2]}; + white-space: nowrap; `; const StyledFieldLabel = styled.div` diff --git a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverview.tsx b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverview.tsx index a294e46552..b65bb3f792 100644 --- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverview.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverview.tsx @@ -63,9 +63,9 @@ const StyledContainer = styled.div` `; const StyledCloseButton = styled.div` + left: ${themeCssVariables.spacing[3]}; position: absolute; top: ${themeCssVariables.spacing[3]}; - left: ${themeCssVariables.spacing[3]}; z-index: 5; `; diff --git a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx index 751433db46..c758e1de6b 100644 --- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx @@ -17,9 +17,9 @@ const StyledRow = styled.div` align-items: center; display: flex; gap: ${themeCssVariables.spacing[2]}; + padding: 0 ${themeCssVariables.spacing[2]}; position: relative; width: 100%; - padding: 0 ${themeCssVariables.spacing[2]}; `; const StyledFieldName = styled.div` diff --git a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewFieldWithoutRelation.tsx b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewFieldWithoutRelation.tsx index 9405a36d3a..c733a71dfa 100644 --- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewFieldWithoutRelation.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewFieldWithoutRelation.tsx @@ -14,9 +14,9 @@ const StyledRow = styled.div` align-items: center; display: flex; gap: ${themeCssVariables.spacing[2]}; + padding: 0 ${themeCssVariables.spacing[2]}; position: relative; width: 100%; - padding: 0 ${themeCssVariables.spacing[2]}; `; const StyledFieldName = styled.div` diff --git a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx index 14a3899e7a..4f2b9522da 100644 --- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx @@ -23,14 +23,14 @@ type SettingsDataModelOverviewObjectProps = const StyledNode = styled.div` background-color: ${themeCssVariables.background.secondary}; + border: 1px solid ${themeCssVariables.border.color.medium}; border-radius: ${themeCssVariables.border.radius.md}; + box-shadow: ${themeCssVariables.boxShadow.light}; display: flex; flex-direction: column; - width: 220px; - padding: ${themeCssVariables.spacing[2]}; gap: ${themeCssVariables.spacing[2]}; - border: 1px solid ${themeCssVariables.border.color.medium}; - box-shadow: ${themeCssVariables.boxShadow.light}; + padding: ${themeCssVariables.spacing[2]}; + width: 220px; `; const StyledHeader = styled.div` @@ -50,30 +50,30 @@ const StyledObjectName = styled.div` `; const StyledInnerCard = styled.div` - border: 1px solid ${themeCssVariables.border.color.light}; background-color: ${themeCssVariables.background.primary}; + border: 1px solid ${themeCssVariables.border.color.light}; border-radius: ${themeCssVariables.border.radius.sm}; - padding: ${themeCssVariables.spacing[2]} 0 ${themeCssVariables.spacing[2]} 0; + color: ${themeCssVariables.font.color.tertiary}; display: flex; flex-flow: column nowrap; gap: ${themeCssVariables.spacing['0.5']}; - color: ${themeCssVariables.font.color.tertiary}; + padding: ${themeCssVariables.spacing[2]} 0 ${themeCssVariables.spacing[2]} 0; `; const StyledCardRow = styled.div` align-items: center; display: flex; - height: 24px; gap: ${themeCssVariables.spacing[1]}; + height: 24px; `; const StyledCardRowOther = styled.div` align-items: center; cursor: pointer; display: flex; + gap: ${themeCssVariables.spacing[2]}; height: 24px; padding: 0 ${themeCssVariables.spacing[2]}; - gap: ${themeCssVariables.spacing[2]}; &:hover { background-color: ${themeCssVariables.background.tertiary}; @@ -89,10 +89,10 @@ const StyledObjectInstanceCount = styled.div` const StyledObjectLinkContainer = styled.div` > a { align-items: center; + color: ${themeCssVariables.font.color.primary}; display: flex; gap: ${themeCssVariables.spacing[1]}; text-decoration: none; - color: ${themeCssVariables.font.color.primary}; &:hover { color: ${themeCssVariables.font.color.secondary}; diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx index 084817ca51..991110f7da 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx @@ -40,27 +40,27 @@ export const OBJECT_FIELD_TABLE_ROW_GRID_TEMPLATE_COLUMNS = 'minmax(0, 1fr) 148px 148px 36px'; const StyledNameContainer = styled.div` - display: flex; align-items: center; + display: flex; flex: 1; - min-width: 0; gap: ${themeCssVariables.spacing[1]}; + min-width: 0; `; const StyledNameLabel = styled.div` - white-space: nowrap; - text-overflow: ellipsis; overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; `; const StyledInactiveLabel = styled.span` color: ${themeCssVariables.font.color.extraLight}; - font-size: ${themeCssVariables.font.size.sm}; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; flex: 0 999 auto; + font-size: ${themeCssVariables.font.size.sm}; min-width: 48px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; &::before { content: '·'; diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx index 0194399ab5..4ef0c43aa4 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx @@ -24,27 +24,27 @@ export type SettingsObjectMetadataItemTableRowProps = { }; const StyledNameContainer = styled.div` - display: flex; align-items: center; + display: flex; flex: 1; - min-width: 0; gap: ${themeCssVariables.spacing[1]}; + min-width: 0; `; const StyledNameLabel = styled.div` - white-space: nowrap; - text-overflow: ellipsis; overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; `; const StyledInactiveLabel = styled.span` color: ${themeCssVariables.font.color.extraLight}; - font-size: ${themeCssVariables.font.size.sm}; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; flex: 0 999 auto; + font-size: ${themeCssVariables.font.size.sm}; min-width: 48px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; &::before { content: '·'; diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx index f9947635e7..f99661492b 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx @@ -29,27 +29,27 @@ export const OBJECT_RELATION_TABLE_ROW_GRID_TEMPLATE_COLUMNS = 'minmax(0, 1fr) 148px 148px 36px'; const StyledNameContainer = styled.div` - display: flex; align-items: center; + display: flex; flex: 1; - min-width: 0; gap: ${themeCssVariables.spacing[1]}; + min-width: 0; `; const StyledNameLabel = styled.div` - white-space: nowrap; - text-overflow: ellipsis; overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; `; const StyledInactiveLabel = styled.span` color: ${themeCssVariables.font.color.extraLight}; - font-size: ${themeCssVariables.font.size.sm}; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; flex: 0 999 auto; + font-size: ${themeCssVariables.font.size.sm}; min-width: 48px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; &::before { content: '·'; @@ -77,11 +77,11 @@ const StyledLinkContainer = styled.div` > a { color: ${themeCssVariables.font.color.primary}; + overflow: hidden; text-decoration: underline; text-decoration-color: ${themeCssVariables.border.color.strong}; - text-underline-offset: 2px; - overflow: hidden; text-overflow: ellipsis; + text-underline-offset: 2px; white-space: nowrap; &:hover { diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx index bde1c5d821..a6c2fbf6a1 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx @@ -17,10 +17,10 @@ const StyledCoverImageContainer = styled.div` border-radius: ${themeCssVariables.border.radius.md}; box-sizing: border-box; display: flex; - min-height: 153px; justify-content: center; - position: relative; margin-bottom: ${themeCssVariables.spacing[8]}; + min-height: 153px; + position: relative; `; const StyledButtonContainer = styled.div` diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx index b60e31a478..a09ffde20c 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx @@ -48,10 +48,10 @@ const StyledInputContainer = styled.div` const StyledAdvancedSettingsSectionInputWrapper = styled.div` display: flex; + flex: 1; flex-direction: column; gap: ${themeCssVariables.spacing[4]}; width: 100%; - flex: 1; `; const StyledAdvancedSettingsOuterContainer = styled.div` @@ -86,8 +86,8 @@ const StyledConflictBanner = styled.div` const StyledBannerContent = styled.div` align-items: center; display: flex; - gap: ${themeCssVariables.spacing[2]}; flex: 1; + gap: ${themeCssVariables.spacing[2]}; `; const StyledBannerText = styled.span` diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx index 41d580404d..3db8d2adfe 100644 --- a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx @@ -11,9 +11,9 @@ import { ThemeContext } from 'twenty-ui/theme-constants'; import { type ApiKey } from '~/generated-metadata/graphql'; const StyledEllipsisLabel = styled.div` - white-space: nowrap; - text-overflow: ellipsis; overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; `; type ApiKeyType = Pick & { diff --git a/packages/twenty-front/src/modules/settings/lab/components/SettingsLabContent.tsx b/packages/twenty-front/src/modules/settings/lab/components/SettingsLabContent.tsx index 5ed465309f..99f837e7f6 100644 --- a/packages/twenty-front/src/modules/settings/lab/components/SettingsLabContent.tsx +++ b/packages/twenty-front/src/modules/settings/lab/components/SettingsLabContent.tsx @@ -16,10 +16,10 @@ const StyledCardGrid = styled.div` const StyledImage = styled.img` border-bottom: 1px solid ${themeCssVariables.border.color.medium}; - height: 120px; - width: 100%; - object-fit: cover; display: flex; + height: 120px; + object-fit: cover; + width: 100%; `; export const SettingsLabContent = () => { diff --git a/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionLabelContainer.tsx b/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionLabelContainer.tsx index e4324c5115..a606c1cad0 100644 --- a/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionLabelContainer.tsx +++ b/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionLabelContainer.tsx @@ -5,10 +5,10 @@ import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledHeaderTitle = styled.div` color: ${themeCssVariables.font.color.primary}; - font-weight: ${themeCssVariables.font.weight.semiBold}; font-size: ${themeCssVariables.font.size.lg}; - width: fit-content; + font-weight: ${themeCssVariables.font.weight.semiBold}; max-width: 420px; + width: fit-content; & > input:disabled { color: ${themeCssVariables.font.color.primary}; } diff --git a/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx b/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx index 68a6901861..5dfb2bfcf2 100644 --- a/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx +++ b/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx @@ -27,10 +27,10 @@ const playgroundSetupFormSchema = z.object({ type PlaygroundSetupFormValues = z.infer; const StyledForm = styled.form` - display: grid; - grid-template-columns: 1.5fr 1fr 1fr 0.5fr; align-items: end; + display: grid; gap: ${themeCssVariables.spacing[2]}; + grid-template-columns: 1.5fr 1fr 1fr 0.5fr; margin-bottom: ${themeCssVariables.spacing[2]}; width: 100%; `; diff --git a/packages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx b/packages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx index 47c1828cd4..d79c34b4b9 100644 --- a/packages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx +++ b/packages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx @@ -30,8 +30,8 @@ const StyledContainer = styled.div` .scalar-app .text-pretty { overflow-wrap: break-word; - word-break: normal; white-space: normal; + word-break: normal; } `; diff --git a/packages/twenty-front/src/modules/settings/playground/components/SettingsPlaygroundCoverImage.tsx b/packages/twenty-front/src/modules/settings/playground/components/SettingsPlaygroundCoverImage.tsx index 45b7b6d2dc..02cf751420 100644 --- a/packages/twenty-front/src/modules/settings/playground/components/SettingsPlaygroundCoverImage.tsx +++ b/packages/twenty-front/src/modules/settings/playground/components/SettingsPlaygroundCoverImage.tsx @@ -13,9 +13,9 @@ const StyledCoverContainer = styled.div` display: flex; height: 153px; justify-content: center; - position: relative; - margin-top: ${themeCssVariables.spacing[4]}; margin-bottom: ${themeCssVariables.spacing[4]}; + margin-top: ${themeCssVariables.spacing[4]}; + position: relative; `; type StyledSettingsApiPlaygroundCoverImageProps = { diff --git a/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx b/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx index b8343d09c6..b1a7869b56 100644 --- a/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx +++ b/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx @@ -17,14 +17,14 @@ const StyledContainer = styled.div` `; const StyledFieldRow = styled.div` - display: flex; align-items: stretch; + display: flex; gap: ${themeCssVariables.spacing[2]}; `; const StyledActionWrapper = styled.div` - display: flex; align-items: stretch; + display: flex; & > button + button { border-left: none; @@ -32,9 +32,9 @@ const StyledActionWrapper = styled.div` `; const StyledActionButtonContainer = styled.div` - height: 100%; - display: inline-flex; align-items: center; + display: inline-flex; + height: 100%; justify-content: center; `; diff --git a/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesList.tsx b/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesList.tsx index 87f8364a1c..f92221acf7 100644 --- a/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesList.tsx +++ b/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesList.tsx @@ -32,8 +32,8 @@ const StyledCreateRoleSectionContainer = styled.div` border-top: 1px solid ${themeCssVariables.border.color.light}; display: flex; justify-content: flex-end; - padding-top: ${themeCssVariables.spacing[2]}; padding-bottom: ${themeCssVariables.spacing[2]}; + padding-top: ${themeCssVariables.spacing[2]}; } `; diff --git a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentEntityPickerDropdown.tsx b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentEntityPickerDropdown.tsx index d8b19377e7..df91db4a7c 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentEntityPickerDropdown.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentEntityPickerDropdown.tsx @@ -21,8 +21,8 @@ const StyledLoadingContainer = styled.div` `; const StyledDropdownItem = styled.div` - padding: ${themeCssVariables.spacing[2]}; cursor: pointer; + padding: ${themeCssVariables.spacing[2]}; &:hover { background-color: ${themeCssVariables.background.transparent.lighter}; diff --git a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTableRow.tsx index 15caefc5c6..9beb51af6f 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTableRow.tsx @@ -33,8 +33,8 @@ const StyledNameCell = styled.div` const StyledNameContainer = styled.div` align-items: center; display: flex; - overflow: hidden; gap: ${themeCssVariables.spacing[2]}; + overflow: hidden; width: 100%; `; diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelObjectPicker.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelObjectPicker.tsx index b545d4d085..b963efd4a3 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelObjectPicker.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelObjectPicker.tsx @@ -22,9 +22,9 @@ const StyledTypeSelectContainer = styled.div` const StyledContainer = styled.div` display: flex; + flex-wrap: wrap; gap: ${themeCssVariables.spacing[2]}; justify-content: flex-start; - flex-wrap: wrap; width: 100%; `; diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelSection.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelSection.tsx index 436eaac690..c7dc179f94 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelSection.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelSection.tsx @@ -23,8 +23,8 @@ const StyledCreateObjectOverrideSectionContainer = styled.div` border-top: 1px solid ${themeCssVariables.border.color.light}; display: flex; justify-content: flex-end; - padding-top: ${themeCssVariables.spacing[2]}; padding-bottom: ${themeCssVariables.spacing[2]}; + padding-top: ${themeCssVariables.spacing[2]}; } `; diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelTableRow.tsx index b05d3079df..f85729fac9 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelTableRow.tsx @@ -14,9 +14,9 @@ import { useContext } from 'react'; import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledNameLabel = styled.div` - white-space: nowrap; - text-overflow: ellipsis; overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; `; type SettingsRolePermissionsObjectLevelTableRowProps = { diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx index c021d1b3e2..2bd52a2e8d 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx @@ -24,11 +24,11 @@ export const FIELD_PERMISSION_TABLE_ROW_GRID_TEMPLATE_COLUMNS = '180px minmax(0, 1fr) 60px 60px'; const StyledNameLabel = styled.div` - white-space: nowrap; - text-overflow: ellipsis; overflow: hidden; - + text-overflow: ellipsis; user-select: none; + + white-space: nowrap; `; type SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRowProps = { diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionFilterRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionFilterRow.tsx index 66a883de19..0a6f544f61 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionFilterRow.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionFilterRow.tsx @@ -14,9 +14,9 @@ import { SettingsRolePermissionsObjectLevelRecordLevelPermissionValueInput } fro import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledFilterRow = styled.div` + align-items: center; display: flex; flex-direction: row; - align-items: center; gap: ${themeCssVariables.spacing[2]}; `; diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionLogicalOperatorCell.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionLogicalOperatorCell.tsx index 2bb95a714d..ad949f7404 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionLogicalOperatorCell.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionLogicalOperatorCell.tsx @@ -24,9 +24,9 @@ const StyledText = styled.div` const StyledContainer = styled.div` align-items: start; + color: ${themeCssVariables.font.color.tertiary}; display: flex; min-width: ${themeCssVariables.spacing[16]}; - color: ${themeCssVariables.font.color.tertiary}; `; type SettingsRolePermissionsObjectLevelRecordLevelPermissionLogicalOperatorCellProps = diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionValueInput.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionValueInput.tsx index 3bbe76d5b5..1cc1892df7 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionValueInput.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionValueInput.tsx @@ -37,16 +37,16 @@ const StyledContainer = styled.div` const StyledIconContainer = styled.div` align-items: center; + background-color: ${themeCssVariables.background.transparent.lighter}; + border: 1px solid ${themeCssVariables.border.color.medium}; + border-bottom-right-radius: ${themeCssVariables.border.radius.sm}; + border-left: none; + border-top-right-radius: ${themeCssVariables.border.radius.sm}; + color: ${themeCssVariables.font.color.tertiary}; + cursor: pointer; display: flex; justify-content: center; - background-color: ${themeCssVariables.background.transparent.lighter}; - border-top-right-radius: ${themeCssVariables.border.radius.sm}; - border-bottom-right-radius: ${themeCssVariables.border.radius.sm}; - border: 1px solid ${themeCssVariables.border.color.medium}; - border-left: none; - cursor: pointer; padding: ${themeCssVariables.spacing[2]}; - color: ${themeCssVariables.font.color.tertiary}; &:hover { background-color: ${themeCssVariables.background.transparent.light}; @@ -54,20 +54,20 @@ const StyledIconContainer = styled.div` `; const StyledReadOnlyInput = styled.div` - display: flex; align-items: center; - flex: 1; - padding: ${themeCssVariables.spacing[2]}; - border: 1px solid ${themeCssVariables.border.color.medium}; - border-top-left-radius: ${themeCssVariables.border.radius.sm}; - border-bottom-left-radius: ${themeCssVariables.border.radius.sm}; background-color: ${themeCssVariables.background.secondary}; - color: ${themeCssVariables.font.color.primary}; - font-size: ${themeCssVariables.font.size.md}; - height: 32px; + border: 1px solid ${themeCssVariables.border.color.medium}; + border-bottom-left-radius: ${themeCssVariables.border.radius.sm}; + border-top-left-radius: ${themeCssVariables.border.radius.sm}; box-sizing: border-box; + color: ${themeCssVariables.font.color.primary}; + display: flex; + flex: 1; + font-size: ${themeCssVariables.font.size.md}; gap: ${themeCssVariables.spacing[1]}; + height: 32px; overflow: hidden; + padding: ${themeCssVariables.spacing[2]}; `; const StyledMeText = styled.span` @@ -76,10 +76,10 @@ const StyledMeText = styled.span` `; const StyledFieldLabel = styled.span` - white-space: nowrap; + min-width: 0; overflow: hidden; text-overflow: ellipsis; - min-width: 0; + white-space: nowrap; `; const StyledFormFieldInputWrapper = styled.div` diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionVariablePicker.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionVariablePicker.tsx index 24060e2203..a9abda6661 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionVariablePicker.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionVariablePicker.tsx @@ -14,15 +14,13 @@ const StyledRecordLevelPermissionPickerContainer = styled.div<{ readonly?: boolean; }>` align-items: center; - display: flex; - justify-content: center; - background-color: ${({ multiline }) => multiline ? 'transparent' : themeCssVariables.background.transparent.lighter}; border: ${({ multiline }) => multiline ? 'none' : `1px solid ${themeCssVariables.border.color.medium}`}; + border-bottom-right-radius: ${({ multiline }) => multiline ? '0' : themeCssVariables.border.radius.sm}; border-radius: ${({ multiline }) => @@ -34,6 +32,8 @@ const StyledRecordLevelPermissionPickerContainer = styled.div<{ ? themeCssVariables.font.color.primary : themeCssVariables.font.color.tertiary}; cursor: ${({ multiline }) => (multiline ? 'default' : 'pointer')}; + display: flex; + justify-content: center; padding: ${({ multiline }) => multiline ? `${themeCssVariables.spacing['0.5']} ${themeCssVariables.spacing[0]}` diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/PermissionIcon.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/PermissionIcon.tsx index 07a9f4d2fe..2d72307b82 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/PermissionIcon.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/PermissionIcon.tsx @@ -31,9 +31,9 @@ const StyledIconWrapper = styled.div<{ isRevoked?: boolean }>` const StyledIcon = styled.div<{ isRevoked?: boolean }>` align-items: center; - display: flex; color: ${({ isRevoked }) => isRevoked ? themeCssVariables.color.orange : themeCssVariables.color.blue}; + display: flex; justify-content: center; `; diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsTableRow.tsx index dd19092874..5228a82b2a 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsTableRow.tsx @@ -19,8 +19,8 @@ const StyledDescription = styled.span` `; const StyledIconContainer = styled.div` - display: flex; align-items: center; + display: flex; justify-content: center; `; diff --git a/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleApplicability.tsx b/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleApplicability.tsx index a2078f3f80..ac117fd602 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleApplicability.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleApplicability.tsx @@ -10,14 +10,14 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { FeatureFlagKey } from '~/generated-metadata/graphql'; const StyledCheckboxContainer = styled.div<{ disabled: boolean }>` - display: flex; align-items: center; + border-radius: ${themeCssVariables.border.radius.sm}; + cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; + display: flex; justify-content: space-between; padding: ${themeCssVariables.spacing[1]}; - border-radius: ${themeCssVariables.border.radius.sm}; transition: background-color calc(${themeCssVariables.animation.duration.normal} * 1s) ease; - cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; &:hover { background-color: ${themeCssVariables.background.transparent.light}; @@ -25,8 +25,8 @@ const StyledCheckboxContainer = styled.div<{ disabled: boolean }>` `; const StyledCheckboxLabel = styled.div` - display: flex; align-items: center; + display: flex; gap: ${themeCssVariables.spacing[1]}; `; diff --git a/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleSettings.tsx b/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleSettings.tsx index 51eef8928b..0c74c8fe62 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleSettings.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleSettings.tsx @@ -19,8 +19,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledInputsContainer = styled.div` display: flex; gap: ${themeCssVariables.spacing[2]}; - width: 100%; margin-bottom: ${themeCssVariables.spacing[2]}; + width: 100%; `; const StyledInputContainer = styled.div` diff --git a/packages/twenty-front/src/modules/settings/roles/role/components/SettingsRoleLabelContainer.tsx b/packages/twenty-front/src/modules/settings/roles/role/components/SettingsRoleLabelContainer.tsx index 6ca3295c6a..5f2317aec7 100644 --- a/packages/twenty-front/src/modules/settings/roles/role/components/SettingsRoleLabelContainer.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role/components/SettingsRoleLabelContainer.tsx @@ -8,10 +8,10 @@ import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledHeaderTitle = styled.div` color: ${themeCssVariables.font.color.primary}; - font-weight: ${themeCssVariables.font.weight.semiBold}; font-size: ${themeCssVariables.font.size.lg}; - width: fit-content; + font-weight: ${themeCssVariables.font.weight.semiBold}; max-width: 420px; + width: fit-content; & > input:disabled { color: ${themeCssVariables.font.color.primary}; } diff --git a/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOIdentitiesProvidersForm.tsx b/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOIdentitiesProvidersForm.tsx index 2f66fab356..f43fde66b6 100644 --- a/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOIdentitiesProvidersForm.tsx +++ b/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOIdentitiesProvidersForm.tsx @@ -18,8 +18,8 @@ import { IdentityProviderType } from '~/generated-metadata/graphql'; const StyledInputsContainer = styled.div` display: grid; gap: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[4]}; - grid-template-columns: 1fr 1fr; grid-template-areas: 'input-1 input-1'; + grid-template-columns: 1fr 1fr; & :first-of-type { grid-area: input-1; diff --git a/packages/twenty-front/src/modules/settings/two-factor-authentication/components/TwoFactorAuthenticationVerificationCodeDash.tsx b/packages/twenty-front/src/modules/settings/two-factor-authentication/components/TwoFactorAuthenticationVerificationCodeDash.tsx index dc6aa115dd..1904c9cd91 100644 --- a/packages/twenty-front/src/modules/settings/two-factor-authentication/components/TwoFactorAuthenticationVerificationCodeDash.tsx +++ b/packages/twenty-front/src/modules/settings/two-factor-authentication/components/TwoFactorAuthenticationVerificationCodeDash.tsx @@ -2,10 +2,10 @@ import { styled } from '@linaria/react'; import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledDashContainer = styled.div` - display: flex; - width: ${themeCssVariables.spacing[2]}; - justify-content: center; align-items: center; + display: flex; + justify-content: center; + width: ${themeCssVariables.spacing[2]}; `; const StyledDash = styled.div` diff --git a/packages/twenty-front/src/modules/settings/two-factor-authentication/components/TwoFactorAuthenticationVerificationCodeSlot.tsx b/packages/twenty-front/src/modules/settings/two-factor-authentication/components/TwoFactorAuthenticationVerificationCodeSlot.tsx index a6576e8796..b4ef4c5bbe 100644 --- a/packages/twenty-front/src/modules/settings/two-factor-authentication/components/TwoFactorAuthenticationVerificationCodeSlot.tsx +++ b/packages/twenty-front/src/modules/settings/two-factor-authentication/components/TwoFactorAuthenticationVerificationCodeSlot.tsx @@ -3,32 +3,32 @@ import { type SlotProps } from 'input-otp'; import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSlot = styled.div<{ isActive: boolean }>` - position: relative; - width: 24px; - height: 32px; - font-size: ${themeCssVariables.font.size.md}; - display: flex; align-items: center; - justify-content: center; - transition: all 0.3s; background-color: ${themeCssVariables.background.transparent.lighter}; border: 1px solid ${themeCssVariables.border.color.medium}; border-radius: ${themeCssVariables.border.radius.sm}; + display: flex; + font-size: ${themeCssVariables.font.size.md}; + height: 32px; + justify-content: center; + outline: 0; + outline-color: ${({ isActive }) => + isActive + ? themeCssVariables.border.color.strong + : themeCssVariables.border.color.medium}; + outline-color: ${themeCssVariables.border.color.medium}; .group:hover &, .group:focus-within & { border-color: ${themeCssVariables.border.color.medium}; } - outline: 0; - outline-color: ${themeCssVariables.border.color.medium}; - - outline-color: ${({ isActive }) => - isActive - ? themeCssVariables.border.color.strong - : themeCssVariables.border.color.medium}; outline-style: ${({ isActive }) => (isActive ? 'solid' : 'none')}; outline-width: ${({ isActive }) => (isActive ? '1px' : '0')}; + + position: relative; + transition: all 0.3s; + width: 24px; `; const StyledCaretContainer = styled.div` @@ -60,9 +60,9 @@ const StyledInputChar = styled.div` `; const StyledCaret = styled.div` - width: 1px; - height: 20px; background-color: ${themeCssVariables.font.color.primary}; + height: 20px; + width: 1px; `; type TwoFactorAuthenticationVerificationCodeSlotProps = SlotProps; diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelContainer.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelContainer.tsx index bbcc47545e..578a325f15 100644 --- a/packages/twenty-front/src/modules/side-panel/components/SidePanelContainer.tsx +++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelContainer.tsx @@ -13,14 +13,14 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSidePanelContainer = styled.div<{ isMobile: boolean }>` + display: flex; + flex: 1; + flex-direction: column; max-height: ${({ isMobile }) => { const mobileOffset = isMobile ? themeCssVariables.spacing[16] : '0px'; return `calc(100% - ${mobileOffset})`; }}; - display: flex; - flex-direction: column; - flex: 1; `; type SidePanelContainerProps = { diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelContextChip.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelContextChip.tsx index d5c7c25cd7..897975e453 100644 --- a/packages/twenty-front/src/modules/side-panel/components/SidePanelContextChip.tsx +++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelContextChip.tsx @@ -12,26 +12,24 @@ const StyledChip = styled.button<{ maxWidth?: string; onClick?: () => void; }>` - all: unset; align-items: center; - justify-content: center; + all: unset; background: ${themeCssVariables.background.transparent.light}; border: 1px solid ${themeCssVariables.border.color.medium}; border-radius: ${themeCssVariables.border.radius.md}; box-sizing: border-box; - display: flex; - gap: ${themeCssVariables.spacing[1]}; - height: ${themeCssVariables.spacing[6]}; - /* If the chip has text, we add extra padding to have a more balanced design */ - padding: 0 - ${({ withText }) => - withText ? themeCssVariables.spacing[2] : themeCssVariables.spacing[1]}; - font-family: inherit; - font-size: ${themeCssVariables.font.size.sm}; - font-weight: ${themeCssVariables.font.weight.medium}; - line-height: ${themeCssVariables.text.lineHeight.lg}; color: ${themeCssVariables.font.color.primary}; cursor: ${({ onClick }) => (isDefined(onClick) ? 'pointer' : 'default')}; + display: flex; + font-family: inherit; + /* If the chip has text, we add extra padding to have a more balanced design */ + font-size: ${themeCssVariables.font.size.sm}; + font-weight: ${themeCssVariables.font.weight.medium}; + gap: ${themeCssVariables.spacing[1]}; + height: ${themeCssVariables.spacing[6]}; + justify-content: center; + line-height: ${themeCssVariables.text.lineHeight.lg}; + max-width: ${({ maxWidth }) => maxWidth ?? ''}; &:hover { background: ${({ onClick }) => @@ -39,7 +37,9 @@ const StyledChip = styled.button<{ ? themeCssVariables.background.transparent.medium : themeCssVariables.background.transparent.light}; } - max-width: ${({ maxWidth }) => maxWidth ?? ''}; + padding: 0 + ${({ withText }) => + withText ? themeCssVariables.spacing[2] : themeCssVariables.spacing[1]}; `; const StyledIconsContainer = styled.div` diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelContextRecordChipAvatars.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelContextRecordChipAvatars.tsx index c37430d62b..60d314c704 100644 --- a/packages/twenty-front/src/modules/side-panel/components/SidePanelContextRecordChipAvatars.tsx +++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelContextRecordChipAvatars.tsx @@ -7,9 +7,9 @@ import { useContext } from 'react'; import { Avatar } from 'twenty-ui/display'; import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledIconWrapper = styled.div<{ withIconBackground?: boolean }>` + align-items: center; background: ${({ withIconBackground }) => withIconBackground ? themeCssVariables.background.primary : 'unset'}; - border-radius: ${themeCssVariables.border.radius.sm}; border: 1px solid ${({ withIconBackground }) => withIconBackground @@ -18,8 +18,8 @@ const StyledIconWrapper = styled.div<{ withIconBackground?: boolean }>` &:not(:first-of-type) { margin-left: -${themeCssVariables.spacing[1]}; } + border-radius: ${themeCssVariables.border.radius.sm}; display: flex; - align-items: center; justify-content: center; `; diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelForDesktop.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelForDesktop.tsx index 5082ec355f..9573ecce14 100644 --- a/packages/twenty-front/src/modules/side-panel/components/SidePanelForDesktop.tsx +++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelForDesktop.tsx @@ -26,24 +26,24 @@ const StyledSidePanelWrapper = styled.div<{ flex-shrink: 0; min-width: 0; overflow: hidden; - width: ${({ isOpen }) => (isOpen ? `var(${SIDE_PANEL_WIDTH_VAR})` : '0px')}; transition: ${({ isResizing }) => isResizing ? 'none' : `width ${themeCssVariables.animation.duration.normal}s`}; + width: ${({ isOpen }) => (isOpen ? `var(${SIDE_PANEL_WIDTH_VAR})` : '0px')}; `; const StyledSidePanel = styled.aside` background: ${themeCssVariables.background.primary}; border: 1px solid ${themeCssVariables.border.color.medium}; border-radius: ${themeCssVariables.border.radius.md}; + box-sizing: border-box; display: flex; flex-direction: column; height: 100%; overflow: hidden; position: relative; width: 100%; - box-sizing: border-box; `; const StyledModalContainer = styled.div` diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfoLayout.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfoLayout.tsx index 03fb8b5f83..2567e5b1c9 100644 --- a/packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfoLayout.tsx +++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfoLayout.tsx @@ -31,16 +31,16 @@ export const StyledPageInfoTextContainer = styled.div` export const StyledPageInfoTitleContainer = styled.div` font-size: ${themeCssVariables.font.size.md}; font-weight: ${themeCssVariables.font.weight.semiBold}; - padding-inline: ${themeCssVariables.spacing[1]}; - min-width: 0; max-width: 150px; + min-width: 0; + padding-inline: ${themeCssVariables.spacing[1]}; `; export const StyledPageInfoLabel = styled.div` color: ${themeCssVariables.font.color.tertiary}; + flex-shrink: 0; font-size: ${themeCssVariables.font.size.sm}; white-space: nowrap; - flex-shrink: 0; `; type SidePanelPageInfoLayoutProps = { diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelSubViewWithSearch.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelSubViewWithSearch.tsx index ac55f4a4e9..67ce929c9e 100644 --- a/packages/twenty-front/src/modules/side-panel/components/SidePanelSubViewWithSearch.tsx +++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelSubViewWithSearch.tsx @@ -27,9 +27,9 @@ const StyledSearchInput = styled.input` border-radius: ${themeCssVariables.border.radius.sm}; box-sizing: border-box; + outline: none; padding: 0; width: 100%; - outline: none; &::placeholder { color: ${themeCssVariables.font.color.tertiary}; @@ -38,8 +38,8 @@ const StyledSearchInput = styled.input` const StyledScrollableListWrapper = styled.div` display: flex; - flex-direction: column; flex: 1; + flex-direction: column; min-height: 0; overflow: hidden; diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBar.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBar.tsx index b1d9da3c9f..fe2354c2ec 100644 --- a/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBar.tsx +++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBar.tsx @@ -34,32 +34,32 @@ const StyledInputContainer = styled.div<{ isMobile: boolean }>` box-sizing: border-box; display: flex; - justify-content: space-between; + flex-shrink: 0; font-size: ${themeCssVariables.font.size.lg}; + gap: ${themeCssVariables.spacing[4]}; height: ${({ isMobile }) => isMobile ? SIDE_PANEL_TOP_BAR_HEIGHT_MOBILE : SIDE_PANEL_TOP_BAR_HEIGHT}px; - margin: 0; - outline: none; - position: relative; - overflow: hidden; - - padding: 0 ${themeCssVariables.spacing[2]}; - gap: ${themeCssVariables.spacing[4]}; - flex-shrink: 0; justify-content: space-between; + justify-content: space-between; + margin: 0; + + outline: none; + overflow: hidden; + padding: 0 ${themeCssVariables.spacing[2]}; + position: relative; `; const StyledInput = styled.input` + background-color: transparent; border: none; border-radius: 0; - background-color: transparent; color: ${themeCssVariables.font.color.primary}; + flex: 1; font-size: ${themeCssVariables.font.size.md}; + height: 24px; margin: 0; outline: none; - height: 24px; padding: 0; - flex: 1; &::placeholder { color: ${themeCssVariables.font.color.light}; diff --git a/packages/twenty-front/src/modules/side-panel/pages/common/components/SidePanelSubPageNavigationHeader.tsx b/packages/twenty-front/src/modules/side-panel/pages/common/components/SidePanelSubPageNavigationHeader.tsx index fbefae75f5..e606c0d1ea 100644 --- a/packages/twenty-front/src/modules/side-panel/pages/common/components/SidePanelSubPageNavigationHeader.tsx +++ b/packages/twenty-front/src/modules/side-panel/pages/common/components/SidePanelSubPageNavigationHeader.tsx @@ -8,8 +8,8 @@ const StyledContainer = styled.div` border-bottom: 1px solid ${themeCssVariables.border.color.light}; display: flex; gap: ${themeCssVariables.spacing[1]}; - padding: 0 ${themeCssVariables.spacing[2]}; height: 40px; + padding: 0 ${themeCssVariables.spacing[2]}; `; const StyledText = styled.span` diff --git a/packages/twenty-front/src/modules/side-panel/pages/message-thread/components/SidePanelMessageThreadPage.tsx b/packages/twenty-front/src/modules/side-panel/pages/message-thread/components/SidePanelMessageThreadPage.tsx index b47d52bd56..b9a8708208 100644 --- a/packages/twenty-front/src/modules/side-panel/pages/message-thread/components/SidePanelMessageThreadPage.tsx +++ b/packages/twenty-front/src/modules/side-panel/pages/message-thread/components/SidePanelMessageThreadPage.tsx @@ -25,8 +25,8 @@ const StyledWrapper = styled.div` const StyledContainer = styled.div` box-sizing: border-box; display: flex; - flex-direction: column; flex: 1; + flex-direction: column; height: 85%; overflow-y: auto; `; @@ -34,11 +34,11 @@ const StyledContainer = styled.div` const StyledButtonContainer = styled.div` background: ${themeCssVariables.background.secondary}; border-top: 1px solid ${themeCssVariables.border.color.light}; + box-sizing: border-box; display: flex; justify-content: flex-end; padding: ${themeCssVariables.spacing[2]}; width: 100%; - box-sizing: border-box; `; const ALLOWED_REPLY_PROVIDERS = [ diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsLayout.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsLayout.tsx index 3d01856631..c10a22b8bc 100644 --- a/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsLayout.tsx +++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsLayout.tsx @@ -25,8 +25,8 @@ const StyledContainer = styled.div` flex: 1; flex-direction: column; gap: ${themeCssVariables.spacing[3]}; - padding: ${themeCssVariables.spacing[2]}; overflow-y: auto; + padding: ${themeCssVariables.spacing[2]}; `; export const SidePanelPageLayoutFieldsLayout = () => { diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsSettings.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsSettings.tsx index 4b0e0476fc..82d7d84e98 100644 --- a/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsSettings.tsx +++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsSettings.tsx @@ -22,8 +22,8 @@ const StyledContainer = styled.div` const StyledSidePanelContainer = styled.div` display: flex; - flex-direction: column; flex: 1; + flex-direction: column; overflow: hidden; `; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectControlContainer.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectControlContainer.tsx index bd6556ee6b..4d6e746988 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectControlContainer.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectControlContainer.tsx @@ -5,8 +5,8 @@ const StyledControlContainer = styled.div<{ cursor: string }>` align-items: center; background-color: ${themeCssVariables.background.transparent.lighter}; border: 1px solid ${themeCssVariables.border.color.medium}; - box-sizing: border-box; border-radius: ${themeCssVariables.border.radius.sm}; + box-sizing: border-box; color: ${themeCssVariables.font.color.primary}; cursor: ${({ cursor }) => cursor}; display: flex; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRowLeftSelect.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRowLeftSelect.tsx index bdf9d9fd4a..aabb92cd6f 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRowLeftSelect.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRowLeftSelect.tsx @@ -6,8 +6,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledLabel = styled.span` color: ${themeCssVariables.font.color.primary}; - font-weight: ${themeCssVariables.font.weight.regular}; font-size: ${themeCssVariables.font.size.md}; + font-weight: ${themeCssVariables.font.weight.regular}; `; const StyledControlLabel = styled.div` diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx index 9a25e9407c..9b5e4d9b5e 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx @@ -44,13 +44,13 @@ const StyledIconChevronDownWrapper = styled.div<{ `; const StyledClickableContainer = styled.div` - cursor: pointer; - display: flex; - - flex-direction: row; - width: 100%; - justify-content: center; align-items: center; + cursor: pointer; + + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; `; export const UnmatchColumnBanner = ({ diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx index 8b37c765c2..d2bced7379 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx @@ -80,18 +80,18 @@ const StyledText = styled.span` color: ${themeCssVariables.font.color.primary}; font-size: ${themeCssVariables.font.size.sm}; font-weight: ${themeCssVariables.font.weight.medium}; - text-align: center; padding: 16px; + text-align: center; `; const StyledFooterText = styled.span` + bottom: ${themeCssVariables.spacing[4]}; color: ${themeCssVariables.font.color.tertiary}; font-size: ${themeCssVariables.font.size.xs}; font-weight: ${themeCssVariables.font.weight.regular}; - text-align: center; - position: absolute; - bottom: ${themeCssVariables.spacing[4]}; left: 50%; + position: absolute; + text-align: center; transform: translateX(-50%); width: 100%; `; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx index a4be548100..cb49fb9fe6 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx @@ -40,20 +40,20 @@ const StyledContentWrapper = styled.div` const StyledToolbar = styled.div` align-items: center; - border-radius: ${themeCssVariables.border.radius.md}; - border: 1px solid ${themeCssVariables.border.color.medium}; background-color: ${themeCssVariables.background.secondary}; + border: 1px solid ${themeCssVariables.border.color.medium}; + border-radius: ${themeCssVariables.border.radius.md}; bottom: ${themeCssVariables.spacing[3]}; + box-shadow: ${themeCssVariables.boxShadow.strong}; display: flex; flex-direction: row; justify-content: space-between; left: 50%; + padding: ${themeCssVariables.spacing[3]}; position: absolute; transform: translateX(-50%); width: 400px; - padding: ${themeCssVariables.spacing[3]}; z-index: 1; - box-shadow: ${themeCssVariables.boxShadow.strong}; `; const StyledButtonContainer = styled.div` diff --git a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx index 2b4c3f76a7..c74b2e9d71 100644 --- a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx +++ b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx @@ -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}; } diff --git a/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx index 19c9596ece..faa489647f 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx @@ -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) => { diff --git a/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx index 57d10e8132..684b678dad 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx @@ -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) => { diff --git a/packages/twenty-front/src/modules/ui/field/display/components/UploadFileChip.tsx b/packages/twenty-front/src/modules/ui/field/display/components/UploadFileChip.tsx index 2a4f932056..0b74802779 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/UploadFileChip.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/UploadFileChip.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx index 86410bef2f..727579e766 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx @@ -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; diff --git a/packages/twenty-front/src/modules/ui/field/input/components/BooleanInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/BooleanInput.tsx index 28cbf8bd2d..700fadd543 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/BooleanInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/BooleanInput.tsx @@ -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 = { diff --git a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx index ed0214e2b7..e0f123dc45 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx @@ -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; } `; diff --git a/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx index 15357ab43c..2e20ee18f3 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx @@ -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 = ({ diff --git a/packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx index a6e7c06075..aebc27a764 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx @@ -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]}; diff --git a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx index 9154d209cc..ce5c46e7ca 100644 --- a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx @@ -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) => diff --git a/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx b/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx index c14f8c662e..6898ad399b 100644 --- a/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/ui/input/components/InputErrorHelper.tsx b/packages/twenty-front/src/modules/ui/input/components/InputErrorHelper.tsx index 00b5c59c69..4497e11b41 100644 --- a/packages/twenty-front/src/modules/ui/input/components/InputErrorHelper.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/InputErrorHelper.tsx @@ -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 = ({ diff --git a/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx b/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx index 1aa0064bf5..2fbab01ed6 100644 --- a/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx @@ -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; `; diff --git a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx index ac02d02d60..aad0dc2a65 100644 --- a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx @@ -22,8 +22,8 @@ const StyledContainer = styled.div>` 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` 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` ? '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` : 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 >` 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<{ diff --git a/packages/twenty-front/src/modules/ui/input/components/TitleInput.tsx b/packages/twenty-front/src/modules/ui/input/components/TitleInput.tsx index e77803fb01..dcb5854ef9 100644 --- a/packages/twenty-front/src/modules/ui/input/components/TitleInput.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/TitleInput.tsx @@ -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}; diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx index 947d1c3fb4..323fc9ff67 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx @@ -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 { diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerHeader.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerHeader.tsx index 59826c5858..df5defaac8 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerHeader.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerHeader.tsx @@ -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( diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerInput.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerInput.tsx index 6e025f566e..2b14767e8e 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerInput.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerInput.tsx @@ -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 = { diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePickerHeader.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePickerHeader.tsx index 95cc674ba4..5e7ed4f67f 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePickerHeader.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePickerHeader.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePickerInput.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePickerInput.tsx index af9d9564ef..07ab9d5746 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePickerInput.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePickerInput.tsx @@ -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; `; diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx index 8083bf271d..f3a28765c1 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx @@ -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]}; diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/TimeZoneAbbreviation.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/TimeZoneAbbreviation.tsx index 79e9164fbd..e9038fc82e 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/TimeZoneAbbreviation.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/TimeZoneAbbreviation.tsx @@ -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 = ({ diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx index 034351a786..6d44fd5a3e 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx @@ -24,17 +24,17 @@ const StyledDropdownButtonContainer = styled.div` 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; } `; diff --git a/packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx b/packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx index 1627eea416..884f8efb69 100644 --- a/packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx +++ b/packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx @@ -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 = ({ diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx index 71f2e86fbc..a120624e39 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx @@ -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; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent.tsx index 2bf581a313..325fc76cee 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent.tsx @@ -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]}; `; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInnerSelect.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInnerSelect.tsx index dfc9526ed8..9fd728c000 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInnerSelect.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInnerSelect.tsx @@ -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 = { diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx index 281b72320b..9ef8fa2ce4 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx index b4ca96132a..12ccb138ba 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx @@ -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}; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx index 61463f5909..53352607ff 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx @@ -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, diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSectionLabel.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSectionLabel.tsx index 1ad4ccf5de..7e718f21fc 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSectionLabel.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSectionLabel.tsx @@ -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 = { diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx index 71054c73d9..1c03d3aae4 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx @@ -7,8 +7,11 @@ type StyledDropdownButtonProps = { }; export const StyledHeaderDropdownButton = styled.button` - 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 - isUnfolded - ? themeCssVariables.background.transparent.light - : themeCssVariables.background.primary}; + user-select: none; &:hover { background: ${({ isUnfolded }) => diff --git a/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedFieldDisplay.tsx b/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedFieldDisplay.tsx index d31a05d02c..f7e2a2e734 100644 --- a/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedFieldDisplay.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx b/packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx index 409a1ab23c..0e1b724ac1 100644 --- a/packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx @@ -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; diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageBody.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageBody.tsx index 0b2c33295e..4cefe8a24b 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/components/PageBody.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/components/PageBody.tsx @@ -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%; `; diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx index fa4d6dc55c..4a4ea3654f 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PagePanel.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PagePanel.tsx index 7053586074..578e637b39 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/components/PagePanel.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/components/PagePanel.tsx @@ -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 = { diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/ShowPageContainer.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/ShowPageContainer.tsx index 150629500b..210c052ccf 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/components/ShowPageContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/components/ShowPageContainer.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelEdge.tsx b/packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelEdge.tsx index a9a8938d8d..0cc33abcb4 100644 --- a/packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelEdge.tsx +++ b/packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelEdge.tsx @@ -29,20 +29,20 @@ const StyledEdge = styled.div` `; 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 = { diff --git a/packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelGap.tsx b/packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelGap.tsx index 904c3f20c0..84feed86fc 100644 --- a/packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelGap.tsx +++ b/packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelGap.tsx @@ -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 = { diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableListItem.tsx b/packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableListItem.tsx index 9738d72420..ef25eb9add 100644 --- a/packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableListItem.tsx +++ b/packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableListItem.tsx @@ -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 = { diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/FieldRichTextCard.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/FieldRichTextCard.tsx index 71e9607290..21c9483ac9 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/FieldRichTextCard.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/FieldRichTextCard.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx index 6e2b85bde1..7cbf8f1fdc 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx @@ -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 }>` diff --git a/packages/twenty-front/src/modules/ui/layout/side-panel/components/SidePanelFooter.tsx b/packages/twenty-front/src/modules/ui/layout/side-panel/components/SidePanelFooter.tsx index e0bcd992dc..18529be36d 100644 --- a/packages/twenty-front/src/modules/ui/layout/side-panel/components/SidePanelFooter.tsx +++ b/packages/twenty-front/src/modules/ui/layout/side-panel/components/SidePanelFooter.tsx @@ -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%; `; diff --git a/packages/twenty-front/src/modules/ui/layout/tab-list/components/TabList.tsx b/packages/twenty-front/src/modules/ui/layout/tab-list/components/TabList.tsx index a846b9df2a..83ab430abb 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab-list/components/TabList.tsx +++ b/packages/twenty-front/src/modules/ui/layout/tab-list/components/TabList.tsx @@ -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 = ({ diff --git a/packages/twenty-front/src/modules/ui/layout/table/components/TableHeader.tsx b/packages/twenty-front/src/modules/ui/layout/table/components/TableHeader.tsx index bd09ba93de..d9b0073cc2 100644 --- a/packages/twenty-front/src/modules/ui/layout/table/components/TableHeader.tsx +++ b/packages/twenty-front/src/modules/ui/layout/table/components/TableHeader.tsx @@ -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 }; diff --git a/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx b/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx index 6f9fa259c7..cbb9b3261a 100644 --- a/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx +++ b/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx @@ -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 }) => diff --git a/packages/twenty-front/src/modules/ui/layout/top-bar/components/TopBar.tsx b/packages/twenty-front/src/modules/ui/layout/top-bar/components/TopBar.tsx index 59db9a4642..37dc9a446e 100644 --- a/packages/twenty-front/src/modules/ui/layout/top-bar/components/TopBar.tsx +++ b/packages/twenty-front/src/modules/ui/layout/top-bar/components/TopBar.tsx @@ -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` diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx index c50455025d..6ce921e187 100644 --- a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx @@ -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; } diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx index e05e37b98d..f3ef082c24 100644 --- a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx @@ -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; } diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx index 496886f956..da520a2bc5 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx @@ -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}; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx index 7db4576089..ddc0cc9e90 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx @@ -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]}; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx index 7708fa7a7a..69da653341 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx @@ -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}; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx index 3acb12927d..4aa8aef9b4 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx @@ -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 = { diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx index a5bfe19607..f083b40dc6 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx @@ -84,17 +84,15 @@ type StyledItemProps = Pick< }; const StyledItem = styled.button` - 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` 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` : 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` 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'], diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemBreadcrumb.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemBreadcrumb.tsx index 798d3ac934..690021522c 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemBreadcrumb.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemBreadcrumb.tsx @@ -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; `; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent.tsx index 47ca1d27d7..1aec9eeecc 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent.tsx @@ -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 }>` diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx index d7a4e278ae..718d61c52e 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx @@ -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; } `; diff --git a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx index 2863c17557..e73dcd3fde 100644 --- a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx @@ -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; diff --git a/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx b/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx index cd894b2a1a..e59d96b7fd 100644 --- a/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx @@ -26,15 +26,15 @@ type Position = { import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledDragSelection = styled.div` - 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 = ({ diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx index 290cf10d99..5dc7f76491 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx @@ -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 = { diff --git a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx index 87486b2ae8..5fe0c9f91c 100644 --- a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx +++ b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx @@ -25,6 +25,7 @@ const StyledChip = styled.div<{ variant: SortOrFilterChipVariant }>` } }}; border-radius: 4px; + box-sizing: border-box; color: ${({ variant }) => { switch (variant) { case 'danger': @@ -34,17 +35,16 @@ const StyledChip = styled.div<{ variant: SortOrFilterChipVariant }>` return themeCssVariables.color.blue; } }}; - height: 24px; - box-sizing: border-box; + column-gap: ${themeCssVariables.spacing[1]}; cursor: pointer; display: flex; flex-direction: row; flex-shrink: 0; font-size: ${themeCssVariables.font.size.sm}; font-weight: ${themeCssVariables.font.weight.medium}; + height: 24px; padding: ${themeCssVariables.spacing[0.5]}; padding-left: ${themeCssVariables.spacing[1]}; - column-gap: ${themeCssVariables.spacing[1]}; user-select: none; white-space: nowrap; `; @@ -55,20 +55,20 @@ const StyledIcon = styled.div` `; const StyledDelete = styled.button<{ variant: SortOrFilterChipVariant }>` - box-sizing: border-box; - height: 20px; - width: 20px; - display: flex; - justify-content: center; align-items: center; - cursor: pointer; - font-size: ${themeCssVariables.font.size.sm}; - user-select: none; - padding: 0; - margin: 0; background: none; border: none; + box-sizing: border-box; color: inherit; + cursor: pointer; + display: flex; + font-size: ${themeCssVariables.font.size.sm}; + height: 20px; + justify-content: center; + margin: 0; + padding: 0; + user-select: none; + width: 20px; &:hover { background-color: ${({ variant }) => { diff --git a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx index 65715be302..4db3694a3e 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx @@ -52,8 +52,8 @@ const StyledBar = styled.div` flex-direction: row; justify-content: space-between; min-height: 32px; - padding-top: ${themeCssVariables.spacing[1]}; padding-bottom: ${themeCssVariables.spacing[1]}; + padding-top: ${themeCssVariables.spacing[1]}; z-index: 4; `; diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownBottomMenu.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownBottomMenu.tsx index 73974a323f..e75e9aae1a 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownBottomMenu.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownBottomMenu.tsx @@ -4,9 +4,9 @@ import { styled } from '@linaria/react'; import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` + align-items: center; display: flex; flex-direction: column; - align-items: center; justify-content: space-between; padding: ${themeCssVariables.spacing[1]}; `; diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx index a468d6aca0..3b618ac02f 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx @@ -29,22 +29,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 { diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerIconAndNameContainer.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerIconAndNameContainer.tsx index 38835594e8..24cb34eb2c 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerIconAndNameContainer.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerIconAndNameContainer.tsx @@ -4,9 +4,9 @@ import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledIconAndNameContainer = styled.div` align-items: center; display: flex; + gap: ${themeCssVariables.spacing[1]}; margin-left: ${themeCssVariables.spacing[1]}; margin-right: ${themeCssVariables.spacing[1]}; - gap: ${themeCssVariables.spacing[1]}; `; export { StyledIconAndNameContainer as ViewPickerIconAndNameContainer }; diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerSelectContainer.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerSelectContainer.tsx index babe7753ba..0ee5f7a77f 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerSelectContainer.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerSelectContainer.tsx @@ -2,11 +2,11 @@ import { styled } from '@linaria/react'; import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSelectContainer = styled.div` - display: flex; - width: calc(100% - ${themeCssVariables.spacing[2]}); - margin: ${themeCssVariables.spacing[1]}; color: ${themeCssVariables.font.color.light}; + display: flex; + margin: ${themeCssVariables.spacing[1]}; user-select: none; + width: calc(100% - ${themeCssVariables.spacing[2]}); `; export { StyledSelectContainer as ViewPickerSelectContainer }; diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowStepExecutionResult.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowStepExecutionResult.tsx index 0737cd9c42..aaa7ac9e28 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowStepExecutionResult.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowStepExecutionResult.tsx @@ -12,8 +12,8 @@ import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; const StyledContainer = styled.div` display: flex; - flex-direction: column; flex: 1; + flex-direction: column; `; const StyledCodeEditorWrapper = styled.div` @@ -31,7 +31,6 @@ const StyledInfoContainer = styled.div` const StyledOutput = styled.div<{ accent?: OutputAccent }>` align-items: center; - gap: ${themeCssVariables.spacing[1]}; color: ${({ accent }) => accent === 'success' ? themeCssVariables.color.turquoise @@ -39,13 +38,14 @@ const StyledOutput = styled.div<{ accent?: OutputAccent }>` ? themeCssVariables.color.red : themeCssVariables.font.color.secondary}; display: flex; + gap: ${themeCssVariables.spacing[1]}; `; const StyledStatusInfo = styled.div` - display: flex; - gap: ${themeCssVariables.spacing[2]}; - font-size: ${themeCssVariables.font.size.sm}; color: ${themeCssVariables.font.color.tertiary}; + display: flex; + font-size: ${themeCssVariables.font.size.sm}; + gap: ${themeCssVariables.spacing[2]}; `; export type ExecutionStatus = { diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx index 2afcf48c65..043e522c0b 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx @@ -65,9 +65,9 @@ import { Tag, type TagColor } from 'twenty-ui/components'; import { useStore } from 'jotai'; import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants'; const StyledResetReactflowStyles = styled.div` - height: 100%; - width: 100%; - position: relative; + --xy-node-background-color: none; + --xy-node-border: none; + --xy-node-border-radius: none; /* Below we reset the default styling of Reactflow */ .react-flow__node-input, @@ -75,23 +75,23 @@ const StyledResetReactflowStyles = styled.div` .react-flow__node-output, .react-flow__node-group { padding: 0; - width: auto; text-align: start; white-space: nowrap; + width: auto; } - --xy-node-border-radius: none; - --xy-node-border: none; - --xy-node-background-color: none; --xy-node-boxshadow-hover: none; --xy-node-boxshadow-selected: none; + height: 100%; + position: relative; + width: 100%; `; const StyledStatusTagContainer = styled.div` left: 0; - top: 0; - position: absolute; padding: ${themeCssVariables.spacing[4]}; + position: absolute; + top: 0; `; const defaultFitViewOptions = { diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramRightClickCommandMenu.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramRightClickCommandMenu.tsx index 75b69d30bd..d5ad814177 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramRightClickCommandMenu.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramRightClickCommandMenu.tsx @@ -15,8 +15,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div<{ x: number; y: number }>` background: ${themeCssVariables.background.primary}; - box-shadow: ${themeCssVariables.boxShadow.strong}; border-radius: ${themeCssVariables.spacing[2]}; + box-shadow: ${themeCssVariables.boxShadow.strong}; display: flex; flex-direction: column; gap: ${themeCssVariables.spacing[0.5]}; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeLabelContainer.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeLabelContainer.tsx index 58a36e1073..dd5280b9e7 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeLabelContainer.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeLabelContainer.tsx @@ -10,8 +10,6 @@ const StyledWorkflowDiagramEdgeLabelContainer = styled.div<{ centerY?: number; }>` position: absolute; - width: fit-content; - transform: ${({ position, sourceX, sourceY, centerX, centerY }) => { if (isDefined(centerX) && isDefined(centerY)) { return `translate(-50%, -50%) translate(${centerX}px, ${centerY}px)`; @@ -25,6 +23,8 @@ const StyledWorkflowDiagramEdgeLabelContainer = styled.div<{ return 'none'; } }}; + + width: fit-content; `; export { StyledWorkflowDiagramEdgeLabelContainer as WorkflowDiagramEdgeLabelContainer }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeV2Container.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeV2Container.tsx index ec220df318..bf6bc522ee 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeV2Container.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeV2Container.tsx @@ -4,9 +4,9 @@ import { styled } from '@linaria/react'; const StyledContainer = styled.div<{ labelX: number; labelY: number }>` padding: ${themeCssVariables.spacing[1]}; pointer-events: all; + position: absolute; transform: ${({ labelX, labelY }) => `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`}; - position: absolute; `; export { StyledContainer as WorkflowDiagramEdgeV2Container }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleSource.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleSource.tsx index 19e292c4d1..22dcd972cc 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleSource.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleSource.tsx @@ -11,28 +11,28 @@ const HANDLE_SCALE_ON_HOVER = 1.5; const StyledHandleContainer = styled.div` & .react-flow__handle { - height: ${NODE_HANDLE_HEIGHT_PX}px; - width: ${NODE_HANDLE_WIDTH_PX}px; - opacity: var(--handle-opacity, 1); background: var(--handle-bg); border-color: var(--handle-border-color); + height: ${NODE_HANDLE_HEIGHT_PX}px; + opacity: var(--handle-opacity, 1); transform: var(--handle-transform); transform-origin: var(--handle-transform-origin); - - &::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: calc(100% + ${themeCssVariables.spacing[4]}); - height: calc(100% + ${themeCssVariables.spacing[4]}); - } - transition: transform 0.1s ease-out, background 0.1s, border-color 0.1s; + + &::after { + content: ''; + height: calc(100% + ${themeCssVariables.spacing[4]}); + left: 50%; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + width: calc(100% + ${themeCssVariables.spacing[4]}); + } + + width: ${NODE_HANDLE_WIDTH_PX}px; z-index: 1; &.connectionindicator { diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleTarget.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleTarget.tsx index 623aac170b..fc7ee82801 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleTarget.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleTarget.tsx @@ -9,14 +9,14 @@ type WorkflowDiagramHandleTargetProps = { const StyledHandleContainer = styled.div` & .react-flow__handle { - opacity: 0; - z-index: 1; border-radius: ${themeCssVariables.border.radius.md}; - width: 100%; height: 100%; left: 0; + opacity: 0; top: 0; transform: translate(-1px, -5px); + width: 100%; + z-index: 1; &.connectionindicator { cursor: pointer; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeEditableContent.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeEditableContent.tsx index 5bba47c5b9..8c1a063fcf 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeEditableContent.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeEditableContent.tsx @@ -28,14 +28,14 @@ import { capitalize, isDefined } from 'twenty-shared/utils'; const StyledAddStepButtonContainer = styled.div<{ shouldDisplay: boolean; }>` - display: flex; align-items: center; - position: absolute; - justify-content: center; - flex-direction: column; - opacity: ${({ shouldDisplay }) => (shouldDisplay ? 1 : 0)}; - left: 50%; bottom: 0; + display: flex; + flex-direction: column; + justify-content: center; + left: 50%; + opacity: ${({ shouldDisplay }) => (shouldDisplay ? 1 : 0)}; + position: absolute; transform: translateX(-50%) translateY(100%); `; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeContainer.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeContainer.tsx index 4f59d0d15f..9dcac2344a 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeContainer.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeContainer.tsx @@ -9,30 +9,30 @@ const StyledNodeContainer = styled.div<{ selected: boolean; }>` align-items: center; - display: flex; - gap: ${themeCssVariables.spacing[2]}; - max-width: 240px; - min-width: 44px; - padding: ${themeCssVariables.spacing[2]}; - border-radius: ${themeCssVariables.border.radius.md}; - border-width: 1px; - border-style: solid; - box-sizing: border-box; - cursor: pointer; - position: relative; - transition: border-color 0.1s; - background: ${({ runStatus, selected }) => { const colors = getWorkflowDiagramColors({ runStatus }); return selected ? colors.selected.background : colors.unselected.background; }}; - border-color: ${({ runStatus, selected }) => { const colors = getWorkflowDiagramColors({ runStatus }); return selected ? colors.selected.borderColor : colors.unselected.borderColor; }}; + border-radius: ${themeCssVariables.border.radius.md}; + border-style: solid; + border-width: 1px; + box-sizing: border-box; + cursor: pointer; + display: flex; + gap: ${themeCssVariables.spacing[2]}; + max-width: 240px; + min-width: 44px; + padding: ${themeCssVariables.spacing[2]}; + + position: relative; + + transition: border-color 0.1s; &:hover { background: ${({ runStatus, selected }) => { diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeLabelWithCounterPart.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeLabelWithCounterPart.tsx index 1013a8c598..a847b0f19d 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeLabelWithCounterPart.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeLabelWithCounterPart.tsx @@ -3,10 +3,10 @@ import { styled } from '@linaria/react'; const StyledNodeLabelWithCounterPart = styled.div` align-items: center; align-self: stretch; + box-sizing: border-box; display: flex; height: 14px; justify-content: space-between; - box-sizing: border-box; `; export { StyledNodeLabelWithCounterPart as WorkflowNodeLabelWithCounterPart }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeRightPart.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeRightPart.tsx index 155713fdde..171d035771 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeRightPart.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeRightPart.tsx @@ -3,11 +3,11 @@ import { styled } from '@linaria/react'; const StyledNodeRightPart = styled.div` align-items: flex-start; align-self: stretch; + box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; max-width: 184px; - box-sizing: border-box; `; export { StyledNodeRightPart as WorkflowNodeRightPart }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowRunDiagramStepNode.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowRunDiagramStepNode.tsx index 2384ac53e7..7b50a752fc 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowRunDiagramStepNode.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowRunDiagramStepNode.tsx @@ -35,32 +35,32 @@ import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledNodeLabelWithCounterPart = styled.div` align-items: center; align-self: stretch; + box-sizing: border-box; + column-gap: ${themeCssVariables.spacing[2]}; display: flex; height: 14px; justify-content: space-between; - box-sizing: border-box; - column-gap: ${themeCssVariables.spacing[2]}; `; const StyledStatusIconsContainer = styled.div` align-items: center; + box-sizing: border-box; display: flex; gap: ${themeCssVariables.spacing[1]}; justify-content: flex-end; - box-sizing: border-box; `; const StyledColorIcon = styled.div<{ color: string; }>` align-items: center; + background: ${({ color }) => color}; border-radius: ${themeCssVariables.border.radius.sm}; box-sizing: border-box; display: flex; height: 14px; justify-content: center; width: 14px; - background: ${({ color }) => color}; `; const StyledIterationCounter = styled.div<{ diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/components/SidePanelWorkflowSelectStepTitle.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/components/SidePanelWorkflowSelectStepTitle.tsx index f30935614b..153e448db8 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/components/SidePanelWorkflowSelectStepTitle.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/components/SidePanelWorkflowSelectStepTitle.tsx @@ -5,10 +5,10 @@ const StyledSelectStepTitle = styled.span` color: ${themeCssVariables.font.color.tertiary}; font-size: ${themeCssVariables.font.size.sm}; font-weight: ${themeCssVariables.font.weight.medium}; - padding-top: ${themeCssVariables.spacing[2]}; padding-bottom: ${themeCssVariables.spacing[1]}; padding-left: ${themeCssVariables.spacing[1]}; padding-right: ${themeCssVariables.spacing[1]}; + padding-top: ${themeCssVariables.spacing[2]}; `; export { StyledSelectStepTitle as SidePanelWorkflowSelectStepTitle }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepBody.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepBody.tsx index 77dd58f878..e934a1339e 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepBody.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepBody.tsx @@ -16,6 +16,7 @@ const StyledWorkflowStepBody = styled.div<{ display: ${({ display }) => display ?? 'flex'}; flex: 1 1 auto; flex-direction: column; + grid-template-rows: ${({ gridTemplateRows }) => gridTemplateRows ?? 'none'}; height: 100%; overflow: ${({ overflow }) => overflow ?? 'hidden scroll'}; padding-block: ${({ paddingBlock }) => @@ -23,7 +24,6 @@ const StyledWorkflowStepBody = styled.div<{ padding-inline: ${({ paddingInline }) => paddingInline ?? themeCssVariables.spacing[3]}; row-gap: ${({ rowGap }) => rowGap ?? themeCssVariables.spacing[4]}; - grid-template-rows: ${({ gridTemplateRows }) => gridTemplateRows ?? 'none'}; `; export const WorkflowStepBody = ({ diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterColumn.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterColumn.tsx index e86038bbfd..602eafd088 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterColumn.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterColumn.tsx @@ -22,8 +22,8 @@ type WorkflowStepFilterColumnProps = { const StyledContainer = styled.div` display: flex; flex-direction: row; - justify-content: space-between; gap: ${themeCssVariables.spacing[1]}; + justify-content: space-between; `; export const WorkflowStepFilterColumn = ({ diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterGroupColumn.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterGroupColumn.tsx index f227d7471c..30045f159d 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterGroupColumn.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterGroupColumn.tsx @@ -17,8 +17,8 @@ type WorkflowStepFilterGroupColumnProps = { const StyledContainer = styled.div` display: flex; flex-direction: row; - justify-content: space-between; gap: ${themeCssVariables.spacing[1]}; + justify-content: space-between; `; export const WorkflowStepFilterGroupColumn = ({ diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterLogicalOperatorCell.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterLogicalOperatorCell.tsx index 1a5758498a..6cfc6d3dd2 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterLogicalOperatorCell.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterLogicalOperatorCell.tsx @@ -25,9 +25,9 @@ const StyledNumber = styled.span` 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 WorkflowStepFilterLogicalOperatorCellProps = { diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsStyles.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsStyles.tsx index fd57e083b3..e19d9bf2cb 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsStyles.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsStyles.tsx @@ -20,15 +20,15 @@ export const StyledLabel = ({ children }: { children: React.ReactNode }) => ( export const StyledRow = styled.div<{ isDisabled?: boolean }>` align-items: center; + border-radius: ${themeCssVariables.spacing[1]}; + box-sizing: border-box; + cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')}; display: flex; justify-content: space-between; - width: 100%; - padding: ${themeCssVariables.spacing[1]}; - box-sizing: border-box; - border-radius: ${themeCssVariables.spacing[1]}; - cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')}; opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)}; + padding: ${themeCssVariables.spacing[1]}; pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : 'auto')}; + width: 100%; :hover { background-color: ${({ isDisabled }) => @@ -59,13 +59,13 @@ export const StyledList = styled.div` `; export const StyledIconContainer = styled.div` + align-items: center; background-color: ${themeCssVariables.background.tertiary}; - padding: ${themeCssVariables.spacing[1]}; border-radius: ${themeCssVariables.spacing[1]}; + color: ${themeCssVariables.font.color.tertiary}; display: flex; justify-content: center; - align-items: center; - color: ${themeCssVariables.font.color.tertiary}; + padding: ${themeCssVariables.spacing[1]}; `; const StyledIconChevronRightWrapper = styled.div` diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsTab.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsTab.tsx index 7722d3b971..13283485e6 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsTab.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsTab.tsx @@ -27,14 +27,14 @@ import { WorkflowAiAgentPermissionsObjectsList } from './WorkflowAiAgentPermissi import { getFilteredPermissions } from './workflowAiAgentPermissions.utils'; import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSearchInputContainer = styled.div` - width: 100%; - height: 40px; border-block: 1px solid ${themeCssVariables.border.color.medium}; + height: 40px; + width: 100%; & input { - height: 40px; - line-height: 40px; border: none; border-radius: 0; + height: 40px; + line-height: 40px; width: 100%; } `; @@ -44,7 +44,6 @@ const StyledBackButtonText = styled.span` `; const StyledBackButton = styled.button` - width: 100%; align-items: center; background: none; border: none; @@ -54,6 +53,7 @@ const StyledBackButton = styled.button` gap: ${themeCssVariables.spacing[1]}; padding: ${themeCssVariables.spacing[3]}; text-align: left; + width: 100%; &:hover { color: ${themeCssVariables.font.color.primary}; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowOutputSchemaBuilder.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowOutputSchemaBuilder.tsx index ce8faecee0..b17fdefb44 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowOutputSchemaBuilder.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowOutputSchemaBuilder.tsx @@ -48,10 +48,10 @@ const StyledSettingsHeader = styled.div` border-bottom: 1px solid ${themeCssVariables.border.color.light}; display: grid; gap: ${themeCssVariables.spacing[1]}; - padding-right: ${themeCssVariables.spacing[2]}; - padding-left: ${themeCssVariables.spacing[3]}; grid-template-columns: 1fr 24px; padding-bottom: ${themeCssVariables.spacing[2]}; + padding-left: ${themeCssVariables.spacing[3]}; + padding-right: ${themeCssVariables.spacing[2]}; `; const StyledTitleContainer = styled.div` @@ -68,6 +68,7 @@ const StyledCloseButtonContainer = styled.div` const StyledAddFieldButton = styled.button` align-items: center; + background-color: ${themeCssVariables.background.transparent.lighter}; border: 1px solid ${themeCssVariables.border.color.light}; border-radius: ${themeCssVariables.border.radius.sm}; color: ${themeCssVariables.font.color.secondary}; @@ -80,7 +81,6 @@ const StyledAddFieldButton = styled.button` margin-top: ${themeCssVariables.spacing[2]}; padding: ${themeCssVariables.spacing[2]}; width: 100%; - background-color: ${themeCssVariables.background.transparent.lighter}; &:hover { background-color: ${themeCssVariables.background.transparent.light}; @@ -88,12 +88,12 @@ const StyledAddFieldButton = styled.button` `; const StyledMessageContentContainer = styled.div` - flex-direction: column; color: ${themeCssVariables.font.color.secondary}; display: flex; + flex-direction: column; gap: ${themeCssVariables.spacing[4]}; - padding: ${themeCssVariables.spacing[4]}; line-height: normal; + padding: ${themeCssVariables.spacing[4]}; `; const StyledMessageDescription = styled.div` diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowCodeEditor.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowCodeEditor.tsx index e61c0b37fc..60d8c5a131 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowCodeEditor.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowCodeEditor.tsx @@ -11,17 +11,17 @@ const CODE_EDITOR_MIN_HEIGHT = 343; const StyledCodeEditorContainer = styled.div` display: flex; - flex-direction: column; - position: relative; flex: 1; + flex-direction: column; min-height: ${CODE_EDITOR_MIN_HEIGHT}px; overflow: hidden; + position: relative; `; const StyledFullScreenButtonContainer = styled.div` position: absolute; - top: ${themeCssVariables.spacing[2]}; right: ${themeCssVariables.spacing[2]}; + top: ${themeCssVariables.spacing[2]}; z-index: 1; `; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionCodeFields.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionCodeFields.tsx index ee6cee406b..45064647c6 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionCodeFields.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionCodeFields.tsx @@ -10,8 +10,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div<{ fullWidth?: boolean }>` display: flex; - gap: ${themeCssVariables.spacing[3]}; flex-wrap: wrap; + gap: ${themeCssVariables.spacing[3]}; > * { flex: 1; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx index a3856ac9e6..961751f815 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx @@ -61,10 +61,10 @@ const StyledFormFieldContainer = styled.div` `; const StyledDraggingIndicator = styled.div` - position: absolute; - inset: -8px; - top: -4px; background-color: ${themeCssVariables.background.transparent.light}; + inset: -8px; + position: absolute; + top: -4px; `; const StyledGripButtonContainer = styled.div` @@ -95,13 +95,13 @@ const StyledFieldContainer = styled.div<{ align-items: center; background: transparent; border: none; + cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')}; display: flex; font-family: inherit; padding-left: ${themeCssVariables.spacing[2]}; padding-right: ${themeCssVariables.spacing[2]}; - width: 100%; - cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')}; + width: 100%; &:hover, &[data-open='true'] { diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx index bf7320ca7d..eaf4d827b2 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx @@ -39,10 +39,10 @@ const StyledSettingsHeader = styled.div` border-bottom: 1px solid ${themeCssVariables.border.color.light}; display: grid; gap: ${themeCssVariables.spacing[1]}; - padding-right: ${themeCssVariables.spacing[2]}; - padding-left: ${themeCssVariables.spacing[3]}; grid-template-columns: 1fr 24px; padding-bottom: ${themeCssVariables.spacing[2]}; + padding-left: ${themeCssVariables.spacing[3]}; + padding-right: ${themeCssVariables.spacing[2]}; `; const StyledTitleContainer = styled.div` diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx index b7876757ca..df0b74104c 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx @@ -46,8 +46,8 @@ const StyledTabListContainer = styled.div` const StyledTestTabContent = styled.div` display: flex; - flex-direction: column; flex: 1; + flex-direction: column; gap: ${themeCssVariables.spacing[4]}; height: 100%; min-height: 400px; @@ -55,26 +55,26 @@ const StyledTestTabContent = styled.div` const StyledConfigurationTabContent = styled.div` display: flex; + flex: 1; flex-direction: column; gap: ${themeCssVariables.spacing[4]}; height: 100%; - flex: 1; `; const StyledFullHeightFormRawJsonFieldInputContainer = styled.div` - flex: 1; display: flex; + flex: 1; flex-direction: column; & > div:last-child { - flex: 1; display: flex; + flex: 1; flex-direction: column; & > div { flex: 1; - max-height: none !important; height: 100%; + max-height: none !important; & > div { height: 100%; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/iterator-action/components/WorkflowIteratorSubStepSwitcher.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/iterator-action/components/WorkflowIteratorSubStepSwitcher.tsx index 2abda4e6f5..e3fd7efebd 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/iterator-action/components/WorkflowIteratorSubStepSwitcher.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/iterator-action/components/WorkflowIteratorSubStepSwitcher.tsx @@ -14,8 +14,8 @@ import { IconButton } from 'twenty-ui/input'; import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` - display: flex; align-items: center; + display: flex; justify-content: space-between; padding-block: ${themeCssVariables.spacing[2]}; padding-inline: ${themeCssVariables.spacing[3]}; diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablePicker.tsx b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablePicker.tsx index 755504346c..c20681ba9c 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablePicker.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablePicker.tsx @@ -8,21 +8,21 @@ const StyledSearchVariablesDropdownContainer = styled.div<{ isReadonly?: boolean; }>` align-items: center; - display: flex; - justify-content: center; - background-color: ${({ multiline }) => multiline ? 'transparent' : themeCssVariables.background.transparent.lighter}; + border: ${({ multiline }) => + multiline ? 'none' : `1px solid ${themeCssVariables.border.color.medium}`}; border-radius: ${({ multiline }) => multiline ? themeCssVariables.border.radius.sm : `0 ${themeCssVariables.border.radius.sm} ${themeCssVariables.border.radius.sm} 0`}; - border: ${({ multiline }) => - multiline ? 'none' : `1px solid ${themeCssVariables.border.color.medium}`}; + display: flex; + + justify-content: center; padding: ${({ multiline }) => multiline diff --git a/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteTeam.tsx b/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteTeam.tsx index a7da2d9e5d..a4f5b34eaf 100644 --- a/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteTeam.tsx +++ b/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteTeam.tsx @@ -25,9 +25,9 @@ import { Button } from 'twenty-ui/input'; import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` + align-items: center; display: flex; flex-direction: row; - align-items: center; gap: ${themeCssVariables.spacing[2]}; padding-bottom: ${themeCssVariables.spacing[3]}; diff --git a/packages/twenty-front/src/pages/auth/Authorize.tsx b/packages/twenty-front/src/pages/auth/Authorize.tsx index 99ceaf142a..f19d791229 100644 --- a/packages/twenty-front/src/pages/auth/Authorize.tsx +++ b/packages/twenty-front/src/pages/auth/Authorize.tsx @@ -17,8 +17,8 @@ import { useAuthorizeAppMutation } from '~/generated-metadata/graphql'; import { useNavigateApp } from '~/hooks/useNavigateApp'; const StyledContainer = styled.div` - display: flex; align-items: center; + display: flex; flex-direction: column; height: 100dvh; justify-content: center; @@ -42,36 +42,36 @@ const StyledText = styled.div` `; const StyledCardWrapper = styled.div` - display: flex; - background-color: ${themeCssVariables.background.primary}; - flex-direction: column; align-items: center; - justify-content: center; - width: 400px; - padding: ${themeCssVariables.spacing[6]}; - box-shadow: ${themeCssVariables.boxShadow.strong}; + background-color: ${themeCssVariables.background.primary}; border-radius: ${themeCssVariables.border.radius.md}; + box-shadow: ${themeCssVariables.boxShadow.strong}; + display: flex; + flex-direction: column; + justify-content: center; + padding: ${themeCssVariables.spacing[6]}; + width: 400px; `; const StyledButtonContainer = styled.div` display: grid; - grid-template-columns: 1fr 1fr; gap: 10px; + grid-template-columns: 1fr 1fr; width: 100%; `; const StyledScopeList = styled.ul` list-style: none; - padding: 0; margin: 0 0 ${themeCssVariables.spacing[4]} 0; + padding: 0; width: 100%; `; const StyledScopeItem = styled.li` + border-bottom: 1px solid ${themeCssVariables.border.color.light}; color: ${themeCssVariables.font.color.secondary}; font-size: ${themeCssVariables.font.size.md}; padding: ${themeCssVariables.spacing[1]} 0; - border-bottom: 1px solid ${themeCssVariables.border.color.light}; &:last-child { border-bottom: none; @@ -81,8 +81,8 @@ const StyledScopeItem = styled.li` const StyledErrorText = styled.div` color: ${themeCssVariables.color.red}; font-size: ${themeCssVariables.font.size.sm}; - text-align: center; padding: ${themeCssVariables.spacing[2]} 0; + text-align: center; width: 100%; `; diff --git a/packages/twenty-front/src/pages/auth/PasswordReset.tsx b/packages/twenty-front/src/pages/auth/PasswordReset.tsx index 6ff87c9056..1a93f3c22f 100644 --- a/packages/twenty-front/src/pages/auth/PasswordReset.tsx +++ b/packages/twenty-front/src/pages/auth/PasswordReset.tsx @@ -53,10 +53,10 @@ const validationSchema = z type Form = z.infer; const StyledMainContainer = styled.div` - display: flex; - justify-content: flex-start; align-items: center; + display: flex; flex-direction: column; + justify-content: flex-start; width: 100%; `; diff --git a/packages/twenty-front/src/pages/auth/SignInUp.tsx b/packages/twenty-front/src/pages/auth/SignInUp.tsx index f76b5c492a..cdf82df670 100644 --- a/packages/twenty-front/src/pages/auth/SignInUp.tsx +++ b/packages/twenty-front/src/pages/auth/SignInUp.tsx @@ -42,9 +42,9 @@ const StyledLoaderContainer = styled.div` align-items: center; display: flex; justify-content: center; + margin-bottom: ${themeCssVariables.spacing[8]}; margin-top: ${themeCssVariables.spacing[8]}; width: 100%; - margin-bottom: ${themeCssVariables.spacing[8]}; `; const StandardContent = ({ diff --git a/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx b/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx index 3ac470db81..f85e21497c 100644 --- a/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx +++ b/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx @@ -44,9 +44,9 @@ const StyledLoaderContainer = styled.div` align-items: center; display: flex; justify-content: center; + margin-bottom: ${themeCssVariables.spacing[8]}; margin-top: ${themeCssVariables.spacing[8]}; width: 100%; - margin-bottom: ${themeCssVariables.spacing[8]}; `; enum PendingCreationLoaderStep { @@ -57,10 +57,10 @@ enum PendingCreationLoaderStep { } const StyledPendingCreationLoader = styled.div` - width: 100%; + align-items: center; display: flex; justify-content: center; - align-items: center; + width: 100%; `; export const CreateWorkspace = () => { diff --git a/packages/twenty-front/src/pages/onboarding/InviteTeam.tsx b/packages/twenty-front/src/pages/onboarding/InviteTeam.tsx index e49664fceb..f3fa2cdd43 100644 --- a/packages/twenty-front/src/pages/onboarding/InviteTeam.tsx +++ b/packages/twenty-front/src/pages/onboarding/InviteTeam.tsx @@ -32,10 +32,10 @@ import { useCreateWorkspaceInvitation } from '@/workspace-invitation/hooks/useCr const StyledAnimatedContainer = styled.div` display: flex; flex-direction: column; - padding: ${themeCssVariables.spacing[8]} 0; gap: ${themeCssVariables.spacing[4]}; - overflow-y: scroll; overflow-x: hidden; + overflow-y: scroll; + padding: ${themeCssVariables.spacing[8]} 0; width: 100%; `; diff --git a/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx b/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx index 5e6432190b..f299088f44 100644 --- a/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx +++ b/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx @@ -18,9 +18,9 @@ import { useGetCurrentUserLazyQuery } from '~/generated-metadata/graphql'; import { useNavigateApp } from '~/hooks/useNavigateApp'; const StyledTitleContainer = styled.div` + align-items: center; display: flex; flex-direction: column; - align-items: center; text-align: center; `; diff --git a/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx b/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx index ba460aa77b..12feb9ceb2 100644 --- a/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx +++ b/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx @@ -34,9 +34,9 @@ import { AuthenticatedMethod } from '@/auth/types/AuthenticatedMethod.enum'; const StyledSyncEmailsContainer = styled.div` display: flex; flex-direction: row; - width: 100%; - margin: ${themeCssVariables.spacing[8]} 0; gap: ${themeCssVariables.spacing[2]}; + margin: ${themeCssVariables.spacing[8]} 0; + width: 100%; `; const StyledActionLinkContainer = styled.div` diff --git a/packages/twenty-front/src/pages/onboarding/internal/ChooseYourPlanContent.tsx b/packages/twenty-front/src/pages/onboarding/internal/ChooseYourPlanContent.tsx index eb25ee883c..e8980075e5 100644 --- a/packages/twenty-front/src/pages/onboarding/internal/ChooseYourPlanContent.tsx +++ b/packages/twenty-front/src/pages/onboarding/internal/ChooseYourPlanContent.tsx @@ -53,27 +53,27 @@ const StyledBenefitsContainer = styled.div` box-sizing: border-box; display: flex; flex-direction: column; - width: 100%; gap: 16px; padding: ${themeCssVariables.spacing[4]} ${themeCssVariables.spacing[3]}; + width: 100%; `; const StyledOrganizationBenefitsContainer = styled.div` + border-bottom: 1px solid ${themeCssVariables.border.color.light}; box-sizing: border-box; display: flex; flex-direction: column; - width: 100%; gap: 16px; padding: ${themeCssVariables.spacing[4]} ${themeCssVariables.spacing[3]}; - border-bottom: 1px solid ${themeCssVariables.border.color.light}; + width: 100%; `; const StyledChooseTrialContainer = styled.div` display: flex; flex-direction: row; - width: 100%; - margin-bottom: ${themeCssVariables.spacing[8]}; gap: ${themeCssVariables.spacing[2]}; + margin-bottom: ${themeCssVariables.spacing[8]}; + width: 100%; `; const StyledLinkGroup = styled.div` diff --git a/packages/twenty-front/src/pages/settings/SettingsTwoFactorAuthenticationMethod.tsx b/packages/twenty-front/src/pages/settings/SettingsTwoFactorAuthenticationMethod.tsx index 602d4e3af3..d71b6f904c 100644 --- a/packages/twenty-front/src/pages/settings/SettingsTwoFactorAuthenticationMethod.tsx +++ b/packages/twenty-front/src/pages/settings/SettingsTwoFactorAuthenticationMethod.tsx @@ -23,11 +23,11 @@ import { themeCssVariables } from 'twenty-ui/theme-constants'; import { useCopyToClipboard } from '~/hooks/useCopyToClipboard'; const StyledQRCodeContainer = styled.div` - margin: ${themeCssVariables.spacing[4]} 0; + align-items: flex-start; display: flex; flex-direction: column; - align-items: flex-start; gap: ${themeCssVariables.spacing[3]}; + margin: ${themeCssVariables.spacing[4]} 0; `; const StyledQRCodeWrapper = styled.div` @@ -52,8 +52,8 @@ const StyledQRCodeSizer = styled.div` const StyledCopySetupKeyText = styled.div` color: ${themeCssVariables.font.color.tertiary}; font-size: ${themeCssVariables.font.size.sm}; - text-align: left; line-height: 1.5; + text-align: left; `; const StyledCopySetupKeyLink = styled.button` @@ -63,9 +63,9 @@ const StyledCopySetupKeyLink = styled.button` cursor: pointer; display: inline; font-size: ${themeCssVariables.font.size.sm}; + margin-left: 0; padding: 0; text-decoration: underline; - margin-left: 0; &:hover { color: ${themeCssVariables.font.color.secondary}; diff --git a/packages/twenty-front/src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx b/packages/twenty-front/src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx index eb36bf028b..61e640a80a 100644 --- a/packages/twenty-front/src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx +++ b/packages/twenty-front/src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx @@ -38,8 +38,8 @@ const StyledH3TitleContainer = styled.div` `; const StyledRow = styled.div` - display: flex; align-items: flex-end; + display: flex; gap: ${themeCssVariables.spacing[2]}; `; diff --git a/packages/twenty-front/src/pages/settings/ai/SettingsSkillForm.tsx b/packages/twenty-front/src/pages/settings/ai/SettingsSkillForm.tsx index e94f399ce9..577d9090e2 100644 --- a/packages/twenty-front/src/pages/settings/ai/SettingsSkillForm.tsx +++ b/packages/twenty-front/src/pages/settings/ai/SettingsSkillForm.tsx @@ -78,10 +78,10 @@ const StyledAdvancedSettingsContainer = styled.div` const StyledHeaderTitle = styled.div` color: ${themeCssVariables.font.color.primary}; - font-weight: ${themeCssVariables.font.weight.semiBold}; font-size: ${themeCssVariables.font.size.lg}; - width: fit-content; + font-weight: ${themeCssVariables.font.weight.semiBold}; max-width: 420px; + width: fit-content; & > input:disabled { color: ${themeCssVariables.font.color.primary}; } diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsAIMCP.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsAIMCP.tsx index edeef5d5a3..7ffcc58caa 100644 --- a/packages/twenty-front/src/pages/settings/ai/components/SettingsAIMCP.tsx +++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsAIMCP.tsx @@ -15,8 +15,8 @@ const StyledWrapper = styled.div` const StyledCopyButton = styled.div` position: absolute; - top: ${themeCssVariables.spacing[3]}; right: ${themeCssVariables.spacing[3]}; + top: ${themeCssVariables.spacing[3]}; z-index: 1; `; diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsAgentModelCapabilities.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsAgentModelCapabilities.tsx index 71796c694d..f1fd4604dc 100644 --- a/packages/twenty-front/src/pages/settings/ai/components/SettingsAgentModelCapabilities.tsx +++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsAgentModelCapabilities.tsx @@ -11,14 +11,14 @@ import { useContext } from 'react'; import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledCheckboxContainer = styled.div<{ disabled: boolean }>` - display: flex; align-items: center; + border-radius: ${themeCssVariables.border.radius.sm}; + cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; + display: flex; justify-content: space-between; padding: ${themeCssVariables.spacing[1]}; - border-radius: ${themeCssVariables.border.radius.sm}; transition: background-color calc(${themeCssVariables.animation.duration.normal} * 1s) ease; - cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; &:hover { background-color: ${({ disabled }) => @@ -29,8 +29,8 @@ const StyledCheckboxContainer = styled.div<{ disabled: boolean }>` `; const StyledCheckboxLabel = styled.div` - display: flex; align-items: center; + display: flex; gap: ${themeCssVariables.spacing[1]}; `; diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsSkillsTable.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsSkillsTable.tsx index bfa26638c0..a524780862 100644 --- a/packages/twenty-front/src/pages/settings/ai/components/SettingsSkillsTable.tsx +++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsSkillsTable.tsx @@ -37,9 +37,9 @@ import { normalizeSearchText } from '~/utils/normalizeSearchText'; import { SettingsSkillTableRow } from './SettingsSkillTableRow'; const StyledSearchAndFilterContainer = styled.div` + align-items: center; display: flex; gap: ${themeCssVariables.spacing[2]}; - align-items: center; padding-bottom: ${themeCssVariables.spacing[2]}; `; diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsToolsTable.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsToolsTable.tsx index 6467a5e5fb..670b4957d9 100644 --- a/packages/twenty-front/src/pages/settings/ai/components/SettingsToolsTable.tsx +++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsToolsTable.tsx @@ -33,9 +33,9 @@ import { } from './SettingsToolTableRow'; const StyledSearchAndFilterContainer = styled.div` + align-items: center; display: flex; gap: ${themeCssVariables.spacing[2]}; - align-items: center; padding-bottom: ${themeCssVariables.spacing[2]}; `; diff --git a/packages/twenty-front/src/pages/settings/applications/SettingsApplicationRegistrationDetails.tsx b/packages/twenty-front/src/pages/settings/applications/SettingsApplicationRegistrationDetails.tsx index bcf711a6cb..8c4b7f28c5 100644 --- a/packages/twenty-front/src/pages/settings/applications/SettingsApplicationRegistrationDetails.tsx +++ b/packages/twenty-front/src/pages/settings/applications/SettingsApplicationRegistrationDetails.tsx @@ -104,8 +104,8 @@ const StyledVariableRow = styled.div` `; const StyledVariableInfo = styled.div` - flex: 1; display: flex; + flex: 1; flex-direction: column; gap: ${themeCssVariables.spacing['0.5']}; `; diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx index 00e21f550c..cf5fd51232 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx @@ -37,8 +37,8 @@ import { updatedObjectNamePluralState } from '~/pages/settings/data-model/states const StyledContentContainer = styled.div` flex: 1; - width: 100%; padding-left: 0; + width: 100%; `; export const SettingsObjectDetailPage = () => { diff --git a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsApiKeys.tsx b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsApiKeys.tsx index 0cf0975dda..be03453ff1 100644 --- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsApiKeys.tsx +++ b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsApiKeys.tsx @@ -24,8 +24,8 @@ const StyledButtonContainer = styled.div` const StyledContainer = styled.div` display: flex; flex-direction: column; - overflow: visible; gap: ${themeCssVariables.spacing[2]}; + overflow: visible; `; export const SettingsApiKeys = () => { diff --git a/packages/twenty-front/src/pages/settings/developers/webhooks/components/SettingsWebhooks.tsx b/packages/twenty-front/src/pages/settings/developers/webhooks/components/SettingsWebhooks.tsx index 9b3973b08f..7b54e84d40 100644 --- a/packages/twenty-front/src/pages/settings/developers/webhooks/components/SettingsWebhooks.tsx +++ b/packages/twenty-front/src/pages/settings/developers/webhooks/components/SettingsWebhooks.tsx @@ -23,8 +23,8 @@ const StyledButtonContainer = styled.div` const StyledContainer = styled.div<{ isMobile: boolean }>` display: flex; flex-direction: column; - overflow: hidden; gap: ${themeCssVariables.spacing[2]}; + overflow: hidden; `; export const SettingsWebhooks = () => { diff --git a/packages/twenty-front/src/pages/settings/members/SettingsWorkspaceMembers.tsx b/packages/twenty-front/src/pages/settings/members/SettingsWorkspaceMembers.tsx index 69ac0e811e..b6821f13e9 100644 --- a/packages/twenty-front/src/pages/settings/members/SettingsWorkspaceMembers.tsx +++ b/packages/twenty-front/src/pages/settings/members/SettingsWorkspaceMembers.tsx @@ -76,8 +76,8 @@ const StyledTableContainer = styled.div<{ hasMoreRows?: boolean }>` `; const StyledIconWrapper = styled.div` - display: flex; align-items: center; + display: flex; margin-right: ${themeCssVariables.spacing[2]}; `; diff --git a/packages/twenty-front/src/pages/settings/security/event-logs/components/EventLogFilters.tsx b/packages/twenty-front/src/pages/settings/security/event-logs/components/EventLogFilters.tsx index 34130a7fa1..228c124193 100644 --- a/packages/twenty-front/src/pages/settings/security/event-logs/components/EventLogFilters.tsx +++ b/packages/twenty-front/src/pages/settings/security/event-logs/components/EventLogFilters.tsx @@ -29,8 +29,8 @@ const StyledFiltersContainer = styled.div` const StyledFilterItem = styled.div` flex: 1; - min-width: 200px; max-width: 300px; + min-width: 200px; `; export const EventLogFilters = ({ diff --git a/packages/twenty-front/src/pages/settings/workspace/SettingsApiWebhooks.tsx b/packages/twenty-front/src/pages/settings/workspace/SettingsApiWebhooks.tsx index fcdcf1e83b..0fe34b94da 100644 --- a/packages/twenty-front/src/pages/settings/workspace/SettingsApiWebhooks.tsx +++ b/packages/twenty-front/src/pages/settings/workspace/SettingsApiWebhooks.tsx @@ -37,8 +37,8 @@ const StyledSectionContainer = styled.div` const StyledContainer = styled.div<{ isMobile?: boolean }>` display: flex; flex-direction: column; - overflow: ${({ isMobile }) => (isMobile ? 'hidden' : 'visible')}; gap: ${themeCssVariables.spacing[2]}; + overflow: ${({ isMobile }) => (isMobile ? 'hidden' : 'visible')}; `; export const SettingsApiWebhooks = () => { diff --git a/packages/twenty-oxlint-rules/OXLINT_MIGRATION_TODO.md b/packages/twenty-oxlint-rules/OXLINT_MIGRATION_TODO.md index bfa6b02d51..f7db2432ad 100644 --- a/packages/twenty-oxlint-rules/OXLINT_MIGRATION_TODO.md +++ b/packages/twenty-oxlint-rules/OXLINT_MIGRATION_TODO.md @@ -4,18 +4,20 @@ This file tracks what was lost or temporarily disabled during the ESLint to Oxli ## Temporarily Disabled Rules -### twenty-front - -| Rule | Reason | Violations | Auto-fixable | -|------|--------|------------|-------------| -| `twenty/sort-css-properties-alphabetically` | 578 pre-existing violations | 578 | Yes | - ### twenty-server | Rule | Reason | Violations | Auto-fixable | |------|--------|------------|-------------| -| `typescript/consistent-type-imports` | 3814 pre-existing violations (imports not using `import type`) | 3814 | Yes | -| `twenty/max-consts-per-file` | 94 pre-existing violations (constant files with >1 export) | 94 | No | +| `typescript/consistent-type-imports` | 3814 pre-existing violations. **Cannot be auto-fixed** because NestJS relies on `emitDecoratorMetadata` for DI — the auto-fixer converts constructor parameter imports to `import type`, which erases them at runtime and breaks dependency injection. | 3814 | No (unsafe auto-fix) | +| `twenty/max-consts-per-file` | 94 pre-existing violations across 24 constant files with >1 export | 94 | No | + +## Re-activated Rules + +### twenty-front + +| Rule | Violations Fixed | Method | +|------|-----------------|--------| +| `twenty/sort-css-properties-alphabetically` | 578 | Auto-fix via `npx nx lint twenty-front --configuration=fix` | ## Dropped Plugins (No Oxlint Equivalent) @@ -24,7 +26,6 @@ These plugins were in use but have no oxlint equivalent. Consider whether altern | Plugin | Where Used | What It Did | Replacement / Status | |--------|-----------|-------------|---------------------| | `eslint-plugin-project-structure` | Frontend | Enforced folder naming and structure conventions for `src/modules/` (kebab-case dirs, allowed subdirs like hooks/utils/components, file naming for hooks/utils). Config still in `folderStructure.json`. | No equivalent. Could be implemented as a custom oxlint rule or a standalone CI script. | -| `prettier/prettier` | All packages | Ran Prettier as a lint rule | Run Prettier separately (already in CI/editor via format-on-save) | | `lingui/*` | Frontend, emails | i18n extraction and consistency rules | No equivalent | | `@stylistic/*` | Server | Formatting rules (indentation, spacing) | Use Prettier instead | | `import/order`, `simple-import-sort/imports` | Server | Import sorting and ordering | No equivalent | @@ -40,9 +41,11 @@ These plugins were in use but have no oxlint equivalent. Consider whether altern The `oxc.oxc-vscode` extension provides inline diagnostics for built-in oxlint rules but does **not** yet support `jsPlugins` (custom `twenty/*` rules). Custom rule violations are only caught by `nx lint` and CI. -## Re-activation Plan +## Remaining Re-activation Plan -1. **Sort CSS properties** (`twenty-front`): Run `npx nx lint twenty-front --configuration=fix` to auto-fix all 578 violations, then re-enable the rule. -2. **Consistent type imports** (`twenty-server`): Run `npx nx lint twenty-server --configuration=fix` to auto-fix all 3814 violations, then re-enable the rule. -3. **Max consts per file** (`twenty-server`): Manually split 94 constant files to have at most 1 exported const each, then re-enable the rule. -4. **Folder structure enforcement** (`twenty-front`): Implement as a custom oxlint rule or a standalone CI check script that validates `src/modules/` against `folderStructure.json`. +1. **Consistent type imports** (`twenty-server`): Cannot safely auto-fix due to NestJS `emitDecoratorMetadata`. Options: + - Manually add `import type` only where safe (not for DI constructor params) + - Enable TypeScript's `verbatimModuleSyntax` (major migration) + - Keep disabled until oxlint supports decorator-aware type import analysis +2. **Max consts per file** (`twenty-server`): Manually split 24 constant files to have at most 1 exported const each, then re-enable the rule. +3. **Folder structure enforcement** (`twenty-front`): Implement as a custom oxlint rule or a standalone CI check script that validates `src/modules/` against `folderStructure.json`. diff --git a/packages/twenty-server/src/app.module.ts b/packages/twenty-server/src/app.module.ts index 33510d31a2..55c1f1ed94 100644 --- a/packages/twenty-server/src/app.module.ts +++ b/packages/twenty-server/src/app.module.ts @@ -19,11 +19,11 @@ import { GraphQLConfigService } from 'src/engine/api/graphql/graphql-config/grap import { MetadataGraphQLApiModule } from 'src/engine/api/graphql/metadata-graphql-api.module'; import { McpModule } from 'src/engine/api/mcp/mcp.module'; import { RestApiModule } from 'src/engine/api/rest/rest-api.module'; +import { WorkspaceAuthContextMiddleware } from 'src/engine/core-modules/auth/middlewares/workspace-auth-context.middleware'; import { MetricsModule } from 'src/engine/core-modules/metrics/metrics.module'; import { DataloaderModule } from 'src/engine/dataloaders/dataloader.module'; import { DataSourceModule } from 'src/engine/metadata-modules/data-source/data-source.module'; import { WorkspaceMetadataVersionModule } from 'src/engine/metadata-modules/workspace-metadata-version/workspace-metadata-version.module'; -import { WorkspaceAuthContextMiddleware } from 'src/engine/core-modules/auth/middlewares/workspace-auth-context.middleware'; import { GraphQLHydrateRequestFromTokenMiddleware } from 'src/engine/middlewares/graphql-hydrate-request-from-token.middleware'; import { MiddlewareModule } from 'src/engine/middlewares/middleware.module'; import { RestCoreMiddleware } from 'src/engine/middlewares/rest-core.middleware';