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)
115 lines
2.8 KiB
TypeScript
115 lines
2.8 KiB
TypeScript
import { styled } from '@linaria/react';
|
|
import { Trans } from '@lingui/react/macro';
|
|
|
|
import { useWorkspaceBypass } from '@/auth/sign-in-up/hooks/useWorkspaceBypass';
|
|
import { useIsCurrentLocationOnAWorkspace } from '@/domain-manager/hooks/useIsCurrentLocationOnAWorkspace';
|
|
import { themeCssVariables } from 'twenty-ui/theme-constants';
|
|
|
|
const StyledCopyContainer = styled.div`
|
|
align-items: center;
|
|
color: ${themeCssVariables.font.color.tertiary};
|
|
font-size: ${themeCssVariables.font.size.sm};
|
|
max-width: 280px;
|
|
text-align: center;
|
|
|
|
& > a {
|
|
color: ${themeCssVariables.font.color.tertiary};
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const StyledLinksContainer = styled.div`
|
|
align-items: center;
|
|
color: ${themeCssVariables.font.color.tertiary};
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
font-size: ${themeCssVariables.font.size.sm};
|
|
gap: ${themeCssVariables.spacing[2]};
|
|
justify-content: center;
|
|
max-width: 100%;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
|
|
& > a,
|
|
& > button {
|
|
background: none;
|
|
border: none;
|
|
color: ${themeCssVariables.font.color.tertiary};
|
|
cursor: pointer;
|
|
font: inherit;
|
|
padding: 0;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const StyledSeparator = styled.span`
|
|
color: ${themeCssVariables.font.color.tertiary};
|
|
`;
|
|
|
|
export const FooterNote = () => {
|
|
const isOnAWorkspace = useIsCurrentLocationOnAWorkspace();
|
|
|
|
const { shouldOfferBypass, shouldUseBypass, enableBypass } =
|
|
useWorkspaceBypass();
|
|
|
|
if (!isOnAWorkspace) {
|
|
return (
|
|
<StyledCopyContainer>
|
|
<Trans>By using Twenty, you agree to the</Trans>{' '}
|
|
<a
|
|
href="https://twenty.com/legal/terms"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Trans>Terms of Service</Trans>
|
|
</a>{' '}
|
|
<Trans>and</Trans>{' '}
|
|
<a
|
|
href="https://twenty.com/legal/privacy"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Trans>Privacy Policy</Trans>
|
|
</a>
|
|
.
|
|
</StyledCopyContainer>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<StyledLinksContainer>
|
|
{shouldOfferBypass && !shouldUseBypass && (
|
|
<>
|
|
<button type="button" onClick={enableBypass}>
|
|
<Trans>Bypass SSO</Trans>
|
|
</button>
|
|
<StyledSeparator>•</StyledSeparator>
|
|
</>
|
|
)}
|
|
<a
|
|
href="https://twenty.com/legal/privacy"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Trans>Privacy Policy</Trans>
|
|
</a>
|
|
<StyledSeparator>•</StyledSeparator>
|
|
<a
|
|
href="https://twenty.com/legal/terms"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Trans>Terms of Service</Trans>
|
|
</a>
|
|
</StyledLinksContainer>
|
|
);
|
|
};
|