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 (
-
-
-
{ setSelection(saveSelection); }}
- role="presentation"
- >
- {
- (!channelMessages.length)
- && (
-
- )
- }
- {
- channelMessages.map((message) => ((blockedIds.includes(message[3]))
- ? null : (
-
- )))
- }
-
- {(ownName) ? (
-
-
-
- ) : (
-
+
+ ⚙
+
+ {(showExpand) &&
+
- You must be logged in to chat
-
- )}
+ tabIndex={-1}
+ >↷
+ }
+
{ setSelection(saveSelection); }}
+ role="presentation"
+ >
+ {
+ (!channelMessages.length)
+ && (
+
+ )
+ }
+ {
+ channelMessages.map((message) => ((blockedIds.includes(message[3]))
+ ? null : (
+
+ )))
+ }
+
+ {(ownName) ? (
+
+
+
+ ) : (
+
+ 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;
}