Charles Bochet
802a5b0af6
## Summary - Migrate ~200 files from `@emotion/styled` / `@emotion/react` to `@linaria/react` + `themeCssVariables`, continuing the zero-runtime CSS-in-JS migration (PR 2-3 of the [migration plan](docs/emotion-to-linaria-migration-plan.md)) - Modules covered: **auth** (19), **activities** (53), **ai** (30), **pages** (70), **action-menu** (3), **object-metadata** (4), **onboarding** (2), **workspace** (2), **file** (3), **error-handler** (2), **front-components** (1), **geo-map** (1), **loading** (5), **testing** (5), plus a `style` prop addition to `TableRow` - Handles `styled(FunctionComponent)<Props>` incompatibility with Linaria by using CSS custom properties via `style` + `var()` references ## Test plan - [x] `npx nx lint:diff-with-main twenty-front` passes - [x] `npx nx typecheck twenty-front` passes - [ ] Visual spot-check of auth, onboarding, settings, activities, and AI chat screens - [ ] No remaining `@emotion/styled` or `@emotion/react` imports in migrated files Made with [Cursor](https://cursor.com)
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { AppErrorDisplay } from '@/error-handler/components/internal/AppErrorDisplay';
|
|
import { type AppErrorDisplayProps } from '@/error-handler/types/AppErrorDisplayProps';
|
|
import { PageBody } from '@/ui/layout/page/components/PageBody';
|
|
import { styled } from '@linaria/react';
|
|
import { t } from '@lingui/core/macro';
|
|
import { themeCssVariables } from 'twenty-ui/theme-constants';
|
|
|
|
type AppFullScreenErrorFallbackProps = AppErrorDisplayProps;
|
|
|
|
const StyledContainer = styled.div`
|
|
background: ${themeCssVariables.background.noisy};
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
padding-top: ${themeCssVariables.spacing[3]};
|
|
padding-left: ${themeCssVariables.spacing[3]};
|
|
`;
|
|
|
|
export const AppFullScreenErrorFallback = ({
|
|
error,
|
|
resetErrorBoundary,
|
|
title = t`Sorry, something went wrong`,
|
|
}: AppFullScreenErrorFallbackProps) => {
|
|
return (
|
|
<StyledContainer>
|
|
<PageBody>
|
|
<AppErrorDisplay
|
|
error={error}
|
|
resetErrorBoundary={resetErrorBoundary}
|
|
title={title}
|
|
/>
|
|
</PageBody>
|
|
</StyledContainer>
|
|
);
|
|
};
|