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

New Empty States (#3465)

Browse Source 
New empty states
---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Kanav Arora
2024-01-30 15:31:56 +05:30
committed by GitHub
parent 96bcddc056
commit b07d67c624
27 changed files with 315 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
packages/twenty-front/src/pages/not-found/NotFound.tsx
View File

@ -3,7 +3,13 @@ import styled from '@emotion/styled';
import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
import { MainButton } from '@/ui/input/button/components/MainButton';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import { StyledEmptyTextContainer } from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import {
StyledErrorContainer,
StyledErrorSubTitle,
StyledErrorTitle,
} from '@/ui/layout/animated-placeholder/components/ErrorPlaceholderStyled';
const StyledBackDrop = styled.div`
align-items: center;
@ -20,48 +26,33 @@ const StyledBackDrop = styled.div`
z-index: 10000;
`;
const StyledTextContainer = styled.div`
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
padding: ${({ theme }) => theme.spacing(15)};
`;
const StyledButtonContainer = styled.div`
width: 200px;
`;
type StyledInfoProps = {
color: 'dark' | 'light';
};
const StyledInfo = styled.div<StyledInfoProps>`
color: ${(props) =>
props.color === 'light'
? props.theme.font.color.extraLight
: props.theme.font.color.primary};
font-size: ${() => (useIsMobile() ? '2.5rem' : '4rem')};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
`;
export const NotFound = () => {
const navigate = useNavigate();
return (
<>
<StyledBackDrop>
<StyledTextContainer>
<StyledInfo color="dark">404</StyledInfo>
<StyledInfo color="light">Page not found</StyledInfo>
</StyledTextContainer>
<StyledButtonContainer>
<MainButton
title="Back to content"
fullWidth
onClick={() => navigate('/')}
/>
</StyledButtonContainer>
<StyledErrorContainer>
<AnimatedPlaceholder type="error404" />
<StyledEmptyTextContainer>
<StyledErrorTitle>Off the beaten path</StyledErrorTitle>
<StyledErrorSubTitle>
The page you're seeking is either gone or never was. Let's get you
back on track
</StyledErrorSubTitle>
</StyledEmptyTextContainer>
<StyledButtonContainer>
<MainButton
title="Back to content"
fullWidth
onClick={() => navigate('/')}
/>
</StyledButtonContainer>
</StyledErrorContainer>
</StyledBackDrop>
<SignInBackgroundMockPage />
</>