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

fix: skeleton not using theme variables (#9712)

Browse Source 
Fix linked to this discord issue:
https://discord.com/channels/1130383047699738754/1329509340494692444

---------

Co-authored-by: Weiko <corentin@twenty.com>
This commit is contained in:
Jérémy M
2025-01-21 09:19:06 +01:00
committed by GitHub
parent e3f7cec82f
commit d4b038f24a
6 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx
View File

@ -1,16 +1,11 @@
import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import {
BACKGROUND_LIGHT,
BORDER_COMMON,
BORDER_LIGHT,
GRAY_SCALE,
MOBILE_VIEWPORT,
} from 'twenty-ui';
import { BORDER_COMMON, MOBILE_VIEWPORT } from 'twenty-ui';
const StyledMainContainer = styled.div`
background: ${BACKGROUND_LIGHT.noisy};
background: ${({ theme }) => theme.background.noisy};
box-sizing: border-box;
display: flex;
flex: 1 1 auto;
@ -27,8 +22,8 @@ const StyledMainContainer = styled.div`
`;
const StyledPanel = styled.div`
background: ${BACKGROUND_LIGHT.primary};
border: 1px solid ${BORDER_LIGHT.color.medium};
background: ${({ theme }) => theme.background.primary};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${BORDER_COMMON.radius.md};
height: 100%;
overflow: auto;
@ -54,11 +49,13 @@ const StyledRightPanelFlexContainer = styled.div`
`;
const StyledSkeletonHeaderLoader = () => {
const theme = useTheme();
return (
<StyledHeaderContainer>
<SkeletonTheme
baseColor={GRAY_SCALE.gray15}
highlightColor={BACKGROUND_LIGHT.transparent.lighter}
baseColor={theme.background.tertiary}
highlightColor={theme.background.transparent.lighter}
borderRadius={4}
>
<Skeleton
@ -71,10 +68,12 @@ const StyledSkeletonHeaderLoader = () => {
};
const StyledSkeletonAddLoader = () => {
const theme = useTheme();
return (
<SkeletonTheme
baseColor={GRAY_SCALE.gray15}
highlightColor={BACKGROUND_LIGHT.transparent.lighter}
baseColor={theme.background.tertiary}
highlightColor={theme.background.transparent.lighter}
borderRadius={4}
>
<Skeleton width={132} height={SKELETON_LOADER_HEIGHT_SIZES.standard.s} />