From d8241be53f1c4e6fb07624c666e6228fccadc07a Mon Sep 17 00:00:00 2001 From: corlard3y Date: Mon, 27 May 2024 19:28:47 +0100 Subject: [PATCH] fix: update dark mode theme --- .../chat/ChatPreview/ChatPreview.tsx | 1 + .../chat/ChatViewList/ChatViewList.tsx | 4 ++- .../chat/ChatViewList/MessageEncryption.tsx | 1 + .../chat/reusables/ProfileContainer.tsx | 2 ++ .../src/lib/components/chat/theme/index.ts | 33 ++++++++++++++++++- .../components/reusables/sharedStyling.tsx | 26 ++++++--------- 6 files changed, 49 insertions(+), 18 deletions(-) diff --git a/packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx b/packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx index 7bb3b94e8..ad1f8fc84 100644 --- a/packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx @@ -159,6 +159,7 @@ export const ChatPreview: React.FC = (options: IChatPreviewPr flex="initial" cursor="pointer" className={options.readmode ? 'skeleton' : ''} + animation={theme.skeletonBG} > {options?.chatPreviewPayload?.chatMsg?.messageType === 'Image' || diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx index f51098d0b..421f6040a 100644 --- a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx @@ -293,7 +293,9 @@ export const ChatViewList: React.FC = (options: IChatViewLis return () => clearTimeout(timer); } - return () => {}; + return () => { + // add comment + }; }, [chatAcceptStream, participantJoinStream]); // Change listtype to 'UINITIALIZED' and hidden to true when participantRemoveStream or participantLeaveStream is received diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx index af70cfd80..3cc213f63 100644 --- a/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx @@ -68,6 +68,7 @@ export const EncryptionMessage = ({ id, className }: { id: EncryptionKeys; class fontWeight="400" textAlign="left" className={className} + animation={theme.skeletonBG} > {EncryptionMessageContent[id].text} diff --git a/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx b/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx index 795bc74fa..167cef78d 100644 --- a/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx +++ b/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx @@ -73,6 +73,7 @@ export const ProfileContainer = ({ theme, member, copy, customStyle, loading }: borderRadius="100%" overflow="hidden" className={loading ? 'skeleton' : ''} + animation={theme.skeletonBG} > {member?.icon && ( + css` + ${lightSkeletonLoading} 1s linear infinite alternate; +`; + +const darkAnimation = () => + css` + ${darkSkeletonLoading} 1s linear infinite alternate; +`; + //dark theme object export const lightChatTheme: IChatTheme = { borderRadius: { @@ -368,6 +397,7 @@ export const lightChatTheme: IChatTheme = { backdropFilter: 'none', spinnerColor: 'rgb(202, 89, 155)', scrollbarColor: 'rgb(202, 89, 155)', + skeletonBG: animation }; export const darkChatTheme: IChatTheme = { @@ -541,4 +571,5 @@ export const darkChatTheme: IChatTheme = { backdropFilter: 'none', spinnerColor: 'rgb(202, 89, 155)', scrollbarColor: 'rgb(202, 89, 155)', + skeletonBG: darkAnimation }; diff --git a/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx b/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx index 806fb13b3..6d67187fc 100644 --- a/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx +++ b/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx @@ -1,14 +1,5 @@ -import styled, { keyframes } from 'styled-components'; +import styled from 'styled-components'; -// Define keyframes -const skeletonLoading = keyframes` - 0% { - background-color: hsl(200, 20%, 80%); - } - 100% { - background-color: hsl(200, 20%, 95%); - } -`; // Define types and export components type SectionStyleProps = { @@ -45,6 +36,7 @@ type SectionStyleProps = { visibility?: string; zIndex?: string; fontSize?: string; + animation?: string; }; export const Section = styled.div` @@ -84,7 +76,7 @@ export const Section = styled.div` &.skeleton { > * { - visibility: ${(props) => (props.visibility || skeletonLoading ? 'hidden' : 'visible')}; + visibility: ${(props) => (props.visibility || props.animation ? 'hidden' : 'visible')}; } &:after { @@ -95,7 +87,7 @@ export const Section = styled.div` left: 0; right: 0; z-index: 1; - animation: ${skeletonLoading} 1s linear infinite alternate; + animation: ${(props) => props.animation}; border-radius: 8px; } } @@ -112,6 +104,7 @@ type DivStyleProps = { borderRadius?: string; textAlign?: string; visibility?: string; + animation?: string; }; export const Div = styled.div` height: ${(props) => props.height || 'auto'}; @@ -126,7 +119,7 @@ export const Div = styled.div` &.skeleton { > * { - visibility: ${(props) => (props.visibility || skeletonLoading ? 'hidden' : 'visible')}; + visibility: ${(props) => (props.visibility || props.animation ? 'hidden' : 'visible')}; } &:after { @@ -138,7 +131,7 @@ export const Div = styled.div` right: 0; opacity: 1; z-index: 1; - animation: ${skeletonLoading} 1s linear infinite alternate; + animation: ${(props) => props.animation}; border-radius: 8px; } } @@ -170,6 +163,7 @@ type SpanStyleProps = { whiteSpace?: string; visibility?: string; textWrap?: string; + animation?: string; }; export const Span = styled.span` @@ -201,7 +195,7 @@ export const Span = styled.span` &.skeleton { > * { - visibility: ${(props) => (props.visibility || skeletonLoading ? 'hidden' : 'visible')}; + visibility: ${(props) => (props.visibility || props.animation ? 'hidden' : 'visible')}; } &:after { @@ -213,7 +207,7 @@ export const Span = styled.span` right: 0; opacity: 1; z-index: 1; - animation: ${skeletonLoading} 1s linear infinite alternate; + animation: ${(props) => props.animation}; border-radius: 8px; } }