cfd83d6b8e
Some parts of the Frontend used theme constants exported from `modules/ui` while other parts used theme constants exported from `twenty-ui`. This PR centralizes theme constants by removing them from `modules/ui` completely.
52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { motion } from 'framer-motion';
|
|
import { ThemeColor } from 'twenty-ui';
|
|
|
|
const StyledLoaderContainer = styled.div<{
|
|
color?: ThemeColor;
|
|
}>`
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
width: ${({ theme }) => theme.spacing(6)};
|
|
height: ${({ theme }) => theme.spacing(3)};
|
|
border-radius: ${({ theme }) => theme.border.radius.pill};
|
|
border: 1px solid
|
|
${({ color, theme }) =>
|
|
color ? theme.tag.text[color] : theme.font.color.tertiary};
|
|
overflow: hidden;
|
|
`;
|
|
|
|
const StyledLoader = styled(motion.div)<{
|
|
color?: ThemeColor;
|
|
}>`
|
|
background-color: ${({ color, theme }) =>
|
|
color ? theme.tag.text[color] : theme.font.color.tertiary};
|
|
border-radius: ${({ theme }) => theme.border.radius.pill};
|
|
height: 8px;
|
|
width: 8px;
|
|
`;
|
|
|
|
type LoaderProps = {
|
|
color?: ThemeColor;
|
|
};
|
|
|
|
export const Loader = ({ color }: LoaderProps) => (
|
|
<StyledLoaderContainer color={color}>
|
|
<StyledLoader
|
|
color={color}
|
|
animate={{
|
|
x: [-16, 0, 16],
|
|
width: [8, 12, 8],
|
|
height: [8, 2, 8],
|
|
}}
|
|
transition={{
|
|
duration: 0.8,
|
|
times: [0, 0.15, 0.3],
|
|
repeat: Infinity,
|
|
}}
|
|
/>
|
|
</StyledLoaderContainer>
|
|
);
|