diff --git a/src/components/Chat.jsx b/src/components/Chat.jsx index 57eea03..72b08e4 100644 --- a/src/components/Chat.jsx +++ b/src/components/Chat.jsx @@ -16,6 +16,7 @@ import { MAX_CHAT_MESSAGES } from '../core/constants'; import { showUserAreaModal, + showChatModal, setChatChannel, fetchChatMessages, setChatInputMessage, @@ -29,6 +30,7 @@ function escapeRegExp(string) { } const Chat = ({ + showExpand, channels, messages, chatChannel, @@ -40,11 +42,14 @@ const Chat = ({ fetchMessages, fetching, blocked, + triggerModal, }) => { const listRef = useRef(); + const targetRef = useRef(); const [selection, setSelection] = useState(null); const [nameRegExp, setNameRegExp] = useState(null); const [blockedIds, setBlockedIds] = useState([]); + const [btnSize, setBtnSize] = useState(20); const { stayScrolled } = useStayScrolled(listRef, { initialScroll: Infinity, @@ -77,6 +82,13 @@ const Chat = ({ setNameRegExp(regExp); }, [ownName]); + useEffect(() => { + setTimeout(() => { + const fontSize = Math.round(targetRef.current.offsetHeight / 10); + setBtnSize(Math.min(28, fontSize)); + }, 330); + }, [targetRef]); + useEffect(() => { const bl = []; for (let i = 0; i < blocked.length; i += 1) { @@ -112,74 +124,101 @@ const Chat = ({ } return ( -
-
- - {(ownName) ? ( -
-
handleSubmit(e)} - style={{ display: 'flex', flexDirection: 'row' }} - > - setInputMessage(e.target.value)} - id="chatmsginput" - maxLength="200" - type="text" - placeholder="Chat here" - /> - - - -
- ) : ( -
+
+ +   + {(showExpand) && + - You must be logged in to chat -
- )} + tabIndex={-1} + >↷ + }
+ + {(ownName) ? ( +
+
handleSubmit(e)} + style={{ display: 'flex', flexDirection: 'row' }} + > + setInputMessage(e.target.value)} + id="chatmsginput" + maxLength="200" + type="text" + placeholder="Chat here" + /> + + + +
+ ) : ( +
+ You must be logged in to chat +
+ )}
); }; @@ -212,6 +251,9 @@ function mapDispatchToProps(dispatch) { open() { dispatch(showUserAreaModal()); }, + triggerModal() { + dispatch(showChatModal(true)); + }, setChannel(channelId) { dispatch(setChatChannel(channelId)); }, diff --git a/src/components/ChatBox.jsx b/src/components/ChatBox.jsx index 79540f2..ca30440 100644 --- a/src/components/ChatBox.jsx +++ b/src/components/ChatBox.jsx @@ -40,13 +40,7 @@ function ChatBox({ className={(chatOpen && render) ? 'chatbox show' : 'chatbox'} onTransitionEnd={onTransitionEnd} > - - +
) ); diff --git a/src/routes/api/startdm.js b/src/routes/api/startdm.js index 67160b4..7ddb2e8 100644 --- a/src/routes/api/startdm.js +++ b/src/routes/api/startdm.js @@ -60,7 +60,7 @@ async function startDm(req: Request, res: Response) { }); return; } - if (blockDm) { + if (targetUser.blockDm) { res.status(401); res.json({ errors: ['Target user doesn\'t allo DMs'], diff --git a/src/styles/dark-round.css b/src/styles/dark-round.css index faa24e9..d22635b 100644 --- a/src/styles/dark-round.css +++ b/src/styles/dark-round.css @@ -102,7 +102,7 @@ tr:nth-child(even) { color: #94ff94; } -#chatlink { +.chatlink { color: #f9edde; } diff --git a/src/styles/dark.css b/src/styles/dark.css index 0a3bb41..d0f5911 100644 --- a/src/styles/dark.css +++ b/src/styles/dark.css @@ -99,7 +99,7 @@ tr:nth-child(even) { color: #94ff94; } -#chatlink { +.chatlink { color: #f9edde; } diff --git a/src/styles/default.css b/src/styles/default.css index 0ff8afb..1a29016 100644 --- a/src/styles/default.css +++ b/src/styles/default.css @@ -473,13 +473,15 @@ tr:nth-child(even) { margin-left: 5px; margin-right: 5px; } -#chatlink { +.chatlink { position: absolute; - font-weight: bold; - font-size: 20px; - right: 17px; top: 5px; + right: 17px; + font-weight: bold; color: #4a4a49; + transition: font-size 0.2s; +} +.chatlink > span { cursor: pointer; }