From 3bf81cf540772d522bfe64607a6d3188129b77bf Mon Sep 17 00:00:00 2001 From: Hyungu Kang | Airen Date: Tue, 11 Jun 2024 13:44:04 +0900 Subject: [PATCH] [AC-2602] fix: style issues (#271) ## Changes 1. update path of files 2. vertical position of powered by banner / vertical position of scroll to bottom button ### Before image ### After image ticket: [AC-2602] [AC-2602]: https://sendbird.atlassian.net/browse/AC-2602?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --- src/components/ChatBottom.tsx | 58 ------------------- src/components/CodeSnippet.tsx | 44 --------------- src/components/CustomChannelComponent.tsx | 31 ++-------- src/components/CustomChannelHeader.tsx | 2 +- src/components/TokensBody.tsx | 2 +- src/components/{ => ui}/BetaLogo.tsx | 0 src/components/{ => ui}/CodeBlock.tsx | 2 +- src/components/ui/PoweredByBanner.tsx | 69 +++++++++++++++++++++++ 8 files changed, 76 insertions(+), 132 deletions(-) delete mode 100644 src/components/ChatBottom.tsx delete mode 100644 src/components/CodeSnippet.tsx rename src/components/{ => ui}/BetaLogo.tsx (100%) rename src/components/{ => ui}/CodeBlock.tsx (97%) create mode 100644 src/components/ui/PoweredByBanner.tsx diff --git a/src/components/ChatBottom.tsx b/src/components/ChatBottom.tsx deleted file mode 100644 index a034875a5..000000000 --- a/src/components/ChatBottom.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import styled from 'styled-components'; - -import { useConstantState } from '../context/ConstantContext'; -import SendbirdLogo from '../icons/sendbird-logo-widget.svg'; - -const Container = styled.div` - width: 100%; -`; - -const InnerContainer = styled.div<{ chatBottomBackgroundColor?: string }>` - padding: 0 4px; - width: calc(100% - 8px); - min-height: 40px; - display: flex; - justify-content: center; - align-items: center; - background: ${({ theme, chatBottomBackgroundColor }) => - chatBottomBackgroundColor || theme.bgColor.bottomBanner}; - color: ${({ theme }) => theme.textColor.bottomBanner.poweredBy}; - flex-wrap: wrap; - font-size: 13px; - - svg { - path { - fill: ${({ theme }) => theme.textColor.bottomBanner.logo}; - } - } -`; - -const Highlighter = styled.a` - color: white; - display: flex; - align-items: center; - justify-content: center; -`; - -// link: https://dashboard.sendbird.com/auth/signup -export default function ChatBottom() { - const { chatBottomContent } = useConstantState(); - - return ( - - - {chatBottomContent?.text}   Powered by  - - - - - - ); -} diff --git a/src/components/CodeSnippet.tsx b/src/components/CodeSnippet.tsx deleted file mode 100644 index f59a00360..000000000 --- a/src/components/CodeSnippet.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import styled from 'styled-components'; - -const Root = styled.div` - width: 100%; - display: flex; - justify-content: flex-start; - align-items: center; -`; - -const LineItem = styled.div` - border-right: solid var(--sendbird-dark-onlight-02); -`; - -const LinesContainer = styled.div` - width: 40px; -`; - -const CodeContainer = styled.div` - width: calc(100% - 36px); - overflow-x: scroll; - height: 100px; -`; - -interface Props { - codeString: string; -} - -export default function CodeSnippet(props: Props) { - const { codeString } = props; - const codeSegments = codeString.split('\n'); - - return ( - - - - {codeSegments.map((seg) => ( - {seg} - ))} - - {codeString} - - - ); -} diff --git a/src/components/CustomChannelComponent.tsx b/src/components/CustomChannelComponent.tsx index bf87ec642..23198e7f2 100644 --- a/src/components/CustomChannelComponent.tsx +++ b/src/components/CustomChannelComponent.tsx @@ -2,22 +2,20 @@ import { SendableMessage } from '@sendbird/chat/lib/__definition'; import { SendingStatus, UserMessage } from '@sendbird/chat/message'; import { isSameDay } from 'date-fns/isSameDay'; import { useEffect, useMemo, useRef, useState } from 'react'; -import ReactDOM from 'react-dom'; import styled from 'styled-components'; -import useSendbirdStateContext from '@uikit/hooks/useSendbirdStateContext'; import GroupChannelUI from '@uikit/modules/GroupChannel/components/GroupChannelUI'; import Message from '@uikit/modules/GroupChannel/components/Message'; import MessageInputWrapper from '@uikit/modules/GroupChannel/components/MessageInputWrapper'; import { useGroupChannelContext } from '@uikit/modules/GroupChannel/context/GroupChannelProvider'; -import ChatBottom from './ChatBottom'; import CustomChannelHeader from './CustomChannelHeader'; import CustomMessage from './CustomMessage'; import DynamicRepliesPanel from './DynamicRepliesPanel'; import MessageDataContent from './MessageDataContent'; import WelcomeMessages from './messages/WelcomeMessages'; import StaticRepliesPanel from './StaticRepliesPanel'; +import { PoweredByBanner } from './ui/PoweredByBanner'; import { useConstantState } from '../context/ConstantContext'; import { useWidgetSession, @@ -27,11 +25,7 @@ import useAutoDismissMobileKeyboardHandler from '../hooks/useAutoDismissMobileKe import { useBlockWhileBotResponding } from '../hooks/useBlockWhileBotResponding'; import { useResetHistoryOnConnected } from '../hooks/useResetHistoryOnConnected'; import { useScrollOnStreaming } from '../hooks/useScrollOnStreaming'; -import { - hideChatBottomBanner, - isDashboardPreview, - isIOSMobile, -} from '../utils'; +import { isDashboardPreview, isIOSMobile } from '../utils'; import { getBotWelcomeMessages, getSenderUserIdFromMessage, @@ -58,7 +52,7 @@ const Root = styled.div` .sendbird-conversation__scroll-bottom-button { bottom: ${({ isStaticReplyVisible }) => - isStaticReplyVisible ? '65px' : '50px'}; + isStaticReplyVisible ? '65px' : '16px'}; } .sendbird-message-input-wrapper { @@ -372,24 +366,7 @@ export function CustomChannelComponent() { ); }} /> - + ); } - -function Banner() { - const store = useSendbirdStateContext(); - const sdk = store.stores.sdkStore.sdk; - - if (hideChatBottomBanner(sdk)) { - return null; - } - - const inputElement = document.querySelector( - '.sendbird-message-input-wrapper' - ); - - return inputElement - ? ReactDOM.createPortal(, inputElement) - : null; -} diff --git a/src/components/CustomChannelHeader.tsx b/src/components/CustomChannelHeader.tsx index 9d04d3c84..479de9b35 100644 --- a/src/components/CustomChannelHeader.tsx +++ b/src/components/CustomChannelHeader.tsx @@ -3,8 +3,8 @@ import styled from 'styled-components'; import Avatar from '@uikit/ui/Avatar'; import Label, { LabelColors, LabelTypography } from '@uikit/ui/Label'; -import BetaLogo from './BetaLogo'; import BotProfileImage from './BotProfileImage'; +import BetaLogo from './ui/BetaLogo'; import { elementIds } from '../const'; import { useConstantState } from '../context/ConstantContext'; import { useWidgetState } from '../context/WidgetStateContext'; diff --git a/src/components/TokensBody.tsx b/src/components/TokensBody.tsx index 98241de9f..6a93e7e28 100644 --- a/src/components/TokensBody.tsx +++ b/src/components/TokensBody.tsx @@ -2,8 +2,8 @@ import { ReactNode } from 'react'; import styled from 'styled-components'; import BotMessageBottom from './BotMessageBottom'; -import { CodeBlock } from './CodeBlock'; import SourceContainer, { Source } from './SourceContainer'; +import { CodeBlock } from './ui/CodeBlock'; import { useConstantState } from '../context/ConstantContext'; import { replaceWithRegex, Token, TokenType } from '../utils'; diff --git a/src/components/BetaLogo.tsx b/src/components/ui/BetaLogo.tsx similarity index 100% rename from src/components/BetaLogo.tsx rename to src/components/ui/BetaLogo.tsx diff --git a/src/components/CodeBlock.tsx b/src/components/ui/CodeBlock.tsx similarity index 97% rename from src/components/CodeBlock.tsx rename to src/components/ui/CodeBlock.tsx index af4a4f578..0a0f11aec 100644 --- a/src/components/CodeBlock.tsx +++ b/src/components/ui/CodeBlock.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import styled from 'styled-components'; -import { Token } from '../utils'; +import { Token } from '../../utils'; const CodeContainer = styled.div` position: relative; /* For the copy button positioning */ diff --git a/src/components/ui/PoweredByBanner.tsx b/src/components/ui/PoweredByBanner.tsx new file mode 100644 index 000000000..82f02e06a --- /dev/null +++ b/src/components/ui/PoweredByBanner.tsx @@ -0,0 +1,69 @@ +import ReactDOM from 'react-dom'; +import styled from 'styled-components'; + +import useSendbirdStateContext from '@uikit/hooks/useSendbirdStateContext'; + +import { useConstantState } from '../../context/ConstantContext'; +import SendbirdLogo from '../../icons/sendbird-logo.svg'; +import { hideChatBottomBanner } from '../../utils'; + +export function PoweredByBanner() { + const store = useSendbirdStateContext(); + const sdk = store.stores.sdkStore.sdk; + + if (hideChatBottomBanner(sdk)) { + return null; + } + + const inputElement = document.querySelector( + '.sendbird-message-input-wrapper' + ); + + return inputElement ? ReactDOM.createPortal(, inputElement) : null; +} + +const InnerContainer = styled.div<{ chatBottomBackgroundColor?: string }>` + padding-bottom: 12px; + display: flex; + justify-content: center; + align-items: center; + background: ${({ theme, chatBottomBackgroundColor }) => + chatBottomBackgroundColor || theme.bgColor.bottomBanner}; + color: ${({ theme }) => theme.textColor.bottomBanner.poweredBy}; + flex-wrap: wrap; + font-size: 13px; + + svg { + path { + fill: ${({ theme }) => theme.textColor.bottomBanner.logo}; + } + } +`; + +const Highlighter = styled.a` + color: white; + display: flex; + align-items: center; + justify-content: center; +`; + +// link: https://dashboard.sendbird.com/auth/signup +function Banner() { + const { chatBottomContent } = useConstantState(); + + return ( + + {chatBottomContent?.text}   Powered by  + + + + + ); +}