Raphaël BosiandGitHub
198bf5a333
# Complete color refactoring Closes https://github.com/twentyhq/core-team-issues/issues/1779 - Updated all colors to use Radix colors with P3 color space allowing for brighter colors - Created our own gray scale interpolated on Radix's scale to have the same values for grays as the old ones in the app - Introduced dark and light colors as well as there transparent versions - Added many new colors from radix that can be used in the tags or in the graphs - Updated multiple color utilities to match new behaviors - Changed the computation of Avatar colors to return only colors from the theme (before it was random hsl) These changes allow the user to use new colors in tags or charts, the colors are brighter and with better contrast. We have a full range of color variations from 1 to 12 where before we only had 4 adaptative colors. All these changes will allow us to develop custom themes for the user soon, where users can choose their accent colors, background colors and there contrast.
134 lines
3.3 KiB
TypeScript
134 lines
3.3 KiB
TypeScript
import { type AppErrorDisplayProps } from '@/error-handler/types/AppErrorDisplayProps';
|
|
import styled from '@emotion/styled';
|
|
import { t } from '@lingui/core/macro';
|
|
import { motion } from 'framer-motion';
|
|
import { IconReload } from 'twenty-ui/display';
|
|
import { THEME_DARK } from 'twenty-ui/theme';
|
|
|
|
type AppRootErrorFallbackProps = AppErrorDisplayProps;
|
|
|
|
const StyledContainer = styled.div`
|
|
background: ${THEME_DARK.background.noisy};
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
padding: 12px;
|
|
`;
|
|
|
|
const StyledPanel = styled.div`
|
|
background: ${({ theme }) => theme.grayScale.gray1};
|
|
border: 1px solid ${({ theme }) => theme.grayScale.gray5};
|
|
border-radius: 8px;
|
|
height: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
width: 100%;
|
|
`;
|
|
|
|
const StyledEmptyContainer = styled(motion.div)`
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
justify-content: center;
|
|
text-align: center;
|
|
`;
|
|
|
|
const StyledImageContainer = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
`;
|
|
|
|
const StyledBackgroundImage = styled.img`
|
|
max-height: 160px;
|
|
max-width: 160px;
|
|
`;
|
|
|
|
const StyledInnerImage = styled.img`
|
|
max-height: 130px;
|
|
position: absolute;
|
|
max-width: 130px;
|
|
`;
|
|
|
|
const StyledEmptyTextContainer = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
text-align: center;
|
|
width: 100%;
|
|
`;
|
|
|
|
const StyledEmptyTitle = styled.div`
|
|
color: ${({ theme }) => theme.grayScale.gray12};
|
|
font-size: 1.23rem;
|
|
font-weight: 600;
|
|
`;
|
|
|
|
const StyledEmptySubTitle = styled.div`
|
|
color: ${({ theme }) => theme.grayScale.gray11};
|
|
font-size: 0.92rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
max-height: 2.8em;
|
|
overflow: hidden;
|
|
width: 50%;
|
|
`;
|
|
|
|
const StyledButton = styled.button`
|
|
align-items: center;
|
|
background: ${({ theme }) => theme.grayScale.gray1};
|
|
border: 1px solid ${({ theme }) => theme.grayScale.gray5};
|
|
color: ${({ theme }) => theme.grayScale.gray12};
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
padding: 8px 16px;
|
|
padding: 8px;
|
|
`;
|
|
|
|
const StyledIcon = styled(IconReload)`
|
|
color: ${({ theme }) => theme.grayScale.gray12};
|
|
margin-right: 8px;
|
|
`;
|
|
|
|
export const AppRootErrorFallback = ({
|
|
resetErrorBoundary,
|
|
title = t`Sorry, something went wrong`,
|
|
}: AppRootErrorFallbackProps) => {
|
|
return (
|
|
<StyledContainer>
|
|
<StyledPanel>
|
|
<StyledEmptyContainer>
|
|
<StyledImageContainer>
|
|
<StyledBackgroundImage
|
|
src="/images/placeholders/background/error_index_bg.png"
|
|
alt="Background"
|
|
/>
|
|
<StyledInnerImage
|
|
src="/images/placeholders/moving-image/error_index.png"
|
|
alt="Inner"
|
|
/>
|
|
</StyledImageContainer>
|
|
<StyledEmptyTextContainer>
|
|
<StyledEmptyTitle>{title}</StyledEmptyTitle>
|
|
<StyledEmptySubTitle>
|
|
{t`Please refresh the page.`}
|
|
</StyledEmptySubTitle>
|
|
</StyledEmptyTextContainer>
|
|
<StyledButton onClick={resetErrorBoundary}>
|
|
<StyledIcon size={16} />
|
|
Reload
|
|
</StyledButton>
|
|
</StyledEmptyContainer>
|
|
</StyledPanel>
|
|
</StyledContainer>
|
|
);
|
|
};
|