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

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

Browse Source 
## Summary

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

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

### Migration patterns applied

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

### After this PR

- **Remaining files**: ~400 (object-record: ~160, settings: ~200, UI:
~44)
- **No breaking changes**: CSS variables resolve identically to the
previous Emotion theme values
This commit is contained in:
Charles Bochet
2026-03-03 16:42:03 +01:00
committed by GitHub
parent 8b26020a0b
commit 3bfdc2c83f
339 changed files with 3439 additions and 2613 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx
+17 -14
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { motion } from 'framer-motion';
import { Key } from 'ts-key-enum';
@@ -11,10 +11,11 @@ import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useLis
import { useRef } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { Button } from 'twenty-ui/input';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledDialogOverlay = styled(motion.div)`
const StyledDialogOverlayBase = styled.div`
align-items: center;
background: ${({ theme }) => theme.background.overlayPrimary};
background: ${themeCssVariables.background.overlayPrimary};
display: flex;
height: 100dvh;
justify-content: center;
@@ -24,9 +25,10 @@ const StyledDialogOverlay = styled(motion.div)`
width: 100vw;
z-index: ${RootStackingContextZIndices.Dialog};
`;
const StyledDialogOverlay = motion.create(StyledDialogOverlayBase);
const StyledDialogContainer = styled(motion.div)`
background: ${({ theme }) => theme.background.primary};
const StyledDialogContainerBase = styled.div`
background: ${themeCssVariables.background.primary};
border-radius: 8px;
display: flex;
flex-direction: column;
@@ -35,26 +37,27 @@ const StyledDialogContainer = styled(motion.div)`
position: relative;
width: 100%;
`;
const StyledDialogContainer = motion.create(StyledDialogContainerBase);
const StyledDialogTitle = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
margin-bottom: ${({ theme }) => theme.spacing(6)};
color: ${themeCssVariables.font.color.primary};
font-size: ${themeCssVariables.font.size.md};
font-weight: ${themeCssVariables.font.weight.semiBold};
margin-bottom: ${themeCssVariables.spacing[6]};
text-align: center;
`;
const StyledDialogMessage = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.regular};
margin-bottom: ${({ theme }) => theme.spacing(6)};
color: ${themeCssVariables.font.color.primary};
font-size: ${themeCssVariables.font.size.sm};
font-weight: ${themeCssVariables.font.weight.regular};
margin-bottom: ${themeCssVariables.spacing[6]};
text-align: center;
`;
const StyledDialogButton = styled(Button)`
justify-content: center;
margin-bottom: ${({ theme }) => theme.spacing(2)};
margin-bottom: ${themeCssVariables.spacing[2]};
`;
export type DialogButtonOptions = Omit<
packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx
+30 -25
View File
@@ -1,10 +1,14 @@
import { sanitizeMessageToRenderInSnackbar } from '@/ui/feedback/snack-bar-manager/utils/sanitizeMessageToRenderInSnackbar';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { msg } from '@lingui/core/macro';
import { useLingui } from '@lingui/react/macro';
import { isUndefined } from '@sniptt/guards';
import { type ComponentPropsWithoutRef, type ReactNode, useMemo } from 'react';
import {
type ComponentPropsWithoutRef,
type ReactNode,
useContext,
useMemo,
} from 'react';
import { Link } from 'react-router-dom';
import { isDefined } from 'twenty-shared/utils';
import {
@@ -15,7 +19,8 @@ import {
} from 'twenty-ui/display';
import { ProgressBar, useProgressAnimation } from 'twenty-ui/feedback';
import { LightButton, LightIconButton } from 'twenty-ui/input';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
import { MOBILE_VIEWPORT, ThemeContext } from 'twenty-ui/theme';
import { themeCssVariables } from 'twenty-ui/theme-constants';
export enum SnackBarVariant {
Default = 'default',
@@ -43,16 +48,16 @@ export type SnackBarProps = Pick<ComponentPropsWithoutRef<'div'>, 'id'> & {
};
const StyledContainer = styled.div`
backdrop-filter: ${({ theme }) => theme.blur.medium};
background-color: ${({ theme }) => theme.background.transparent.primary};
border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
backdrop-filter: ${themeCssVariables.blur.medium};
background-color: ${themeCssVariables.background.transparent.primary};
border-radius: ${themeCssVariables.border.radius.md};
box-shadow: ${themeCssVariables.boxShadow.strong};
box-sizing: border-box;
cursor: pointer;
padding: ${({ theme }) => theme.spacing(2)};
padding: ${themeCssVariables.spacing[2]};
position: relative;
width: 296px;
margin-top: ${({ theme }) => theme.spacing(2)};
margin-top: ${themeCssVariables.spacing[2]};
@media (max-width: ${MOBILE_VIEWPORT}px) {
border-radius: 0;
@@ -72,16 +77,16 @@ const StyledProgressBar = styled(ProgressBar)`
const StyledHeader = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.primary};
color: ${themeCssVariables.font.color.primary};
display: flex;
font-weight: ${({ theme }) => theme.font.weight.medium};
gap: ${({ theme }) => theme.spacing(2)};
margin-bottom: ${({ theme }) => theme.spacing(1)};
font-weight: ${themeCssVariables.font.weight.medium};
gap: ${themeCssVariables.spacing[2]};
margin-bottom: ${themeCssVariables.spacing[1]};
`;
const StyledMessage = styled.div`
color: ${({ theme }) => theme.font.color.secondary};
font-size: ${({ theme }) => theme.font.size.sm};
color: ${themeCssVariables.font.color.secondary};
font-size: ${themeCssVariables.font.size.sm};
`;
const StyledIcon = styled.div`
@@ -96,9 +101,9 @@ const StyledActions = styled.div`
`;
const StyledDescription = styled.div`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.sm};
padding-left: ${({ theme }) => theme.spacing(6)};
color: ${themeCssVariables.font.color.tertiary};
font-size: ${themeCssVariables.font.size.sm};
padding-left: ${themeCssVariables.spacing[6]};
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
@@ -106,20 +111,20 @@ const StyledDescription = styled.div`
const StyledLink = styled(Link)`
display: block;
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.sm};
padding-left: ${({ theme }) => theme.spacing(6)};
color: ${themeCssVariables.font.color.tertiary};
font-size: ${themeCssVariables.font.size.sm};
padding-left: ${themeCssVariables.spacing[6]};
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 200px;
&:hover {
color: ${({ theme }) => theme.font.color.secondary};
color: ${themeCssVariables.font.color.secondary};
}
`;
const StyledActionButton = styled.div`
padding-left: ${({ theme }) => theme.spacing(6)};
padding-left: ${themeCssVariables.spacing[6]};
`;
const defaultAriaLabelByVariant: Record<
@@ -149,7 +154,7 @@ export const SnackBar = ({
role = 'status',
variant = SnackBarVariant.Default,
}: SnackBarProps) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const { i18n, t } = useLingui();
const { animation: progressAnimation, value: progressValue } =
useProgressAnimation({
packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBarProvider.tsx
+4 -3
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { AnimatePresence, motion } from 'framer-motion';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
@@ -9,13 +9,14 @@ import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingC
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
import { SnackBar } from './SnackBar';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledSnackBarContainer = styled.div`
bottom: ${({ theme }) => theme.spacing(3)};
bottom: ${themeCssVariables.spacing[3]};
display: flex;
flex-direction: column;
position: fixed;
right: ${({ theme }) => theme.spacing(3)};
right: ${themeCssVariables.spacing[3]};
z-index: ${RootStackingContextZIndices.SnackBar};
@media (max-width: ${MOBILE_VIEWPORT}px) {
packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx
+3 -3
View File
@@ -1,5 +1,4 @@
import { useTheme } from '@emotion/react';
import { useId, useState } from 'react';
import { useContext, useId, useState } from 'react';
import { createPortal } from 'react-dom';
import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
@@ -14,6 +13,7 @@ import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
import { isDefined, formatToShortNumber } from 'twenty-shared/utils';
import { DEFAULT_DECIMAL_VALUE } from '~/utils/format/formatNumber';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
import { ThemeContext } from 'twenty-ui/theme';
type CurrencyDisplayProps = {
currencyValue: FieldCurrencyValue | null | undefined;
@@ -24,7 +24,7 @@ export const CurrencyDisplay = ({
currencyValue,
fieldDefinition,
}: CurrencyDisplayProps) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const instanceId = useId();
const [shouldRenderTooltip, setShouldRenderTooltip] = useState(false);
packages/twenty-front/src/modules/ui/field/display/components/DateTimeDisplay.tsx
+3 -2
View File
@@ -2,16 +2,17 @@ import { type FieldDateMetadataSettings } from '@/object-record/record-field/ui/
import { TimeZoneAbbreviation } from '@/ui/input/components/internal/date/components/TimeZoneAbbreviation';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { UserContext } from '@/users/contexts/UserContext';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { isNonEmptyString } from '@sniptt/guards';
import { useContext } from 'react';
import { Temporal } from 'temporal-polyfill';
import { dateLocaleState } from '~/localization/states/dateLocaleState';
import { formatDateTimeString } from '~/utils/string/formatDateTimeString';
import { EllipsisDisplay } from './EllipsisDisplay';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledTimeZoneSpacer = styled.span`
min-width: ${({ theme }) => theme.spacing(1)};
min-width: ${themeCssVariables.spacing[1]};
`;
type DateTimeDisplayProps = {
packages/twenty-front/src/modules/ui/field/display/components/FileChip.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { FileIcon } from '@/file/components/FileIcon';
import { type FieldFilesValue } from '@/object-record/record-field/ui/types/FieldMetadata';
packages/twenty-front/src/modules/ui/field/display/components/GlobalFilePreviewModal.tsx
+13 -11
View File
@@ -4,13 +4,14 @@ import { Modal } from '@/ui/layout/modal/components/Modal';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { lazy, Suspense, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { isDefined } from 'twenty-shared/utils';
import { IconDownload, IconX } from 'twenty-ui/display';
import { IconButton } from 'twenty-ui/input';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const DocumentViewer = lazy(() =>
import('@/activities/files/components/DocumentViewer').then((module) => ({
@@ -22,14 +23,15 @@ const GLOBAL_FILE_PREVIEW_MODAL_ID = 'global-file-preview-modal';
const StyledModalHeader = styled.div`
align-items: center;
border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
border-bottom: 1px solid ${themeCssVariables.border.color.medium};
display: flex;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[2]};
height: 60px;
justify-content: space-between;
overflow: hidden;
padding: ${({ theme }) => theme.spacing(0, 4, 0, 4)};
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[4]}
${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[4]};
text-overflow: ellipsis;
white-space: nowrap;
`;
@@ -37,26 +39,26 @@ const StyledModalHeader = styled.div`
const StyledHeader = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[2]};
justify-content: space-between;
width: 100%;
`;
const StyledModalTitle = styled.div`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.xl};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
color: ${themeCssVariables.font.color.primary};
font-size: ${themeCssVariables.font.size.xl};
font-weight: ${themeCssVariables.font.weight.semiBold};
`;
const StyledButtonContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
gap: ${themeCssVariables.spacing[1]};
`;
const StyledModalContent = styled.div`
height: 100%;
padding: ${({ theme }) => theme.spacing(4)};
padding: ${themeCssVariables.spacing[4]};
`;
const StyledLoadingContainer = styled.div`
@@ -67,7 +69,7 @@ const StyledLoadingContainer = styled.div`
`;
const StyledLoadingText = styled.div`
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
`;
export const GlobalFilePreviewModal = (): JSX.Element | null => {
packages/twenty-front/src/modules/ui/field/display/components/UploadFileChip.tsx
+15 -13
View File
@@ -1,24 +1,26 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { IconArrowUp } from 'twenty-ui/display';
import { Loader } from 'twenty-ui/feedback';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
const StyledContainer = styled.div`
align-items: center;
background-color: ${({ theme }) => theme.background.transparent.light};
border-radius: ${({ theme }) => theme.border.radius.sm};
background-color: ${themeCssVariables.background.transparent.light};
border-radius: ${themeCssVariables.border.radius.sm};
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
height: ${({ theme }) => theme.spacing(5)};
padding: 0 ${({ theme }) => theme.spacing(1)};
margin-right: ${({ theme }) => theme.spacing(1)};
gap: ${themeCssVariables.spacing[1]};
height: ${themeCssVariables.spacing[5]};
padding: 0 ${themeCssVariables.spacing[1]};
margin-right: ${themeCssVariables.spacing[1]};
`;
const StyledIconBox = styled.div`
align-items: center;
background-color: ${({ theme }) => theme.font.color.tertiary};
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.background.primary};
background-color: ${themeCssVariables.font.color.tertiary};
border-radius: ${themeCssVariables.border.radius.sm};
color: ${themeCssVariables.background.primary};
display: flex;
height: 14px;
justify-content: center;
@@ -27,7 +29,7 @@ const StyledIconBox = styled.div`
const StyledStaticLoader = styled.div`
align-items: center;
border: 1px solid ${({ theme }) => theme.font.color.tertiary};
border: 1px solid ${themeCssVariables.font.color.tertiary};
border-radius: 12px;
box-sizing: border-box;
display: flex;
@@ -41,7 +43,7 @@ type UploadFileChipProps = {
};
export const UploadFileChip = ({ isLoading = true }: UploadFileChipProps) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
return (
<StyledContainer>
packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { PlaceAutocompleteSelect } from '@/geo-map/components/PlaceAutocompleteSelect';
packages/twenty-front/src/modules/ui/field/input/components/BooleanInput.tsx
+6 -3
View File
@@ -1,7 +1,8 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useEffect, useState } from 'react';
import { BooleanDisplay } from '@/ui/field/display/components/BooleanDisplay';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledEditableBooleanFieldContainer = styled.div<{ readonly?: boolean }>`
align-items: center;
@@ -11,8 +12,10 @@ const StyledEditableBooleanFieldContainer = styled.div<{ readonly?: boolean }>`
height: 100%;
width: 100%;
color: ${({ theme, readonly }) =>
readonly ? theme.font.color.tertiary : theme.font.color.primary};
color: ${({ readonly }) =>
readonly
? themeCssVariables.font.color.tertiary
: themeCssVariables.font.color.primary};
`;
type BooleanInputProps = {
packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
+10 -10
View File
@@ -1,6 +1,5 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useEffect, useRef, useState } from 'react';
import { styled } from '@linaria/react';
import { useContext, useEffect, useRef, useState } from 'react';
import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
import { CURRENCIES } from '@/settings/data-model/constants/Currencies';
@@ -8,13 +7,14 @@ import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/cur
import { type Currency } from '@/ui/input/components/internal/types/Currency';
import { IMaskInput } from 'react-imask';
import { type IconComponent } from 'twenty-ui/display';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
import { TEXT_INPUT_STYLE, ThemeContext } from 'twenty-ui/theme';
import { themeCssVariables } from 'twenty-ui/theme-constants';
export const StyledIMaskInput = styled(IMaskInput)`
margin: 0;
${TEXT_INPUT_STYLE}
width: 100%;
padding: ${({ theme }) => `${theme.spacing(0)} ${theme.spacing(1.5)}`};
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[1.5]};
`;
const StyledContainer = styled.div`
@@ -29,10 +29,10 @@ const StyledIcon = styled.div`
display: flex;
& > svg {
padding-left: ${({ theme }) => theme.spacing(1)};
color: ${({ theme }) => theme.font.color.tertiary};
height: ${({ theme }) => theme.icon.size.md}px;
width: ${({ theme }) => theme.icon.size.md}px;
padding-left: ${themeCssVariables.spacing[1]};
color: ${themeCssVariables.font.color.tertiary};
height: ${themeCssVariables.icon.size.md}px;
width: ${themeCssVariables.icon.size.md}px;
}
`;
@@ -67,7 +67,7 @@ export const CurrencyInput = ({
onSelect,
decimals,
}: CurrencyInputProps) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const [internalText, setInternalText] = useState(value);
packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx
+4 -3
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import {
useEffect,
useRef,
@@ -17,14 +17,15 @@ import { isDefined } from 'twenty-shared/utils';
import { splitFullName } from '~/utils/format/spiltFullName';
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
import { StyledTextInput } from './TextInput';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
display: flex;
justify-content: space-between;
& > input:last-child {
border-left: 1px solid ${({ theme }) => theme.border.color.strong};
padding-left: ${({ theme }) => theme.spacing(2)};
border-left: 1px solid ${themeCssVariables.border.color.strong};
padding-left: ${themeCssVariables.spacing[2]};
}
`;
packages/twenty-front/src/modules/ui/field/input/components/FieldInputContainer.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
// eslint-disable-next-line twenty/styled-components-prefixed-with-styled
export const FieldInputContainer = styled.div`
packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
+3 -2
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useEffect, useRef, useState, type ChangeEvent } from 'react';
import TextareaAutosize from 'react-textarea-autosize';
@@ -7,6 +7,7 @@ import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-typ
import { isDefined } from 'twenty-shared/utils';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
import { themeCssVariables } from 'twenty-ui/theme-constants';
export type TextAreaInputProps = {
instanceId: string;
@@ -32,7 +33,7 @@ const StyledTextArea = styled(TextareaAutosize)`
justify-content: center;
resize: none;
max-height: 400px;
width: calc(100% - ${({ theme }) => theme.spacing(7)});
width: calc(100% - ${themeCssVariables.spacing[7]});
line-height: 18px;
`;
packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx
+3 -2
View File
@@ -1,9 +1,10 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useEffect, useRef, useState, type ChangeEvent } from 'react';
import { LightCopyIconButton } from '@/object-record/record-field/ui/components/LightCopyIconButton';
import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
import { themeCssVariables } from 'twenty-ui/theme-constants';
export const StyledTextInput = styled.input`
margin: 0;
@@ -11,7 +12,7 @@ export const StyledTextInput = styled.input`
width: 100%;
&:disabled {
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
}
`;
packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
+47 -12
View File
@@ -1,5 +1,6 @@
import styled from '@emotion/styled';
import { type ReactNode, useCallback, useMemo, useState } from 'react';
import { css } from '@linaria/core';
import { styled } from '@linaria/react';
import React, { type ReactNode, useCallback, useMemo, useState } from 'react';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -31,6 +32,7 @@ import {
type IconButtonVariant,
LightIconButton,
} from 'twenty-ui/input';
import { themeCssVariables } from 'twenty-ui/theme-constants';
export type IconPickerProps = {
disabled?: boolean;
@@ -53,20 +55,53 @@ const StyledMenuIconItemsContainer = styled.div`
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: ${({ theme }) => theme.spacing(0.5)};
gap: ${themeCssVariables.spacing[0.5]};
`;
const StyledLightIconButton = styled(LightIconButton)<{
const selectedIconButtonStyle = css`
background: ${themeCssVariables.background.transparent.medium};
`;
const focusedIconButtonStyle = css`
background: ${themeCssVariables.background.transparent.light};
`;
type StyledLightIconButtonProps = React.ComponentProps<
typeof LightIconButton
> & {
isSelected?: boolean;
isFocused?: boolean;
}>`
background: ${({ theme, isSelected, isFocused }) =>
isSelected
? theme.background.transparent.medium
: isFocused
? theme.background.transparent.light
: 'transparent'};
`;
};
const StyledLightIconButton = ({
isSelected,
isFocused,
className,
'aria-label': ariaLabel,
size,
title,
Icon,
onClick,
testId,
active,
accent,
disabled,
focus,
}: StyledLightIconButtonProps) => (
<LightIconButton
aria-label={ariaLabel}
size={size}
title={title}
Icon={Icon}
onClick={onClick}
testId={testId}
active={active}
accent={accent}
disabled={disabled}
focus={focus}
className={`${className ?? ''} ${isSelected ? selectedIconButtonStyle : isFocused ? focusedIconButtonStyle : ''}`}
/>
);
const StyledLoadingMore = styled.div`
display: flex;
packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx
+23 -20
View File
@@ -1,13 +1,14 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { Trans, useLingui } from '@lingui/react/macro';
import { isNonEmptyString } from '@sniptt/guards';
import React, { useState } from 'react';
import React, { useContext, useState } from 'react';
import { getImageAbsoluteURI, isDefined } from 'twenty-shared/utils';
import { IconPhotoUp, IconTrash, IconUpload, IconX } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { ThemeContext } from 'twenty-ui/theme';
const StyledContainer = styled.div`
display: flex;
@@ -16,11 +17,13 @@ const StyledContainer = styled.div`
const StyledPicture = styled.button<{ withPicture: boolean }>`
align-items: center;
background: ${({ theme, disabled }) =>
disabled ? theme.background.secondary : theme.background.transparent.light};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.light};
background: ${({ disabled }) =>
disabled
? themeCssVariables.background.secondary
: themeCssVariables.background.transparent.light};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${themeCssVariables.border.radius.sm};
color: ${themeCssVariables.font.color.light};
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
display: flex;
height: 66px;
@@ -38,17 +41,17 @@ const StyledPicture = styled.button<{ withPicture: boolean }>`
}
&:hover svg {
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
}
${({ theme, withPicture, disabled }) => {
${({ withPicture, disabled }) => {
if ((withPicture || disabled) === true) {
return '';
}
return `
&:hover {
background: ${theme.background.transparent.medium};
background: ${themeCssVariables.background.transparent.medium};
}
`;
}};
@@ -59,27 +62,27 @@ const StyledContent = styled.div`
flex: 1;
flex-direction: column;
justify-content: start;
margin-left: ${({ theme }) => theme.spacing(4)};
margin-left: ${themeCssVariables.spacing[4]};
gap: ${({ theme }) => theme.spacing(3)};
gap: ${themeCssVariables.spacing[3]};
`;
const StyledButtonContainer = styled.div`
display: flex;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[2]};
`;
const StyledText = styled.span`
color: ${({ theme }) => theme.font.color.light};
font-size: ${({ theme }) => theme.font.size.xs};
color: ${themeCssVariables.font.color.light};
font-size: ${themeCssVariables.font.size.xs};
`;
const StyledErrorText = styled.span`
color: ${({ theme }) => theme.font.color.danger};
font-size: ${({ theme }) => theme.font.size.xs};
margin-top: ${({ theme }) => theme.spacing(1)};
color: ${themeCssVariables.font.color.danger};
font-size: ${themeCssVariables.font.size.xs};
margin-top: ${themeCssVariables.spacing[1]};
`;
const StyledHiddenFileInput = styled.input`
@@ -108,7 +111,7 @@ export const ImageInput = ({
className,
}: ImageInputProps) => {
const { t } = useLingui();
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const hiddenFileInput = React.useRef<HTMLInputElement>(null);
const onUploadButtonClick = () => {
hiddenFileInput.current?.click();
packages/twenty-front/src/modules/ui/input/components/InputErrorHelper.tsx
+4 -3
View File
@@ -1,9 +1,10 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import React from 'react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledInputErrorHelper = styled.div`
color: ${({ theme }) => theme.color.red};
font-size: ${({ theme }) => theme.font.size.xs};
color: ${themeCssVariables.color.red};
font-size: ${themeCssVariables.font.size.xs};
position: absolute;
margin-top: 1px;
`;
packages/twenty-front/src/modules/ui/input/components/InputHint.tsx
+9 -6
View File
@@ -1,13 +1,16 @@
import styled from '@emotion/styled';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { styled } from '@linaria/react';
const StyledInputHint = styled.div<{
danger?: boolean;
}>`
color: ${({ danger, theme }) =>
danger ? theme.font.color.danger : theme.font.color.light};
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.regular};
margin-top: ${({ theme }) => theme.spacing(0.5)};
color: ${({ danger }) =>
danger
? themeCssVariables.font.color.danger
: themeCssVariables.font.color.light};
font-size: ${themeCssVariables.font.size.xs};
font-weight: ${themeCssVariables.font.weight.regular};
margin-top: ${themeCssVariables.spacing[0.5]};
`;
export { StyledInputHint as InputHint };
packages/twenty-front/src/modules/ui/input/components/InputLabel.tsx
+8 -10
View File
@@ -1,14 +1,12 @@
import styled from '@emotion/styled';
import { type HTMLAttributes } from 'react';
import { Label } from 'twenty-ui/display';
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
type InputLabelProps = HTMLAttributes<HTMLLabelElement> & {
htmlFor?: string;
};
const StyledInputLabel = styled(Label)<InputLabelProps>`
const StyledLabel = styled.label`
color: ${themeCssVariables.font.color.light};
display: block;
margin-bottom: ${({ theme }) => theme.spacing(1)};
font-size: 11px;
font-weight: ${themeCssVariables.font.weight.semiBold};
margin-bottom: ${themeCssVariables.spacing[1]};
`;
export const InputLabel = StyledInputLabel;
export const InputLabel = StyledLabel;
packages/twenty-front/src/modules/ui/input/components/MultiSelectControl.tsx
+19 -8
View File
@@ -1,15 +1,27 @@
import {
type SelectControlProps,
StyledControlContainer,
StyledSelectControlIconChevronDown,
} from '@/ui/input/components/SelectControl';
import { useTheme } from '@emotion/react';
import React from 'react';
import { styled } from '@linaria/react';
import React, { useContext } from 'react';
import { isDefined } from 'twenty-shared/utils';
import {
IconChevronDown,
type IconComponent,
OverflowingTextWithTooltip,
} from 'twenty-ui/display';
import { ThemeContext } from 'twenty-ui/theme';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledIconChevronDownWrapper = styled.div<{
disabled?: boolean;
}>`
color: ${({ disabled }) =>
disabled
? themeCssVariables.font.color.extraLight
: themeCssVariables.font.color.tertiary};
display: flex;
`;
type MultiSelectOptionType = {
label: string;
@@ -31,7 +43,7 @@ export const MultiSelectControl = ({
textAccent = 'default',
hasRightElement,
}: MultiSelectControlProps) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const firstSelectedOption = selectedOptions?.[0];
return (
@@ -61,10 +73,9 @@ export const MultiSelectControl = ({
<OverflowingTextWithTooltip text={firstSelectedOption?.label ?? ''} />
)}
<StyledSelectControlIconChevronDown
disabled={isDisabled}
size={theme.icon.size.md}
/>
<StyledIconChevronDownWrapper disabled={isDisabled}>
<IconChevronDown size={theme.icon.size.md} />
</StyledIconChevronDownWrapper>
</StyledControlContainer>
);
};
packages/twenty-front/src/modules/ui/input/components/Select.tsx
+8 -7
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { type MouseEvent, useMemo, useRef, useState } from 'react';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -22,6 +22,7 @@ import { isDefined } from 'twenty-shared/utils';
import { type IconComponent } from 'twenty-ui/display';
import { type SelectOption } from 'twenty-ui/input';
import { MenuItem, MenuItemSelect } from 'twenty-ui/navigation';
import { themeCssVariables } from 'twenty-ui/theme-constants';
export type SelectSizeVariant = 'small' | 'default';
@@ -58,16 +59,16 @@ const StyledContainer = styled.div<{ fullWidth?: boolean }>`
`;
const StyledLabel = styled.span`
color: ${({ theme }) => theme.font.color.light};
color: ${themeCssVariables.font.color.light};
display: block;
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
margin-bottom: ${({ theme }) => theme.spacing(1)};
font-size: ${themeCssVariables.font.size.xs};
font-weight: ${themeCssVariables.font.weight.semiBold};
margin-bottom: ${themeCssVariables.spacing[1]};
`;
const StyledDescription = styled.span`
color: ${({ theme }) => theme.font.color.light};
font-size: ${({ theme }) => theme.font.size.sm};
color: ${themeCssVariables.font.color.light};
font-size: ${themeCssVariables.font.size.sm};
`;
export const Select = <Value extends SelectValue>({
packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx
+36 -34
View File
@@ -1,9 +1,11 @@
import { type SelectSizeVariant } from '@/ui/input/components/Select';
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { isDefined } from 'twenty-shared/utils';
import { IconChevronDown, OverflowingTextWithTooltip } from 'twenty-ui/display';
import { type SelectOption } from 'twenty-ui/input';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
export type SelectControlTextAccent = 'default' | 'placeholder';
@@ -19,45 +21,46 @@ export const StyledControlContainer = styled.div<{
grid-template-columns: ${({ hasIcon }) =>
hasIcon ? 'auto 1fr auto' : '1fr auto'};
align-items: center;
gap: ${({ theme }) => theme.spacing(1)};
gap: ${themeCssVariables.spacing[1]};
box-sizing: border-box;
height: ${({ selectSizeVariant, theme }) =>
selectSizeVariant === 'small' ? theme.spacing(6) : theme.spacing(8)};
height: ${({ selectSizeVariant }) =>
selectSizeVariant === 'small'
? themeCssVariables.spacing[6]
: themeCssVariables.spacing[8]};
max-width: 100%;
padding: 0 ${({ theme }) => theme.spacing(2)};
background-color: ${({ theme }) => theme.background.transparent.lighter};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm};
padding: 0 ${themeCssVariables.spacing[2]};
background-color: ${themeCssVariables.background.transparent.lighter};
border: 1px solid ${themeCssVariables.border.color.medium};
border-top-left-radius: ${themeCssVariables.border.radius.sm};
border-bottom-left-radius: ${themeCssVariables.border.radius.sm};
${({ hasRightElement, theme }) =>
!hasRightElement
? css`
border-right: auto;
border-bottom-right-radius: ${theme.border.radius.sm};
border-top-right-radius: ${theme.border.radius.sm};
`
: css`
border-right: none;
border-bottom-right-radius: none;
border-top-right-radius: none;
`}
border-right: ${({ hasRightElement }) =>
hasRightElement
? 'none'
: `1px solid ${themeCssVariables.border.color.medium}`};
border-bottom-right-radius: ${({ hasRightElement }) =>
hasRightElement ? '0' : themeCssVariables.border.radius.sm};
border-top-right-radius: ${({ hasRightElement }) =>
hasRightElement ? '0' : themeCssVariables.border.radius.sm};
color: ${({ disabled, theme, textAccent }) =>
color: ${({ disabled, textAccent }) =>
disabled
? theme.font.color.tertiary
? themeCssVariables.font.color.tertiary
: textAccent === 'default'
? theme.font.color.primary
: theme.font.color.tertiary};
? themeCssVariables.font.color.primary
: themeCssVariables.font.color.tertiary};
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
text-align: left;
`;
export const StyledSelectControlIconChevronDown = styled(IconChevronDown)<{
const StyledIconChevronDownWrapper = styled.div<{
disabled?: boolean;
}>`
color: ${({ disabled, theme }) =>
disabled ? theme.font.color.extraLight : theme.font.color.tertiary};
color: ${({ disabled }) =>
disabled
? themeCssVariables.font.color.extraLight
: themeCssVariables.font.color.tertiary};
display: flex;
`;
export type SelectControlProps = {
@@ -75,7 +78,7 @@ export const SelectControl = ({
textAccent = 'default',
hasRightElement,
}: SelectControlProps) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
return (
<StyledControlContainer
@@ -94,10 +97,9 @@ export const SelectControl = ({
/>
) : null}
<OverflowingTextWithTooltip text={selectedOption.label} />
<StyledSelectControlIconChevronDown
disabled={isDisabled}
size={theme.icon.size.md}
/>
<StyledIconChevronDownWrapper disabled={isDisabled}>
<IconChevronDown size={theme.icon.size.md} />
</StyledIconChevronDownWrapper>
</StyledControlContainer>
);
};
packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
+18 -19
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { type FocusEventHandler, useId } from 'react';
import TextareaAutosize from 'react-textarea-autosize';
@@ -6,6 +6,7 @@ import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePush
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const MAX_ROWS = 5;
@@ -30,43 +31,41 @@ const StyledContainer = styled.div`
`;
const StyledLabel = styled.label`
color: ${({ theme }) => theme.font.color.light};
color: ${themeCssVariables.font.color.light};
display: block;
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
margin-bottom: ${({ theme }) => theme.spacing(1)};
font-size: ${themeCssVariables.font.size.xs};
font-weight: ${themeCssVariables.font.weight.semiBold};
margin-bottom: ${themeCssVariables.spacing[1]};
`;
const StyledTextArea = styled(TextareaAutosize)`
background-color: ${({ theme }) => theme.background.transparent.lighter};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
background-color: ${themeCssVariables.background.transparent.lighter};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${themeCssVariables.border.radius.sm};
box-sizing: border-box;
color: ${({ theme }) => theme.font.color.primary};
color: ${themeCssVariables.font.color.primary};
font-family: inherit;
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};
line-height: 16px;
overflow: auto;
padding: ${({ theme }) => theme.spacing(2)};
padding: ${themeCssVariables.spacing[2]};
resize: none;
width: 100%;
&:focus {
outline: none;
${({ theme }) => {
return `box-shadow: 0px 0px 0px 3px ${theme.color.transparent.blue2};
border-color: ${theme.color.blue};`;
}};
box-shadow: 0px 0px 0px 3px ${themeCssVariables.color.transparent.blue2};
border-color: ${themeCssVariables.color.blue};
}
&::placeholder {
color: ${({ theme }) => theme.font.color.light};
font-weight: ${({ theme }) => theme.font.weight.regular};
color: ${themeCssVariables.font.color.light};
font-weight: ${themeCssVariables.font.weight.regular};
}
&:disabled {
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
}
`;
packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
+105 -67
View File
@@ -1,12 +1,13 @@
import { InputErrorHelper } from '@/ui/input/components/InputErrorHelper';
import { InputLabel } from '@/ui/input/components/InputLabel';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import {
import { css } from '@linaria/core';
import { styled } from '@linaria/react';
import React, {
forwardRef,
type ChangeEvent,
type FocusEventHandler,
type InputHTMLAttributes,
forwardRef,
useContext,
useId,
useRef,
useState,
@@ -15,6 +16,8 @@ import { type IconComponent, IconEye, IconEyeOff } from 'twenty-ui/display';
import { AutogrowWrapper } from 'twenty-ui/utilities';
import { useCombinedRefs } from '~/hooks/useCombinedRefs';
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { ThemeContext } from 'twenty-ui/theme';
const StyledContainer = styled.div<Pick<TextInputComponentProps, 'fullWidth'>>`
box-sizing: border-box;
@@ -39,17 +42,17 @@ type StyledAdornmentContainerProps = {
const StyledAdornmentContainer = styled.div<StyledAdornmentContainerProps>`
align-items: center;
background-color: ${({ theme }) => theme.background.transparent.light};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme, position }) =>
background-color: ${themeCssVariables.background.transparent.light};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${({ position }) =>
position === 'left'
? `${theme.border.radius.sm} 0 0 ${theme.border.radius.sm}`
: `0 ${theme.border.radius.sm} ${theme.border.radius.sm} 0`};
? `${themeCssVariables.border.radius.sm} 0 0 ${themeCssVariables.border.radius.sm}`
: `0 ${themeCssVariables.border.radius.sm} ${themeCssVariables.border.radius.sm} 0`};
box-sizing: border-box;
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
display: flex;
font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.medium};
font-size: ${themeCssVariables.font.size.md};
font-weight: ${themeCssVariables.font.weight.medium};
height: ${({ sizeVariant }) =>
sizeVariant === 'xs'
? '20px'
@@ -60,7 +63,7 @@ const StyledAdornmentContainer = styled.div<StyledAdornmentContainerProps>`
: '32px'};
justify-content: center;
min-width: fit-content;
padding: ${({ theme }) => theme.spacing(2)};
padding: ${themeCssVariables.spacing[2]};
width: auto;
line-height: ${({ sizeVariant }) =>
sizeVariant === 'xs'
@@ -71,8 +74,10 @@ const StyledAdornmentContainer = styled.div<StyledAdornmentContainerProps>`
? '28px'
: '32px'};
${({ position }) =>
position === 'left' ? 'border-right: none;' : 'border-left: none;'}
border-right-style: ${({ position }) =>
position === 'left' ? 'none' : 'solid'};
border-left-style: ${({ position }) =>
position === 'right' ? 'none' : 'solid'};
`;
const StyledInput = styled.input<
@@ -89,27 +94,29 @@ const StyledInput = styled.input<
| 'leftAdornment'
>
>`
background-color: ${({ theme }) => theme.background.transparent.lighter};
border-radius: ${({ theme, leftAdornment, rightAdornment }) =>
background-color: ${themeCssVariables.background.transparent.lighter};
border-radius: ${({ leftAdornment, rightAdornment }) =>
leftAdornment
? `0 ${theme.border.radius.sm} ${theme.border.radius.sm} 0`
? `0 ${themeCssVariables.border.radius.sm} ${themeCssVariables.border.radius.sm} 0`
: rightAdornment
? `${theme.border.radius.sm} 0 0 ${theme.border.radius.sm}`
: theme.border.radius.sm};
? `${themeCssVariables.border.radius.sm} 0 0 ${themeCssVariables.border.radius.sm}`
: themeCssVariables.border.radius.sm};
border: 1px solid
${({ theme, error }) =>
error ? theme.border.color.danger : theme.border.color.medium};
${({ error }) =>
error
? themeCssVariables.border.color.danger
: themeCssVariables.border.color.medium};
box-sizing: border-box;
color: ${({ theme }) => theme.font.color.primary};
color: ${themeCssVariables.font.color.primary};
display: flex;
flex-grow: 1;
font-family: ${({ theme, inheritFontStyles }) =>
inheritFontStyles ? 'inherit' : theme.font.family};
font-size: ${({ theme, inheritFontStyles }) =>
inheritFontStyles ? 'inherit' : theme.font.size.md};
font-weight: ${({ theme, inheritFontStyles }) =>
inheritFontStyles ? 'inherit' : theme.font.weight.regular};
font-family: ${({ inheritFontStyles }) =>
inheritFontStyles ? 'inherit' : themeCssVariables.font.family};
font-size: ${({ inheritFontStyles }) =>
inheritFontStyles ? 'inherit' : themeCssVariables.font.size.md};
font-weight: ${({ inheritFontStyles }) =>
inheritFontStyles ? 'inherit' : themeCssVariables.font.weight.regular};
height: ${({ sizeVariant }) =>
sizeVariant === 'xs'
? '20px'
@@ -119,37 +126,37 @@ const StyledInput = styled.input<
? '28px'
: '32px'};
outline: none;
padding: ${({ theme, sizeVariant, autoGrow }) =>
padding: ${({ sizeVariant, autoGrow }) =>
autoGrow
? 0
: sizeVariant === 'xs'
? `${theme.spacing(2)} 0`
: theme.spacing(2)};
padding-left: ${({ theme, LeftIcon, autoGrow }) =>
? `${themeCssVariables.spacing[2]} 0`
: themeCssVariables.spacing[2]};
padding-left: ${({ LeftIcon, autoGrow }) =>
autoGrow
? theme.spacing(1)
? themeCssVariables.spacing[1]
: LeftIcon
? `calc(${theme.spacing(3)} + 16px)`
: theme.spacing(2)};
padding-right: ${({ theme, RightIcon, autoGrow }) =>
? `calc(${themeCssVariables.spacing[3]} + 16px)`
: themeCssVariables.spacing[2]};
padding-right: ${({ RightIcon, autoGrow }) =>
autoGrow
? theme.spacing(1)
? themeCssVariables.spacing[1]
: RightIcon
? `calc(${theme.spacing(3)} + 16px)`
: theme.spacing(2)};
width: ${({ theme, width }) =>
width ? `calc(${width}px + ${theme.spacing(0.5)})` : '100%'};
? `calc(${themeCssVariables.spacing[3]} + 16px)`
: themeCssVariables.spacing[2]};
width: ${({ width }) =>
width ? `calc(${width}px + ${themeCssVariables.spacing[0.5]})` : '100%'};
max-width: ${({ autoGrow }) => (autoGrow ? '100%' : 'none')};
text-overflow: ellipsis;
&::placeholder,
&::-webkit-input-placeholder {
color: ${({ theme }) => theme.font.color.light};
font-family: ${({ theme }) => theme.font.family};
font-weight: ${({ theme }) => theme.font.weight.medium};
color: ${themeCssVariables.font.color.light};
font-family: ${themeCssVariables.font.family};
font-weight: ${themeCssVariables.font.weight.medium};
}
&:disabled {
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
}
&[readonly] {
@@ -157,9 +164,9 @@ const StyledInput = styled.input<
}
&:focus {
${({ theme, error }) => {
${({ error }) => {
return `
border-color: ${error ? theme.border.color.danger : theme.color.blue};
border-color: ${error ? themeCssVariables.border.color.danger : themeCssVariables.color.blue};
`;
}};
}
@@ -169,12 +176,12 @@ const StyledLeftIconContainer = styled.div<{ sizeVariant: TextInputSize }>`
align-items: center;
display: flex;
justify-content: center;
padding-left: ${({ theme, sizeVariant }) =>
padding-left: ${({ sizeVariant }) =>
sizeVariant === 'xs'
? theme.spacing(0.5)
? themeCssVariables.spacing[0.5]
: sizeVariant === 'md' || sizeVariant === 'sm'
? theme.spacing(1)
: theme.spacing(2)};
? themeCssVariables.spacing[1]
: themeCssVariables.spacing[2]};
position: absolute;
top: 0;
bottom: 0;
@@ -187,7 +194,7 @@ const StyledTrailingIconContainer = styled.div<
align-items: center;
display: flex;
justify-content: center;
padding-right: ${({ theme }) => theme.spacing(2)};
padding-right: ${themeCssVariables.spacing[2]};
position: absolute;
top: 0;
bottom: 0;
@@ -200,8 +207,10 @@ const StyledTrailingIcon = styled.div<{
onClick?: () => void;
}>`
align-items: center;
color: ${({ theme, isFocused }) =>
isFocused ? theme.font.color.secondary : theme.font.color.light};
color: ${({ isFocused }) =>
isFocused
? themeCssVariables.font.color.secondary
: themeCssVariables.font.color.light};
cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
display: flex;
justify-content: center;
@@ -276,7 +285,7 @@ const TextInputComponent = forwardRef<
},
ref,
) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const inputRef = useRef<HTMLInputElement>(null);
const combinedRef = useCombinedRefs(ref, inputRef);
@@ -397,21 +406,50 @@ const TextInputComponent = forwardRef<
},
);
const StyledAutogrowWrapper = styled(AutogrowWrapper)<{
sizeVariant?: TextInputSize;
}>`
const autogrowBaseStyle = css`
box-sizing: border-box;
height: ${({ sizeVariant }) =>
sizeVariant === 'xs'
? '20px'
: sizeVariant === 'sm'
? '24px'
: sizeVariant === 'md'
? '28px'
: '32px'};
padding: 0 5px;
`;
const autogrowHeightXs = css`
height: 20px;
`;
const autogrowHeightSm = css`
height: 24px;
`;
const autogrowHeightMd = css`
height: 28px;
`;
const autogrowHeightLg = css`
height: 32px;
`;
const AUTOGROW_HEIGHT_MAP: Record<TextInputSize, string> = {
xs: autogrowHeightXs,
sm: autogrowHeightSm,
md: autogrowHeightMd,
lg: autogrowHeightLg,
};
type StyledAutogrowWrapperProps = React.ComponentProps<
typeof AutogrowWrapper
> & {
sizeVariant?: TextInputSize;
};
const StyledAutogrowWrapper = ({
sizeVariant = 'lg',
className,
children,
node,
}: StyledAutogrowWrapperProps) => (
<AutogrowWrapper
children={children}
node={node}
className={`${autogrowBaseStyle} ${AUTOGROW_HEIGHT_MAP[sizeVariant]} ${className ?? ''}`}
/>
);
const TextInputWithAutoGrowWrapper = forwardRef<
HTMLInputElement,
TextInputWithAutoGrowWrapperProps
packages/twenty-front/src/modules/ui/input/components/TitleInput.tsx
+7 -6
View File
@@ -7,8 +7,9 @@ import { TitleInputAutoOpenEffect } from '@/ui/input/components/TitleInputAutoOp
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 styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
import { themeCssVariables } from 'twenty-ui/theme-constants';
type InputProps = {
instanceId: string;
@@ -35,8 +36,8 @@ const StyledDiv = styled.div<{
}>`
background: inherit;
border: none;
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.primary};
border-radius: ${themeCssVariables.border.radius.sm};
color: ${themeCssVariables.font.color.primary};
cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
overflow: hidden;
height: ${({ sizeVariant }) =>
@@ -47,13 +48,13 @@ const StyledDiv = styled.div<{
: sizeVariant === 'md'
? '28px'
: '32px'};
padding: ${({ theme }) => theme.spacing(0, 1.25)};
padding: ${themeCssVariables.spacing[0]} 5px;
box-sizing: border-box;
display: flex;
align-items: center;
:hover {
background: ${({ theme, disabled }) =>
disabled ? 'inherit' : theme.background.transparent.light};
background: ${({ disabled }) =>
disabled ? 'inherit' : themeCssVariables.background.transparent.light};
}
`;
packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx
+12 -10
View File
@@ -1,5 +1,4 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { CurrencyCode } from 'twenty-shared/constants';
@@ -9,28 +8,31 @@ import { type Currency } from '@/ui/input/components/internal/types/Currency';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { IconChevronDown } from 'twenty-ui/display';
import { CurrencyPickerDropdownSelect } from './CurrencyPickerDropdownSelect';
import { ThemeContext } from 'twenty-ui/theme';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { useContext } from 'react';
const StyledDropdownButtonContainer = styled.div`
align-items: center;
color: ${({ color }) => color ?? 'none'};
cursor: pointer;
display: flex;
border-right: ${({ theme }) => `1px solid ${theme.border.color.medium}`};
border-right: 1px solid ${themeCssVariables.border.color.medium};
height: 32px;
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
padding-left: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[2]};
user-select: none;
&:hover {
background-color: ${({ theme }) => theme.background.transparent.light};
background-color: ${themeCssVariables.background.transparent.light};
}
`;
const StyledIconContainer = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
font-weight: ${({ theme }) => theme.font.weight.medium};
gap: ${themeCssVariables.spacing[1]};
font-weight: ${themeCssVariables.font.weight.medium};
justify-content: center;
svg {
@@ -48,7 +50,7 @@ export const CurrencyPickerDropdownButton = ({
selectedCurrencyCode: string;
onChange: (currency: Currency) => void;
}) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const dropdownId = 'currency-picker-dropdown-id';
packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePicker.tsx
+62 -51
View File
@@ -1,5 +1,5 @@
import styled from '@emotion/styled';
import { lazy, Suspense, type ComponentType } from 'react';
import { styled } from '@linaria/react';
import { Suspense, lazy, type ComponentType, useContext } from 'react';
import type { ReactDatePickerProps as ReactDatePickerLibProps } from 'react-datepicker';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
@@ -12,7 +12,6 @@ import { DatePickerHeader } from '@/ui/input/components/internal/date/components
import { RelativeDatePickerHeader } from '@/ui/input/components/internal/date/components/RelativeDatePickerHeader';
import { getHighlightedDates } from '@/ui/input/components/internal/date/utils/getHighlightedDates';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useTheme } from '@emotion/react';
import { t } from '@lingui/core/macro';
import 'react-datepicker/dist/react-datepicker.css';
@@ -26,10 +25,9 @@ import {
type RelativeDateFilter,
} from 'twenty-shared/utils';
import { IconCalendarX } from 'twenty-ui/display';
import {
MenuItemLeftContent,
StyledHoverableMenuItemBase,
} from 'twenty-ui/navigation';
import { MenuItemLeftContent } from 'twenty-ui/navigation';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { ThemeContext } from 'twenty-ui/theme';
export const MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID =
'date-picker-month-and-year-dropdown-month-select';
@@ -42,13 +40,13 @@ const StyledContainer = styled.div<{ calendarDisabled?: boolean }>`
width: ${DATE_PICKER_CONTAINER_WIDTH}px;
& .react-datepicker {
border-color: ${({ theme }) => theme.border.color.light};
border-color: ${themeCssVariables.border.color.light};
background: transparent;
font-family: 'Inter';
font-size: ${({ theme }) => theme.font.size.md};
font-size: ${themeCssVariables.font.size.md};
border: none;
display: block;
font-weight: ${({ theme }) => theme.font.weight.regular};
font-weight: ${themeCssVariables.font.weight.regular};
}
& .react-datepicker-popper {
@@ -91,20 +89,20 @@ const StyledContainer = styled.div<{ calendarDisabled?: boolean }>`
& .react-datepicker__header__dropdown {
display: flex;
color: ${({ theme }) => theme.font.color.primary};
margin-left: ${({ theme }) => theme.spacing(1)};
margin-bottom: ${({ theme }) => theme.spacing(10)};
color: ${themeCssVariables.font.color.primary};
margin-left: ${themeCssVariables.spacing[1]};
margin-bottom: ${themeCssVariables.spacing[10]};
}
& .react-datepicker__month-dropdown-container,
& .react-datepicker__year-dropdown-container {
text-align: left;
border-radius: ${({ theme }) => theme.border.radius.sm};
margin-left: ${({ theme }) => theme.spacing(1)};
border-radius: ${themeCssVariables.border.radius.sm};
margin-left: ${themeCssVariables.spacing[1]};
margin-right: 0;
padding: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(4)};
background-color: ${({ theme }) => theme.background.tertiary};
padding: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[4]};
background-color: ${themeCssVariables.background.tertiary};
}
& .react-datepicker__month-read-view--down-arrow,
@@ -112,14 +110,14 @@ const StyledContainer = styled.div<{ calendarDisabled?: boolean }>`
height: 5px;
width: 5px;
border-width: 1px 1px 0 0;
border-color: ${({ theme }) => theme.border.color.light};
border-color: ${themeCssVariables.border.color.light};
top: 3px;
right: -6px;
}
& .react-datepicker__year-read-view,
& .react-datepicker__month-read-view {
padding-right: ${({ theme }) => theme.spacing(2)};
padding-right: ${themeCssVariables.spacing[2]};
}
& .react-datepicker__month-dropdown-container {
@@ -133,15 +131,15 @@ const StyledContainer = styled.div<{ calendarDisabled?: boolean }>`
& .react-datepicker__month-dropdown,
& .react-datepicker__year-dropdown {
overflow-y: scroll;
top: ${({ theme }) => theme.spacing(2)};
top: ${themeCssVariables.spacing[2]};
}
& .react-datepicker__month-dropdown {
left: ${({ theme }) => theme.spacing(2)};
left: ${themeCssVariables.spacing[2]};
height: 260px;
}
& .react-datepicker__year-dropdown {
left: calc(${({ theme }) => theme.spacing(9)} + 80px);
left: calc(${themeCssVariables.spacing[9]} + 80px);
width: 100px;
height: 260px;
}
@@ -158,16 +156,16 @@ const StyledContainer = styled.div<{ calendarDisabled?: boolean }>`
& .react-datepicker__year-option,
& .react-datepicker__month-option {
text-align: left;
padding: ${({ theme }) => theme.spacing(2)}
calc(${({ theme }) => theme.spacing(2)} - 2px);
width: calc(100% - ${({ theme }) => theme.spacing(4)});
border-radius: ${({ theme }) => theme.border.radius.xs};
color: ${({ theme }) => theme.font.color.secondary};
padding: ${themeCssVariables.spacing[2]}
calc(${themeCssVariables.spacing[2]} - 2px);
width: calc(100% - ${themeCssVariables.spacing[4]});
border-radius: ${themeCssVariables.border.radius.xs};
color: ${themeCssVariables.font.color.secondary};
cursor: pointer;
margin: 2px;
&:hover {
background: ${({ theme }) => theme.background.transparent.light};
background: ${themeCssVariables.background.transparent.light};
}
}
@@ -183,7 +181,7 @@ const StyledContainer = styled.div<{ calendarDisabled?: boolean }>`
}
& .react-datepicker__day-name {
color: ${({ theme }) => theme.font.color.secondary};
color: ${themeCssVariables.font.color.secondary};
width: 34px;
height: 40px;
line-height: 40px;
@@ -212,10 +210,10 @@ const StyledContainer = styled.div<{ calendarDisabled?: boolean }>`
& .react-datepicker__navigation--previous,
& .react-datepicker__navigation--next {
height: 34px;
border-radius: ${({ theme }) => theme.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.sm};
padding-top: 6px;
&:hover {
background: ${({ theme }) => theme.background.transparent.light};
background: ${themeCssVariables.background.transparent.light};
}
}
& .react-datepicker__navigation--previous {
@@ -241,7 +239,7 @@ const StyledContainer = styled.div<{ calendarDisabled?: boolean }>`
height: 7px;
width: 7px;
border-width: 1px 1px 0 0;
border-color: ${({ theme }) => theme.font.color.tertiary};
border-color: ${themeCssVariables.font.color.tertiary};
}
& .react-datepicker__day--keyboard-selected {
@@ -250,54 +248,65 @@ const StyledContainer = styled.div<{ calendarDisabled?: boolean }>`
& .react-datepicker__day,
.react-datepicker__time-name {
color: ${({ theme }) => theme.font.color.primary};
color: ${themeCssVariables.font.color.primary};
}
& .react-datepicker__day--selected {
background-color: ${({ theme }) => theme.color.blue};
color: ${({ theme }) => theme.background.primary};
background-color: ${themeCssVariables.color.blue};
color: ${themeCssVariables.background.primary};
&.react-datepicker__day:hover {
color: ${({ theme }) => theme.background.primary};
color: ${themeCssVariables.background.primary};
}
}
& .react-datepicker__day--outside-month {
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
}
& .react-datepicker__day:hover {
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
}
& .clearable {
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-bottom: 1px solid ${themeCssVariables.border.color.light};
}
`;
const StyledButtonContainer = styled(StyledHoverableMenuItemBase)`
const StyledButtonContainer = styled.div`
align-items: center;
border-radius: ${themeCssVariables.border.radius.sm};
box-sizing: border-box;
cursor: pointer;
display: flex;
height: 32px;
margin: ${({ theme }) => theme.spacing(1)};
padding: ${({ theme }) => theme.spacing(1)};
margin: ${themeCssVariables.spacing[1]};
padding: ${themeCssVariables.spacing[1]};
width: auto;
&:hover {
background: ${themeCssVariables.background.transparent.light};
}
`;
const StyledButton = styled(MenuItemLeftContent)`
const StyledButtonContent = styled.div`
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[2]};
justify-content: start;
`;
const StyledDatePickerFallback = styled.div`
align-items: center;
background: ${({ theme }) => theme.background.secondary};
border-radius: ${({ theme }) => theme.border.radius.md};
color: ${({ theme }) => theme.font.color.tertiary};
background: ${themeCssVariables.background.secondary};
border-radius: ${themeCssVariables.border.radius.md};
color: ${themeCssVariables.font.color.tertiary};
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[2]};
height: 300px;
justify-content: center;
padding: ${({ theme }) => theme.spacing(4)};
padding: ${themeCssVariables.spacing[4]};
width: 280px;
`;
@@ -352,7 +361,7 @@ export const DatePicker = ({
const { userTimezone } = useUserTimezone();
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const { closeDropdown: closeDropdownMonthSelect } = useCloseDropdown();
const { closeDropdown: closeDropdownYearSelect } = useCloseDropdown();
@@ -513,7 +522,9 @@ export const DatePicker = ({
</div>
{clearable && (
<StyledButtonContainer onClick={handleClear}>
<StyledButton LeftIcon={IconCalendarX} text={t`Clear`} />
<StyledButtonContent>
<MenuItemLeftContent LeftIcon={IconCalendarX} text={t`Clear`} />
</StyledButtonContent>
</StyledButtonContainer>
)}
</StyledContainer>
packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerHeader.tsx
+6 -5
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { Select } from '@/ui/input/components/Select';
@@ -17,16 +17,17 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
import { Temporal } from 'temporal-polyfill';
import { SOURCE_LOCALE } from 'twenty-shared/translations';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledCustomDatePickerHeader = styled.div`
align-items: center;
display: flex;
justify-content: flex-end;
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
padding-top: ${({ theme }) => theme.spacing(2)};
padding-left: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[2]};
padding-top: ${themeCssVariables.spacing[2]};
gap: ${({ theme }) => theme.spacing(1)};
gap: ${themeCssVariables.spacing[1]};
`;
const years = Array.from(
packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerInput.tsx
+11 -13
View File
@@ -1,5 +1,4 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useEffect, useState } from 'react';
import { useIMask } from 'react-imask';
@@ -14,31 +13,30 @@ import { getDateMask } from '@/ui/input/components/internal/date/utils/getDateMa
import { useParseDateInputStringToPlainDate } from '@/ui/input/components/internal/date/hooks/useParseDateInputStringToPlainDate';
import { useParseJSDateToIMaskDateInputString } from '@/ui/input/components/internal/date/hooks/useParseJSDateToIMaskDateInputString';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledInputContainer = styled.div`
align-items: center;
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-top-left-radius: ${({ theme }) => theme.border.radius.md};
border-top-right-radius: ${({ theme }) => theme.border.radius.md};
border-bottom: 1px solid ${themeCssVariables.border.color.light};
border-top-left-radius: ${themeCssVariables.border.radius.md};
border-top-right-radius: ${themeCssVariables.border.radius.md};
display: flex;
height: ${({ theme }) => theme.spacing(8)};
height: ${themeCssVariables.spacing[8]};
width: 100%;
`;
const StyledInput = styled.input<{ hasError?: boolean }>`
background: transparent;
border: none;
color: ${({ theme }) => theme.font.color.primary};
outline: none;
padding: 4px 8px 4px 8px;
font-weight: 500;
font-size: ${({ theme }) => theme.font.size.md};
font-size: ${themeCssVariables.font.size.md};
width: 100%;
${({ hasError, theme }) =>
hasError &&
css`
color: ${theme.color.red};
`};
color: ${({ hasError }) =>
hasError
? themeCssVariables.color.red
: themeCssVariables.font.color.primary};
`;
type DatePickerInputProps = {
packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerWithoutCalendar.tsx
+44 -43
View File
@@ -1,5 +1,5 @@
import styled from '@emotion/styled';
import { lazy, Suspense, type ComponentType } from 'react';
import { styled } from '@linaria/react';
import { Suspense, lazy, type ComponentType, useContext } from 'react';
import type { ReactDatePickerProps as ReactDatePickerLibProps } from 'react-datepicker';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
@@ -10,13 +10,14 @@ import { CalendarStartDay } from 'twenty-shared/constants';
import { detectCalendarStartDay } from '@/localization/utils/detection/detectCalendarStartDay';
import { DatePickerHeader } from '@/ui/input/components/internal/date/components/DatePickerHeader';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useTheme } from '@emotion/react';
import 'react-datepicker/dist/react-datepicker.css';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { Temporal } from 'temporal-polyfill';
import { type Nullable } from 'twenty-shared/types';
import { isDefined, turnJSDateToPlainDate } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { ThemeContext } from 'twenty-ui/theme';
export const MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID =
'date-picker-month-and-year-dropdown-month-select';
@@ -33,13 +34,13 @@ const StyledContainer = styled.div<{
width: ${DATE_PICKER_CONTAINER_WIDTH}px;
& .react-datepicker {
border-color: ${({ theme }) => theme.border.color.light};
border-color: ${themeCssVariables.border.color.light};
background: transparent;
font-family: 'Inter';
font-size: ${({ theme }) => theme.font.size.md};
font-size: ${themeCssVariables.font.size.md};
border: none;
display: block;
font-weight: ${({ theme }) => theme.font.weight.regular};
font-weight: ${themeCssVariables.font.weight.regular};
}
& .react-datepicker-popper {
@@ -82,20 +83,20 @@ const StyledContainer = styled.div<{
& .react-datepicker__header__dropdown {
display: flex;
color: ${({ theme }) => theme.font.color.primary};
margin-left: ${({ theme }) => theme.spacing(1)};
margin-bottom: ${({ theme }) => theme.spacing(10)};
color: ${themeCssVariables.font.color.primary};
margin-left: ${themeCssVariables.spacing[1]};
margin-bottom: ${themeCssVariables.spacing[10]};
}
& .react-datepicker__month-dropdown-container,
& .react-datepicker__year-dropdown-container {
text-align: left;
border-radius: ${({ theme }) => theme.border.radius.sm};
margin-left: ${({ theme }) => theme.spacing(1)};
border-radius: ${themeCssVariables.border.radius.sm};
margin-left: ${themeCssVariables.spacing[1]};
margin-right: 0;
padding: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(4)};
background-color: ${({ theme }) => theme.background.tertiary};
padding: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[4]};
background-color: ${themeCssVariables.background.tertiary};
}
& .react-datepicker__month-read-view--down-arrow,
@@ -103,14 +104,14 @@ const StyledContainer = styled.div<{
height: 5px;
width: 5px;
border-width: 1px 1px 0 0;
border-color: ${({ theme }) => theme.border.color.light};
border-color: ${themeCssVariables.border.color.light};
top: 3px;
right: -6px;
}
& .react-datepicker__year-read-view,
& .react-datepicker__month-read-view {
padding-right: ${({ theme }) => theme.spacing(2)};
padding-right: ${themeCssVariables.spacing[2]};
}
& .react-datepicker__month-dropdown-container {
@@ -124,15 +125,15 @@ const StyledContainer = styled.div<{
& .react-datepicker__month-dropdown,
& .react-datepicker__year-dropdown {
overflow-y: scroll;
top: ${({ theme }) => theme.spacing(2)};
top: ${themeCssVariables.spacing[2]};
}
& .react-datepicker__month-dropdown {
left: ${({ theme }) => theme.spacing(2)};
left: ${themeCssVariables.spacing[2]};
height: 260px;
}
& .react-datepicker__year-dropdown {
left: calc(${({ theme }) => theme.spacing(9)} + 80px);
left: calc(${themeCssVariables.spacing[9]} + 80px);
width: 100px;
height: 260px;
}
@@ -149,16 +150,16 @@ const StyledContainer = styled.div<{
& .react-datepicker__year-option,
& .react-datepicker__month-option {
text-align: left;
padding: ${({ theme }) => theme.spacing(2)}
calc(${({ theme }) => theme.spacing(2)} - 2px);
width: calc(100% - ${({ theme }) => theme.spacing(4)});
border-radius: ${({ theme }) => theme.border.radius.xs};
color: ${({ theme }) => theme.font.color.secondary};
padding: ${themeCssVariables.spacing[2]}
calc(${themeCssVariables.spacing[2]} - 2px);
width: calc(100% - ${themeCssVariables.spacing[4]});
border-radius: ${themeCssVariables.border.radius.xs};
color: ${themeCssVariables.font.color.secondary};
cursor: pointer;
margin: 2px;
&:hover {
background: ${({ theme }) => theme.background.transparent.light};
background: ${themeCssVariables.background.transparent.light};
}
}
@@ -174,7 +175,7 @@ const StyledContainer = styled.div<{
}
& .react-datepicker__day-name {
color: ${({ theme }) => theme.font.color.secondary};
color: ${themeCssVariables.font.color.secondary};
width: 34px;
height: 40px;
line-height: 40px;
@@ -211,10 +212,10 @@ const StyledContainer = styled.div<{
& .react-datepicker__navigation--previous,
& .react-datepicker__navigation--next {
height: 34px;
border-radius: ${({ theme }) => theme.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.sm};
padding-top: 6px;
&:hover {
background: ${({ theme }) => theme.background.transparent.light};
background: ${themeCssVariables.background.transparent.light};
}
}
& .react-datepicker__navigation--previous {
@@ -240,7 +241,7 @@ const StyledContainer = styled.div<{
height: 7px;
width: 7px;
border-width: 1px 1px 0 0;
border-color: ${({ theme }) => theme.font.color.tertiary};
border-color: ${themeCssVariables.font.color.tertiary};
}
& .react-datepicker__day--keyboard-selected {
@@ -249,47 +250,47 @@ const StyledContainer = styled.div<{
& .react-datepicker__day,
.react-datepicker__time-name {
color: ${({ theme }) => theme.font.color.primary};
color: ${themeCssVariables.font.color.primary};
}
& .react-datepicker__day--selected {
background-color: ${({ theme }) => theme.color.blue};
color: ${({ theme }) => theme.background.primary};
background-color: ${themeCssVariables.color.blue};
color: ${themeCssVariables.background.primary};
&.react-datepicker__day:hover {
color: ${({ theme }) => theme.background.primary};
color: ${themeCssVariables.background.primary};
}
}
& .react-datepicker__day--outside-month {
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
}
& .react-datepicker__day:hover {
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
}
& .clearable {
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-bottom: 1px solid ${themeCssVariables.border.color.light};
}
`;
const StyledSpacer = styled.div`
height: ${({ theme }) => theme.spacing(2)};
height: ${themeCssVariables.spacing[2]};
width: auto;
`;
const StyledDatePickerFallback = styled.div`
align-items: center;
background: ${({ theme }) => theme.background.secondary};
border-radius: ${({ theme }) => theme.border.radius.md};
color: ${({ theme }) => theme.font.color.tertiary};
background: ${themeCssVariables.background.secondary};
border-radius: ${themeCssVariables.border.radius.md};
color: ${themeCssVariables.font.color.tertiary};
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[2]};
height: 300px;
justify-content: center;
padding: ${({ theme }) => theme.spacing(4)};
padding: ${themeCssVariables.spacing[4]};
width: 280px;
`;
@@ -324,7 +325,7 @@ export const DatePickerWithoutCalendar = ({
}: DatePickerWithoutCalendarProps) => {
const plainDate = isDefined(date) ? Temporal.PlainDate.from(date) : null;
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const { closeDropdown: closeDropdownMonthSelect } = useCloseDropdown();
const { closeDropdown: closeDropdownYearSelect } = useCloseDropdown();
packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx
+62 -51
View File
@@ -9,25 +9,23 @@ import { DateTimePickerHeader } from '@/ui/input/components/internal/date/compon
import { RelativeDatePickerHeader } from '@/ui/input/components/internal/date/components/RelativeDatePickerHeader';
import { getHighlightedDates } from '@/ui/input/components/internal/date/utils/getHighlightedDates';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { lazy, Suspense, type ComponentType } from 'react';
import { Suspense, lazy, type ComponentType, useContext } from 'react';
import type { ReactDatePickerProps as ReactDatePickerLibProps } from 'react-datepicker';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import 'react-datepicker/dist/react-datepicker.css';
import { IconCalendarX } from 'twenty-ui/display';
import {
MenuItemLeftContent,
StyledHoverableMenuItemBase,
} from 'twenty-ui/navigation';
import { MenuItemLeftContent } from 'twenty-ui/navigation';
import { useGetShiftedDateToSystemTimeZone } from '@/ui/input/components/internal/date/hooks/useGetShiftedDateToSystemTimeZone';
import { useUserFirstDayOfTheWeek } from '@/ui/input/components/internal/date/hooks/useUserFirstDayOfTheWeek';
import { useUserTimezone } from '@/ui/input/components/internal/date/hooks/useUserTimezone';
import { Temporal } from 'temporal-polyfill';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { ThemeContext } from 'twenty-ui/theme';
export const MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID =
'date-picker-month-and-year-dropdown-month-select';
@@ -40,13 +38,13 @@ const StyledContainer = styled.div<{
width: 280px;
& .react-datepicker {
border-color: ${({ theme }) => theme.border.color.light};
border-color: ${themeCssVariables.border.color.light};
background: transparent;
font-family: 'Inter';
font-size: ${({ theme }) => theme.font.size.md};
font-size: ${themeCssVariables.font.size.md};
border: none;
display: block;
font-weight: ${({ theme }) => theme.font.weight.regular};
font-weight: ${themeCssVariables.font.weight.regular};
}
& .react-datepicker-popper {
@@ -89,20 +87,20 @@ const StyledContainer = styled.div<{
& .react-datepicker__header__dropdown {
display: flex;
color: ${({ theme }) => theme.font.color.primary};
margin-left: ${({ theme }) => theme.spacing(1)};
margin-bottom: ${({ theme }) => theme.spacing(10)};
color: ${themeCssVariables.font.color.primary};
margin-left: ${themeCssVariables.spacing[1]};
margin-bottom: ${themeCssVariables.spacing[10]};
}
& .react-datepicker__month-dropdown-container,
& .react-datepicker__year-dropdown-container {
text-align: left;
border-radius: ${({ theme }) => theme.border.radius.sm};
margin-left: ${({ theme }) => theme.spacing(1)};
border-radius: ${themeCssVariables.border.radius.sm};
margin-left: ${themeCssVariables.spacing[1]};
margin-right: 0;
padding: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(4)};
background-color: ${({ theme }) => theme.background.tertiary};
padding: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[4]};
background-color: ${themeCssVariables.background.tertiary};
}
& .react-datepicker__month-read-view--down-arrow,
@@ -110,14 +108,14 @@ const StyledContainer = styled.div<{
height: 5px;
width: 5px;
border-width: 1px 1px 0 0;
border-color: ${({ theme }) => theme.border.color.light};
border-color: ${themeCssVariables.border.color.light};
top: 3px;
right: -6px;
}
& .react-datepicker__year-read-view,
& .react-datepicker__month-read-view {
padding-right: ${({ theme }) => theme.spacing(2)};
padding-right: ${themeCssVariables.spacing[2]};
}
& .react-datepicker__month-dropdown-container {
@@ -131,15 +129,15 @@ const StyledContainer = styled.div<{
& .react-datepicker__month-dropdown,
& .react-datepicker__year-dropdown {
overflow-y: scroll;
top: ${({ theme }) => theme.spacing(2)};
top: ${themeCssVariables.spacing[2]};
}
& .react-datepicker__month-dropdown {
left: ${({ theme }) => theme.spacing(2)};
left: ${themeCssVariables.spacing[2]};
height: 260px;
}
& .react-datepicker__year-dropdown {
left: calc(${({ theme }) => theme.spacing(9)} + 80px);
left: calc(${themeCssVariables.spacing[9]} + 80px);
width: 100px;
height: 260px;
}
@@ -156,16 +154,16 @@ const StyledContainer = styled.div<{
& .react-datepicker__year-option,
& .react-datepicker__month-option {
text-align: left;
padding: ${({ theme }) => theme.spacing(2)}
calc(${({ theme }) => theme.spacing(2)} - 2px);
width: calc(100% - ${({ theme }) => theme.spacing(4)});
border-radius: ${({ theme }) => theme.border.radius.xs};
color: ${({ theme }) => theme.font.color.secondary};
padding: ${themeCssVariables.spacing[2]}
calc(${themeCssVariables.spacing[2]} - 2px);
width: calc(100% - ${themeCssVariables.spacing[4]});
border-radius: ${themeCssVariables.border.radius.xs};
color: ${themeCssVariables.font.color.secondary};
cursor: pointer;
margin: 2px;
&:hover {
background: ${({ theme }) => theme.background.transparent.light};
background: ${themeCssVariables.background.transparent.light};
}
}
@@ -181,7 +179,7 @@ const StyledContainer = styled.div<{
}
& .react-datepicker__day-name {
color: ${({ theme }) => theme.font.color.secondary};
color: ${themeCssVariables.font.color.secondary};
width: 34px;
height: 40px;
line-height: 40px;
@@ -210,10 +208,10 @@ const StyledContainer = styled.div<{
& .react-datepicker__navigation--previous,
& .react-datepicker__navigation--next {
height: 34px;
border-radius: ${({ theme }) => theme.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.sm};
padding-top: 6px;
&:hover {
background: ${({ theme }) => theme.background.transparent.light};
background: ${themeCssVariables.background.transparent.light};
}
}
& .react-datepicker__navigation--previous {
@@ -239,7 +237,7 @@ const StyledContainer = styled.div<{
height: 7px;
width: 7px;
border-width: 1px 1px 0 0;
border-color: ${({ theme }) => theme.font.color.tertiary};
border-color: ${themeCssVariables.font.color.tertiary};
}
& .react-datepicker__day--keyboard-selected {
@@ -248,55 +246,66 @@ const StyledContainer = styled.div<{
& .react-datepicker__day,
.react-datepicker__time-name {
color: ${({ theme }) => theme.font.color.primary};
color: ${themeCssVariables.font.color.primary};
}
& .react-datepicker__day--selected {
background-color: ${({ theme }) => theme.color.blue};
color: ${({ theme }) => theme.background.primary};
background-color: ${themeCssVariables.color.blue};
color: ${themeCssVariables.background.primary};
&.react-datepicker__day:hover {
color: ${({ theme }) => theme.background.primary};
color: ${themeCssVariables.background.primary};
}
}
& .react-datepicker__day--outside-month {
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
}
& .react-datepicker__day:hover {
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
}
`;
const StyledSeparator = styled.div`
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-bottom: 1px solid ${themeCssVariables.border.color.light};
width: 100%;
`;
const StyledButtonContainer = styled(StyledHoverableMenuItemBase)`
const StyledButtonContainer = styled.div`
align-items: center;
border-radius: ${themeCssVariables.border.radius.sm};
box-sizing: border-box;
cursor: pointer;
display: flex;
height: 32px;
margin: ${({ theme }) => theme.spacing(1)};
padding: ${({ theme }) => theme.spacing(1)};
margin: ${themeCssVariables.spacing[1]};
padding: ${themeCssVariables.spacing[1]};
width: auto;
&:hover {
background: ${themeCssVariables.background.transparent.light};
}
`;
const StyledButton = styled(MenuItemLeftContent)`
const StyledButtonContent = styled.div`
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[2]};
justify-content: start;
`;
const StyledDatePickerFallback = styled.div`
align-items: center;
background: ${({ theme }) => theme.background.secondary};
border-radius: ${({ theme }) => theme.border.radius.md};
color: ${({ theme }) => theme.font.color.tertiary};
background: ${themeCssVariables.background.secondary};
border-radius: ${themeCssVariables.border.radius.md};
color: ${themeCssVariables.font.color.tertiary};
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[2]};
height: 300px;
justify-content: center;
padding: ${({ theme }) => theme.spacing(4)};
padding: ${themeCssVariables.spacing[4]};
width: 280px;
`;
@@ -346,7 +355,7 @@ export const DateTimePicker = ({
hideHeaderInput,
timeZone,
}: DateTimePickerProps) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const { userFirstDayOfTheWeek } = useUserFirstDayOfTheWeek();
@@ -538,7 +547,9 @@ export const DateTimePicker = ({
<>
<StyledSeparator />
<StyledButtonContainer onClick={handleClear}>
<StyledButton LeftIcon={IconCalendarX} text={t`Clear`} />
<StyledButtonContent>
<MenuItemLeftContent LeftIcon={IconCalendarX} text={t`Clear`} />
</StyledButtonContent>
</StyledButtonContainer>
</>
)}
packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePickerHeader.tsx
+7 -6
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
@@ -15,20 +15,21 @@ import {
MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
} from './DateTimePicker';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledCustomDatePickerHeader = styled.div`
align-items: center;
display: flex;
justify-content: flex-end;
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
padding-top: ${({ theme }) => theme.spacing(2)};
padding-left: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[2]};
padding-top: ${themeCssVariables.spacing[2]};
gap: ${({ theme }) => theme.spacing(1)};
gap: ${themeCssVariables.spacing[1]};
`;
const StyledSeparator = styled.div`
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-bottom: 1px solid ${themeCssVariables.border.color.light};
height: 1px;
width: 100%;
`;
packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePickerInput.tsx
+8 -7
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useIMask } from 'react-imask';
import { useDateTimeFormat } from '@/localization/hooks/useDateTimeFormat';
@@ -18,25 +18,26 @@ import { useEffect, useState } from 'react';
import { Temporal } from 'temporal-polyfill';
import { isDefined } from 'twenty-shared/utils';
import { isDifferentZonedDateTime } from '~/utils/dates/isDifferentZonedDateTime';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledInputContainer = styled.div`
align-items: center;
border-top-left-radius: ${({ theme }) => theme.border.radius.md};
border-top-right-radius: ${({ theme }) => theme.border.radius.md};
border-top-left-radius: ${themeCssVariables.border.radius.md};
border-top-right-radius: ${themeCssVariables.border.radius.md};
display: flex;
height: ${({ theme }) => theme.spacing(8)};
height: ${themeCssVariables.spacing[8]};
width: 100%;
`;
const StyledInput = styled.input<{ hasError?: boolean }>`
background: transparent;
border: none;
color: ${({ theme }) => theme.font.color.primary};
color: ${themeCssVariables.font.color.primary};
outline: none;
padding-left: ${({ theme }) => theme.spacing(2)};
padding-left: ${themeCssVariables.spacing[2]};
font-weight: 500;
font-size: ${({ theme }) => theme.font.size.md};
font-size: ${themeCssVariables.font.size.md};
width: 140px;
`;
packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx
+5 -3
View File
@@ -5,7 +5,7 @@ import { RELATIVE_DATETIME_UNITS_SELECT_OPTIONS } from '@/ui/input/components/in
import { RELATIVE_DATE_UNITS_SELECT_OPTIONS } from '@/ui/input/components/internal/date/constants/RelativeDateUnitSelectOptions';
import { t } from '@lingui/core/macro';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useState } from 'react';
import { type Nullable } from 'twenty-shared/types';
import {
@@ -14,12 +14,14 @@ import {
type RelativeDateFilterDirection,
type RelativeDateFilterUnit,
} from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div<{ noPadding: boolean }>`
display: flex;
align-items: center;
gap: ${({ theme }) => theme.spacing(1)};
padding: ${({ theme, noPadding }) => (noPadding ? '0' : theme.spacing(2))};
gap: ${themeCssVariables.spacing[1]};
padding: ${({ noPadding }) =>
noPadding ? '0' : themeCssVariables.spacing[2]};
padding-bottom: 0;
`;
packages/twenty-front/src/modules/ui/input/components/internal/date/components/TimeZoneAbbreviation.tsx
+4 -3
View File
@@ -1,14 +1,15 @@
import { useUserTimezone } from '@/ui/input/components/internal/date/hooks/useUserTimezone';
import { getTimezoneAbbreviationForZonedDateTime } from '@/ui/input/components/internal/date/utils/getTimeZoneAbbreviationForZonedDateTime';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { isNonEmptyString } from '@sniptt/guards';
import { type Temporal } from 'temporal-polyfill';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledTimezoneAbbreviation = styled.span<{ hasError?: boolean }>`
background: transparent;
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.sm};
font-size: ${themeCssVariables.font.size.sm};
width: fit-content;
user-select: none;
packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
+13 -12
View File
@@ -1,9 +1,8 @@
import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
import { type Country } from '@/ui/input/components/internal/types/Country';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useEffect, useState } from 'react';
import { styled } from '@linaria/react';
import { useContext, useEffect, useState } from 'react';
import { PhoneCountryPickerDropdownSelect } from './PhoneCountryPickerDropdownSelect';
@@ -14,6 +13,8 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
import 'react-phone-number-input/style.css';
import { isDefined } from 'twenty-shared/utils';
import { IconChevronDown, IconWorld } from 'twenty-ui/display';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { ThemeContext } from 'twenty-ui/theme';
type StyledDropdownButtonProps = {
isUnfolded: boolean;
@@ -22,30 +23,30 @@ type StyledDropdownButtonProps = {
const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>`
align-items: center;
background: none;
border-radius: ${({ theme }) => theme.border.radius.xs} 0 0
${({ theme }) => theme.border.radius.xs};
border-radius: ${themeCssVariables.border.radius.xs} 0 0
${themeCssVariables.border.radius.xs};
color: ${({ color }) => color ?? 'none'};
cursor: pointer;
display: flex;
height: 32px;
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(1)};
padding-left: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[1]};
user-select: none;
border-right: 1px solid ${({ theme }) => theme.border.color.medium};
border-right: 1px solid ${themeCssVariables.border.color.medium};
&:hover {
background-color: ${({ theme }) => theme.background.transparent.light};
background-color: ${themeCssVariables.background.transparent.light};
}
`;
const StyledIconContainer = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
display: flex;
gap: ${({ theme }) => theme.spacing(0.5)};
gap: ${themeCssVariables.spacing[0.5]};
justify-content: center;
svg {
@@ -74,7 +75,7 @@ export const PhoneCountryPickerDropdownButton = ({
value: string;
onChange: (countryCode: string) => void;
}) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const [selectedCountry, setSelectedCountry] = useState<Country>();
packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx
+5 -4
View File
@@ -1,5 +1,5 @@
import { t } from '@lingui/core/macro';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useMemo, useState } from 'react';
import { type Country } from '@/ui/input/components/internal/types/Country';
@@ -10,16 +10,17 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import 'react-phone-number-input/style.css';
import { MenuItem, MenuItemSelectAvatar } from 'twenty-ui/navigation';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledIconContainer = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
display: flex;
padding-right: ${({ theme }) => theme.spacing(1)};
padding-right: ${themeCssVariables.spacing[1]};
svg {
align-items: center;
border-radius: ${({ theme }) => theme.border.radius.xs};
border-radius: ${themeCssVariables.border.radius.xs};
display: flex;
height: 12px;
justify-content: center;
packages/twenty-front/src/modules/ui/input/relation-picker/components/CreateNewButton.tsx
+59 -9
View File
@@ -1,13 +1,63 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { css } from '@linaria/core';
import React from 'react';
import { MenuItem } from 'twenty-ui/navigation';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledCreateNewButton = styled(MenuItem)<{ hovered?: boolean }>`
${({ hovered, theme }) =>
hovered &&
css`
background: ${theme.background.transparent.light};
`}
const hoveredStyle = css`
background: ${themeCssVariables.background.transparent.light};
`;
export const CreateNewButton = StyledCreateNewButton;
type CreateNewButtonProps = React.ComponentProps<typeof MenuItem> & {
hovered?: boolean;
};
export const CreateNewButton = ({
hovered,
className,
accent,
withIconContainer,
iconButtons,
isIconDisplayedOnHoverOnly,
isTooltipOpen,
LeftIcon,
LeftComponent,
RightIcon,
RightComponent,
onClick,
onMouseEnter,
onMouseLeave,
testId,
disabled,
text,
contextualTextPosition,
contextualText,
hasSubMenu,
focused,
hotKeys,
isSubMenuOpened,
}: CreateNewButtonProps) => (
<MenuItem
accent={accent}
withIconContainer={withIconContainer}
iconButtons={iconButtons}
isIconDisplayedOnHoverOnly={isIconDisplayedOnHoverOnly}
isTooltipOpen={isTooltipOpen}
LeftIcon={LeftIcon}
LeftComponent={LeftComponent}
RightIcon={RightIcon}
RightComponent={RightComponent}
onClick={onClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
testId={testId}
disabled={disabled}
text={text}
contextualTextPosition={contextualTextPosition}
contextualText={contextualText}
hasSubMenu={hasSubMenu}
focused={focused}
hotKeys={hotKeys}
isSubMenuOpened={isSubMenuOpened}
className={`${className ?? ''} ${hovered ? hoveredStyle : ''}`}
/>
);
packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx
+10 -8
View File
@@ -1,15 +1,17 @@
import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
import { type CSSWidth } from '@/ui/types/CSSWidth';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
const StyledDropdownMenuSkeletonContainer = styled.div`
--horizontal-padding: ${({ theme }) => theme.spacing(1)};
--vertical-padding: ${({ theme }) => theme.spacing(2)};
--horizontal-padding: ${themeCssVariables.spacing[1]};
--vertical-padding: ${themeCssVariables.spacing[2]};
border-radius: ${({ theme }) => theme.border.radius.sm};
gap: ${({ theme }) => theme.spacing(2)};
border-radius: ${themeCssVariables.border.radius.sm};
gap: ${themeCssVariables.spacing[2]};
box-sizing: border-box;
flex-shrink: 0;
@@ -17,7 +19,7 @@ const StyledDropdownMenuSkeletonContainer = styled.div`
padding-left: var(--horizontal-padding);
padding-right: var(--horizontal-padding);
height: ${({ theme }) => theme.spacing(8)};
height: ${themeCssVariables.spacing[8]};
`;
export const DropdownMenuSkeletonItem = ({
@@ -25,7 +27,7 @@ export const DropdownMenuSkeletonItem = ({
}: {
width?: CSSWidth;
}) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
return (
<StyledDropdownMenuSkeletonContainer>
<SkeletonTheme
packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableItem.tsx
+3 -2
View File
@@ -1,7 +1,8 @@
import { useTheme } from '@emotion/react';
import { Draggable } from '@hello-pangea/dnd';
import { isFunction } from '@sniptt/guards';
import { isDefined } from 'twenty-shared/utils';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
type DraggableItemProps = {
draggableId: string;
@@ -28,7 +29,7 @@ export const DraggableItem = ({
disableDraggingBackground,
containerOffsetY,
}: DraggableItemProps) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
return (
<Draggable
packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableList.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import {
DragDropContext,
Droppable,
packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ import { type DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
import { type GlobalHotkeysConfig } from '@/ui/utilities/hotkey/types/GlobalHotkeysConfig';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import {
type Placement,
autoUpdate,
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownContent.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { type Ref, forwardRef } from 'react';
const StyledInternalBaseDropdownContent = styled.div<{
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx
+17 -16
View File
@@ -1,26 +1,27 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { type ComponentProps, type MouseEvent } from 'react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledHeader = styled.li`
align-items: center;
color: ${({ theme }) => theme.font.color.primary};
color: ${themeCssVariables.font.color.primary};
cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
display: flex;
font-size: ${({ theme, onClick }) =>
onClick ? theme.font.size.sm : theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.medium};
border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
border-top-right-radius: ${({ theme }) => theme.border.radius.sm};
padding: ${({ theme }) => theme.spacing(1)};
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
font-size: ${({ onClick }) =>
onClick ? themeCssVariables.font.size.sm : themeCssVariables.font.size.md};
font-weight: ${themeCssVariables.font.weight.medium};
border-top-left-radius: ${themeCssVariables.border.radius.sm};
border-top-right-radius: ${themeCssVariables.border.radius.sm};
padding: ${themeCssVariables.spacing[1]};
border-bottom: 1px solid ${themeCssVariables.border.color.light};
height: ${({ theme }) => theme.spacing(6)};
height: ${themeCssVariables.spacing[6]};
user-select: none;
&:hover {
background: ${({ theme, onClick }) =>
onClick ? theme.background.transparent.light : 'none'};
background: ${({ onClick }) =>
onClick ? themeCssVariables.background.transparent.light : 'none'};
}
flex-shrink: 0;
@@ -28,20 +29,20 @@ const StyledHeader = styled.li`
const StyledChildrenWrapper = styled.span`
overflow: hidden;
padding: 0 ${({ theme }) => theme.spacing(1)};
padding: 0 ${themeCssVariables.spacing[1]};
white-space: nowrap;
text-overflow: ellipsis;
`;
const StyledEndComponent = styled.div`
display: inline-flex;
color: ${({ theme }) => theme.font.color.tertiary};
color: ${themeCssVariables.font.color.tertiary};
margin-left: auto;
margin-right: 0;
& > svg {
height: ${({ theme }) => theme.icon.size.md}px;
width: ${({ theme }) => theme.icon.size.md}px;
height: ${themeCssVariables.icon.size.md}px;
width: ${themeCssVariables.icon.size.md}px;
}
`;
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent.tsx
+11 -10
View File
@@ -1,12 +1,13 @@
import { type MouseEvent, type ReactElement } from 'react';
import styled from '@emotion/styled';
import { useTheme } from '@emotion/react';
import { type MouseEvent, type ReactElement, useContext } from 'react';
import { styled } from '@linaria/react';
import {
type Avatar,
type AvatarProps,
type IconComponent,
} from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { ThemeContext } from 'twenty-ui/theme';
const StyledNonClickableStartIcon = styled.div`
align-items: center;
@@ -16,18 +17,18 @@ const StyledNonClickableStartIcon = styled.div`
display: flex;
flex-direction: row;
font-family: ${({ theme }) => theme.font.family};
font-weight: ${({ theme }) => theme.font.weight.regular};
gap: ${({ theme }) => theme.spacing(1)};
font-family: ${themeCssVariables.font.family};
font-weight: ${themeCssVariables.font.weight.regular};
gap: ${themeCssVariables.spacing[1]};
justify-content: center;
white-space: nowrap;
height: ${({ theme }) => theme.spacing(6)};
width: ${({ theme }) => theme.spacing(6)};
height: ${themeCssVariables.spacing[6]};
width: ${themeCssVariables.spacing[6]};
`;
const StyledAvatarWrapper = styled.div`
padding: ${({ theme }) => theme.spacing(1)};
padding: ${themeCssVariables.spacing[1]};
`;
export const DropdownMenuHeaderLeftComponent = ({
@@ -40,7 +41,7 @@ export const DropdownMenuHeaderLeftComponent = ({
}
| Record<never, never>
)) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
return (
<>
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInnerSelect.tsx
+11 -9
View File
@@ -2,26 +2,28 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
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 { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { IconChevronDown } from 'twenty-ui/display';
import { type SelectOption } from 'twenty-ui/input';
import { MenuItemSelect } from 'twenty-ui/navigation';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
const StyledDropdownMenuInnerSelectDropdownButton = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.secondary};
color: ${themeCssVariables.font.color.secondary};
display: flex;
font-size: ${({ theme }) => theme.font.size.sm};
font-size: ${themeCssVariables.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
height: ${({ theme }) => theme.spacing(7)};
font-weight: ${themeCssVariables.font.weight.medium};
height: ${themeCssVariables.spacing[7]};
justify-content: space-between;
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
padding-left: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[2]};
width: 100%;
box-sizing: border-box;
@@ -43,7 +45,7 @@ export const DropdownMenuInnerSelect = ({
dropdownId,
widthInPixels,
}: DropdownMenuInnerSelectProps) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const { closeDropdown } = useCloseDropdown();
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
+9 -12
View File
@@ -1,5 +1,4 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import {
forwardRef,
useRef,
@@ -11,6 +10,7 @@ import 'react-phone-number-input/style.css';
import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
import { useCombinedRefs } from '~/hooks/useCombinedRefs';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledInput = styled.input<{
withRightComponent?: boolean;
@@ -19,16 +19,13 @@ const StyledInput = styled.input<{
${TEXT_INPUT_STYLE}
box-sizing: border-box;
font-weight: ${({ theme }) => theme.font.weight.medium};
font-weight: ${themeCssVariables.font.weight.medium};
height: 32px;
position: relative;
width: 100%;
${({ withRightComponent }) =>
withRightComponent &&
css`
padding-right: 32px;
`}
padding-right: ${({ withRightComponent }) =>
withRightComponent ? '32px' : '0'};
`;
const StyledInputContainer = styled.div`
@@ -38,20 +35,20 @@ const StyledInputContainer = styled.div`
width: 100%;
&:not(:first-of-type) {
padding: ${({ theme }) => theme.spacing(1)};
padding: ${themeCssVariables.spacing[1]};
}
`;
const StyledRightContainer = styled.div`
position: absolute;
right: ${({ theme }) => theme.spacing(2)};
right: ${themeCssVariables.spacing[2]};
top: 50%;
transform: translateY(-50%);
`;
const StyledErrorDiv = styled.div`
color: ${({ theme }) => theme.color.red};
padding: 0 ${({ theme }) => theme.spacing(2)};
color: ${themeCssVariables.color.red};
padding: 0 ${themeCssVariables.spacing[2]};
`;
type HTMLInputProps = InputHTMLAttributes<HTMLInputElement>;
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
+5 -4
View File
@@ -1,10 +1,11 @@
import { DROPDOWN_MENU_ITEMS_CONTAINER_MAX_HEIGHT } from '@/ui/layout/dropdown/constants/DropdownMenuItemsContainerMaxHeight';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledExternalContainer = styled.div<{
maxHeight?: number;
}>`
--padding: ${({ theme }) => theme.spacing(1)};
--padding: ${themeCssVariables.spacing[1]};
align-items: flex-start;
display: flex;
@@ -28,11 +29,11 @@ const StyledScrollableContainer = styled.div<{ maxHeight?: number }>`
width: 100%;
overflow-y: auto;
scrollbar-color: ${({ theme }) => theme.border.color.medium} transparent;
scrollbar-color: ${themeCssVariables.border.color.medium} transparent;
scrollbar-width: 4px;
*::-webkit-scrollbar-thumb {
border-radius: ${({ theme }) => theme.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.sm};
}
`;
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx
+4 -3
View File
@@ -1,13 +1,14 @@
import { msg } from '@lingui/core/macro';
import { useLingui } from '@lingui/react/macro';
import { useInputFocusWithoutScrollOnMount } from '@/ui/input/hooks/useInputFocusWithoutScrollOnMount';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { forwardRef, type InputHTMLAttributes } from 'react';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledDropdownMenuSearchInputContainer = styled.div`
align-items: center;
--vertical-padding: ${({ theme }) => theme.spacing(2)};
--vertical-padding: ${themeCssVariables.spacing[2]};
display: flex;
flex-direction: row;
min-height: calc(36px - 2 * var(--vertical-padding));
@@ -19,7 +20,7 @@ const StyledDropdownMenuSearchInputContainer = styled.div`
const StyledInput = styled.input`
${TEXT_INPUT_STYLE}
font-size: ${({ theme }) => theme.font.size.sm};
font-size: ${themeCssVariables.font.size.sm};
background-color: transparent;
width: 100%;
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSectionLabel.tsx
+6 -5
View File
@@ -1,15 +1,16 @@
import styled from '@emotion/styled';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { styled } from '@linaria/react';
const StyledDropdownMenuSectionLabel = styled.div`
background-color: ${({ theme }) => theme.background.transparent.lighter};
color: ${({ theme }) => theme.font.color.tertiary};
background-color: ${themeCssVariables.background.transparent.lighter};
color: ${themeCssVariables.font.color.tertiary};
min-height: 20px;
width: auto;
font-size: ${({ theme }) => theme.font.size.xxs};
font-size: ${themeCssVariables.font.size.xxs};
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: ${({ theme }) => theme.spacing(1)};
padding-left: ${themeCssVariables.spacing[1]};
user-select: none;
`;
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSeparator.tsx
+3 -5
View File
@@ -1,10 +1,8 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledDropdownMenuSeparator = styled.div`
background-color: ${({ theme }) =>
theme.name === 'dark'
? theme.background.transparent.light
: theme.border.color.light};
background-color: ${themeCssVariables.border.color.light};
min-height: 1px;
width: 100%;
`;
packages/twenty-front/src/modules/ui/layout/dropdown/components/OptionsDropdownMenu.tsx
+1 -3
View File
@@ -6,7 +6,6 @@ import { useToggleDropdown } from '@/ui/layout/dropdown/hooks/useToggleDropdown'
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { useTheme } from '@emotion/react';
import { useLingui } from '@lingui/react/macro';
import { type ReactNode, useId } from 'react';
import { Button } from 'twenty-ui/input';
@@ -30,7 +29,6 @@ export const OptionsDropdownMenu = ({
const generatedDropdownId = useId();
const dropdownId = dropdownIdFromProps ?? generatedDropdownId;
const { t } = useLingui();
const theme = useTheme();
const { toggleDropdown } = useToggleDropdown();
const listId = selectableListId ?? dropdownId;
@@ -75,7 +73,7 @@ export const OptionsDropdownMenu = ({
/>
}
dropdownPlacement="top-end"
dropdownOffset={{ y: parseInt(theme.spacing(2), 10) }}
dropdownOffset={{ y: 8 }}
globalHotkeysConfig={{
enableGlobalHotkeysWithModifiers: true,
enableGlobalHotkeysConflictingWithKeyboard: false,
packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx
+16 -13
View File
@@ -1,4 +1,5 @@
import styled from '@emotion/styled';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { styled } from '@linaria/react';
type StyledDropdownButtonProps = {
isUnfolded: boolean;
@@ -8,30 +9,32 @@ type StyledDropdownButtonProps = {
export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>`
align-items: center;
background: ${({ theme, isUnfolded, transparentBackground }) =>
background: ${({ isUnfolded, transparentBackground }) =>
transparentBackground
? 'none'
: isUnfolded
? theme.background.transparent.light
: theme.background.primary};
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ isActive, theme }) =>
isActive ? theme.color.blue : theme.font.color.secondary};
? themeCssVariables.background.transparent.light
: themeCssVariables.background.primary};
border-radius: ${themeCssVariables.border.radius.sm};
color: ${({ isActive }) =>
isActive
? themeCssVariables.color.blue
: themeCssVariables.font.color.secondary};
cursor: pointer;
display: flex;
padding: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(1)};
padding: ${themeCssVariables.spacing[1]};
padding-left: ${themeCssVariables.spacing[1]};
padding-right: ${({ theme }) => theme.spacing(2)};
padding-right: ${themeCssVariables.spacing[2]};
user-select: none;
&:hover {
background: ${({ theme, isUnfolded, transparentBackground }) =>
background: ${({ isUnfolded, transparentBackground }) =>
transparentBackground
? 'transparent'
: isUnfolded
? theme.background.transparent.medium
: theme.background.transparent.light};
? themeCssVariables.background.transparent.medium
: themeCssVariables.background.transparent.light};
}
`;
packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownMenuSubheader.tsx
+4 -3
View File
@@ -1,8 +1,9 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { Label } from 'twenty-ui/display';
import { themeCssVariables } from 'twenty-ui/theme-constants';
export const StyledDropdownMenuSubheader = styled(Label)`
background-color: ${({ theme }) => theme.background.transparent.lighter};
padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(2)}`};
background-color: ${themeCssVariables.background.transparent.lighter};
padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]};
width: 100%;
`;
packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx
+17 -12
View File
@@ -1,4 +1,5 @@
import styled from '@emotion/styled';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { styled } from '@linaria/react';
type StyledDropdownButtonProps = {
isUnfolded?: boolean;
@@ -9,25 +10,29 @@ export const StyledHeaderDropdownButton = styled.button<StyledDropdownButtonProp
font-family: inherit;
align-items: center;
border: none;
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ isActive, theme }) =>
isActive ? theme.color.blue : theme.font.color.secondary};
border-radius: ${themeCssVariables.border.radius.sm};
color: ${({ isActive }) =>
isActive
? themeCssVariables.color.blue
: themeCssVariables.font.color.secondary};
cursor: pointer;
display: flex;
padding: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(2)};
padding: ${themeCssVariables.spacing[1]};
padding-left: ${themeCssVariables.spacing[2]};
padding-right: ${({ theme }) => theme.spacing(2)};
padding-right: ${themeCssVariables.spacing[2]};
user-select: none;
background: ${({ theme, isUnfolded }) =>
isUnfolded ? theme.background.transparent.light : theme.background.primary};
background: ${({ isUnfolded }) =>
isUnfolded
? themeCssVariables.background.transparent.light
: themeCssVariables.background.primary};
&:hover {
background: ${({ theme, isUnfolded }) =>
background: ${({ isUnfolded }) =>
isUnfolded
? theme.background.transparent.medium
: theme.background.transparent.light};
? themeCssVariables.background.transparent.medium
: themeCssVariables.background.transparent.light};
}
`;
packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/Dropdown.stories.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import {
type Decorator,
type Meta,
packages/twenty-front/src/modules/ui/layout/dropdown/components/internal/DropdownInternalContainer.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useLis
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import {
FloatingPortal,
type Placement,
packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandableList.tsx
+5 -4
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import {
type ReactElement,
useCallback,
@@ -13,11 +13,12 @@ import { isDefined } from 'twenty-shared/utils';
import { ChipSize } from 'twenty-ui/components';
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
import { AnimatedContainer } from 'twenty-ui/utilities';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
gap: ${themeCssVariables.spacing[1]};
justify-content: space-between;
min-width: 100%;
width: 100%;
@@ -25,7 +26,7 @@ const StyledContainer = styled.div`
const StyledChildrenContainer = styled.div`
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
gap: ${themeCssVariables.spacing[1]};
overflow: hidden;
max-width: 100%;
flex: 0 1 fit-content;
@@ -43,7 +44,7 @@ const StyledChildContainer = styled.div`
`;
const StyledUnShrinkableContainer = styled.div`
color: ${({ theme }) => theme.font.color.primary};
color: ${themeCssVariables.font.color.primary};
flex-shrink: 0;
width: 24px;
packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedFieldDisplay.tsx
+4 -3
View File
@@ -1,9 +1,10 @@
import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { flip, FloatingPortal, offset, useFloating } from '@floating-ui/react';
import { type ReactNode } from 'react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
type ExpandedFieldDisplayProps = {
anchorElement?: HTMLElement;
@@ -14,8 +15,8 @@ type ExpandedFieldDisplayProps = {
const StyledExpandedFieldContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(1)};
padding: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[1]};
padding: ${themeCssVariables.spacing[2]};
overflow: auto;
box-sizing: border-box;
height: 300px;
packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedListDropdown.tsx
+4 -3
View File
@@ -2,9 +2,10 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
import { StyledDropdownContentContainer } from '@/ui/layout/dropdown/components/internal/DropdownInternalContainer';
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { FloatingPortal, offset, shift, useFloating } from '@floating-ui/react';
import { type ReactNode } from 'react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
type ExpandedListDropdownProps = {
anchorElement?: HTMLElement;
@@ -15,8 +16,8 @@ type ExpandedListDropdownProps = {
const StyledExpandedListContainer = styled.div`
display: flex;
flex-wrap: wrap;
gap: ${({ theme }) => theme.spacing(1)};
padding: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[1]};
padding: ${themeCssVariables.spacing[2]};
`;
// TODO: unify this and use Dropdown component instead
packages/twenty-front/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx
+3 -2
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { expect, userEvent, within } from 'storybook/test';
@@ -7,9 +7,10 @@ import { isDefined } from 'twenty-shared/utils';
import { Tag } from 'twenty-ui/components';
import { ComponentDecorator } from 'twenty-ui/testing';
import { MAIN_COLOR_NAMES } from 'twenty-ui/theme';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
padding: ${({ theme }) => theme.spacing(1)};
padding: ${themeCssVariables.spacing[1]};
width: 300px;
`;
packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx
+7 -6
View File
@@ -4,8 +4,9 @@ import {
Breadcrumb,
type BreadcrumbProps,
} from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useIsMobile } from 'twenty-ui/utilities';
import { themeCssVariables } from 'twenty-ui/theme-constants';
type FullScreenContainerProps = {
children: JSX.Element | JSX.Element[];
@@ -14,7 +15,7 @@ type FullScreenContainerProps = {
};
const StyledFullScreen = styled.div`
background: ${({ theme }) => theme.background.noisy};
background: ${themeCssVariables.background.noisy};
display: flex;
flex-direction: column;
width: 100%;
@@ -22,14 +23,14 @@ const StyledFullScreen = styled.div`
const StyledMainContainer = styled.div`
height: calc(
100% - ${PAGE_BAR_MIN_HEIGHT}px - ${({ theme }) => theme.spacing(2 * 2 + 5)}
100% - ${PAGE_BAR_MIN_HEIGHT}px - ${themeCssVariables.spacing[9]}
);
padding: ${({ theme }) =>
`0 ${theme.spacing(3)} ${theme.spacing(3)} ${theme.spacing(3)}`};
padding: 0 ${themeCssVariables.spacing[3]} ${themeCssVariables.spacing[3]}
${themeCssVariables.spacing[3]};
`;
const StyledPageHeader = styled(PageHeader)`
padding-left: ${({ theme }) => theme.spacing(3)};
padding-left: ${themeCssVariables.spacing[3]};
`;
export const FullScreenContainer = ({
packages/twenty-front/src/modules/ui/layout/fullscreen/components/__stories__/FullScreenContainer.stories.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { FullScreenContainer } from '@/ui/layout/fullscreen/components/FullScreenContainer';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import {
ComponentDecorator,
packages/twenty-front/src/modules/ui/layout/fullscreen/hooks/useFullScreenModal.tsx
+8 -7
View File
@@ -4,9 +4,10 @@ import {
Breadcrumb,
type BreadcrumbProps,
} from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useRef } from 'react';
import { createPortal } from 'react-dom';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledFullScreenOverlay = styled.div`
position: fixed;
@@ -14,7 +15,7 @@ const StyledFullScreenOverlay = styled.div`
left: 0;
right: 0;
bottom: 0;
background: ${({ theme }) => theme.background.noisy};
background: ${themeCssVariables.background.noisy};
display: flex;
flex-direction: column;
width: 100%;
@@ -23,17 +24,17 @@ const StyledFullScreenOverlay = styled.div`
`;
const StyledFullScreenHeader = styled(PageHeader)`
padding-left: ${({ theme }) => theme.spacing(3)};
padding-left: ${themeCssVariables.spacing[3]};
`;
const StyledFullScreenContent = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(3)};
gap: ${themeCssVariables.spacing[3]};
flex: 1;
min-height: 0;
padding: ${({ theme }) =>
`0 ${theme.spacing(3)} ${theme.spacing(3)} ${theme.spacing(3)}`};
padding: 0 ${themeCssVariables.spacing[3]} ${themeCssVariables.spacing[3]}
${themeCssVariables.spacing[3]};
// Make the immediate child a flex column that grows, so nested components
// with height="100%" (e.g., editors) can size correctly.
@@ -42,7 +43,7 @@ const StyledFullScreenContent = styled.div`
flex-direction: column;
flex: 1;
min-height: 0;
row-gap: ${({ theme }) => theme.spacing(5)};
row-gap: ${themeCssVariables.spacing[5]};
}
`;
packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
+11 -10
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { type ReactNode, useState } from 'react';
import { useDebouncedCallback } from 'use-debounce';
@@ -11,6 +11,7 @@ import { useLingui } from '@lingui/react/macro';
import { H1Title, H1TitleFontColor } from 'twenty-ui/display';
import { Button, type ButtonAccent } from 'twenty-ui/input';
import { Section, SectionAlignment, SectionFontColor } from 'twenty-ui/layout';
import { themeCssVariables } from 'twenty-ui/theme-constants';
export type ConfirmationModalProps = {
modalId: string;
@@ -28,15 +29,15 @@ export type ConfirmationModalProps = {
};
const StyledConfirmationModal = styled(Modal)`
border-radius: ${({ theme }) => theme.spacing(1)};
width: calc(400px - ${({ theme }) => theme.spacing(32)});
border-radius: ${themeCssVariables.spacing[1]};
width: calc(400px - ${themeCssVariables.spacing[32]});
height: auto;
`;
export const StyledCenteredButton = styled(Button)`
box-sizing: border-box;
justify-content: center;
margin-top: ${({ theme }) => theme.spacing(2)};
margin-top: ${themeCssVariables.spacing[2]};
`;
const StyledCenteredTitle = styled.div`
@@ -44,17 +45,17 @@ const StyledCenteredTitle = styled.div`
`;
const StyledSection = styled(Section)`
margin-bottom: ${({ theme }) => theme.spacing(6)};
margin-bottom: ${themeCssVariables.spacing[6]};
`;
export const StyledConfirmationButton = styled(StyledCenteredButton)`
border-color: ${({ theme }) => theme.border.color.danger};
border-color: ${themeCssVariables.border.color.danger};
box-shadow: none;
color: ${({ theme }) => theme.color.red};
font-size: ${({ theme }) => theme.font.size.md};
line-height: ${({ theme }) => theme.text.lineHeight.lg};
color: ${themeCssVariables.color.red};
font-size: ${themeCssVariables.font.size.md};
line-height: ${themeCssVariables.text.lineHeight.lg};
:hover {
background-color: ${({ theme }) => theme.color.red3};
background-color: ${themeCssVariables.color.red3};
}
`;
packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
+47 -46
View File
@@ -10,13 +10,14 @@ import { useModal } from '@/ui/layout/modal/hooks/useModal';
import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { AnimatePresence, motion } from 'framer-motion';
import React, { useRef } from 'react';
import React, { useContext, useRef } from 'react';
import { createPortal } from 'react-dom';
import { isDefined } from 'twenty-shared/utils';
const StyledModalDiv = styled(motion.div)<{
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { ThemeContext } from 'twenty-ui/theme';
const StyledModalDivBase = styled.div<{
size?: ModalSize;
padding?: ModalPadding;
isMobile: boolean;
@@ -24,65 +25,70 @@ const StyledModalDiv = styled(motion.div)<{
}>`
display: flex;
flex-direction: column;
box-shadow: ${({ theme, modalVariant }) =>
box-shadow: ${({ modalVariant }) =>
modalVariant === 'primary'
? theme.boxShadow.superHeavy
? themeCssVariables.boxShadow.superHeavy
: modalVariant === 'transparent'
? 'none'
: theme.boxShadow.strong};
background: ${({ theme, modalVariant }) =>
modalVariant === 'transparent' ? 'transparent' : theme.background.primary};
color: ${({ theme }) => theme.font.color.primary};
border-radius: ${({ theme, isMobile, modalVariant }) => {
: themeCssVariables.boxShadow.strong};
background: ${({ modalVariant }) =>
modalVariant === 'transparent'
? 'transparent'
: themeCssVariables.background.primary};
color: ${themeCssVariables.font.color.primary};
border-radius: ${({ isMobile, modalVariant }) => {
if (isMobile || modalVariant === 'transparent') return `0`;
return theme.border.radius.md;
return themeCssVariables.border.radius.md;
}};
overflow-x: hidden;
overflow-y: auto;
z-index: ${RootStackingContextZIndices.RootModal}; // should be higher than Backdrop's z-index
width: ${({ isMobile, size, theme }) => {
if (isMobile) return theme.modal.size.fullscreen.width;
width: ${({ isMobile, size }) => {
if (isMobile)
return themeCssVariables.modal.size.fullscreen.width ?? 'auto';
switch (size) {
case 'small':
return theme.modal.size.sm.width;
return themeCssVariables.modal.size.sm.width ?? 'auto';
case 'medium':
return theme.modal.size.md.width;
return themeCssVariables.modal.size.md.width ?? 'auto';
case 'large':
return theme.modal.size.lg.width;
return themeCssVariables.modal.size.lg.width ?? 'auto';
case 'extraLarge':
return theme.modal.size.xl.width;
return themeCssVariables.modal.size.xl.width ?? 'auto';
default:
return 'auto';
}
}};
padding: ${({ padding, theme }) => {
padding: ${({ padding }) => {
switch (padding) {
case 'none':
return theme.spacing(0);
return themeCssVariables.spacing[0];
case 'small':
return theme.spacing(2);
return themeCssVariables.spacing[2];
case 'medium':
return theme.spacing(4);
return themeCssVariables.spacing[4];
case 'large':
return theme.spacing(6);
return themeCssVariables.spacing[6];
default:
return 'auto';
}
}};
height: ${({ isMobile, theme, size }) => {
if (isMobile) return theme.modal.size.fullscreen.height;
height: ${({ isMobile, size }) => {
if (isMobile)
return themeCssVariables.modal.size.fullscreen.height ?? 'auto';
switch (size) {
case 'extraLarge':
return theme.modal.size.xl.height;
return themeCssVariables.modal.size.xl.height ?? 'auto';
default:
return 'auto';
}
}};
max-height: ${({ isMobile }) => (isMobile ? 'none' : '90dvh')};
`;
const StyledModalDiv = motion.create(StyledModalDivBase);
const StyledHeader = styled.div`
align-items: center;
@@ -90,7 +96,7 @@ const StyledHeader = styled.div`
flex-direction: row;
height: 60px;
overflow: hidden;
padding: ${({ theme }) => theme.spacing(5)};
padding: ${themeCssVariables.spacing[5]};
`;
const StyledContent = styled.div<{
@@ -101,17 +107,11 @@ const StyledContent = styled.div<{
flex: 1;
flex: 1 1 0%;
flex-direction: column;
padding: ${({ theme }) => theme.spacing(10)};
${({ isVerticalCentered }) =>
isVerticalCentered &&
css`
align-items: center;
`}
${({ isHorizontalCentered }) =>
isHorizontalCentered &&
css`
justify-content: center;
`}
padding: ${themeCssVariables.spacing[10]};
align-items: ${({ isVerticalCentered }) =>
isVerticalCentered ? 'center' : 'stretch'};
justify-content: ${({ isHorizontalCentered }) =>
isHorizontalCentered ? 'center' : 'flex-start'};
`;
const StyledFooter = styled.div`
@@ -120,22 +120,22 @@ const StyledFooter = styled.div`
flex-direction: row;
height: 60px;
overflow: hidden;
padding: ${({ theme }) => theme.spacing(5)};
padding: ${themeCssVariables.spacing[5]};
`;
const StyledBackDrop = styled(motion.div)<{
const StyledBackDropBase = styled.div<{
modalVariant: ModalVariants;
isInContainer?: boolean;
}>`
align-items: center;
background: ${({ theme, modalVariant, isInContainer }) =>
background: ${({ modalVariant, isInContainer }) =>
isInContainer
? theme.background.overlayTertiary
? themeCssVariables.background.overlayTertiary
: modalVariant === 'primary' || modalVariant === 'transparent'
? theme.background.overlayPrimary
? themeCssVariables.background.overlayPrimary
: modalVariant === 'secondary'
? theme.background.overlaySecondary
: theme.background.overlayTertiary};
? themeCssVariables.background.overlaySecondary
: themeCssVariables.background.overlayTertiary};
display: flex;
height: 100%;
justify-content: center;
@@ -147,6 +147,7 @@ const StyledBackDrop = styled(motion.div)<{
z-index: ${RootStackingContextZIndices.RootModalBackDrop};
user-select: none;
`;
const StyledBackDrop = motion.create(StyledBackDropBase);
type ModalHeaderProps = React.PropsWithChildren & {
className?: string;
@@ -237,7 +238,7 @@ export const Modal = ({
: container;
const isInContainer = isDefined(container) && !ignoreContainer;
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const stopEventPropagation = (e: React.MouseEvent) => {
e.stopPropagation();
packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx
+9 -8
View File
@@ -1,4 +1,5 @@
import styled from '@emotion/styled';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { styled } from '@linaria/react';
// eslint-disable-next-line twenty/styled-components-prefixed-with-styled
export const OverlayContainer = styled.div<{
@@ -8,16 +9,16 @@ export const OverlayContainer = styled.div<{
align-items: center;
display: flex;
backdrop-filter: ${({ theme }) => theme.blur.medium};
backdrop-filter: ${themeCssVariables.blur.medium};
border-radius: ${({ theme, borderRadius }) =>
theme.border.radius[borderRadius ?? 'md']};
border-radius: ${({ borderRadius }) =>
themeCssVariables.border.radius[borderRadius ?? 'md']};
background: ${({ theme }) => theme.background.transparent.primary};
background: ${themeCssVariables.background.transparent.primary};
border: 1px solid
${({ theme, hasDangerBorder }) =>
theme.border.color[hasDangerBorder ? 'danger' : 'medium']};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
${({ hasDangerBorder }) =>
themeCssVariables.border.color[hasDangerBorder ? 'danger' : 'medium']};
box-shadow: ${themeCssVariables.boxShadow.strong};
overflow: hidden;
packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx
+17 -21
View File
@@ -5,33 +5,31 @@ import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/i
import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
import { PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID } from '@/ui/layout/page-header/constants/PageHeaderCommandMenuButtonClickOutsideId';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { i18n } from '@lingui/core';
import { t } from '@lingui/core/macro';
import { motion } from 'framer-motion';
import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
import { AnimatedButton } from 'twenty-ui/input';
import { getOsControlSymbol, useIsMobile } from 'twenty-ui/utilities';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme';
const StyledButtonWrapper = styled.div<{
alignWithCommandMenuTopBar: boolean;
}>`
const StyledButtonWrapper = styled.div<{ alignToTop: boolean }>`
align-items: ${({ alignToTop }) => (alignToTop ? 'center' : 'initial')};
display: ${({ alignToTop }) => (alignToTop ? 'flex' : 'block')};
height: ${({ alignToTop }) =>
alignToTop ? `${COMMAND_MENU_SEARCH_BAR_HEIGHT_MOBILE}px` : 'auto'};
position: ${({ alignToTop }) => (alignToTop ? 'fixed' : 'static')};
right: ${({ alignToTop }) =>
alignToTop ? themeCssVariables.spacing[3] : 'auto'};
top: ${({ alignToTop }) => (alignToTop ? '0' : 'auto')};
z-index: ${RootStackingContextZIndices.CommandMenuButton};
${({ alignWithCommandMenuTopBar, theme }) =>
alignWithCommandMenuTopBar &&
css`
align-items: center;
display: flex;
height: ${COMMAND_MENU_SEARCH_BAR_HEIGHT_MOBILE}px;
position: fixed;
right: ${theme.spacing(3)};
top: 0;
`}
`;
const StyledTooltipWrapper = styled.div`
font-size: ${({ theme }) => theme.font.size.md};
font-size: ${themeCssVariables.font.size.md};
`;
const xPaths = {
@@ -46,7 +44,7 @@ const AnimatedIcon = ({
}: {
isCommandMenuOpened: boolean;
}) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
return (
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -136,12 +134,10 @@ export const PageHeaderToggleCommandMenuButton = () => {
? t`Close command menu`
: t`Open command menu`;
const theme = useTheme();
const { theme } = useContext(ThemeContext);
return (
<StyledButtonWrapper
alignWithCommandMenuTopBar={alignWithCommandMenuTopBar}
>
<StyledButtonWrapper alignToTop={alignWithCommandMenuTopBar}>
<div id="toggle-command-menu-button">
<AnimatedButton
animatedSvg={
packages/twenty-front/src/modules/ui/layout/page/components/BlankLayout.tsx
+6 -16
View File
@@ -1,9 +1,9 @@
import { css, Global, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { Outlet } from 'react-router-dom';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledLayout = styled.div`
background: ${({ theme }) => theme.background.noisy};
background: ${themeCssVariables.background.noisy};
display: flex;
flex-direction: column;
height: 100dvh;
@@ -13,19 +13,9 @@ const StyledLayout = styled.div`
`;
export const BlankLayout = () => {
const theme = useTheme();
return (
<>
<Global
styles={css`
body {
background: ${theme.background.tertiary};
}
`}
/>
<StyledLayout>
<Outlet />
</StyledLayout>
</>
<StyledLayout>
<Outlet />
</StyledLayout>
);
};
packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
+17 -22
View File
@@ -12,7 +12,7 @@ import { PageDragDropProvider } from '@/navigation/components/PageDragDropProvid
import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
import { OBJECT_SETTINGS_WIDTH } from '@/settings/data-model/constants/ObjectSettings';
import { SignInAppNavigationDrawerMock } from '@/sign-in-background-mock/components/SignInAppNavigationDrawerMock';
import { lazy, Suspense } from 'react';
import { Suspense, lazy, useContext } from 'react';
const SignInBackgroundMockPage = lazy(() =>
import('@/sign-in-background-mock/components/SignInBackgroundMockPage').then(
@@ -23,39 +23,37 @@ import { useShowFullscreen } from '@/ui/layout/fullscreen/hooks/useShowFullscree
import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
import { NAVIGATION_DRAWER_CONSTRAINTS } from '@/ui/layout/resizable-panel/constants/NavigationDrawerConstraints';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { Global, css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
import { Outlet } from 'react-router-dom';
import { useScreenSize } from 'twenty-ui/utilities';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { ThemeContext } from 'twenty-ui/theme';
const StyledLayout = styled.div`
background: ${({ theme }) => theme.background.noisy};
background: ${themeCssVariables.background.noisy};
display: flex;
flex-direction: column;
height: 100dvh;
position: relative;
scrollbar-color: ${({ theme }) => theme.border.color.medium} transparent;
scrollbar-color: ${themeCssVariables.border.color.medium} transparent;
scrollbar-width: 4px;
width: 100%;
*::-webkit-scrollbar-thumb {
border-radius: ${({ theme }) => theme.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.sm};
}
`;
const StyledPageContainer = styled(motion.div)`
const StyledPageContainerBase = styled.div`
display: flex;
flex: 1 1 auto;
flex-direction: row;
min-height: 0;
`;
const StyledPageContainer = motion.create(StyledPageContainerBase);
const StyledAppNavigationDrawer = styled(AppNavigationDrawer)`
flex-shrink: 0;
`;
const StyledAppNavigationDrawerMock = styled(SignInAppNavigationDrawerMock)`
const StyledNavigationDrawerWrapper = styled.div`
flex-shrink: 0;
`;
@@ -68,20 +66,13 @@ const StyledMainContainer = styled.div`
export const DefaultLayout = () => {
const isMobile = useIsMobile();
const isSettingsPage = useIsSettingsPage();
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const windowsWidth = useScreenSize().width;
const showAuthModal = useShowAuthModal();
const useShowFullScreen = useShowFullscreen();
return (
<>
<Global
styles={css`
body {
background: ${theme.background.tertiary};
}
`}
/>
<FileUploadProvider>
<StyledLayout>
<AppErrorBoundary FallbackComponent={AppFullScreenErrorFallback}>
@@ -105,9 +96,13 @@ export const DefaultLayout = () => {
<PageDragDropProvider>
{!showAuthModal && <KeyboardShortcutMenu />}
{showAuthModal ? (
<StyledAppNavigationDrawerMock />
<StyledNavigationDrawerWrapper>
<SignInAppNavigationDrawerMock />
</StyledNavigationDrawerWrapper>
) : useShowFullScreen ? null : (
<StyledAppNavigationDrawer />
<StyledNavigationDrawerWrapper>
<AppNavigationDrawer />
</StyledNavigationDrawerWrapper>
)}
{showAuthModal ? (
<>
packages/twenty-front/src/modules/ui/layout/page/components/PageBody.tsx
+6 -5
View File
@@ -1,7 +1,8 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { type ReactNode } from 'react';
import { PagePanel } from './PagePanel';
import { themeCssVariables } from 'twenty-ui/theme-constants';
type PageBodyProps = {
children: ReactNode;
@@ -9,15 +10,15 @@ type PageBodyProps = {
};
const StyledMainContainer = styled.div`
background: ${({ theme }) => theme.background.noisy};
background: ${themeCssVariables.background.noisy};
box-sizing: border-box;
display: flex;
flex: 1 1 auto;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[2]};
min-height: 0;
padding-bottom: ${({ theme }) => theme.spacing(3)};
padding-right: ${({ theme }) => theme.spacing(3)};
padding-bottom: ${themeCssVariables.spacing[3]};
padding-right: ${themeCssVariables.spacing[3]};
padding-left: 0;
width: 100%;
`;
packages/twenty-front/src/modules/ui/layout/page/components/PageContainer.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
const StyledContainer = styled.div`
display: flex;
packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
+21 -20
View File
@@ -1,6 +1,5 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { type ReactNode } from 'react';
import { styled } from '@linaria/react';
import { type ReactNode, useContext } from 'react';
import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';
@@ -16,41 +15,43 @@ import {
OverflowingTextWithTooltip,
} from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
import { MOBILE_VIEWPORT, ThemeContext } from 'twenty-ui/theme';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledTopBarContainer = styled.div<{ isMobile: boolean }>`
align-items: center;
background: ${({ theme }) => theme.background.noisy};
color: ${({ theme }) => theme.font.color.primary};
background: ${themeCssVariables.background.noisy};
color: ${themeCssVariables.font.color.primary};
display: flex;
flex-direction: row;
font-size: ${({ theme }) => theme.font.size.lg};
font-size: ${themeCssVariables.font.size.lg};
justify-content: space-between;
min-height: ${PAGE_BAR_MIN_HEIGHT}px;
padding-top: ${({ theme }) => theme.spacing(3)};
padding-bottom: ${({ theme }) => theme.spacing(3)};
padding-left: ${({ isMobile, theme }) => (isMobile ? theme.spacing(3) : 0)};
padding-right: ${({ theme }) => theme.spacing(3)};
gap: ${({ theme }) => theme.spacing(2)};
padding-top: ${themeCssVariables.spacing[3]};
padding-bottom: ${themeCssVariables.spacing[3]};
padding-left: ${({ isMobile }) =>
isMobile ? themeCssVariables.spacing[3] : 0};
padding-right: ${themeCssVariables.spacing[3]};
gap: ${themeCssVariables.spacing[2]};
`;
const StyledLeftContainer = styled.div`
align-items: center;
display: flex;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(1)};
gap: ${themeCssVariables.spacing[1]};
overflow-x: hidden;
width: 100%;
@media (max-width: ${MOBILE_VIEWPORT}px) {
padding-left: ${({ theme }) => theme.spacing(1)};
padding-left: ${themeCssVariables.spacing[1]};
}
`;
const StyledTitleContainer = styled.div`
display: flex;
font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.medium};
margin-right: ${({ theme }) => theme.spacing(1)};
font-size: ${themeCssVariables.font.size.md};
font-weight: ${themeCssVariables.font.weight.medium};
margin-right: ${themeCssVariables.spacing[1]};
width: 100%;
overflow: hidden;
align-items: center;
@@ -59,7 +60,7 @@ const StyledTitleContainer = styled.div`
const StyledTopBarIconStyledTitleContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
gap: ${themeCssVariables.spacing[1]};
flex-direction: row;
width: 100%;
overflow: hidden;
@@ -67,7 +68,7 @@ const StyledTopBarIconStyledTitleContainer = styled.div`
const StyledPageActionContainer = styled.div`
display: inline-flex;
gap: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[2]};
flex: 1 0 auto;
`;
@@ -95,7 +96,7 @@ export const PageHeader = ({
className,
}: PageHeaderProps) => {
const isMobile = useIsMobile();
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const isNavigationDrawerExpanded = useAtomStateValue(
isNavigationDrawerExpandedState,
);
packages/twenty-front/src/modules/ui/layout/page/components/PagePanel.tsx
+5 -4
View File
@@ -1,10 +1,11 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import React from 'react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledPanel = styled.div`
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};
height: 100%;
overflow-x: auto;
overflow-y: hidden;
packages/twenty-front/src/modules/ui/layout/page/components/ShowPageContainer.tsx
+19 -8
View File
@@ -1,26 +1,27 @@
import styled from '@emotion/styled';
import { type ReactNode } from 'react';
import { styled } from '@linaria/react';
import { type CSSProperties, type ReactNode } from 'react';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledOuterContainer = styled.div`
display: flex;
gap: ${({ theme }) => (useIsMobile() ? theme.spacing(3) : '0')};
gap: var(--show-page-gap, 0);
height: 100%;
width: 100%;
`;
const StyledInnerContainer = styled.div`
display: flex;
flex-direction: ${() => (useIsMobile() ? 'column' : 'row')};
flex-direction: var(--show-page-direction, row);
width: 100%;
height: 100%;
`;
const StyledScrollWrapper = styled(ScrollWrapper)`
background-color: ${({ theme }) => theme.background.secondary};
border-radius: ${({ theme }) => theme.border.radius.md};
background-color: ${themeCssVariables.background.secondary};
border-radius: ${themeCssVariables.border.radius.md};
`;
export type ShowPageContainerProps = {
@@ -29,10 +30,20 @@ export type ShowPageContainerProps = {
export const ShowPageContainer = ({ children }: ShowPageContainerProps) => {
const isMobile = useIsMobile();
const mobileStyle = isMobile
? ({
'--show-page-gap': themeCssVariables.spacing[3],
'--show-page-direction': 'column',
} as CSSProperties)
: undefined;
return isMobile ? (
<StyledOuterContainer>
<StyledOuterContainer style={mobileStyle}>
<StyledScrollWrapper componentInstanceId="scroll-wrapper-show-page-container">
<StyledInnerContainer>{children}</StyledInnerContainer>
<StyledInnerContainer style={mobileStyle}>
{children}
</StyledInnerContainer>
</StyledScrollWrapper>
</StyledOuterContainer>
) : (
packages/twenty-front/src/modules/ui/layout/page/components/SubMenuTopBarContainer.tsx
+9 -7
View File
@@ -3,10 +3,11 @@ import {
Breadcrumb,
type BreadcrumbProps,
} from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { type JSX, type ReactNode } from 'react';
import { PageBody } from './PageBody';
import { PageHeader } from './PageHeader';
import { themeCssVariables } from 'twenty-ui/theme-constants';
type SubMenuTopBarContainerProps = {
children: JSX.Element | JSX.Element[];
@@ -24,13 +25,14 @@ const StyledContainer = styled.div`
`;
const StyledTitle = styled.h3<{ reserveTitleSpace?: boolean }>`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.lg};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
color: ${themeCssVariables.font.color.primary};
font-size: ${themeCssVariables.font.size.lg};
font-weight: ${themeCssVariables.font.weight.semiBold};
line-height: 1.2;
margin: ${({ theme }) => theme.spacing(8, 8, 2)};
min-height: ${({ theme, reserveTitleSpace }) =>
reserveTitleSpace ? theme.spacing(5) : 'none'};
margin: ${themeCssVariables.spacing[8]} ${themeCssVariables.spacing[8]}
${themeCssVariables.spacing[2]};
min-height: ${({ reserveTitleSpace }) =>
reserveTitleSpace ? themeCssVariables.spacing[5] : 'none'};
`;
export const SubMenuTopBarContainer = ({
packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelEdge.tsx
+20 -17
View File
@@ -1,9 +1,10 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { RESIZE_EDGE_WIDTH_PX } from '@/ui/layout/resizable-panel/constants/ResizeEdgeWidthPx';
import { useResizablePanel } from '@/ui/layout/resizable-panel/hooks/useResizablePanel';
import { type ResizablePanelConstraints } from '@/ui/layout/resizable-panel/types/ResizablePanelConstraints';
import { type ResizablePanelSide } from '@/ui/layout/resizable-panel/types/ResizablePanelSide';
import { themeCssVariables } from 'twenty-ui/theme-constants';
type StyledEdgeProps = {
isActive: boolean;
@@ -12,32 +13,34 @@ type StyledEdgeProps = {
};
const StyledEdge = styled.div<StyledEdgeProps>`
position: absolute;
top: 0;
bottom: 0;
${({ side }) =>
side === 'right' ? 'right' : 'left'}: -${RESIZE_EDGE_WIDTH_PX / 2}px;
width: ${RESIZE_EDGE_WIDTH_PX}px;
cursor: col-resize;
display: flex;
align-items: center;
bottom: 0;
cursor: col-resize;
display: flex;
justify-content: center;
left: ${({ side }) =>
side === 'left' ? `-${RESIZE_EDGE_WIDTH_PX / 2}px` : 'auto'};
position: absolute;
right: ${({ side }) =>
side === 'right' ? `-${RESIZE_EDGE_WIDTH_PX / 2}px` : 'auto'};
top: 0;
width: ${RESIZE_EDGE_WIDTH_PX}px;
`;
const StyledHandle = styled.div<{ isActive: boolean; isHovered: boolean }>`
width: 4px;
height: 48px;
border-radius: ${({ theme }) => theme.border.radius.pill};
background-color: ${({ theme, isActive, isHovered }) =>
border-radius: ${themeCssVariables.border.radius.pill};
background-color: ${({ isActive, isHovered }) =>
isActive
? theme.color.blue
? themeCssVariables.color.blue
: isHovered
? theme.font.color.tertiary
: theme.background.quaternary};
? themeCssVariables.font.color.tertiary
: themeCssVariables.background.quaternary};
transition:
background-color ${({ theme }) => theme.animation.duration.fast}s,
transform ${({ theme }) => theme.animation.duration.fast}s;
background-color ${themeCssVariables.animation.duration.fast}s,
transform ${themeCssVariables.animation.duration.fast}s;
transform: ${({ isHovered, isActive }) =>
isHovered || isActive ? 'scaleY(1.2)' : 'scaleY(1)'};
`;
packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelGap.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useResizablePanel } from '@/ui/layout/resizable-panel/hooks/useResizablePanel';
import { type ResizablePanelConstraints } from '@/ui/layout/resizable-panel/types/ResizablePanelConstraints';
packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerFooter.tsx
+6 -5
View File
@@ -1,16 +1,17 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { Fragment } from 'react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
align-items: center;
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};
bottom: 0;
box-sizing: border-box;
display: flex;
justify-content: flex-end;
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
gap: ${({ theme }) => theme.spacing(2)};
padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[3]};
gap: ${themeCssVariables.spacing[2]};
width: 100%;
`;