mukeshs/twenty_crm
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

8
packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx
View File

@ -1,11 +1,12 @@
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { ANIMATION, BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui';
import { ANIMATION } from 'twenty-ui';
import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { useTheme } from '@emotion/react';
import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader';
const StyledAnimatedContainer = styled(motion.div)`
@ -47,6 +48,7 @@ const StyledSkeletonTitleContainer = styled.div`
export const LeftPanelSkeletonLoader = () => {
const isMobile = useIsMobile();
const theme = useTheme();
return (
<StyledAnimatedContainer
@ -62,8 +64,8 @@ export const LeftPanelSkeletonLoader = () => {
<StyledItemsContainer>
<StyledSkeletonTitleContainer>
<SkeletonTheme
baseColor={GRAY_SCALE.gray15}
highlightColor={BACKGROUND_LIGHT.transparent.lighter}
baseColor={theme.background.tertiary}
highlightColor={theme.background.transparent.lighter}
borderRadius={4}
>
<Skeleton