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

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

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

@ -1,7 +1,7 @@
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, GRAY_SCALE } from 'twenty-ui';
const StyledSkeletonContainer = styled.div`
align-items: flex-start;
@ -20,11 +20,13 @@ export const MainNavigationDrawerItemsSkeletonLoader = ({
title?: boolean;
length: number;
}) => {
const theme = useTheme();
return (
<StyledSkeletonContainer>
<SkeletonTheme
baseColor={GRAY_SCALE.gray15}
highlightColor={BACKGROUND_LIGHT.transparent.lighter}
baseColor={theme.background.tertiary}
highlightColor={theme.background.transparent.lighter}
borderRadius={4}
>
{title && (

10
packages/twenty-front/src/loading/components/RightDrawerSkeletonLoader.tsx
View File

@ -1,6 +1,6 @@
import styled from '@emotion/styled';
import { BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui';
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';
const StyledRightDrawerContainer = styled.div`
@ -11,10 +11,12 @@ const StyledRightDrawerContainer = styled.div`
`;
const StyledSkeletonLoader = () => {
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 height={SKELETON_LOADER_HEIGHT_SIZES.standard.m} width={140} />

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} />

4
packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx
View File

@ -1,12 +1,12 @@
import styled from '@emotion/styled';
import { BACKGROUND_LIGHT, MOBILE_VIEWPORT } from 'twenty-ui';
import { MOBILE_VIEWPORT } from 'twenty-ui';
import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
import { LeftPanelSkeletonLoader } from '~/loading/components/LeftPanelSkeletonLoader';
import { RightPanelSkeletonLoader } from '~/loading/components/RightPanelSkeletonLoader';
const StyledContainer = styled.div`
background: ${BACKGROUND_LIGHT.noisy};
background: ${({ theme }) => theme.background.noisy};
box-sizing: border-box;
display: flex;
flex-direction: row;

1
packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx
View File

@ -42,6 +42,7 @@ export const SKELETON_LOADER_HEIGHT_SIZES = {
const SkeletonColumnLoader = ({ height }: { height: number }) => {
const theme = useTheme();
return (
<SkeletonTheme
baseColor={theme.background.tertiary}