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

chore(twenty-front): migrate command-menu, workflow, page-layout and UI modules from Emotion to Linaria (PR 4-6/10) (#18342)

Browse Source 
## Summary

Continues the Emotion → Linaria migration (PR 4-6 from the [migration
plan](docs/emotion-to-linaria-migration-plan.md)). Migrates **311
files** across four module groups:

| Module | Files |
|---|---|
| command-menu | 53 |
| workflow | 84 |
| page-layout | 84 |
| UI (partial - first ~80 files) | ~80 |
| twenty-ui (TEXT_INPUT_STYLE) | 1 |
| misc (hooks, keyboard-shortcut-menu, file-upload) | ~9 |

### Migration patterns applied

- `import styled from '@emotion/styled'` → `import { styled } from
'@linaria/react'`
- `import { useTheme } from '@emotion/react'` → `import { useContext }
from 'react'` + `import { ThemeContext } from 'twenty-ui/theme'`
- `${({ theme }) => theme.X.Y.Z}` → `${themeCssVariables.X.Y.Z}` (static
CSS variables)
- `theme.spacing(N)` → `themeCssVariables.spacing[N]`
- `styled(motion.div)` → `motion.create(StyledBase)` (11 components)
- `styled(Component)<TypeParams>` → wrapper div approach for non-HTML
elements
- Multi-declaration interpolations split into one CSS property per
interpolation
- Interpolation return types fixed (`&&` → ternary `? : ''`)
- `TEXT_INPUT_STYLE` converted from function to static string constant
(backward compatible)
- Emotion `<Global>` replaced with `useEffect` style injection
- Complex runtime-dependent styles use CSS custom properties via
`style={}` prop

### After this PR

- **Remaining files**: ~400 (object-record: ~160, settings: ~200, UI:
~44)
- **No breaking changes**: CSS variables resolve identically to the
previous Emotion theme values
This commit is contained in:
Charles Bochet
2026-03-03 16:42:03 +01:00
committed by GitHub
parent 8b26020a0b
commit 3bfdc2c83f
339 changed files with 3439 additions and 2613 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx
+7 -6
View File
@@ -1,20 +1,21 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import React from 'react';
import { Label } from 'twenty-ui/display';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledGroupHeading = styled(Label)`
align-items: center;
padding-bottom: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(1)};
padding-right: ${({ theme }) => theme.spacing(1)};
padding-top: ${({ theme }) => theme.spacing(2)};
padding-bottom: ${themeCssVariables.spacing[1]};
padding-left: ${themeCssVariables.spacing[1]};
padding-right: ${themeCssVariables.spacing[1]};
padding-top: ${themeCssVariables.spacing[2]};
user-select: none;
`;
const StyledGroup = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(0.5)};
gap: ${themeCssVariables.spacing[0.5]};
`;
type CommandGroupProps = {
packages/twenty-front/src/modules/command-menu/components/CommandMenuAskAIInfo.tsx
+5 -4
View File
@@ -1,13 +1,14 @@
import { currentAIChatThreadTitleState } from '@/ai/states/currentAIChatThreadTitleState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledPageTitle = styled.div`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
color: ${themeCssVariables.font.color.primary};
font-size: ${themeCssVariables.font.size.sm};
font-weight: ${themeCssVariables.font.weight.semiBold};
`;
export const CommandMenuAskAIInfo = () => {
packages/twenty-front/src/modules/command-menu/components/CommandMenuBackButton.tsx
+3 -2
View File
@@ -6,10 +6,11 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { IconChevronLeft } from 'twenty-ui/display';
import { IconButton } from 'twenty-ui/input';
import { MenuItem } from 'twenty-ui/navigation';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledNavigationIcon = styled.div`
align-items: center;
@@ -19,7 +20,7 @@ const StyledNavigationIcon = styled.div`
`;
const StyledIconChevronLeft = styled(IconChevronLeft)`
color: ${({ theme }) => theme.font.color.secondary};
color: ${themeCssVariables.font.color.secondary};
`;
export const CommandMenuBackButton = () => {
packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
+4 -3
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
@@ -10,10 +10,11 @@ import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/u
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledCommandMenuContainer = styled.div<{ isMobile: boolean }>`
max-height: ${({ theme, isMobile }) => {
const mobileOffset = isMobile ? theme.spacing(16) : '0px';
max-height: ${({ isMobile }) => {
const mobileOffset = isMobile ? themeCssVariables.spacing[16] : '0px';
return `calc(100% - ${mobileOffset})`;
}};
packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx
+18 -16
View File
@@ -1,10 +1,11 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { isNonEmptyString } from '@sniptt/guards';
import { Fragment } from 'react/jsx-runtime';
import { type CommandMenuPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledChip = styled.button<{
withText: boolean;
@@ -14,30 +15,31 @@ const StyledChip = styled.button<{
all: unset;
align-items: center;
justify-content: center;
background: ${({ theme }) => theme.background.transparent.light};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.md};
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: ${({ theme }) => theme.spacing(1)};
height: ${({ theme }) => theme.spacing(6)};
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
${({ theme, withText }) => (withText ? theme.spacing(2) : theme.spacing(1))};
${({ withText }) =>
withText ? themeCssVariables.spacing[2] : themeCssVariables.spacing[1]};
font-family: inherit;
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
line-height: ${({ theme }) => theme.text.lineHeight.lg};
color: ${({ theme }) => theme.font.color.primary};
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')};
&:hover {
background: ${({ onClick, theme }) =>
background: ${({ onClick }) =>
isDefined(onClick)
? theme.background.transparent.medium
: theme.background.transparent.light};
? themeCssVariables.background.transparent.medium
: themeCssVariables.background.transparent.light};
}
max-width: ${({ maxWidth }) => maxWidth};
max-width: ${({ maxWidth }) => maxWidth ?? ''};
`;
const StyledIconsContainer = styled.div`
@@ -46,7 +48,7 @@ const StyledIconsContainer = styled.div`
`;
const StyledEmptyText = styled.div`
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
`;
export type CommandMenuContextChipProps = {
packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx
+13 -9
View File
@@ -2,19 +2,23 @@ import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandard
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
import { type ObjectRecord } from '@/object-record/types/ObjectRecord';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { Avatar } from 'twenty-ui/display';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
const StyledIconWrapper = styled.div<{ withIconBackground?: boolean }>`
background: ${({ theme, withIconBackground }) =>
withIconBackground ? theme.background.primary : 'unset'};
border-radius: ${({ theme }) => theme.border.radius.sm};
background: ${({ withIconBackground }) =>
withIconBackground ? themeCssVariables.background.primary : 'unset'};
border-radius: ${themeCssVariables.border.radius.sm};
border: 1px solid
${({ theme, withIconBackground }) =>
withIconBackground ? theme.border.color.medium : 'transparent'};
${({ withIconBackground }) =>
withIconBackground
? themeCssVariables.border.color.medium
: 'transparent'};
&:not(:first-of-type) {
margin-left: -${({ theme }) => theme.spacing(1)};
margin-left: -${themeCssVariables.spacing[1]};
}
display: flex;
align-items: center;
@@ -36,7 +40,7 @@ export const CommandMenuContextRecordChipAvatars = ({
objectMetadataItem.nameSingular,
);
const theme = useTheme();
const { theme } = useContext(ThemeContext);
return (
<StyledIconWrapper
packages/twenty-front/src/modules/command-menu/components/CommandMenuFolderInfo.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { useIcons } from 'twenty-ui/display';
packages/twenty-front/src/modules/command-menu/components/CommandMenuForMobile.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { CommandMenuOpenContainer } from '@/command-menu/components/CommandMenuO
import { CommandMenuRouter } from '@/command-menu/components/CommandMenuRouter';
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { AnimatePresence } from 'framer-motion';
import { createPortal } from 'react-dom';
packages/twenty-front/src/modules/command-menu/components/CommandMenuItemNumberInput.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePush
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
import { currentFocusIdSelector } from '@/ui/utilities/focus/states/currentFocusIdSelector';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useStore } from 'jotai';
import { useRef, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
packages/twenty-front/src/modules/command-menu/components/CommandMenuItemTextInput.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePush
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
import { currentFocusIdSelector } from '@/ui/utilities/focus/states/currentFocusIdSelector';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useStore } from 'jotai';
import { useRef, useState } from 'react';
import { type IconComponent } from 'twenty-ui/display';
packages/twenty-front/src/modules/command-menu/components/CommandMenuItemWithAddToNavigationDrag.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { Draggable } from '@hello-pangea/dnd';
import { useLingui } from '@lingui/react/macro';
import { type ReactNode, useState } from 'react';
packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx
+8 -7
View File
@@ -10,9 +10,10 @@ import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelect
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
import { themeCssVariables } from 'twenty-ui/theme-constants';
export type CommandMenuListProps = {
commandGroups: ActionGroupConfig[];
@@ -28,10 +29,10 @@ const StyledInnerList = styled.div`
100dvh - ${COMMAND_MENU_SEARCH_BAR_HEIGHT}px -
${COMMAND_MENU_SEARCH_BAR_PADDING * 2}px
);
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
padding-top: ${({ theme }) => theme.spacing(2)};
width: calc(100% - ${({ theme }) => theme.spacing(4)});
padding-left: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[2]};
padding-top: ${themeCssVariables.spacing[2]};
width: calc(100% - ${themeCssVariables.spacing[4]});
@media (min-width: ${MOBILE_VIEWPORT}px) {
max-height: calc(
@@ -47,9 +48,9 @@ const StyledCommandMenuList = styled.div`
const StyledEmpty = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.light};
color: ${themeCssVariables.font.color.light};
display: flex;
font-size: ${({ theme }) => theme.font.size.md};
font-size: ${themeCssVariables.font.size.md};
height: 64px;
justify-content: center;
white-space: pre-wrap;
packages/twenty-front/src/modules/command-menu/components/CommandMenuMultipleRecordsInfo.tsx
+3 -2
View File
@@ -3,8 +3,9 @@ import { MultipleRecordsActionKeys } from '@/action-menu/actions/record-actions/
import { getActionLabel } from '@/action-menu/utils/getActionLabel';
import { CommandMenuPageInfoLayout } from '@/command-menu/components/CommandMenuPageInfoLayout';
import { useFindManyRecordsSelectedInContextStore } from '@/context-store/hooks/useFindManyRecordsSelectedInContextStore';
import { useTheme } from '@emotion/react';
import { t } from '@lingui/core/macro';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
type CommandMenuMultipleRecordsInfoProps = {
commandMenuPageInstanceId: string;
@@ -13,7 +14,7 @@ type CommandMenuMultipleRecordsInfoProps = {
export const CommandMenuMultipleRecordsInfo = ({
commandMenuPageInstanceId,
}: CommandMenuMultipleRecordsInfoProps) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const { totalCount } = useFindManyRecordsSelectedInContextStore({
instanceId: commandMenuPageInstanceId,
packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx
+11 -9
View File
@@ -17,19 +17,20 @@ import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomStat
import { WORKFLOW_DIAGRAM_CREATE_STEP_NODE_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramCreateStepNodeClickOutsideId';
import { WORKFLOW_DIAGRAM_STEP_NODE_BASE_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramStepNodeClickOutsideId';
import { WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/workflow-edges/constants/WorkflowDiagramEdgeOptionsClickOutsideId';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { motion } from 'framer-motion';
import { useCallback, useRef } from 'react';
import { useCallback, useContext, useRef } from 'react';
import { LINK_CHIP_CLICK_OUTSIDE_ID } from 'twenty-ui/components';
import { useIsMobile } from 'twenty-ui/utilities';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { ThemeContext } from 'twenty-ui/theme';
const StyledCommandMenu = styled(motion.div)`
background: ${({ theme }) => theme.background.primary};
border-left: 1px solid ${({ theme }) => theme.border.color.medium};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
font-family: ${({ theme }) => theme.font.family};
const StyledCommandMenuBase = styled.div`
background: ${themeCssVariables.background.primary};
border-left: 1px solid ${themeCssVariables.border.color.medium};
box-shadow: ${themeCssVariables.boxShadow.strong};
font-family: ${themeCssVariables.font.family};
height: 100%;
overflow: hidden;
padding: 0;
@@ -40,6 +41,7 @@ const StyledCommandMenu = styled(motion.div)`
display: flex;
flex-direction: column;
`;
const StyledCommandMenu = motion.create(StyledCommandMenuBase);
export const CommandMenuOpenContainer = ({
children,
@@ -50,7 +52,7 @@ export const CommandMenuOpenContainer = ({
? 'fullScreen'
: 'normal';
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const { closeCommandMenu } = useCommandMenu();
packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfo.tsx
+8 -6
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { isDefined } from 'twenty-shared/utils';
import {
IconColumnInsertRight,
@@ -20,13 +20,15 @@ import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-ite
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { CommandMenuPages } from 'twenty-shared/types';
import { useTheme } from '@emotion/react';
import { type CommandMenuContextChipProps } from './CommandMenuContextChip';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
const StyledPageTitle = styled.div`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
color: ${themeCssVariables.font.color.primary};
font-size: ${themeCssVariables.font.size.sm};
font-weight: ${themeCssVariables.font.weight.semiBold};
`;
type CommandMenuPageInfoProps = {
@@ -34,7 +36,7 @@ type CommandMenuPageInfoProps = {
};
export const CommandMenuPageInfo = ({ pageChip }: CommandMenuPageInfoProps) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
);
packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfoLayout.tsx
+13 -12
View File
@@ -1,42 +1,43 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { type ReactNode } from 'react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
export const StyledPageInfoContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(0.5)};
gap: ${themeCssVariables.spacing[0.5]};
`;
export const StyledPageInfoIcon = styled.div<{ iconColor?: string }>`
align-items: center;
background: ${({ theme }) => theme.background.transparent.light};
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ iconColor }) => iconColor};
background: ${themeCssVariables.background.transparent.light};
border-radius: ${themeCssVariables.border.radius.sm};
color: ${({ iconColor }) => iconColor ?? ''};
display: flex;
flex-shrink: 0;
justify-content: center;
padding: ${({ theme }) => theme.spacing(1)};
padding: ${themeCssVariables.spacing[1]};
`;
export const StyledPageInfoTextContainer = styled.div`
align-items: center;
display: flex;
flex: 1;
gap: ${({ theme }) => theme.spacing(0.5)};
gap: ${themeCssVariables.spacing[0.5]};
min-width: 0;
`;
export const StyledPageInfoTitleContainer = styled.div`
font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
padding-inline: ${({ theme }) => theme.spacing(1)};
font-size: ${themeCssVariables.font.size.md};
font-weight: ${themeCssVariables.font.weight.semiBold};
padding-inline: ${themeCssVariables.spacing[1]};
min-width: 0;
max-width: 150px;
`;
export const StyledPageInfoLabel = styled.div`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.sm};
color: ${themeCssVariables.font.color.tertiary};
font-size: ${themeCssVariables.font.size.sm};
white-space: nowrap;
flex-shrink: 0;
`;
packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfoContent.tsx
+3 -3
View File
@@ -11,21 +11,21 @@ import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/stat
import { TitleInput } from '@/ui/input/components/TitleInput';
import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useTheme } from '@emotion/react';
import { isNonEmptyString } from '@sniptt/guards';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useState } from 'react';
import { useContext, useState } from 'react';
import { CommandMenuPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
import { CommandMenuPageInfoLayout } from './CommandMenuPageInfoLayout';
import { ThemeContext } from 'twenty-ui/theme';
export const CommandMenuPageLayoutInfoContent = ({
pageLayoutId,
}: {
pageLayoutId: string;
}) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const { getIcon } = useIcons();
const commandMenuPage = useAtomStateValue(commandMenuPageState);
const commandMenuPageInfo = useAtomStateValue(commandMenuPageInfoState);
packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx
+4 -3
View File
@@ -6,10 +6,11 @@ import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageI
import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { motion } from 'framer-motion';
import { isDefined } from 'twenty-shared/utils';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
const StyledCommandMenuContent = styled.div`
flex: 1;
@@ -26,7 +27,7 @@ export const CommandMenuRouter = () => {
<></>
);
const theme = useTheme();
const { theme } = useContext(ThemeContext);
return (
<CommandMenuContainer>
packages/twenty-front/src/modules/command-menu/components/CommandMenuSidePanelForDesktop.tsx
+9 -6
View File
@@ -15,8 +15,9 @@ import { COMMAND_MENU_CONSTRAINTS } from '@/ui/layout/resizable-panel/constants/
import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useCallback, useState } from 'react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledSidePanelWrapper = styled.div<{
isOpen: boolean;
@@ -26,14 +27,16 @@ const StyledSidePanelWrapper = styled.div<{
min-width: 0;
overflow: hidden;
width: ${({ isOpen }) => (isOpen ? `var(${COMMAND_MENU_WIDTH_VAR})` : '0px')};
transition: ${({ isResizing, theme }) =>
isResizing ? 'none' : `width ${theme.animation.duration.normal}s`};
transition: ${({ isResizing }) =>
isResizing
? 'none'
: `width ${themeCssVariables.animation.duration.normal}s`};
`;
const StyledSidePanel = styled.aside`
background: ${({ theme }) => theme.background.primary};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.md};
background: ${themeCssVariables.background.primary};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${themeCssVariables.border.radius.md};
display: flex;
flex-direction: column;
height: 100%;
packages/twenty-front/src/modules/command-menu/components/CommandMenuSubViewWithSearch.tsx
+7 -6
View File
@@ -1,7 +1,8 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { type ReactNode } from 'react';
import { SidePanelSubPageNavigationHeader } from '@/command-menu/pages/common/components/SidePanelSubPageNavigationHeader';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledSubViewContainer = styled.div`
display: flex;
@@ -13,17 +14,17 @@ const StyledSubViewContainer = styled.div`
const StyledSearchContainer = styled.div`
align-items: center;
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-bottom: 1px solid ${themeCssVariables.border.color.light};
display: flex;
height: ${({ theme }) => theme.spacing(10)};
height: ${themeCssVariables.spacing[10]};
min-width: 0;
padding-inline: ${({ theme }) => theme.spacing(3)};
padding-inline: ${themeCssVariables.spacing[3]};
`;
const StyledSearchInput = styled.input`
background: transparent;
border: none;
border-radius: ${({ theme }) => theme.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.sm};
box-sizing: border-box;
padding: 0;
@@ -31,7 +32,7 @@ const StyledSearchInput = styled.input`
outline: none;
&::placeholder {
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
}
`;
packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
+15 -15
View File
@@ -4,7 +4,6 @@ import { CommandMenuTopBarInputFocusEffect } from '@/command-menu/components/Com
import { CommandMenuTopBarRightCornerIcon } from '@/command-menu/components/CommandMenuTopBarRightCornerIcon';
import { COMMAND_MENU_SEARCH_BAR_HEIGHT } from '@/command-menu/constants/CommandMenuSearchBarHeight';
import { COMMAND_MENU_SEARCH_BAR_HEIGHT_MOBILE } from '@/command-menu/constants/CommandMenuSearchBarHeightMobile';
import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/CommandMenuSearchBarPadding';
import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { useCommandMenuContextChips } from '@/command-menu/hooks/useCommandMenuContextChips';
@@ -14,29 +13,30 @@ import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchS
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { AnimatePresence, motion } from 'framer-motion';
import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useRef } from 'react';
import { useContext, useRef } from 'react';
import { CommandMenuPages } from 'twenty-shared/types';
import { IconX } from 'twenty-ui/display';
import { IconButton } from 'twenty-ui/input';
import { useIsMobile } from 'twenty-ui/utilities';
import { ThemeContext } from 'twenty-ui/theme';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledInputContainer = styled.div<{ isMobile: boolean }>`
align-items: center;
background-color: ${({ theme }) => theme.background.secondary};
background-color: ${themeCssVariables.background.secondary};
border: none;
border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
border-bottom: 1px solid ${themeCssVariables.border.color.medium};
border-radius: 0;
box-sizing: border-box;
display: flex;
justify-content: space-between;
font-size: ${({ theme }) => theme.font.size.lg};
font-size: ${themeCssVariables.font.size.lg};
height: ${({ isMobile }) =>
isMobile
? COMMAND_MENU_SEARCH_BAR_HEIGHT_MOBILE
@@ -46,8 +46,8 @@ const StyledInputContainer = styled.div<{ isMobile: boolean }>`
position: relative;
overflow: hidden;
padding: 0 ${({ theme }) => theme.spacing(COMMAND_MENU_SEARCH_BAR_PADDING)};
gap: ${({ theme }) => theme.spacing(4)};
padding: 0 ${themeCssVariables.spacing[2]};
gap: ${themeCssVariables.spacing[4]};
flex-shrink: 0;
justify-content: space-between;
`;
@@ -56,8 +56,8 @@ const StyledInput = styled.input`
border: none;
border-radius: 0;
background-color: transparent;
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.md};
color: ${themeCssVariables.font.color.primary};
font-size: ${themeCssVariables.font.size.md};
margin: 0;
outline: none;
height: 24px;
@@ -65,8 +65,8 @@ const StyledInput = styled.input`
flex: 1;
&::placeholder {
color: ${({ theme }) => theme.font.color.light};
font-weight: ${({ theme }) => theme.font.weight.medium};
color: ${themeCssVariables.font.color.light};
font-weight: ${themeCssVariables.font.weight.medium};
}
`;
@@ -74,7 +74,7 @@ const StyledContentContainer = styled.div`
align-items: center;
display: flex;
flex: 1;
gap: ${({ theme }) => theme.spacing(1)};
gap: ${themeCssVariables.spacing[1]};
min-width: 0;
overflow: hidden;
`;
@@ -101,7 +101,7 @@ export const CommandMenuTopBar = () => {
commandMenuNavigationStackState,
);
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const { contextChips } = useCommandMenuContextChips();
packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBarRightCornerIcon.tsx
+3 -2
View File
@@ -2,7 +2,7 @@ import { useOpenAskAIPageInCommandMenu } from '@/command-menu/hooks/useOpenAskAI
import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { CommandMenuPages } from 'twenty-shared/types';
import { IconEdit, IconSparkles } from 'twenty-ui/display';
@@ -11,9 +11,10 @@ import { useIsMobile } from 'twenty-ui/utilities';
import { FeatureFlagKey } from '~/generated-metadata/graphql';
import { useCreateNewAIChatThread } from '@/ai/hooks/useCreateNewAIChatThread';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledIconButton = styled(IconButton)`
color: ${({ theme }) => theme.font.color.secondary};
color: ${themeCssVariables.font.color.secondary};
`;
export const CommandMenuTopBarRightCornerIcon = () => {
packages/twenty-front/src/modules/command-menu/components/CommandMenuWorkflowStepInfo.tsx
+3 -3
View File
@@ -17,22 +17,22 @@ import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/
import { getActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIconColorOrThrow';
import { getTriggerIcon } from '@/workflow/workflow-trigger/utils/getTriggerIcon';
import { getTriggerIconColor } from '@/workflow/workflow-trigger/utils/getTriggerIconColor';
import { useTheme } from '@emotion/react';
import { t } from '@lingui/core/macro';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useState } from 'react';
import { useContext, useState } from 'react';
import { CommandMenuPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { TRIGGER_STEP_ID } from 'twenty-shared/workflow';
import { useIcons } from 'twenty-ui/display';
import { CommandMenuPageInfoLayout } from './CommandMenuPageInfoLayout';
import { ThemeContext } from 'twenty-ui/theme';
export const CommandMenuWorkflowStepInfo = ({
commandMenuPageInstanceId,
}: {
commandMenuPageInstanceId: string;
}) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const { getIcon } = useIcons();
const commandMenuPage = useAtomStateValue(commandMenuPageState);
packages/twenty-front/src/modules/command-menu/components/hooks/usePageLayoutHeaderInfo.ts
+3 -2
View File
@@ -3,7 +3,6 @@ import { getCurrentGraphTypeFromConfig } from '@/command-menu/pages/page-layout/
import { isWidgetConfigurationOfTypeGraph } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph';
import { type PageLayoutTab } from '@/page-layout/types/PageLayoutTab';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { useTheme } from '@emotion/react';
import { t } from '@lingui/core/macro';
import { CommandMenuPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
@@ -14,6 +13,8 @@ import {
IconPlus,
type IconComponent,
} from 'twenty-ui/display';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
type PageLayoutHeaderInfo = {
headerIcon: IconComponent | undefined;
@@ -42,7 +43,7 @@ export const usePageLayoutHeaderInfo = ({
openTabId,
editedTitle,
}: UsePageLayoutHeaderInfoParams): PageLayoutHeaderInfo | null => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const iconColor = theme.font.color.tertiary;
switch (commandMenuPage) {
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuContextChips.tsx
+7 -6
View File
@@ -6,17 +6,18 @@ import { CommandMenuPages } from 'twenty-shared/types';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { recordStoreIdentifiersFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreIdentifiersSelector';
import { recordStoreRecordsSelector } from '@/object-record/record-store/states/selectors/recordStoreRecordsSelector';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useMemo } from 'react';
import { styled } from '@linaria/react';
import { useContext, useMemo } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { allowRequestsToTwentyIconsState } from '@/client-config/states/allowRequestsToTwentyIcons';
import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { ThemeContext } from 'twenty-ui/theme';
const StyledIconWrapper = styled.div`
background: ${({ theme }) => theme.background.primary};
border-radius: ${({ theme }) => theme.border.radius.sm};
background: ${themeCssVariables.background.primary};
border-radius: ${themeCssVariables.border.radius.sm};
display: flex;
align-items: center;
justify-content: center;
@@ -35,7 +36,7 @@ export const useCommandMenuContextChips = () => {
const { navigateCommandMenuHistory } = useCommandMenuHistory();
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const commandMenuNavigationMorphItemsByPage = useAtomStateValue(
commandMenuNavigationMorphItemsByPageState,
packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordInCommandMenu.ts
+3 -3
View File
@@ -20,17 +20,17 @@ import { useOpenNewRecordTitleCell } from '@/object-record/record-title-cell/hoo
import { CommandMenuPages } from 'twenty-shared/types';
import { useRunWorkflowRunOpeningInCommandMenuSideEffects } from '@/workflow/hooks/useRunWorkflowRunOpeningInCommandMenuSideEffects';
import { useTheme } from '@emotion/react';
import { t } from '@lingui/core/macro';
import { useStore } from 'jotai';
import { useCallback } from 'react';
import { useCallback, useContext } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
import { v4 } from 'uuid';
import { ThemeContext } from 'twenty-ui/theme';
export const useOpenRecordInCommandMenu = () => {
const store = useStore();
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const { getIcon } = useIcons();
const { navigateCommandMenu } = useCommandMenu();
packages/twenty-front/src/modules/command-menu/pages/AIChatThreads/components/CommandMenuAIChatThreadsPage.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { AIChatThreadsList } from '@/ai/components/AIChatThreadsList';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
const StyledContainer = styled.div`
height: 100%;
packages/twenty-front/src/modules/command-menu/pages/ask-ai/components/CommandMenuAskAIPage.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { AIChatTab } from '@/ai/components/AIChatTab';
const StyledContainer = styled.div`
packages/twenty-front/src/modules/command-menu/pages/common/components/SidePanelSubPageNavigationHeader.tsx
+8 -7
View File
@@ -1,20 +1,21 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { IconChevronLeft } from 'twenty-ui/display';
import { IconButton } from 'twenty-ui/input';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
align-items: center;
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-bottom: 1px solid ${themeCssVariables.border.color.light};
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
padding: 0 ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[1]};
padding: 0 ${themeCssVariables.spacing[2]};
height: 40px;
`;
const StyledText = styled.span`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.medium};
color: ${themeCssVariables.font.color.tertiary};
font-size: ${themeCssVariables.font.size.md};
font-weight: ${themeCssVariables.font.weight.medium};
`;
type SidePanelSubPageNavigationHeaderProps = {
packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadIntermediaryMessages.tsx
+3 -2
View File
@@ -1,13 +1,14 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useState } from 'react';
import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
import { type EmailThreadMessageWithSender } from '@/activities/emails/types/EmailThreadMessageWithSender';
import { Button } from 'twenty-ui/input';
import { IconArrowsVertical } from 'twenty-ui/display';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledButtonContainer = styled.div`
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-bottom: 1px solid ${themeCssVariables.border.color.light};
padding: 16px 24px;
`;
packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage.tsx
+5 -4
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useEffect, useMemo } from 'react';
import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
@@ -14,6 +14,7 @@ import { ConnectedAccountProvider } from 'twenty-shared/types';
import { assertUnreachable, isDefined } from 'twenty-shared/utils';
import { IconArrowBackUp } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledWrapper = styled.div`
display: flex;
@@ -31,11 +32,11 @@ const StyledContainer = styled.div`
`;
const StyledButtonContainer = styled.div`
background: ${({ theme }) => theme.background.secondary};
border-top: 1px solid ${({ theme }) => theme.border.color.light};
background: ${themeCssVariables.background.secondary};
border-top: 1px solid ${themeCssVariables.border.color.light};
display: flex;
justify-content: flex-end;
padding: ${({ theme }) => theme.spacing(2)};
padding: ${themeCssVariables.spacing[2]};
width: 100%;
box-sizing: border-box;
`;
packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption.tsx
+3 -2
View File
@@ -5,7 +5,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { isNonEmptyString } from '@sniptt/guards';
import { useState } from 'react';
@@ -16,11 +16,12 @@ import {
MenuItemSelectColor,
} from 'twenty-ui/navigation';
import { MAIN_COLOR_NAMES, type ThemeColor } from 'twenty-ui/theme';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const NAVIGATION_MENU_ITEM_COLOR_DROPDOWN_ID = 'navigation-menu-item-color';
const StyledMenuStyleText = styled.span`
color: ${({ theme }) => theme.font.color.light};
color: ${themeCssVariables.font.color.light};
font-size: 13px;
`;
packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNavigationMenuItemEditPage.tsx
+5 -4
View File
@@ -21,21 +21,22 @@ import { parseThemeColor } from '@/navigation-menu-item/utils/parseThemeColor';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { ViewKey } from '@/views/types/ViewKey';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { IconPlus } from 'twenty-ui/display';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const ADD_ITEM_TO_FOLDER_ACTION_ID = 'add-item-to-folder';
const StyledCommandMenuPlaceholder = styled.p`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.sm};
color: ${themeCssVariables.font.color.tertiary};
font-size: ${themeCssVariables.font.size.sm};
`;
const StyledCommandMenuPageContainer = styled.div`
padding: ${({ theme }) => theme.spacing(3)};
padding: ${themeCssVariables.spacing[3]};
`;
export const CommandMenuNavigationMenuItemEditPage = () => {
packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemMainMenu.tsx
+3 -2
View File
@@ -1,4 +1,3 @@
import { useTheme } from '@emotion/react';
import { useLingui } from '@lingui/react/macro';
import {
Avatar,
@@ -19,6 +18,8 @@ import { useAddLinkToNavigationMenu } from '@/command-menu/pages/navigation-menu
import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
type CommandMenuNewSidebarItemMainMenuProps = {
onSelectObject: () => void;
@@ -32,7 +33,7 @@ export const CommandMenuNewSidebarItemMainMenu = ({
onSelectRecord,
}: CommandMenuNewSidebarItemMainMenuProps) => {
const { t } = useLingui();
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const { handleAddFolder } = useAddFolderToNavigationMenu();
const { handleAddLink } = useAddLinkToNavigationMenu();
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartFiltersSettings.tsx
+4 -3
View File
@@ -16,16 +16,17 @@ import { currentRecordFiltersComponentState } from '@/object-record/record-filte
import { InputLabel } from '@/ui/input/components/InputLabel';
import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
import { useStore } from 'jotai';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledChartFiltersPageContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[2]};
padding: ${({ theme }) => theme.spacing(3)};
padding: ${themeCssVariables.spacing[3]};
`;
export type ChartFiltersSettingsProps = {
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ import { shouldHideChartSetting } from '@/command-menu/pages/page-layout/utils/s
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { hasWidgetTooManyGroupsComponentState } from '@/page-layout/widgets/graph/states/hasWidgetTooManyGroupsComponentState';
import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { isFieldMetadataDateKind } from 'twenty-shared/utils';
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartTypeSelectionSection.tsx
+3 -2
View File
@@ -1,11 +1,12 @@
import { GRAPH_TYPE_INFORMATION } from '@/command-menu/pages/page-layout/constants/GraphTypeInformation';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { FeatureFlagKey } from '~/generated-metadata/graphql';
import { GraphType } from '@/command-menu/pages/page-layout/types/GraphType';
import { t } from '@lingui/core/macro';
import { MenuPicker } from 'twenty-ui/navigation';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const graphTypeOptions = [
GraphType.VERTICAL_BAR,
@@ -19,7 +20,7 @@ const graphTypeOptions = [
const StyledChartTypeSelectionContainer = styled.div`
display: flex;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[2]};
`;
type ChartTypeSelectionSectionProps = {
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutChartSettings.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDr
import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
import { WidgetComponentInstanceContext } from '@/page-layout/widgets/states/contexts/WidgetComponentInstanceContext';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { isDefined } from 'twenty-shared/utils';
const StyledContainer = styled.div`
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutFieldsLayout.tsx
+4 -3
View File
@@ -5,13 +5,14 @@ import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useW
import { useTemporaryFieldsConfiguration } from '@/page-layout/hooks/useTemporaryFieldsConfiguration';
import { FieldsConfigurationEditor } from '@/page-layout/widgets/fields/components/FieldsConfigurationEditor';
import { FieldsWidgetGroupsDraftInitializationEffect } from '@/page-layout/widgets/fields/components/FieldsWidgetGroupsDraftInitializationEffect';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { isDefined } from 'twenty-shared/utils';
import {
type FieldsConfiguration,
WidgetConfigurationType,
} from '~/generated-metadata/graphql';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledOuterContainer = styled.div`
display: flex;
@@ -23,8 +24,8 @@ const StyledContainer = styled.div`
display: flex;
flex: 1;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(3)};
padding: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[3]};
padding: ${themeCssVariables.spacing[2]};
overflow-y: auto;
`;
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutFieldsSettings.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import { usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord } from
import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
import { useFieldsWidgetGroups } from '@/page-layout/widgets/fields/hooks/useFieldsWidgetGroups';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { CommandMenuPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutIframeSettings.tsx
+4 -3
View File
@@ -3,12 +3,13 @@ import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pa
import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
import { FormTextFieldInput } from '@/object-record/record-field/ui/form-types/components/FormTextFieldInput';
import { useUpdatePageLayoutWidget } from '@/page-layout/hooks/useUpdatePageLayoutWidget';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { isNonEmptyString, isString } from '@sniptt/guards';
import { useState } from 'react';
import { isDefined, isValidUrl } from 'twenty-shared/utils';
import { WidgetConfigurationType } from '~/generated-metadata/graphql';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledOuterContainer = styled.div`
display: flex;
@@ -20,8 +21,8 @@ const StyledContainer = styled.div`
display: flex;
flex: 1;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(3)};
padding: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[3]};
padding: ${themeCssVariables.spacing[2]};
`;
export const CommandMenuPageLayoutIframeSettings = () => {
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx
+6 -5
View File
@@ -2,11 +2,12 @@ import { CHART_SETTINGS_PALETTE_COLOR_GROUP_COUNT } from '@/command-menu/pages/p
import { createGraphColorRegistry } from '@/page-layout/widgets/graph/utils/createGraphColorRegistry';
import { generateGroupColor } from '@/page-layout/widgets/graph/utils/generateGroupColor';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { ColorSample } from 'twenty-ui/display';
import { MenuItemSelect } from 'twenty-ui/navigation';
import { type ThemeColor } from 'twenty-ui/theme';
import { type ThemeColor, ThemeContext } from 'twenty-ui/theme';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { useContext } from 'react';
type ChartColorGradientOptionProps = {
colorOption: {
@@ -22,7 +23,7 @@ type ChartColorGradientOptionProps = {
const StyledColorSamplesContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(0.5)};
gap: ${themeCssVariables.spacing[0.5]};
`;
export const ChartColorGradientOption = ({
@@ -32,7 +33,7 @@ export const ChartColorGradientOption = ({
onSelectColor,
}: ChartColorGradientOptionProps) => {
const colorName = colorOption.colorName as ThemeColor;
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const colorRegistry = createGraphColorRegistry(theme);
const colorSamples = (
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
+6 -5
View File
@@ -2,13 +2,14 @@ import { CHART_SETTINGS_PALETTE_COLOR_GROUP_COUNT } from '@/command-menu/pages/p
import { createGraphColorRegistry } from '@/page-layout/widgets/graph/utils/createGraphColorRegistry';
import { getColorSchemeByIndex } from '@/page-layout/widgets/graph/utils/getColorSchemeByIndex';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { ColorSample } from 'twenty-ui/display';
import { MenuItemSelect } from 'twenty-ui/navigation';
import { type ThemeColor } from 'twenty-ui/theme';
import { type ThemeColor, ThemeContext } from 'twenty-ui/theme';
import { getMainColorNameFromPaletteColorName } from 'twenty-ui/utilities';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { useContext } from 'react';
type ChartColorPaletteOptionProps = {
selectedItemId: string | null;
@@ -19,7 +20,7 @@ type ChartColorPaletteOptionProps = {
const StyledColorSamplesContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(0.5)};
gap: ${themeCssVariables.spacing[0.5]};
`;
export const ChartColorPaletteOption = ({
@@ -27,7 +28,7 @@ export const ChartColorPaletteOption = ({
currentColor,
onSelectColor,
}: ChartColorPaletteOptionProps) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const colorRegistry = createGraphColorRegistry(theme);
packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuMergeRecordPage.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { ContextStoreComponentInstanceContext } from '@/context-store/states/con
import { RecordComponentInstanceContextsWrapper } from '@/object-record/components/RecordComponentInstanceContextsWrapper';
import { MergeRecordsContainer } from '@/object-record/record-merge/components/MergeRecordsContainer';
import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
const StyledRightDrawerRecord = styled.div`
height: 100%;
packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuRecordPage.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordSh
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
const StyledRightDrawerRecord = styled.div<{
packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuUpdateMultipleRecords.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/
import { UpdateMultipleRecordsContainer } from '@/object-record/record-update-multiple/components/UpdateMultipleRecordsContainer';
import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
const StyledRightDrawerRecord = styled.div`
height: 100%;
packages/twenty-front/src/modules/command-menu/pages/rich-text-page/components/CommandMenuEditRichTextPage.tsx
+6 -5
View File
@@ -1,11 +1,12 @@
import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { lazy, Suspense } from 'react';
import { styled } from '@linaria/react';
import { Suspense, lazy, useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { viewableRichTextComponentState } from '@/command-menu/pages/rich-text-page/states/viewableRichTextComponentState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const ActivityRichTextEditor = lazy(() =>
import('@/activities/components/ActivityRichTextEditor').then((module) => ({
@@ -15,13 +16,13 @@ const ActivityRichTextEditor = lazy(() =>
const StyledContainer = styled.div`
box-sizing: border-box;
margin: ${({ theme }) => theme.spacing(4)} ${({ theme }) => theme.spacing(-2)};
margin: ${themeCssVariables.spacing[4]} -8px;
padding-inline: 44px 0px;
width: 100%;
`;
const LoadingSkeleton = () => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
return (
<SkeletonTheme
packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectAction.tsx
+3 -2
View File
@@ -10,12 +10,13 @@ import { HUMAN_INPUT_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/
import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions';
import { getActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIconColorOrThrow';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useTheme } from '@emotion/react';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useLingui } from '@lingui/react/macro';
import { IconFunction } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
import { FeatureFlagKey } from '~/generated-metadata/graphql';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
export type WorkflowActionSelection = {
type: WorkflowActionType;
@@ -31,7 +32,7 @@ export const CommandMenuWorkflowSelectAction = ({
const isDraftEmailEnabled = useIsFeatureEnabled(
FeatureFlagKey.IS_DRAFT_EMAIL_ENABLED,
);
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const { t } = useLingui();
packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/WorkflowActionMenuItems.tsx
+3 -2
View File
@@ -1,8 +1,9 @@
import { type WorkflowActionType } from '@/workflow/types/Workflow';
import { getActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIconColorOrThrow';
import { useTheme } from '@emotion/react';
import { useIcons } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
type Action = {
defaultLabel: string;
@@ -17,7 +18,7 @@ export const WorkflowActionMenuItems = ({
actions: Action[];
onClick: (actionType: WorkflowActionType) => void;
}) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const { getIcon } = useIcons();
return (
packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepContent.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/
import { WorkflowStepDetail } from '@/workflow/workflow-steps/components/WorkflowStepDetail';
import { useUpdateStep } from '@/workflow/workflow-steps/hooks/useUpdateStep';
import { useUpdateWorkflowVersionTrigger } from '@/workflow/workflow-trigger/hooks/useUpdateWorkflowVersionTrigger';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { isDefined } from 'twenty-shared/utils';
const StyledContainer = styled.div`
packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStepContent.tsx
+4 -3
View File
@@ -22,11 +22,12 @@ import {
} from '@/workflow/workflow-steps/types/WorkflowRunTabId';
import { getWorkflowRunStepExecutionStatus } from '@/workflow/workflow-steps/utils/getWorkflowRunStepExecutionStatus';
import { WorkflowIteratorSubStepSwitcher } from '@/workflow/workflow-steps/workflow-actions/iterator-action/components/WorkflowIteratorSubStepSwitcher';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { isNull } from '@sniptt/guards';
import { t } from '@lingui/core/macro';
import { isDefined } from 'twenty-shared/utils';
import { IconLogin2, IconLogout, IconStepInto } from 'twenty-ui/display';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
display: flex;
@@ -35,8 +36,8 @@ const StyledContainer = styled.div`
`;
const StyledTabList = styled(TabList)`
background-color: ${({ theme }) => theme.background.secondary};
padding-left: ${({ theme }) => theme.spacing(2)};
background-color: ${themeCssVariables.background.secondary};
padding-left: ${themeCssVariables.spacing[2]};
`;
type TabId = WorkflowRunTabIdType;
packages/twenty-front/src/modules/command-menu/pages/workflow/step/view/components/CommandMenuWorkflowViewStepContent.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
import { useFlowOrThrow } from '@/workflow/hooks/useFlowOrThrow';
import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
import { WorkflowStepDetail } from '@/workflow/workflow-steps/components/WorkflowStepDetail';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { isDefined } from 'twenty-shared/utils';
const StyledContainer = styled.div`
packages/twenty-front/src/modules/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerTypeContent.tsx
+3 -2
View File
@@ -14,12 +14,13 @@ import { DATABASE_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/Da
import { OTHER_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/OtherTriggerTypes';
import { useUpdateWorkflowVersionTrigger } from '@/workflow/workflow-trigger/hooks/useUpdateWorkflowVersionTrigger';
import { getTriggerDefaultDefinition } from '@/workflow/workflow-trigger/utils/getTriggerDefaultDefinition';
import { useTheme } from '@emotion/react';
import { t } from '@lingui/core/macro';
import { isDefined } from 'twenty-shared/utils';
import { TRIGGER_STEP_ID } from 'twenty-shared/workflow';
import { useIcons } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
export const CommandMenuWorkflowSelectTriggerTypeContent = () => {
const { getIcon } = useIcons();
@@ -72,7 +73,7 @@ export const CommandMenuWorkflowSelectTriggerTypeContent = () => {
};
};
const theme = useTheme();
const { theme } = useContext(ThemeContext);
return (
<RightDrawerStepListContainer>