diff --git a/src/components/FormInput.tsx b/src/components/FormInput.tsx index f2aec4fb9..8d82a6a87 100644 --- a/src/components/FormInput.tsx +++ b/src/components/FormInput.tsx @@ -113,6 +113,11 @@ const Chip = styled.div` outline: 'none', 'box-shadow': `0 0 0 1px ${theme.borderColor.formChip.focus}`, }, + '&:active': { + color: theme.textColor.formChip.selected, + backgroundColor: theme.bgColor.formChip.selected, + border: `1px solid ${theme.borderColor.formChip.selected}`, + }, }; } case 'selected': { @@ -133,6 +138,11 @@ const Chip = styled.div` outline: 'none', 'box-shadow': `0 0 0 1px ${theme.borderColor.formChip.focus}`, }, + '&:active': { + color: theme.textColor.formChip.selected, + backgroundColor: theme.bgColor.formChip.selected, + border: `1px solid ${theme.borderColor.formChip.selected}`, + }, }; } case 'submittedDefault': { diff --git a/src/components/chat/ui/ChatInput.tsx b/src/components/chat/ui/ChatInput.tsx index 230b5919a..b9a51588f 100644 --- a/src/components/chat/ui/ChatInput.tsx +++ b/src/components/chat/ui/ChatInput.tsx @@ -74,11 +74,13 @@ const container = css` display: flex; align-items: center; .sendbird-message-input-text-field { - min-height: 40px; + min-height: 36px; max-height: 100px; - height: 40px; + height: 36px; overflow-y: auto; - padding: 8px 16px; + padding-top: 8px; + padding-bottom: 8px; + padding-inline-start: 16px; border-radius: 20px; // Not to zoom in on mobile set font-size to 16px which blocks the zooming on iOS // @link: https://weblog.west-wind.com/posts/2023/Apr/17/Preventing-iOS-Safari-Textbox-Zooming @@ -99,17 +101,18 @@ const container = css` bottom: unset; background-color: transparent; } - .sendbird-iconbutton__inner { - height: unset; - } .sendbird-message-input--attach { right: unset; bottom: unset; inset-inline-end: 12px; - inset-block-start: 50%; - transform: translateY(-50%); - path { - fill: ${themedColors.onbackground1}; + inset-block-end: 2px; + & .sendbird-iconbutton__inner { + height: 16px; + } + &:hover { + path { + fill: ${themedColors.oncontent_inverse1}; + } } } .sendbird-message-input--placeholder { diff --git a/src/components/chat/ui/index.tsx b/src/components/chat/ui/index.tsx index 979ca6414..decbaebf9 100644 --- a/src/components/chat/ui/index.tsx +++ b/src/components/chat/ui/index.tsx @@ -3,7 +3,7 @@ import { css, cx } from '@linaria/core'; import { ChatHeader } from './ChatHeader'; import { ChatInput } from './ChatInput'; import { ChatMessageList } from './ChatMessageList'; -import { themedColors, themedColorVars } from '../../../foundation/colors/css'; +import { themedColorVars } from '../../../foundation/colors/css'; import { useDragDropArea } from '../../../tools/hooks/useDragDropFiles'; import { PoweredByBanner } from '../../ui/PoweredByBanner'; @@ -26,8 +26,13 @@ const container = css` font-family: var(--sendbird-font-family-default); height: 100%; width: 100%; - background-color: ${themedColors.bg1}; display: flex; flex-direction: column; flex: 1; + .sendbird-theme--light & { + background-color: var(--sendbird-light-background-50); + } + .sendbird-theme--dark & { + background-color: var(--sendbird-dark-background-700); + } `; diff --git a/src/components/ui/FileViewer.tsx b/src/components/ui/FileViewer.tsx index a984cc959..84ede8d87 100644 --- a/src/components/ui/FileViewer.tsx +++ b/src/components/ui/FileViewer.tsx @@ -2,20 +2,11 @@ import { FileMessage } from '@sendbird/chat/message'; import { FileViewerView } from '@uikit/modules/GroupChannel/components/FileViewer/FileViewerView'; -import { useChatContext } from '../chat/context/ChatProvider'; - interface Props { message: FileMessage; onClose: () => void; } // TODO: Remove UIKit export const FileViewer = ({ message, onClose }: Props) => { - const { dataSource } = useChatContext(); - return ( - dataSource.deleteMessage(message)} - onCancel={onClose} - /> - ); + return ; };