diff --git a/src/assets/default/send-message.svg b/src/assets/default/send-message.svg index 65db90d7..ca176b2b 100644 --- a/src/assets/default/send-message.svg +++ b/src/assets/default/send-message.svg @@ -1,4 +1,4 @@ + stroke="#FFBBDA" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" fill="#FFBBDA"/> diff --git a/src/pages/Chats/ChatRoom/ChatBox/index.tsx b/src/pages/Chats/ChatRoom/ChatBox/index.tsx index 95b85d7d..8931cc03 100644 --- a/src/pages/Chats/ChatRoom/ChatBox/index.tsx +++ b/src/pages/Chats/ChatRoom/ChatBox/index.tsx @@ -7,6 +7,8 @@ import { useSocket } from '@context/SocketProvider'; import { OtherUserAtom } from '@recoil/util/OtherUser'; import { getCurrentUserId } from '@utils/getCurrentUserId'; +import SendIcon from '@assets/default/send-message.svg'; + import { ChatBoxContainer, Textarea, SendButton } from './styles'; const ChatBox: React.FC = () => { @@ -75,7 +77,9 @@ const ChatBox: React.FC = () => { onKeyDown={handleEnterKeyDown} onSubmit={handleNewMessageSubmit} /> - + + + ); }; diff --git a/src/pages/Chats/ChatRoom/ChatBox/styles.tsx b/src/pages/Chats/ChatRoom/ChatBox/styles.tsx index 82fd9c43..d0c1f961 100644 --- a/src/pages/Chats/ChatRoom/ChatBox/styles.tsx +++ b/src/pages/Chats/ChatRoom/ChatBox/styles.tsx @@ -1,7 +1,5 @@ import { styled } from 'styled-components'; -import SendIcon from '@assets/default/send-message.svg'; - export const ChatBoxContainer = styled.div` ${({ theme }) => theme.breakPoints}; position: fixed; @@ -14,7 +12,7 @@ export const ChatBoxContainer = styled.div` padding: 0.5rem 1.12rem; background-color: ${({ theme }) => theme.colors.background.primary}; gap: 0.5rem; - border-top: 1px solid ${({ theme }) => theme.colors.gray[300]}; + /* border-top: 1px solid ${({ theme }) => theme.colors.gray[300]}; */ align-items: center; `; @@ -39,12 +37,9 @@ export const Textarea = styled.textarea<{ $isOtherUserValid: boolean }>` `; export const SendButton = styled.button<{ $isOtherUserValid: boolean }>` - padding: 1.12rem; + width: 2rem; + height: 2rem; border-radius: 50%; - background-color: ${({ theme }) => theme.colors.brand.primaryLight}; - background-image: url(${SendIcon}); - background-repeat: no-repeat; - background-position: center; - background-size: 1.2rem 1.2rem; + /* background-color: ${({ theme }) => theme.colors.brand.primaryLight}; */ cursor: ${({ $isOtherUserValid }) => ($isOtherUserValid ? 'pointer' : '')}; `; diff --git a/src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx b/src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx index e6b4d31a..1c659f2b 100644 --- a/src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx +++ b/src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx @@ -10,7 +10,7 @@ export const FirstMessageLayout = styled.div<{ $isSenderChanged: boolean }>` export const MessageLayout = styled.div` display: flex; - margin: 0 auto 0.5rem 2.938rem; + margin: 0 auto 0.5rem 2rem; `; export const UserImage = styled.img`