Elgato_dark/twenty
1
0
Fork 0
mirror of https://github.com/twentyhq/twenty synced 2026-04-21 13:37:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 17

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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
339 changed files with 3439 additions and 2613 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
.yarn/patches/@wyw-in-js-transform-npm-0.7.0-ba641dc99f.patch Normal file
View file

@ -0,0 +1,58 @@
diff --git a/esm/cache.js b/esm/cache.js
index 07cf6d7dd99effb9c3464b620ba67a7f445224f5..248bb527923499a6be8065ee7a3613b55819c58c 100644
--- a/esm/cache.js
+++ b/esm/cache.js
@@ -69,17 +69,20 @@ export class TransformCacheCollection {
this.invalidate(cacheName, filename);
});
}
- invalidateIfChanged(filename, content) {
+ invalidateIfChanged(filename, content, _visited) {
+ const visited = _visited || new Set();
+ if (visited.has(filename)) {
+ return false;
+ }
+ visited.add(filename);
const fileEntrypoint = this.get('entrypoints', filename);
- // We need to check all dependencies of the file
- // because they might have changed as well.
if (fileEntrypoint) {
for (const [, dependency] of fileEntrypoint.dependencies) {
const dependencyFilename = dependency.resolved;
if (dependencyFilename) {
const dependencyContent = fs.readFileSync(dependencyFilename, 'utf8');
- this.invalidateIfChanged(dependencyFilename, dependencyContent);
+ this.invalidateIfChanged(dependencyFilename, dependencyContent, visited);
}
}
}
diff --git a/lib/cache.js b/lib/cache.js
index 0762ed7d3c39b31000f7aa7d8156da15403c8e64..6955410cd3c9ec53cf7a01c8346abc4c47fff791 100644
--- a/lib/cache.js
+++ b/lib/cache.js
@@ -77,17 +77,20 @@ class TransformCacheCollection {
this.invalidate(cacheName, filename);
});
}
- invalidateIfChanged(filename, content) {
+ invalidateIfChanged(filename, content, _visited) {
+ const visited = _visited || new Set();
+ if (visited.has(filename)) {
+ return false;
+ }
+ visited.add(filename);
const fileEntrypoint = this.get('entrypoints', filename);
- // We need to check all dependencies of the file
- // because they might have changed as well.
if (fileEntrypoint) {
for (const [, dependency] of fileEntrypoint.dependencies) {
const dependencyFilename = dependency.resolved;
if (dependencyFilename) {
const dependencyContent = _nodeFs.default.readFileSync(dependencyFilename, 'utf8');
- this.invalidateIfChanged(dependencyFilename, dependencyContent);
+ this.invalidateIfChanged(dependencyFilename, dependencyContent, visited);
}
}
}

42
docs/emotion-to-linaria-migration-plan.md
View file

@ -372,6 +372,48 @@ Once all PRs are merged:
---
## Known Issues & TODOs
### `styled(Component)` from `twenty-ui` — style overrides silently dropped
When `twenty-front` uses `styled(SomeComponent)` to extend a pre-built
component from `twenty-ui` (e.g. `Card`, `CardContent`, `PropertyBox`,
`Chip`, `Pill`, `Avatar`, `StyledHoverableMenuItemBase`, `MenuItemLeftContent`,
`TabList`, `NavigationDrawerSection`), the style overrides are silently
ignored at runtime. This happens because `wyw-in-js` in `twenty-front`
cannot resolve the base class name of a component that was already compiled
in another package.
**Current workaround:** Replace `styled(Component)` with a plain
`styled.div` (or wrapper div) that duplicates the needed base styles.
This fixes the visual regression but loses the component's built-in
behavior (e.g. `CardContent`'s framer-motion animation, `PropertyBox`'s
layout-context padding logic, `Card`'s border/overflow).
**Proper fix (TODO):** Add customization props directly to the base
components so consumers can override styles without wrapping:
- `Card` / `CardContent` — add `padding`, `backgroundColor`, `borderColor` props
- `PropertyBox` — add `padding`, `height`, `noPadding` props
- Other frequently extended components — audit and add props as needed
**Affected files (using workaround today):**
- `CalendarEventDetails.tsx` — `styled(PropertyBox)` → `styled.div`, `styled(Chip)` → wrapper
- `CalendarEventParticipantsResponseStatusField.tsx` — `styled(PropertyBox)` → `styled.div`
- `CalendarEventNotSharedContent.tsx` — `styled(Card)` / `styled(CardContent)` → `styled.div`
- `CalendarDayCardContent.tsx` — `styled(CardContent)` → `styled(motion.div)`
- `ActivityRow.tsx` — `styled(CardContent)` → `styled.div`
- `EmailThreadPreview.tsx` — `styled(Avatar)` → wrapper div
- `SignInAppNavigationDrawerMock.tsx` — `styled(NavigationDrawerSection)` → wrapper div
- `DefaultLayout.tsx` — `styled(SignInAppNavigationDrawerMock)` → wrapper div
- `LastUsedPill.tsx` — `styled(Pill)` → wrapper span
- `Logo.tsx` — dynamic `background-image` via inline `style` instead of prop
- `DatePicker.tsx` / `DateTimePicker.tsx` — `styled(StyledHoverableMenuItemBase)` / `styled(MenuItemLeftContent)` → `styled.div`
- `SelectControl.tsx` / `MultiSelectControl.tsx` — `styled(IconChevronDown)` → wrapper div
---
## Validation Checklist (per PR)
- [ ] `npx nx lint:diff-with-main twenty-front` passes

4
package.json
View file

@ -202,7 +202,9 @@
"typescript": "5.9.2",
"graphql-redis-subscriptions/ioredis": "^5.6.0",
"@lingui/core": "5.1.2",
"@types/qs": "6.9.16"
"@types/qs": "6.9.16",
"@wyw-in-js/transform@npm:0.6.0": "patch:@wyw-in-js/transform@npm%3A0.7.0#~/.yarn/patches/@wyw-in-js-transform-npm-0.7.0-ba641dc99f.patch",
"@wyw-in-js/transform@npm:0.7.0": "patch:@wyw-in-js/transform@npm%3A0.7.0#~/.yarn/patches/@wyw-in-js-transform-npm-0.7.0-ba641dc99f.patch"
},
"version": "0.2.1",
"nx": {},

5
packages/twenty-front/.storybook/main.ts
View file

@ -58,6 +58,11 @@ const config: StorybookConfig = {
return mergeConfig(viteConfig, {
logLevel: 'warn',
resolve: {
alias: {
'@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs',
},
},
});
},

5
packages/twenty-front/src/hooks/useCopyToClipboard.tsx
View file

@ -1,10 +1,11 @@
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useTheme } from '@emotion/react';
import { useLingui } from '@lingui/react/macro';
import { IconCopy, IconExclamationCircle } from 'twenty-ui/display';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
export const useCopyToClipboard = () => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
const { t } = useLingui();

1
packages/twenty-front/src/index.css
View file

@ -3,6 +3,7 @@ body {
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: var(--t-background-tertiary);
}
html {

10
packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx
View file

@ -4,7 +4,7 @@ import { differenceInSeconds, endOfDay, format } from 'date-fns';
import { CalendarEventRow } from '@/activities/calendar/components/CalendarEventRow';
import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
import { CardContent } from 'twenty-ui/layout';
import { motion } from 'framer-motion';
import { ThemeContext } from 'twenty-ui/theme';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { type TimelineCalendarEvent } from '~/generated/graphql';
@ -14,15 +14,19 @@ type CalendarDayCardContentProps = {
divider?: boolean;
};
const StyledCardContent = styled(CardContent)`
const StyledCardContentBase = styled.div<{ divider?: boolean }>`
align-items: flex-start;
border-color: ${themeCssVariables.border.color.light};
background-color: ${themeCssVariables.background.secondary};
border-bottom: ${({ divider }) =>
divider ? `1px solid ${themeCssVariables.border.color.light}` : 'none'};
display: flex;
flex-direction: row;
gap: ${themeCssVariables.spacing[3]};
padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[3]};
`;
const StyledCardContent = motion.create(StyledCardContentBase);
const StyledDayContainer = styled.div`
text-align: center;
width: ${themeCssVariables.spacing[6]};

39
packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx
View file

@ -19,7 +19,6 @@ import {
} from '@/object-record/record-field/ui/contexts/FieldContext';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/ui/states/contexts/RecordFieldComponentInstanceContext';
import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
import { useIsRecordReadOnly } from '@/object-record/read-only/hooks/useIsRecordReadOnly';
import { isRecordFieldReadOnly } from '@/object-record/read-only/utils/isRecordFieldReadOnly';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
@ -53,10 +52,14 @@ const StyledContainer = styled.div`
box-sizing: border-box;
`;
const StyledEventChip = styled(Chip)`
gap: ${themeCssVariables.spacing[2]};
padding-left: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[2]};
const StyledEventChipWrapper = styled.span`
display: inline-flex;
& > [data-testid='chip'] {
gap: ${themeCssVariables.spacing[2]};
padding-left: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[2]};
}
`;
const StyledHeader = styled.header``;
@ -67,7 +70,7 @@ const StyledTitle = styled.h2<{ canceled?: boolean }>`
margin: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[0]}
${themeCssVariables.spacing[2]};
${({ canceled }) => (canceled ? 'text-decoration: line-through' : '')}
text-decoration: ${({ canceled }) => (canceled ? 'line-through' : 'none')};
`;
const StyledCreatedAt = styled.div`
@ -81,9 +84,11 @@ const StyledFields = styled.div`
width: 100%;
`;
const StyledPropertyBox = styled(PropertyBox)`
const StyledPropertyBox = styled.div`
align-self: stretch;
display: flex;
flex-direction: column;
height: ${themeCssVariables.spacing[6]};
padding: 0;
width: 100%;
`;
@ -199,14 +204,16 @@ export const CalendarEventDetails = ({
value={{ scopeInstanceId: INPUT_ID_PREFIX }}
>
<StyledContainer>
<StyledEventChip
accent={ChipAccent.TextSecondary}
size={ChipSize.Large}
variant={ChipVariant.Highlighted}
clickable={false}
leftComponent={<AvatarOrIcon Icon={IconCalendarEvent} />}
label={t`Event`}
/>
<StyledEventChipWrapper>
<Chip
accent={ChipAccent.TextSecondary}
size={ChipSize.Large}
variant={ChipVariant.Highlighted}
clickable={false}
leftComponent={<AvatarOrIcon Icon={IconCalendarEvent} />}
label={t`Event`}
/>
</StyledEventChipWrapper>
<StyledHeader>
<StyledTitle canceled={calendarEvent.isCanceled}>
{calendarEvent.title}

16
packages/twenty-front/src/modules/activities/calendar/components/CalendarEventNotSharedContent.tsx
View file

@ -2,27 +2,29 @@ import { useContext } from 'react';
import { styled } from '@linaria/react';
import { Trans } from '@lingui/react/macro';
import { IconLock } from 'twenty-ui/display';
import { Card, CardContent } from 'twenty-ui/layout';
import { ThemeContext } from 'twenty-ui/theme';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledVisibilityCard = styled(Card)`
border-color: ${themeCssVariables.border.color.light};
const StyledVisibilityCard = styled.div`
border: 1px solid ${themeCssVariables.border.color.light};
border-radius: ${themeCssVariables.border.radius.sm};
color: ${themeCssVariables.font.color.light};
flex: 1;
overflow: hidden;
transition: color ${themeCssVariables.animation.duration.normal} ease;
width: 100%;
`;
const StyledVisibilityCardContent = styled(CardContent)`
const StyledVisibilityCardContent = styled.div`
align-items: center;
background-color: ${themeCssVariables.background.transparent.lighter};
box-sizing: border-box;
display: flex;
font-size: ${themeCssVariables.font.size.sm};
font-weight: ${themeCssVariables.font.weight.medium};
display: flex;
gap: ${themeCssVariables.spacing[1]};
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[1]};
height: ${themeCssVariables.spacing[6]};
background-color: ${themeCssVariables.background.transparent.lighter};
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[1]};
`;
export const CalendarEventNotSharedContent = () => {

7
packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx
View file

@ -3,7 +3,6 @@ import { styled } from '@linaria/react';
import { type CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant';
import { ParticipantChip } from '@/activities/components/ParticipantChip';
import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui/display';
@ -22,9 +21,11 @@ const StyledInlineCellBaseContainer = styled.div`
user-select: none;
`;
const StyledPropertyBox = styled(PropertyBox)`
const StyledPropertyBox = styled.div`
align-self: stretch;
display: flex;
flex-direction: column;
height: ${themeCssVariables.spacing[6]};
padding: 0;
width: 100%;
`;

19
packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
View file

@ -34,13 +34,13 @@ const StyledContainer = styled.div<{ showTitle?: boolean }>`
`;
const StyledAttendanceIndicator = styled.div<{ active?: boolean }>`
background-color: ${themeCssVariables.tag.background.gray};
background-color: ${({ active }) =>
active
? themeCssVariables.tag.background.red
: themeCssVariables.tag.background.gray};
height: 100%;
width: ${themeCssVariables.spacing[1]};
border-radius: ${themeCssVariables.border.radius.xs};
${({ active }) =>
active ? `background-color: ${themeCssVariables.tag.background.red}` : ''}
`;
const StyledLabels = styled.div`
@ -60,17 +60,16 @@ const StyledTime = styled.div`
`;
const StyledTitle = styled.div<{ active: boolean; canceled: boolean }>`
color: ${({ active }) =>
active ? themeCssVariables.font.color.primary : 'inherit'};
flex: 1 0 auto;
font-weight: ${({ active }) =>
active ? themeCssVariables.font.weight.medium : 'inherit'};
overflow: hidden;
text-decoration: ${({ canceled }) => (canceled ? 'line-through' : 'none')};
text-overflow: ellipsis;
white-space: nowrap;
width: ${themeCssVariables.spacing[10]};
${({ active }) =>
active
? `color: ${themeCssVariables.font.color.primary}; font-weight: ${themeCssVariables.font.weight.medium}`
: ''}
${({ canceled }) => (canceled ? 'text-decoration: line-through' : '')}
`;
export const CalendarEventRow = ({

5
packages/twenty-front/src/modules/activities/components/ActivityRow.tsx
View file

@ -1,10 +1,11 @@
import { styled } from '@linaria/react';
import React from 'react';
import { CardContent } from 'twenty-ui/layout';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledRowContent = styled(CardContent)`
const StyledRowContent = styled.div<{ isClickable: boolean }>`
align-items: center;
background-color: ${themeCssVariables.background.secondary};
cursor: ${({ isClickable }) => (isClickable ? 'pointer' : 'default')};
display: flex;
gap: ${themeCssVariables.spacing[2]};
height: ${themeCssVariables.spacing[12]};

40
packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
View file

@ -25,7 +25,7 @@ const StyledParticipantsContainer = styled.div`
display: flex;
`;
const StyledAvatar = styled(Avatar)`
const StyledAvatarWrapper = styled.div`
margin-left: calc(-1 * ${themeCssVariables.spacing[1]});
`;
@ -123,24 +123,30 @@ export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => {
type="rounded"
/>
{thread?.lastTwoParticipants?.[0] && (
<StyledAvatar
avatarUrl={thread.lastTwoParticipants[0].avatarUrl}
placeholder={thread.lastTwoParticipants[0].displayName}
placeholderColorSeed={
thread.lastTwoParticipants[0].workspaceMemberId ||
thread.lastTwoParticipants[0].personId
}
type="rounded"
/>
<StyledAvatarWrapper>
<Avatar
avatarUrl={thread.lastTwoParticipants[0].avatarUrl}
placeholder={thread.lastTwoParticipants[0].displayName}
placeholderColorSeed={
thread.lastTwoParticipants[0].workspaceMemberId ||
thread.lastTwoParticipants[0].personId
}
type="rounded"
/>
</StyledAvatarWrapper>
)}
{finalDisplayedName && (
<StyledAvatar
avatarUrl={finalAvatarUrl}
placeholder={finalDisplayedName}
type="rounded"
color={isCountIcon ? theme.grayScale.gray11 : undefined}
backgroundColor={isCountIcon ? theme.grayScale.gray2 : undefined}
/>
<StyledAvatarWrapper>
<Avatar
avatarUrl={finalAvatarUrl}
placeholder={finalDisplayedName}
type="rounded"
color={isCountIcon ? theme.grayScale.gray11 : undefined}
backgroundColor={
isCountIcon ? theme.grayScale.gray2 : undefined
}
/>
</StyledAvatarWrapper>
)}
</StyledParticipantsContainer>

24
packages/twenty-front/src/modules/advanced-text-editor/extensions/resizable-image/ResizableImageView.tsx
View file

@ -11,18 +11,10 @@ const StyledNodeViewWrapperContainer = styled.div<{
align?: string;
}>`
height: 100%;
${({ align }) => {
switch (align) {
case 'left':
return 'margin-left: 0;';
case 'right':
return 'margin-right: 0;';
case 'center':
return 'margin-left: auto; margin-right: auto;';
default:
return '';
}
}}
margin-left: ${({ align }) =>
align === 'left' ? '0' : align === 'center' ? 'auto' : 'unset'};
margin-right: ${({ align }) =>
align === 'right' ? '0' : align === 'center' ? 'auto' : 'unset'};
`;
const StyledImageWrapper = styled.div<{ width?: number }>`
@ -51,10 +43,10 @@ const StyledImageHandle = styled.div<{ handle: 'left' | 'right' }>`
width: ${themeCssVariables.spacing[2]};
z-index: 1;
${({ handle }) =>
handle === 'left'
? `left: ${themeCssVariables.spacing[1]};`
: `right: ${themeCssVariables.spacing[1]};`}
left: ${({ handle }) =>
handle === 'left' ? themeCssVariables.spacing[1] : 'auto'};
right: ${({ handle }) =>
handle === 'right' ? themeCssVariables.spacing[1] : 'auto'};
`;
type ResizeParams = {

11
packages/twenty-front/src/modules/auth/components/Logo.tsx
View file

@ -44,8 +44,7 @@ const StyledSecondaryLogoContainer = styled.div`
width: ${themeCssVariables.spacing[7]};
`;
const StyledPrimaryLogo = styled.div<{ src: string }>`
background: url(${(props) => props.src});
const StyledPrimaryLogo = styled.div`
background-size: cover;
height: 100%;
width: 100%;
@ -81,10 +80,14 @@ export const Logo = ({
to={AppPath.SignInUp}
onClick={redirectToDefaultDomain}
>
<StyledPrimaryLogo src={primaryLogoUrl} />
<StyledPrimaryLogo
style={{ backgroundImage: `url(${primaryLogoUrl})` }}
/>
</UndecoratedLink>
) : (
<StyledPrimaryLogo src={primaryLogoUrl} />
<StyledPrimaryLogo
style={{ backgroundImage: `url(${primaryLogoUrl})` }}
/>
)}
{isDefined(secondaryLogoUrl) ? (
<StyledSecondaryLogoContainer>

31
packages/twenty-front/src/modules/auth/sign-in-up/components/internal/LastUsedPill.tsx
View file

@ -3,27 +3,32 @@ import { useLingui } from '@lingui/react/macro';
import { Pill } from 'twenty-ui/components';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledPill = styled(Pill)`
background: ${themeCssVariables.color.blue3};
border: 1px solid ${themeCssVariables.color.blue5};
border-radius: ${themeCssVariables.border.radius.pill};
color: ${themeCssVariables.color.blue};
font-weight: ${themeCssVariables.font.weight.semiBold};
const StyledPillContainer = styled.span`
position: absolute;
right: calc(-1 * ${themeCssVariables.spacing[5]});
top: calc(-1 * ${themeCssVariables.spacing[2]});
> span {
background: ${themeCssVariables.color.blue3};
border: 1px solid ${themeCssVariables.color.blue5};
border-radius: ${themeCssVariables.border.radius.pill};
color: ${themeCssVariables.color.blue};
font-weight: ${themeCssVariables.font.weight.semiBold};
}
`;
export const LastUsedPill = () => {
const { t } = useLingui();
return (
<StyledPill
label={t({
message: 'Last',
comment:
'Short label (keep brief) indicating the most recently used login method',
})}
/>
<StyledPillContainer>
<Pill
label={t({
message: 'Last',
comment:
'Short label (keep brief) indicating the most recently used login method',
})}
/>
</StyledPillContainer>
);
};

13
packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx
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 = {

9
packages/twenty-front/src/modules/command-menu/components/CommandMenuAskAIInfo.tsx
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 = () => {

5
packages/twenty-front/src/modules/command-menu/components/CommandMenuBackButton.tsx
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 = () => {

7
packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
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})`;
}};

34
packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx
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 = {

22
packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx
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

2
packages/twenty-front/src/modules/command-menu/components/CommandMenuFolderInfo.tsx
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';

2
packages/twenty-front/src/modules/command-menu/components/CommandMenuForMobile.tsx
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';

2
packages/twenty-front/src/modules/command-menu/components/CommandMenuItemNumberInput.tsx
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';

2
packages/twenty-front/src/modules/command-menu/components/CommandMenuItemTextInput.tsx
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';

2
packages/twenty-front/src/modules/command-menu/components/CommandMenuItemWithAddToNavigationDrag.tsx
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';

15
packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx
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;

5
packages/twenty-front/src/modules/command-menu/components/CommandMenuMultipleRecordsInfo.tsx
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,

20
packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx
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();

14
packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfo.tsx
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,
);

25
packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfoLayout.tsx
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;
`;

6
packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfoContent.tsx
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);

7
packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx
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>

15
packages/twenty-front/src/modules/command-menu/components/CommandMenuSidePanelForDesktop.tsx
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%;

13
packages/twenty-front/src/modules/command-menu/components/CommandMenuSubViewWithSearch.tsx
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};
}
`;

30
packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
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();

5
packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBarRightCornerIcon.tsx
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 = () => {

6
packages/twenty-front/src/modules/command-menu/components/CommandMenuWorkflowStepInfo.tsx
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);

5
packages/twenty-front/src/modules/command-menu/components/hooks/usePageLayoutHeaderInfo.ts
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) {

13
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuContextChips.tsx
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,

6
packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordInCommandMenu.ts
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();

2
packages/twenty-front/src/modules/command-menu/pages/AIChatThreads/components/CommandMenuAIChatThreadsPage.tsx
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%;

2
packages/twenty-front/src/modules/command-menu/pages/ask-ai/components/CommandMenuAskAIPage.tsx
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`

15
packages/twenty-front/src/modules/command-menu/pages/common/components/SidePanelSubPageNavigationHeader.tsx
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 = {

5
packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadIntermediaryMessages.tsx
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;
`;

9
packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage.tsx
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;
`;

5
packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption.tsx
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;
`;

9
packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNavigationMenuItemEditPage.tsx
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 = () => {

5
packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemMainMenu.tsx
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();

7
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartFiltersSettings.tsx
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 = {

2
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx
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';

5
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartTypeSelectionSection.tsx
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 = {

2
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutChartSettings.tsx
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`

7
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutFieldsLayout.tsx
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;
`;

2
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutFieldsSettings.tsx
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';

7
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutIframeSettings.tsx
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 = () => {

11
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx
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 = (

11
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
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);

2
packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuMergeRecordPage.tsx
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%;

2
packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuRecordPage.tsx
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<{

2
packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuUpdateMultipleRecords.tsx
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%;

11
packages/twenty-front/src/modules/command-menu/pages/rich-text-page/components/CommandMenuEditRichTextPage.tsx
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

5
packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectAction.tsx
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();

5
packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/WorkflowActionMenuItems.tsx
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 (

2
packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepContent.tsx
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`

7
packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStepContent.tsx
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;

2
packages/twenty-front/src/modules/command-menu/pages/workflow/step/view/components/CommandMenuWorkflowViewStepContent.tsx
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`

5
packages/twenty-front/src/modules/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerTypeContent.tsx
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>

2
packages/twenty-front/src/modules/file-upload/components/FileUploadProvider.tsx
View file

@ -2,7 +2,7 @@ import {
FileUploadContext,
type FileUploadOptions,
} from '@/file-upload/contexts/FileUploadContext';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useCallback, useEffect, useRef, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';

5
packages/twenty-front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenuDialog.tsx
View file

@ -6,6 +6,7 @@ import {
import { t } from '@lingui/core/macro';
import { IconButton } from 'twenty-ui/input';
import { IconX } from 'twenty-ui/display';
import { useIsMobile } from 'twenty-ui/utilities';
type KeyboardMenuDialogProps = {
onClose: () => void;
@ -16,8 +17,10 @@ export const KeyboardMenuDialog = ({
onClose,
children,
}: KeyboardMenuDialogProps) => {
const isMobile = useIsMobile();
return (
<StyledDialog>
<StyledDialog isMobile={isMobile}>
<StyledHeading>
{t`Keyboard shortcuts`}
<IconButton variant="tertiary" Icon={IconX} onClick={onClose} />

74
packages/twenty-front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenuStyles.tsx
View file

@ -1,88 +1,88 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { themeCssVariables } from 'twenty-ui/theme-constants';
export const StyledDialog = styled.div`
background: ${({ theme }) => theme.background.primary};
border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
font-family: ${({ theme }) => theme.font.family};
export const StyledDialog = styled.div<{ isMobile: boolean }>`
background: ${themeCssVariables.background.primary};
border-radius: ${themeCssVariables.border.radius.md};
box-shadow: ${themeCssVariables.boxShadow.strong};
font-family: ${themeCssVariables.font.family};
left: 50%;
max-width: 400px;
overflow: hidden;
padding: 0;
padding: ${({ theme }) => theme.spacing(1)};
padding: ${themeCssVariables.spacing[1]};
position: fixed;
top: 30%;
transform: ${() =>
useIsMobile() ? 'translateX(-49.5%)' : 'translateX(-50%)'};
width: ${() => (useIsMobile() ? 'calc(100% - 40px)' : '100%')};
transform: ${({ isMobile }) =>
isMobile ? 'translateX(-49.5%)' : 'translateX(-50%)'};
width: ${({ isMobile }) => (isMobile ? 'calc(100% - 40px)' : '100%')};
z-index: 1000;
`;
export const StyledHeading = styled.div`
align-items: center;
border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
color: ${({ theme }) => theme.font.color.primary};
border-bottom: 1px solid ${themeCssVariables.border.color.medium};
color: ${themeCssVariables.font.color.primary};
display: flex;
flex-direction: row;
font-weight: ${({ theme }) => theme.font.weight.semiBold};
font-weight: ${themeCssVariables.font.weight.semiBold};
justify-content: space-between;
padding: ${({ theme }) => theme.spacing(3)};
padding: ${themeCssVariables.spacing[3]};
`;
export const StyledContainer = styled.div`
gap: ${({ theme }) => theme.spacing(2)};
padding-bottom: ${({ theme }) => theme.spacing(4)};
padding-left: ${({ theme }) => theme.spacing(4)};
padding-right: ${({ theme }) => theme.spacing(4)};
padding-top: ${({ theme }) => theme.spacing(1)};
gap: ${themeCssVariables.spacing[2]};
padding-bottom: ${themeCssVariables.spacing[4]};
padding-left: ${themeCssVariables.spacing[4]};
padding-right: ${themeCssVariables.spacing[4]};
padding-top: ${themeCssVariables.spacing[1]};
`;
export const StyledGroupHeading = styled.label`
color: ${({ theme }) => theme.color.gray10};
padding-bottom: ${({ theme }) => theme.spacing(1)};
padding-top: ${({ theme }) => theme.spacing(4)};
color: ${themeCssVariables.color.gray10};
padding-bottom: ${themeCssVariables.spacing[1]};
padding-top: ${themeCssVariables.spacing[4]};
`;
export const StyledGroup = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[2]};
`;
export const StyledItem = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.primary};
color: ${themeCssVariables.font.color.primary};
display: flex;
flex-direction: row;
font-weight: ${({ theme }) => theme.font.weight.regular};
font-weight: ${themeCssVariables.font.weight.regular};
height: 24px;
justify-content: space-between;
`;
export const StyledShortcutKey = styled.div`
align-items: center;
background-color: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.strong};
border-radius: ${({ theme }) => theme.border.radius.sm};
box-shadow: ${({ theme }) => theme.boxShadow.underline};
color: ${({ theme }) => theme.font.color.tertiary};
background-color: ${themeCssVariables.background.secondary};
border: 1px solid ${themeCssVariables.border.color.strong};
border-radius: ${themeCssVariables.border.radius.sm};
box-shadow: ${themeCssVariables.boxShadow.underline};
color: ${themeCssVariables.font.color.tertiary};
display: flex;
flex-direction: column;
font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.regular};
font-size: ${themeCssVariables.font.size.md};
font-weight: ${themeCssVariables.font.weight.regular};
height: 20px;
justify-content: center;
padding-left: ${({ theme }) => theme.spacing(1)};
padding-right: ${({ theme }) => theme.spacing(1)};
padding-left: ${themeCssVariables.spacing[1]};
padding-right: ${themeCssVariables.spacing[1]};
text-align: center;
`;
export const StyledShortcutKeyContainer = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
display: flex;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(1)};
gap: ${themeCssVariables.spacing[1]};
`;

12
packages/twenty-front/src/modules/navigation-menu-item/components/AddToNavigationDragHandle.tsx
View file

@ -18,14 +18,10 @@ const StyledIconSlot = styled.div<{ $hasFixedSize: boolean }>`
display: flex;
flex-shrink: 0;
justify-content: center;
${({ $hasFixedSize }) =>
$hasFixedSize
? `
height: ${themeCssVariables.spacing[4]};
width: ${themeCssVariables.spacing[4]};
`
: ''}
height: ${({ $hasFixedSize }) =>
$hasFixedSize ? themeCssVariables.spacing[4] : 'auto'};
width: ${({ $hasFixedSize }) =>
$hasFixedSize ? themeCssVariables.spacing[4] : 'auto'};
&:active {
cursor: grabbing;

8
packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemIconContainer.tsx
View file

@ -14,8 +14,8 @@ export const StyledNavigationMenuItemIconContainer = styled.div<{
justify-content: center;
width: ${themeCssVariables.spacing[4]};
${({ $backgroundColor }) =>
$backgroundColor ? `background-color: ${$backgroundColor};` : ''}
${({ $borderColor }) =>
$borderColor ? `border: 1px solid ${$borderColor};` : ''}
background-color: ${({ $backgroundColor }) =>
$backgroundColor ?? 'transparent'};
border: ${({ $borderColor }) =>
$borderColor ? `1px solid ${$borderColor}` : 'none'};
`;

4
packages/twenty-front/src/modules/navigation-menu-item/components/ObjectIconWithViewOverlay.tsx
View file

@ -29,8 +29,8 @@ const StyledObjectIconWrapper = styled.div<{
display: flex;
align-items: center;
justify-content: center;
${({ $borderColor }) =>
$borderColor ? `border: 1px solid ${$borderColor};` : ''}
border: ${({ $borderColor }) =>
$borderColor ? `1px solid ${$borderColor}` : 'none'};
`;
const StyledViewOverlay = styled.div<{ $backgroundColor: string }>`

36
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNumberFieldInput.tsx
View file

@ -8,17 +8,21 @@ import { TextInput } from '@/ui/field/input/components/TextInput';
import { InputHint } from '@/ui/input/components/InputHint';
import { InputLabel } from '@/ui/input/components/InputLabel';
import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
import styled from '@emotion/styled';
import isEmpty from 'lodash.isempty';
import { useId, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import {
canBeCastAsNumberOrNull,
castAsNumberOrNull,
} from '~/utils/cast-as-number-or-null';
const StyledInput = styled(TextInput)`
padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(2)}`};
import { styled } from '@linaria/react';
const StyledInputWrapper = styled.div`
& input {
padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]};
}
`;
type FormNumberFieldInputProps = {
@ -113,18 +117,20 @@ export const FormNumberFieldInput = ({
onBlur={onBlur}
>
{draftValue.type === 'static' ? (
<StyledInput
instanceId={instanceId}
placeholder={
isDefined(placeholder) && !isEmpty(placeholder)
? placeholder
: t`Enter a number`
}
value={draftValue.value}
copyButton={false}
onChange={handleChange}
disabled={readonly}
/>
<StyledInputWrapper>
<TextInput
instanceId={instanceId}
placeholder={
isDefined(placeholder) && !isEmpty(placeholder)
? placeholder
: t`Enter a number`
}
value={draftValue.value}
copyButton={false}
onChange={handleChange}
disabled={readonly}
/>
</StyledInputWrapper>
) : (
<VariableChipStandalone
rawVariableName={draftValue.value}

4
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormRawJsonFieldInput.tsx
View file

@ -20,6 +20,7 @@ type FormRawJsonFieldInputProps = {
readonly?: boolean;
VariablePicker?: VariablePickerComponent;
placeholder?: string;
className?: string;
};
export const FormRawJsonFieldInput = ({
@ -31,6 +32,7 @@ export const FormRawJsonFieldInput = ({
onBlur,
readonly,
VariablePicker,
className,
}: FormRawJsonFieldInputProps) => {
const instanceId = useId();
@ -67,7 +69,7 @@ export const FormRawJsonFieldInput = ({
}
return (
<FormFieldInputContainer>
<FormFieldInputContainer className={className}>
{label ? <InputLabel>{label}</InputLabel> : null}
<FormFieldInputRowContainer multiline>

27
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormUuidFieldInput.tsx
View file

@ -7,12 +7,15 @@ import { type VariablePickerComponent } from '@/object-record/record-field/ui/fo
import { TextInput } from '@/ui/field/input/components/TextInput';
import { InputLabel } from '@/ui/input/components/InputLabel';
import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useId, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledInput = styled(TextInput)`
padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(2)}`};
const StyledInputWrapper = styled.div`
& input {
padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]};
}
`;
type FormUuidFieldInputProps = {
@ -100,14 +103,16 @@ export const FormUuidFieldInput = ({
hasRightElement={isDefined(VariablePicker) && !readonly}
>
{draftValue.type === 'static' ? (
<StyledInput
instanceId={instanceId}
placeholder={placeholder ?? t`Enter a UUID`}
value={draftValue.value}
copyButton={false}
disabled={readonly}
onChange={handleChange}
/>
<StyledInputWrapper>
<TextInput
instanceId={instanceId}
placeholder={placeholder ?? t`Enter a UUID`}
value={draftValue.value}
copyButton={false}
disabled={readonly}
onChange={handleChange}
/>
</StyledInputWrapper>
) : (
<VariableChipStandalone
rawVariableName={draftValue.value}

2
packages/twenty-front/src/modules/page-layout/components/PageLayoutCanvasViewer.tsx
View file

@ -1,6 +1,6 @@
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { WidgetRenderer } from '@/page-layout/widgets/components/WidgetRenderer';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { isDefined } from 'twenty-shared/utils';
const StyledCanvasContainer = styled.div`

47
packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx
View file

@ -26,8 +26,7 @@ import { WidgetPlaceholder } from '@/page-layout/widgets/components/WidgetPlaceh
import { WidgetRenderer } from '@/page-layout/widgets/components/WidgetRenderer';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useMemo, useRef } from 'react';
import {
Responsive,
@ -37,20 +36,36 @@ import {
type ResponsiveProps,
} from 'react-grid-layout';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { css } from '@linaria/core';
const StyledGridContainer = styled.div<{ $disableTransitions: boolean }>`
const disabledTransitionsClass = css`
.react-grid-layout {
transition: none !important;
}
.react-grid-item {
transition: none !important;
}
.react-grid-item.cssTransforms {
transition-property: none !important;
}
`;
const StyledGridContainer = styled.div`
box-sizing: border-box;
flex: 1;
min-height: 100%;
position: relative;
padding: ${({ theme }) => theme.spacing(2)};
padding: ${themeCssVariables.spacing[2]};
width: 100%;
user-select: none;
.react-grid-placeholder {
background: ${({ theme }) => theme.color.blue7} !important;
background: ${themeCssVariables.color.blue7} !important;
border-radius: ${({ theme }) => theme.border.radius.md};
border-radius: ${themeCssVariables.border.radius.md};
}
.react-grid-item:not(.react-draggable-dragging) {
@ -68,22 +83,6 @@ const StyledGridContainer = styled.div<{ $disableTransitions: boolean }>`
.react-grid-item:hover .widget-card-resize-handle {
display: block !important;
}
${({ $disableTransitions }) =>
$disableTransitions &&
css`
.react-grid-layout {
transition: none !important;
}
.react-grid-item {
transition: none !important;
}
.react-grid-item.cssTransforms {
transition-property: none !important;
}
`}
`;
type ExtendedResponsiveProps = ResponsiveProps & {
@ -172,7 +171,9 @@ export const PageLayoutGridLayout = ({ tabId }: PageLayoutGridLayoutProps) => {
return (
<StyledGridContainer
ref={gridContainerRef}
$disableTransitions={shouldDisableTransitions}
className={
shouldDisableTransitions ? disabledTransitionsClass : undefined
}
>
{isPageLayoutInEditMode && (
<>

29
packages/twenty-front/src/modules/page-layout/components/PageLayoutGridOverlay.tsx
View file

@ -9,41 +9,44 @@ import { calculateTotalGridRows } from '@/page-layout/utils/calculateTotalGridRo
import { generateCellId } from '@/page-layout/utils/generateCellId';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useMemo } from 'react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledGridOverlay = styled.div<{
isDragSelecting?: boolean;
breakpoint: PageLayoutBreakpoint;
}>`
position: absolute;
top: ${({ theme }) => theme.spacing(2)};
left: ${({ theme }) => theme.spacing(2)};
right: ${({ theme }) => theme.spacing(2)};
bottom: ${({ theme }) => theme.spacing(2)};
top: ${themeCssVariables.spacing[2]};
left: ${themeCssVariables.spacing[2]};
right: ${themeCssVariables.spacing[2]};
bottom: ${themeCssVariables.spacing[2]};
display: grid;
grid-template-columns: ${({ breakpoint }) =>
breakpoint === 'mobile' ? '1fr' : 'repeat(12, 1fr)'};
grid-auto-rows: 55px;
gap: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[2]};
pointer-events: ${({ isDragSelecting }) =>
isDragSelecting ? 'auto' : 'none'};
z-index: ${PAGE_LAYOUT_GRID_OVERLAY_Z_INDEX};
`;
const StyledGridCell = styled.div<{ isSelected?: boolean }>`
background: ${({ isSelected, theme }) =>
isSelected ? theme.color.blue3 : 'transparent'};
background: ${({ isSelected }) =>
isSelected ? themeCssVariables.color.blue3 : 'transparent'};
border: 1px solid
${({ theme, isSelected }) =>
isSelected ? theme.color.blue7 : theme.border.color.light};
border-radius: ${({ theme }) => theme.border.radius.md};
${({ isSelected }) =>
isSelected
? themeCssVariables.color.blue7
: themeCssVariables.border.color.light};
border-radius: ${themeCssVariables.border.radius.md};
cursor: pointer;
transition: background-color 0.3s ease;
&:hover {
background: ${({ theme }) => theme.background.transparent.lighter};
border-color: ${({ theme }) => theme.border.color.medium};
background: ${themeCssVariables.background.transparent.lighter};
border-color: ${themeCssVariables.border.color.medium};
}
`;

153
packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx
View file

@ -1,12 +1,13 @@
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { forwardRef } from 'react';
import { styled } from '@linaria/react';
import { forwardRef, useContext } from 'react';
import {
IconRadiusBottomLeft,
IconRadiusBottomRight,
IconRadiusTopLeft,
IconRadiusTopRight,
} from 'twenty-ui/display';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { ThemeContext } from 'twenty-ui/theme';
type WidgetHandleAxis = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
type WidgetHorizontalHandleAxis = 'n' | 's';
@ -29,60 +30,61 @@ const StyledCornerIconWrapper = styled.div<{
justify-content: center;
align-items: center;
cursor: ${({ cursor }) => cursor};
width: ${({ theme }) => theme.spacing(4)};
height: ${({ theme }) => theme.spacing(4)};
width: ${themeCssVariables.spacing[4]};
height: ${themeCssVariables.spacing[4]};
& svg {
color: transparent;
flex-shrink: 0;
pointer-events: none;
transform: ${({ position, theme }) => {
transform: ${({ position }) => {
if (position === 'se') {
return `translate(-${theme.spacing(2)}, -${theme.spacing(2)})`;
return `translate(-${themeCssVariables.spacing[2]}, -${themeCssVariables.spacing[2]})`;
}
if (position === 'sw') {
return `translate(${theme.spacing(2)}, -${theme.spacing(2)})`;
return `translate(${themeCssVariables.spacing[2]}, -${themeCssVariables.spacing[2]})`;
}
if (position === 'ne') {
return `translate(-${theme.spacing(2)}, ${theme.spacing(2)})`;
return `translate(-${themeCssVariables.spacing[2]}, ${themeCssVariables.spacing[2]})`;
}
if (position === 'nw') {
return `translate(${theme.spacing(2)}, ${theme.spacing(2)})`;
return `translate(${themeCssVariables.spacing[2]}, ${themeCssVariables.spacing[2]})`;
}
return '';
}};
}
:hover {
svg {
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
}
}
`;
const StyledVerticalHandle = styled.div`
border-radius: ${({ theme }) => theme.border.radius.sm};
height: ${({ theme }) => theme.spacing(5)};
width: ${({ theme }) => theme.icon.stroke.lg}px;
border-radius: ${themeCssVariables.border.radius.sm};
height: ${themeCssVariables.spacing[5]};
width: ${themeCssVariables.icon.stroke.lg}px;
`;
const StyledHorizontalHandle = styled.div`
border-radius: ${({ theme }) => theme.border.radius.sm};
height: ${({ theme }) => theme.icon.stroke.lg}px;
width: ${({ theme }) => theme.spacing(5)};
border-radius: ${themeCssVariables.border.radius.sm};
height: ${themeCssVariables.icon.stroke.lg}px;
width: ${themeCssVariables.spacing[5]};
`;
const StyledHorizontalHandleWrapper = styled.div<{
widgetHandleAxis: WidgetHorizontalHandleAxis;
}>`
border-radius: ${({ theme }) => theme.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.sm};
cursor: row-resize;
transform: ${({ widgetHandleAxis }) =>
widgetHandleAxis === 'n' ? 'translateY(-50%)' : 'translateY(50%)'};
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(2)};
padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[2]};
:hover {
& > div {
background-color: ${({ theme }) => theme.font.color.tertiary};
background-color: ${themeCssVariables.font.color.tertiary};
}
}
`;
@ -91,14 +93,14 @@ const StyledVerticalHandleWrapper = styled.div<{
widgetHandleAxis: WidgetVerticalHandleAxis;
}>`
cursor: col-resize;
border-radius: ${({ theme }) => theme.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.sm};
transform: ${({ widgetHandleAxis }) =>
widgetHandleAxis === 'w' ? 'translateX(-50%)' : 'translateX(50%)'};
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(2)};
padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[2]};
:hover {
& > div {
background-color: ${({ theme }) => theme.font.color.tertiary};
background-color: ${themeCssVariables.font.color.tertiary};
}
}
`;
@ -107,64 +109,53 @@ const StyledResizeHandleWrapper = styled.div<{
widgetHandleAxis?: WidgetHandleAxis;
}>`
position: absolute;
${({ theme, widgetHandleAxis }) => {
if (widgetHandleAxis === 'w') {
return css`
left: ${theme.spacing(1.5)};
top: 50%;
transform: translateY(-50%);
`;
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';
return 'auto';
}};
left: ${({ widgetHandleAxis }) => {
if (widgetHandleAxis === 'w') return themeCssVariables.spacing[1.5];
if (widgetHandleAxis === 'n' || widgetHandleAxis === 's') return '50%';
if (widgetHandleAxis === 'sw' || widgetHandleAxis === 'nw') return '0';
return 'auto';
}};
right: ${({ widgetHandleAxis }) => {
if (widgetHandleAxis === 'e') return themeCssVariables.spacing[1.5];
if (widgetHandleAxis === 'se' || widgetHandleAxis === 'ne') return '0';
return 'auto';
}};
transform: ${({ widgetHandleAxis }) => {
switch (widgetHandleAxis) {
case 'w':
case 'e':
return 'translateY(-50%)';
case 'n':
case 's':
return 'translateX(-50%)';
case 'se':
return `translate(${themeCssVariables.spacing[1]}, ${themeCssVariables.spacing[1]})`;
case 'sw':
return `translate(-${themeCssVariables.spacing[1]}, ${themeCssVariables.spacing[1]})`;
case 'ne':
return `translate(${themeCssVariables.spacing[1]}, -${themeCssVariables.spacing[1]})`;
case 'nw':
return `translate(-${themeCssVariables.spacing[1]}, -${themeCssVariables.spacing[1]})`;
default:
return 'none';
}
if (widgetHandleAxis === 'e') {
return css`
right: ${theme.spacing(1.5)};
top: 50%;
transform: translateY(-50%);
`;
}
if (widgetHandleAxis === 'n') {
return css`
top: ${theme.spacing(1.5)};
left: 50%;
transform: translateX(-50%);
`;
}
if (widgetHandleAxis === 's') {
return css`
bottom: ${theme.spacing(1.5)};
left: 50%;
transform: translateX(-50%);
`;
}
if (widgetHandleAxis === 'se') {
return css`
bottom: 0;
right: 0;
transform: translate(${theme.spacing(1)}, ${theme.spacing(1)});
`;
}
if (widgetHandleAxis === 'sw') {
return css`
bottom: 0;
left: 0;
transform: translate(-${theme.spacing(1)}, ${theme.spacing(1)});
`;
}
if (widgetHandleAxis === 'ne') {
return css`
right: 0;
top: 0;
transform: translate(${theme.spacing(1)}, -${theme.spacing(1)});
`;
}
if (widgetHandleAxis === 'nw') {
return css`
left: 0;
top: 0;
transform: translate(-${theme.spacing(1)}, -${theme.spacing(1)});
`;
}
}}
}};
`;
const isVerticalHandle = (
@ -192,7 +183,7 @@ export const PageLayoutGridResizeHandle = forwardRef<
},
ref,
) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
return (
<StyledResizeHandleWrapper

7
packages/twenty-front/src/modules/page-layout/components/PageLayoutLeftPanel.tsx
View file

@ -7,13 +7,14 @@ import { getTabLayoutMode } from '@/page-layout/utils/getTabLayoutMode';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { PageLayoutType } from '~/generated-metadata/graphql';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
background: ${({ theme }) => theme.background.secondary};
background: ${themeCssVariables.background.secondary};
border-bottom-left-radius: 8px;
border-right: ${({ theme }) => `1px solid ${theme.border.color.medium}`};
border-right: 1px solid ${themeCssVariables.border.color.medium};
border-top-left-radius: 8px;
box-sizing: border-box;
display: grid;

5
packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx
View file

@ -20,11 +20,12 @@ import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTab
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { CommandMenuPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { useIsMobile } from 'twenty-ui/utilities';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div<{ hasPinnedTab: boolean }>`
display: grid;
@ -42,7 +43,7 @@ const StyledTabsAndDashboardContainer = styled.div`
`;
const StyledPageLayoutTabList = styled(PageLayoutTabList)`
padding-left: ${({ theme }) => theme.spacing(2)};
padding-left: ${themeCssVariables.spacing[2]};
`;
const StyledScrollWrapper = styled(ScrollWrapper)`

9
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx
View file

@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import {
DragDropContext,
type DropResult,
@ -47,17 +47,18 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
import { CommandMenuPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { type PageLayoutType } from '~/generated-metadata/graphql';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
box-sizing: border-box;
display: flex;
height: ${({ theme }) => theme.spacing(10)};
height: ${themeCssVariables.spacing[10]};
position: relative;
user-select: none;
width: 100%;
&::after {
background-color: ${({ theme }) => theme.border.color.light};
background-color: ${themeCssVariables.border.color.light};
bottom: 0;
content: '';
height: 1px;
@ -70,7 +71,7 @@ const StyledContainer = styled.div`
const StyledAddButton = styled.div`
display: flex;
align-items: center;
height: ${({ theme }) => theme.spacing(10)};
height: ${themeCssVariables.spacing[10]};
margin-left: ${TAB_LIST_GAP}px;
`;

27
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListDroppableMoreButton.tsx
View file

@ -1,21 +1,23 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { Droppable } from '@hello-pangea/dnd';
import { PAGE_LAYOUT_TAB_LIST_DROPPABLE_IDS } from '@/page-layout/components/PageLayoutTabListDroppableIds';
import { TabMoreButton } from '@/ui/layout/tab-list/components/TabMoreButton';
import { themeCssVariables } from 'twenty-ui/theme-constants';
type PageLayoutTabListDroppableMoreButtonProps = {
hiddenTabsCount: number;
isActiveTabHidden: boolean;
};
const StyledTabMoreButton = styled(TabMoreButton)<{ isDraggingOver: boolean }>`
${({ isDraggingOver, theme }) =>
isDraggingOver &&
`
background-color: ${theme.background.transparent.blue};
const StyledTabMoreButtonWrapper = styled.div<{ isDraggingOver: boolean }>`
${({ isDraggingOver }) =>
isDraggingOver
? `
background-color: ${themeCssVariables.background.transparent.blue};
pointer-events: none;
`}
`
: ''}
`;
export const PageLayoutTabListDroppableMoreButton = ({
@ -30,11 +32,12 @@ export const PageLayoutTabListDroppableMoreButton = ({
// eslint-disable-next-line react/jsx-props-no-spreading
{...provided.droppableProps}
>
<StyledTabMoreButton
hiddenTabsCount={hiddenTabsCount}
active={isActiveTabHidden}
isDraggingOver={snapshot.isDraggingOver}
/>
<StyledTabMoreButtonWrapper isDraggingOver={snapshot.isDraggingOver}>
<TabMoreButton
hiddenTabsCount={hiddenTabsCount}
active={isActiveTabHidden}
/>
</StyledTabMoreButtonWrapper>
</div>
)}
</Droppable>

6
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableOverflowDropdown.tsx
View file

@ -1,5 +1,4 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import {
Draggable,
type DraggableProvided,
@ -30,6 +29,7 @@ import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSe
import { useContext } from 'react';
import { CommandMenuPages } from 'twenty-shared/types';
import { type PageLayoutType } from '~/generated-metadata/graphql';
import { ThemeContext } from 'twenty-ui/theme';
const StyledOverflowDropdownListDraggableWrapper = styled.div`
display: flex;
@ -65,7 +65,7 @@ export const PageLayoutTabListReorderableOverflowDropdown = ({
onClose,
pageLayoutType,
}: PageLayoutTabListReorderableOverflowDropdownProps) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const context = useContext(TabListComponentInstanceContext);
const instanceId = context?.instanceId;

30
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableTab.tsx
View file

@ -3,8 +3,9 @@ import { Draggable } from '@hello-pangea/dnd';
import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState';
import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { StyledTabContainer, TabContent } from 'twenty-ui/input';
import { themeCssVariables } from 'twenty-ui/theme-constants';
type PageLayoutTabListReorderableTabProps = {
tab: SingleTabProps;
@ -14,9 +15,9 @@ type PageLayoutTabListReorderableTabProps = {
onSelect: () => void;
};
const StyledTabContent = styled(TabContent)<{ isBeingEdited: boolean }>`
outline: ${({ isBeingEdited, theme }) =>
isBeingEdited ? `1px solid ${theme.color.blue}` : 'none'};
const StyledTabContentWrapper = styled.div<{ isBeingEdited: boolean }>`
outline: ${({ isBeingEdited }) =>
isBeingEdited ? `1px solid ${themeCssVariables.color.blue}` : 'none'};
outline-offset: -1px;
`;
@ -49,16 +50,17 @@ export const PageLayoutTabListReorderableTab = ({
cursor: draggableSnapshot.isDragging ? 'grabbing' : 'pointer',
}}
>
<StyledTabContent
id={tab.id}
active={isActive}
disabled={disabled}
LeftIcon={tab.Icon}
title={tab.title}
logo={tab.logo}
pill={tab.pill}
isBeingEdited={isSettingsOpenForThisTab}
/>
<StyledTabContentWrapper isBeingEdited={isSettingsOpenForThisTab}>
<TabContent
id={tab.id}
active={isActive}
disabled={disabled}
LeftIcon={tab.Icon}
title={tab.title}
logo={tab.logo}
pill={tab.pill}
/>
</StyledTabContentWrapper>
</StyledTabContainer>
)}
</Draggable>

2
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListVisibleTabs.tsx
View file

@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import {
type DraggableProvided,
type DraggableRubric,

13
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabMenuItemSelectAvatar.tsx
View file

@ -1,6 +1,5 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { type MouseEvent, useState } from 'react';
import { styled } from '@linaria/react';
import { type MouseEvent, useContext, useState } from 'react';
import { TabAvatar } from '@/ui/layout/tab-list/components/TabAvatar';
import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
@ -12,12 +11,14 @@ import {
StyledMenuItemLabel,
StyledMenuItemLeftContent,
} from 'twenty-ui/navigation';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { ThemeContext } from 'twenty-ui/theme';
const StyledTextContainer = styled.div`
display: flex;
align-items: center;
flex: 1 0 0;
gap: ${({ theme }) => theme.spacing(1)};
gap: ${themeCssVariables.spacing[1]};
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
@ -26,7 +27,7 @@ const StyledTextContainer = styled.div`
const StyledRightContent = styled.div`
display: flex;
align-items: center;
gap: ${({ theme }) => theme.spacing(1)};
gap: ${themeCssVariables.spacing[1]};
`;
type PageLayoutTabMenuItemSelectAvatarProps = {
@ -48,7 +49,7 @@ export const PageLayoutTabMenuItemSelectAvatar = ({
onEditClick,
testId,
}: PageLayoutTabMenuItemSelectAvatarProps) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const [isHovered, setIsHovered] = useState(false);
return (

7
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabRenderClone.tsx
View file

@ -4,11 +4,12 @@ import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/Gene
import { TabAvatar } from '@/ui/layout/tab-list/components/TabAvatar';
import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { type DraggableProvided } from '@hello-pangea/dnd';
import { StyledTabContainer, TabContent } from 'twenty-ui/input';
import { MenuItemSelectAvatar } from 'twenty-ui/navigation';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
const StyledDraggableWrapper = styled.div`
display: flex;
@ -28,7 +29,7 @@ export const PageLayoutTabRenderClone = ({
provided: DraggableProvided;
activeTabId: string | null;
}) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const pageLayoutTabListCurrentDragDroppableId = useAtomComponentStateValue(
pageLayoutTabListCurrentDragDroppableIdComponentState,

25
packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListEditor.tsx
View file

@ -6,7 +6,7 @@ import { WidgetRenderer } from '@/page-layout/widgets/components/WidgetRenderer'
import { useIsInPinnedTab } from '@/page-layout/widgets/hooks/useIsInPinnedTab';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import {
DragDropContext,
Draggable,
@ -15,26 +15,31 @@ import {
} from '@hello-pangea/dnd';
import { useId } from 'react';
import { useIsMobile } from 'twenty-ui/utilities';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledVerticalListContainer = styled.div<{
variant: PageLayoutVerticalListViewerVariant;
shouldUseWhiteBackground: boolean;
}>`
background: ${({ theme, shouldUseWhiteBackground }) =>
background: ${({ shouldUseWhiteBackground }) =>
shouldUseWhiteBackground
? theme.background.primary
: theme.background.secondary};
? themeCssVariables.background.primary
: themeCssVariables.background.secondary};
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(4)};
padding: ${({ theme, variant }) =>
variant === 'side-column' ? theme.spacing(1) : theme.spacing(2)};
gap: ${themeCssVariables.spacing[4]};
padding: ${({ variant }) =>
variant === 'side-column'
? themeCssVariables.spacing[1]
: themeCssVariables.spacing[2]};
`;
const StyledDraggableWrapper = styled.div<{ isDragging: boolean }>`
background: ${({ theme, isDragging }) =>
isDragging ? theme.background.transparent.light : 'transparent'};
border-radius: ${({ theme }) => theme.border.radius.sm};
background: ${({ isDragging }) =>
isDragging
? themeCssVariables.background.transparent.light
: 'transparent'};
border-radius: ${themeCssVariables.border.radius.sm};
transition: background 0.1s ease;
`;

17
packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx
View file

@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useIsMobile } from 'twenty-ui/utilities';
import { getPageLayoutVerticalListViewerVariant } from '@/page-layout/components/utils/getPageLayoutVerticalListViewerVariant';
@ -7,21 +7,22 @@ import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { WidgetRenderer } from '@/page-layout/widgets/components/WidgetRenderer';
import { useIsInPinnedTab } from '@/page-layout/widgets/hooks/useIsInPinnedTab';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledVerticalListContainer = styled.div<{
variant: PageLayoutVerticalListViewerVariant;
shouldUseWhiteBackground: boolean;
}>`
background: ${({ theme, shouldUseWhiteBackground }) =>
background: ${({ shouldUseWhiteBackground }) =>
shouldUseWhiteBackground
? theme.background.primary
: theme.background.secondary};
? themeCssVariables.background.primary
: themeCssVariables.background.secondary};
display: flex;
flex-direction: column;
gap: ${({ theme, variant }) =>
variant === 'side-column' ? 0 : theme.spacing(2)};
padding: ${({ theme, variant }) =>
variant === 'side-column' ? 0 : theme.spacing(2)};
gap: ${({ variant }) =>
variant === 'side-column' ? 0 : themeCssVariables.spacing[2]};
padding: ${({ variant }) =>
variant === 'side-column' ? 0 : themeCssVariables.spacing[2]};
`;
type PageLayoutVerticalListViewerProps = {

7
packages/twenty-front/src/modules/page-layout/components/__stories__/PageLayoutTabList.stories.tsx
View file

@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { type DropResult, type ResponderProvided } from '@hello-pangea/dnd';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { useMemo, useState } from 'react';
@ -11,10 +11,11 @@ import { PageLayoutComponentInstanceContext } from '@/page-layout/states/context
import { type PageLayoutTab } from '@/page-layout/types/PageLayoutTab';
import { calculateNewPosition } from '@/ui/layout/draggable-list/utils/calculateNewPosition';
import { PageLayoutType } from '~/generated-metadata/graphql';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
border: 1px solid ${({ theme }) => theme.border.color.strong};
padding: ${({ theme }) => theme.spacing(4)};
border: 1px solid ${themeCssVariables.border.color.strong};
padding: ${themeCssVariables.spacing[4]};
width: 720px;
`;

2
packages/twenty-front/src/modules/page-layout/widgets/calendar/components/CalendarWidget.tsx
View file

@ -2,7 +2,7 @@ import { CalendarEventsCard } from '@/activities/calendar/components/CalendarEve
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
const StyledContainer = styled.div`
box-sizing: border-box;

2
packages/twenty-front/src/modules/page-layout/widgets/components/PageLayoutWidgetInvalidConfigDisplay.tsx
View file

@ -1,5 +1,5 @@
import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { AppTooltip, Status } from 'twenty-ui/display';

2
packages/twenty-front/src/modules/page-layout/widgets/components/PageLayoutWidgetNoDataDisplay.tsx
View file

@ -1,5 +1,5 @@
import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { AppTooltip, Status } from 'twenty-ui/display';
import { WidgetType } from '~/generated-metadata/graphql';

22
packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionFieldSeeAll.tsx
View file

@ -11,8 +11,7 @@ import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
import { coreIndexViewIdFromObjectMetadataItemFamilySelector } from '@/views/states/selectors/coreIndexViewIdFromObjectMetadataItemFamilySelector';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { Link } from 'react-router-dom';
import { AppPath, ViewFilterOperand } from 'twenty-shared/types';
@ -25,18 +24,17 @@ import {
} from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { RelationType } from '~/generated-metadata/graphql';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledLink = styled(Link)`
display: flex;
text-decoration: none;
`;
const StyledSeeAllButton = styled(LightIconButton)<{ isMobile: boolean }>`
${({ theme, isMobile }) => css`
opacity: ${isMobile ? 1 : 0};
pointer-events: none;
transition: opacity ${theme.animation.duration.instant}s ease;
`}
const StyledSeeAllButtonWrapper = styled.div<{ isMobile: boolean }>`
opacity: ${({ isMobile }) => (isMobile ? '1' : '0')};
pointer-events: none;
transition: opacity ${themeCssVariables.animation.duration.instant}s ease;
.widget:hover & {
opacity: 1;
@ -134,11 +132,9 @@ export const WidgetActionFieldSeeAll = () => {
<>
<div id={tooltipId}>
<StyledLink to={filterLinkHref} data-testid="widget-see-all-link">
<StyledSeeAllButton
Icon={IconArrowUpRight}
accent="secondary"
isMobile={isMobile}
/>
<StyledSeeAllButtonWrapper isMobile={isMobile}>
<LightIconButton Icon={IconArrowUpRight} accent="secondary" />
</StyledSeeAllButtonWrapper>
</StyledLink>
</div>
<AppTooltip

8
packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx
View file

@ -24,9 +24,8 @@ import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingC
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useSetAtomComponentFamilyState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentFamilyState';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { type MouseEvent } from 'react';
import { styled } from '@linaria/react';
import { type MouseEvent, useContext } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { IconLock } from 'twenty-ui/display';
import {
@ -34,6 +33,7 @@ import {
PageLayoutType,
WidgetType,
} from '~/generated-metadata/graphql';
import { ThemeContext } from 'twenty-ui/theme';
const StyledNoAccessContainer = styled.div`
align-items: center;
@ -46,7 +46,7 @@ type WidgetRendererProps = {
};
export const WidgetRenderer = ({ widget }: WidgetRendererProps) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const { deletePageLayoutWidget } = useDeletePageLayoutWidget();
const { handleEditWidget } = useEditPageLayoutWidget();

7
packages/twenty-front/src/modules/page-layout/widgets/components/WidgetSkeletonLoader.tsx
View file

@ -1,7 +1,8 @@
import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
const StyledContainer = styled.div`
align-items: center;
@ -12,7 +13,7 @@ const StyledContainer = styled.div`
`;
export const WidgetSkeletonLoader = () => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
return (
<StyledContainer>

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