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

Migrate to twenty-ui - feedback/loader (#7997)

Browse Source 
This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7528](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7528).

 --- 

### Description

- Move loader components to `twenty-ui`    
  
Fixes  twentyhq/private-issues#90

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-app[bot]
2024-10-24 16:19:32 +02:00
committed by GitHub
parent 5fdf9acd08
commit 4ceee4ab8f
10 changed files with 10 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/ui/display/status/components/Status.tsx
View File

@ -1,7 +1,5 @@
import styled from '@emotion/styled';
import { ThemeColor, themeColorSchema } from 'twenty-ui';
import { Loader } from '@/ui/feedback/loader/components/Loader';
import { Loader, ThemeColor, themeColorSchema } from 'twenty-ui';
const StyledStatus = styled.h3<{
color: ThemeColor;

51
packages/twenty-front/src/modules/ui/feedback/loader/components/Loader.tsx
View File

@ -1,51 +0,0 @@
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>
);