diff --git a/chat/src/App.css b/chat/src/App.css
index 44e2afaa83..fd82327b39 100644
--- a/chat/src/App.css
+++ b/chat/src/App.css
@@ -21,7 +21,6 @@ body {
.App-heading {
flex-basis: 3rem;
- border-bottom: 1px dashed var(--primary);
display: flex;
align-items: center;
}
@@ -47,7 +46,6 @@ body {
scrollbar-width: none;
display: flex;
flex-direction: column;
- border-bottom: 1px dashed var(--primary);
}
.App-content::-webkit-scrollbar {
@@ -81,8 +79,13 @@ body {
}
.App-bottom-extra {
- padding: 1rem;
- height: 64px;
+ padding: .25rem;
+}
+
+@media screen and (max-width: 1000px) {
+ .App-content {
+ height: 50vh;
+ }
}
/* On mobile, hide the sidebar and make the input full-width. */
@@ -104,3 +107,7 @@ body {
lite-youtube {
min-width: min(80vw, 500px);
}
+
+.btn-secondary {
+ border: none !important;
+}
\ No newline at end of file
diff --git a/chat/src/App.tsx b/chat/src/App.tsx
index 63e13cba31..6eb01dfad4 100644
--- a/chat/src/App.tsx
+++ b/chat/src/App.tsx
@@ -80,14 +80,11 @@ function AppInner() {
-
- {quote && }
-
+ {quote && (
+
+ {quote && }
+
+ )}
diff --git a/chat/src/features/chat/ChatMessage.tsx b/chat/src/features/chat/ChatMessage.tsx
index b22ece981c..6c985d0b24 100644
--- a/chat/src/features/chat/ChatMessage.tsx
+++ b/chat/src/features/chat/ChatMessage.tsx
@@ -1,36 +1,31 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+ useCallback,
+ useEffect,
+ useMemo,
+ useState,
+} from "react";
import cx from "classnames";
import key from "weak-key";
import humanizeDuration from "humanize-duration";
import { Username } from "./Username";
import { useChat, useRootContext } from "../../hooks";
+import { QuotedMessageLink } from "./QuotedMessageLink";
import "./ChatMessage.css";
-interface ChatMessageProps extends IChatMessage {
+interface ChatMessageProps {
+ message: IChatMessage;
timestampUpdates: number;
showUser?: boolean;
}
const TIMESTAMP_UPDATE_INTERVAL = 20000;
-const SCROLL_TO_QUOTED_OVERFLOW = 250;
-const QUOTED_MESSAGE_CONTEXTUAL_HIGHLIGHTING_DURATION = 2500;
-const QUOTED_MESSAGE_CONTEXTUAL_SNIPPET_LENGTH = 30;
export function ChatMessage({
- id,
- avatar,
+ message,
showUser = true,
- namecolor,
- username,
- hat,
- text,
- text_html,
- text_censored,
- time,
- quotes,
timestampUpdates,
}: ChatMessageProps) {
- const message = {
+ const {
id,
avatar,
namecolor,
@@ -41,7 +36,7 @@ export function ChatMessage({
text_censored,
time,
quotes,
- };
+ } = message;
const {
username: loggedInUsername,
admin,
@@ -49,6 +44,7 @@ export function ChatMessage({
themeColor,
} = useRootContext();
const { messageLookup, deleteMessage, quoteMessage } = useChat();
+ const quotedMessage = messageLookup[quotes];
const content = censored ? text_censored : text_html;
const hasMention = content.includes(loggedInUsername);
const mentionStyle = hasMention
@@ -62,10 +58,10 @@ export function ChatMessage({
setConfirmedDelete(true);
}
}, [text, confirmedDelete]);
- const timestamp = useMemo(() => formatTimeAgo(time), [
- time,
- timestampUpdates,
- ]);
+ const timestamp = useMemo(
+ () => formatTimeAgo(time),
+ [time, timestampUpdates]
+ );
return (
@@ -80,45 +76,7 @@ export function ChatMessage({
{timestamp}
)}
- {quotes && (
-
{
- const element = document.getElementById(quotes);
-
- if (element) {
- element.scrollIntoView();
- element.style.background = `#${themeColor}33`;
-
- setTimeout(() => {
- element.style.background = "unset";
- }, QUOTED_MESSAGE_CONTEXTUAL_HIGHLIGHTING_DURATION);
-
- const [appContent] = Array.from(
- document.getElementsByClassName("App-content")
- );
-
- if (appContent) {
- appContent.scrollTop -= SCROLL_TO_QUOTED_OVERFLOW;
- }
- }
- }}
- >
- Replying to @{messageLookup[quotes]?.username}:{" "}
-
- "
- {messageLookup[quotes]?.text.slice(
- 0,
- QUOTED_MESSAGE_CONTEXTUAL_SNIPPET_LENGTH
- )}
- {messageLookup[quotes]?.text.length >=
- QUOTED_MESSAGE_CONTEXTUAL_SNIPPET_LENGTH
- ? "..."
- : ""}
- "
-
-
- )}
+ {quotes && quotedMessage &&
}
(
diff --git a/chat/src/features/chat/QuotedMessage.tsx b/chat/src/features/chat/QuotedMessage.tsx
index 881a6ebcc6..16ec59fd6e 100644
--- a/chat/src/features/chat/QuotedMessage.tsx
+++ b/chat/src/features/chat/QuotedMessage.tsx
@@ -2,6 +2,7 @@ import React from "react";
import { useChat, useRootContext } from "../../hooks";
import { Username } from "./Username";
import "./QuotedMessage.css";
+import { QuotedMessageLink } from "./QuotedMessageLink";
export function QuotedMessage() {
const { quote, quoteMessage } = useChat();
@@ -9,20 +10,8 @@ export function QuotedMessage() {
return (
-
-
-
-
+
+