fix(skeleton component dark mode): skeleton component dark mode

fix #1308
push-protocol · May 23, 2024 · c90e3de · c90e3de
1 parent 836e5c1
commit c90e3de
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 19 deletions.
diff --git 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<IChatPreviewProps> = (options: IChatPreviewPr
             flex="initial"
             cursor="pointer"
             className={options.readmode ? 'skeleton' : ''}
+            animation={theme.skeletonBG}
           >
             <Message theme={theme}>
               {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
@@ -157,7 +157,6 @@ export const ChatViewList: React.FC<IChatViewListProps> = (options: IChatViewLis
       return () => clearTimeout(timer);
     }
 
-    return () => {};
   }, [chatAcceptStream, participantJoinStream]);
 
   // Change listtype to 'UINITIALIZED' and hidden to true when participantRemoveStream or participantLeaveStream is received
@@ -416,5 +415,5 @@ const ChatViewListCard = styled(Section)<IThemeProps>`
 `;
 
 const ChatViewListCardInner = styled(Section)<IThemeProps>`
-  filter: ${(props) => (props.blur ? 'blur(6px)' : 'none')};
+  filter: ${(props) => (props.blur ? 'blur(12px)' : 'none')};
 `;
diff --git 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}
         </Span>

diff --git a/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx b/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx
@@ -14,7 +14,7 @@ import { Div, Image, Section, Span, Tooltip } from '../../reusables';
 import { CopyIcon } from '../../../icons/PushIcons';
 
 // Interfaces & Types
-import { IChatTheme } from '../theme';
+import { IChatTheme, getCustomTheme } from '../theme';
 type ProfileProps = {
   theme: IChatTheme;
   member: {
@@ -60,6 +60,7 @@ export const ProfileContainer = ({ theme, member, copy, customStyle, loading }:
     }
   }, [member?.recipient, member?.icon]);
 
+
   return (
     <Section justifyContent="flex-start">
       <Section
@@ -69,6 +70,7 @@ export const ProfileContainer = ({ theme, member, copy, customStyle, loading }:
         overflow="hidden"
         margin="0px 12px 0px 0px"
         position="relative"
+        animation={theme.skeletonBG}
         className={loading ? 'skeleton' : ''}
       >
         {member?.icon && (
@@ -127,6 +129,7 @@ export const ProfileContainer = ({ theme, member, copy, customStyle, loading }:
                 copyToClipboard(pCAIP10ToWallet(member?.recipient || ''));
                 setCopyText('Copied');
               }}
+              animation={theme.skeletonBG}
               className={loading ? 'skeleton' : ''}
             >
               <Span

diff --git a/packages/uiweb/src/lib/components/chat/theme/index.ts b/packages/uiweb/src/lib/components/chat/theme/index.ts
@@ -2,6 +2,7 @@
  * @file theme file: all the predefined themes are defined here
  */
 import { CHAT_THEME_OPTIONS } from '../exportedTypes';
+import styled, { keyframes, css } from 'styled-components';
 // bgColorPrimary: "#fff",
 //   bgColorSecondary: "#D53A94",
 //   textColorPrimary: "#1e1e1e",
@@ -184,10 +185,39 @@ export interface IChatTheme {
   textColor?: ITextColor;
   backdropFilter?: string;
   scrollbarColor?: string;
+  skeletonBG?: string;
 
   spinnerColor?: string;
 }
 
+const lightSkeletonLoading = keyframes`
+  0% {
+    background-color: hsl(200, 20%, 80%);
+  }
+  100% {
+    background-color: hsl(200, 20%, 95%);
+  }
+`;
+
+const darkSkeletonLoading = keyframes`
+  0% {
+    background-color: #575D73;
+  }
+  100% {
+    background-color: #6E748B;
+  }
+`;
+
+const animation = props =>
+  css`
+    ${lightSkeletonLoading} 1s linear infinite alternate;
+`;
+
+const darkAnimation = props =>
+  css`
+    ${darkSkeletonLoading} 1s linear infinite alternate;
+`;
+
 //dark theme object
 export const lightChatTheme: IChatTheme = {
   borderRadius: {
@@ -354,6 +384,9 @@ export const lightChatTheme: IChatTheme = {
   backdropFilter: 'none',
   spinnerColor: 'rgb(202, 89, 155)',
   scrollbarColor: 'rgb(202, 89, 155)',
+  skeletonFirstBg: 'hsl(200, 20%, 80%)',
+  skeletonSecondBg: 'hsl(200, 20%, 95%)',
+  skeletonBG: animation
 };
 
 export const darkChatTheme: IChatTheme = {
@@ -520,4 +553,7 @@ export const darkChatTheme: IChatTheme = {
   backdropFilter: 'none',
   spinnerColor: 'rgb(202, 89, 155)',
   scrollbarColor: 'rgb(202, 89, 155)',
+  skeletonFirstBg: '#575D73',
+  skeletonSecondBg: '#6E748B',
+  skeletonBG: darkAnimation
 };
diff --git 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 = {
@@ -44,6 +35,7 @@ type SectionStyleProps = {
   whiteSpace?: string;
   visibility?: string;
   zIndex?: string;
+  animation?: string;
 };
 
 export const Section = styled.div<SectionStyleProps>`
@@ -82,7 +74,7 @@ export const Section = styled.div<SectionStyleProps>`
 
   &.skeleton {
     > * {
-      visibility: ${(props) => (props.visibility || skeletonLoading ? 'hidden' : 'visible')};
+      visibility: ${(props) => (props.visibility || props.animation ? 'hidden' : 'visible')};
     }
 
     &:after {
@@ -93,7 +85,7 @@ export const Section = styled.div<SectionStyleProps>`
       left: 0;
       right: 0;
       z-index: 1;
-      animation: ${skeletonLoading} 1s linear infinite alternate;
+      animation: ${(props) => props.animation};
       border-radius: 8px;
     }
   }
@@ -110,6 +102,7 @@ type DivStyleProps = {
   borderRadius?: string;
   textAlign?: string;
   visibility?: string;
+  animation?: string;
 };
 export const Div = styled.div<DivStyleProps>`
   height: ${(props) => props.height || 'auto'};
@@ -124,7 +117,7 @@ export const Div = styled.div<DivStyleProps>`
 
   &.skeleton {
     > * {
-      visibility: ${(props) => (props.visibility || skeletonLoading ? 'hidden' : 'visible')};
+      visibility: ${(props) => (props.visibility || props.animation ? 'hidden' : 'visible')};
     }
 
     &:after {
@@ -136,7 +129,7 @@ export const Div = styled.div<DivStyleProps>`
       right: 0;
       opacity: 1;
       z-index: 1;
-      animation: ${skeletonLoading} 1s linear infinite alternate;
+      animation: ${(props) => props.animation};
       border-radius: 8px;
     }
   }
@@ -167,6 +160,7 @@ type SpanStyleProps = {
   cursor?: string;
   whiteSpace?: string;
   visibility?: string;
+  animation?: string;
 };
 
 export const Span = styled.span<SpanStyleProps>`
@@ -197,7 +191,7 @@ export const Span = styled.span<SpanStyleProps>`
 
   &.skeleton {
     > * {
-      visibility: ${(props) => (props.visibility || skeletonLoading ? 'hidden' : 'visible')};
+      visibility: ${(props) => (props.visibility || props.animation ? 'hidden' : 'visible')};
     }
 
     &:after {
@@ -209,7 +203,7 @@ export const Span = styled.span<SpanStyleProps>`
       right: 0;
       opacity: 1;
       z-index: 1;
-      animation: ${skeletonLoading} 1s linear infinite alternate;
+      animation: ${(props) => props.animation};
       border-radius: 8px;
     }
   }