misc: update ui style

ringcentral · Dec 5, 2024 · 226ea92 · 226ea92
1 parent ed2f2bb
commit 226ea92
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 13 deletions.
diff --git a/src/components/GlipChatPanel/GlipMarkdown.tsx b/src/components/GlipChatPanel/GlipMarkdown.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ReactNode } from 'react';
 import ReactMarkdown from 'react-markdown';
-import { styled } from '@ringcentral/juno';
+import { styled, palette2 } from '@ringcentral/juno';
 import { replaceEmojiText, replaceAtTeamText } from './formatPost';
 
 function ImageRender(props: {
@@ -78,6 +78,17 @@ function TextRender({
   );
 }
 
+const Container = styled.div`
+  blockquote {
+    padding: 6px 6px 6px 16px;
+    margin: 4px 0px 8px;
+    border-left: 1px solid ${palette2('interactive', 'b02')};
+    background-color: ${palette2('neutral', 'b02')};
+    color: ${palette2('neutral', 'f04')};
+    overflow-x: auto;
+  }
+`;
+
 export function GlipMarkdown({
   className = undefined,
   text,
@@ -88,7 +99,7 @@ export function GlipMarkdown({
   atRender?: (...args: any[]) => any;
 }) {
   return (
-    <div className={className}>
+    <Container className={className}>
       <ReactMarkdown
         components={{
           a: LinkRender,
@@ -103,6 +114,6 @@ export function GlipMarkdown({
       >
         {replaceAtTeamText(replaceEmojiText(text))}
       </ReactMarkdown>
-    </div>
+    </Container>
   );
 }
diff --git a/src/components/GlipChatPanel/GlipPostItem.tsx b/src/components/GlipChatPanel/GlipPostItem.tsx
@@ -67,17 +67,15 @@ const TimeText = styled.span`
 
 function PostName({
   creator = null,
-  showName,
   viewProfile,
   dateTime,
 }: {
   creator: Creator | null;
-  showName: boolean;
   viewProfile: (id: string) => void;
   dateTime?: string;
   sendStatus?: string | null;
 }) {
-  if (!creator || !showName) {
+  if (!creator) {
     return null;
   }
   return (
@@ -145,15 +143,13 @@ export function GlipPostItem({
   post = {},
   className = undefined,
   creationTime = undefined,
-  showName = true,
   atRender = () => null,
   viewProfile,
   showCreator = true,
 }: {
   post: any;
   className?: string;
   creationTime?: string;
-  showName?: boolean;
   showCreator?: boolean;
   atRender: (...args: any[]) => any;
   viewProfile: (...args: any[]) => any;
@@ -183,7 +179,6 @@ export function GlipPostItem({
           showCreator ? (
             <PostName
               creator={post.creator}
-              showName={showName || post.type !== 'TextMessage'}
               viewProfile={viewProfile}
               dateTime={creationTime}
             />

diff --git a/src/components/GlipChatPanel/GlipPostList.tsx b/src/components/GlipChatPanel/GlipPostList.tsx
@@ -12,7 +12,6 @@ export function GlipPostList({
   className = undefined,
   posts = [],
   groupId = undefined,
-  showName = true,
   dateTimeFormatter,
   viewProfile,
   loadNextPage,
@@ -21,7 +20,6 @@ export function GlipPostList({
   className?: string;
   posts?: any[];
   groupId?: string;
-  showName?: boolean;
   dateTimeFormatter: (...args: any[]) => any;
   viewProfile: (...args: any[]) => any;
   loadNextPage: (...args: any[]) => any;
@@ -120,7 +118,6 @@ export function GlipPostList({
             <GlipPostItem
               post={post}
               creationTime={dateTimeFormatter(post.creationTime)}
-              showName={showName}
               atRender={atRender}
               viewProfile={viewProfile}
               showCreator={showCreator}

diff --git a/src/components/GlipChatPanel/index.tsx b/src/components/GlipChatPanel/index.tsx
@@ -70,7 +70,6 @@ export function GlipChatPanel({
               posts={posts}
               atRender={atRender}
               groupId={group.id}
-              showName={group.members && group.members.length > 2}
               dateTimeFormatter={dateTimeFormatter}
               viewProfile={viewProfile}
               loadNextPage={loadNextPage}

diff --git a/src/components/GlipGroupsPanel/GlipGroupItem.tsx b/src/components/GlipGroupsPanel/GlipGroupItem.tsx
@@ -87,6 +87,11 @@ function GlipGroupAvatar({
 const StyledListItem = styled(RcListItem)`
   border-bottom: 1px solid ${palette2('neutral', 'l02')};
   background-color: ${palette2('neutral', 'b01')};
+  height: 57px;
+
+  .RcListItemText-primary {
+    font-size: 0.875rem;
+  }
 `;
 
 const UnreadBadge = styled(RcChip)`