feat(discord): update preview style + responsiveness

Author: ZRunner

src/components/GuildDashboard/SpecialCategoryComponents/RssFeeds/FeedPreview.tsx

@@ -1,4 +1,4 @@
-import { Box, Collapse, Paper, Typography } from "@mui/material";
+import { Box, Collapse, Paper, styled, Typography } from "@mui/material";
 import { ComponentProps } from "react";
 
 import { RssFeed, RssFeedParsedEntry } from "../../../../repository/types/api";
@@ -12,25 +12,40 @@ interface FeedPreviewButtonProps {
 }
 export default function FeedPreview({ isOpen, feed, data, isLoading }: FeedPreviewButtonProps) {
   return (
-    <Collapse in={isOpen}>
+    <StyledCollapse in={isOpen}>
       <Box>
         {isLoading && (<Typography color="textSecondary">Fetching the latest data...</Typography>)}
         {(!isLoading && !data) && (<Typography color="error">Oops, something went wrong while fetching your feed.</Typography>)}
         {(!isLoading && data) && <InnerFeedPreview feed={feed} data={data} />}
       </Box>
-    </Collapse>
+    </StyledCollapse>
   );
 }
 
 function InnerFeedPreview({ feed, data }: { feed: RssFeed; data: RssFeedParsedEntry }) {
   const discordMessage = useBuildDiscordMessageFromFeed({ feed, feedData: data });
   return (
-    <Paper elevation={3} sx={{ px: 2, py: 1 }}>
+    <PreviewPaperContainer elevation={3}>
       <DiscordMessagePreview {...discordMessage} />
-    </Paper>
+    </PreviewPaperContainer>
   );
 }
 
+const StyledCollapse = styled(Collapse)(({ theme }) => ({
+  [theme.breakpoints.down("sm")]: {
+    marginLeft: theme.spacing(-2),
+    marginRight: theme.spacing(-2),
+  },
+}));
+
+const PreviewPaperContainer = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(1, 2),
+
+  [theme.breakpoints.down("sm")]: {
+    padding: theme.spacing(1, 0),
+  },
+}));
+
 
 type DiscordMessageInput = ComponentProps<typeof DiscordMessagePreview>;
 function useBuildDiscordMessageFromFeed({ feed, feedData }: { feed: RssFeed; feedData: RssFeedParsedEntry }): DiscordMessageInput {

src/components/common/DiscordMarkdown.tsx

@@ -251,7 +251,6 @@ function getRenderer() {
 
   const MarkdownRenderer = ({ markdown }: { markdown: string }) => {
     const tokens = md.parse(markdown, {});
-    console.debug(tokens);
     return <div>{renderTokens(tokens, 0)}</div>;
   };
 
@@ -260,10 +259,11 @@ function getRenderer() {
 
 const BlueMention = styled.span({
   display: "inline-flex",
-  borderRadius: "5px",
+  borderRadius: "3px",
   padding: "0 2px",
-  color: "#c9cdfb",
-  backgroundColor: "#5865f24c",
+  color: "#a9baff",
+  backgroundColor: "#5865f23d",
+  fontWeight: 500,
 });
 
 const DiscordP = styled.p({
@@ -296,35 +296,36 @@ const DiscordH3 = styled.div({
 
 const DiscordSubtext = styled.small({
   display: "block",
-  color: "#949ba4",
+  color: "#94959c",
   lineHeight: "1.1rem",
   fontSize: ".8125rem",
 });
 
 const FakeLink = styled.span({
-  color: "#00abfa",
+  color: "#5197ed",
   "&:hover": {
     textDecoration: "underline",
   },
 });
 
 const InlineCode = styled.code({
-  backgroundColor: "#2b2d31",
-  border: "1px solid #1e1f22",
+  backgroundColor: "#5865f214",
+  border: "1px solid #97979f33",
   borderRadius: 4,
   padding: "0 .2em",
   fontSize: "0.85rem",
   lineHeight: "1.125rem",
 });
 
 const CodeBlock = styled.pre({
-  backgroundColor: "#2b2d31",
-  border: "1px solid #1e1f22",
-  borderRadius: 5,
+  backgroundColor: "#5865f214",
+  border: "1px solid #97979f33",
+  borderRadius: 4,
   marginTop: "6px",
   padding: ".5em",
   fontSize: "0.875rem",
   lineHeight: "1.125rem",
+  whiteSpace: "pre-wrap",
 });
 
 const DiscordOl = styled.ol({

src/components/common/DiscordMessagePreview.tsx

@@ -50,7 +50,7 @@ export default function DiscordMessagePreview(props: DiscordMessagePreviewProps)
 
   return (
     <ThemeProvider theme={overrideTheme}>
-      <Stack direction="column" position="relative" py="0.125rem" pl="72px" pr="48px" minHeight="2.75rem">
+      <Stack direction="column" position="relative" py="0.125rem" pl="72px" pr="24px" minHeight="2.75rem" overflow="hidden">
         <MessageAuthorAndContent {...props} />
         {props.embed && <MessageEmbed embed={props.embed} />}
       </Stack>
@@ -67,6 +67,7 @@ function MessageAuthorAndContent(props: Pick<DiscordMessagePreviewProps, "conten
         alt="Axobot avatar"
         style={{
           userSelect: "none",
+          WebkitUserSelect: "none",
           position: "absolute",
           left: "16px",
           marginTop: "calc(4px - 0.125rem)",
@@ -78,7 +79,7 @@ function MessageAuthorAndContent(props: Pick<DiscordMessagePreviewProps, "conten
       <Typography variant="h3" fontSize="1rem" lineHeight="1.375rem" pb="1px">
         <MessageAuthorAndTimestamp timestamp={props.timestamp} />
       </Typography>
-      <Stack whiteSpace="pre-wrap" color="#dbdee1">
+      <Stack whiteSpace="pre-wrap" color="#efeff0">
         <DiscordMarkdown text={props.content?.trim()} />
       </Stack>
     </Box>
@@ -113,10 +114,10 @@ function MessageEmbed({ embed }: { embed: Exclude<DiscordMessagePreviewProps["em
   }, [embed.timestamp]);
 
   return (
-    <Box display="grid" maxWidth="516px" my=".125rem" borderRadius="4px" borderLeft={`4px solid ${hexEmbedColor}`} bgcolor="#2b2d31">
+    <Box display="grid" maxWidth="516px" my=".125rem" borderRadius="4px" borderLeft={`4px solid ${hexEmbedColor}`} bgcolor="#242429">
       <Box sx={{
         overflow: "hidden",
-        padding: ".5rem 1rem 1rem .75rem",
+        padding: ".125rem 1rem 1rem .75rem",
         display: "grid",
         gridTemplateColumns: "auto",
         gridTemplateRows: embed.thumbnail ? "auto min-content" : "auto",
@@ -139,7 +140,7 @@ function MessageEmbed({ embed }: { embed: Exclude<DiscordMessagePreviewProps["em
           </Stack>
         )}
         {embed.title && (
-          <Typography component="div" mt="8px" lineHeight="1.375rem" fontWeight={700} color="#f2f3f5" gridColumn="1 / 1">
+          <Typography component="div" mt="8px" lineHeight="1.375rem" fontWeight={600} color="#e3e3e6" gridColumn="1 / 1">
             {embed.url
               ? (
                 <DiscordLink href={embed.url} target="_blank">{embed.title}</DiscordLink>
@@ -150,25 +151,25 @@ function MessageEmbed({ embed }: { embed: Exclude<DiscordMessagePreviewProps["em
           </Typography>
         )}
         {embed.description && (
-          <Typography component="div" mt="8px" fontSize="0.875rem" lineHeight="1.125rem" fontWeight={400} color="#dbdee1" whiteSpace="pre-wrap" gridColumn="1 / 1">
+          <Typography component="div" mt="8px" fontSize="0.875rem" lineHeight="1.125rem" fontWeight={400} color="#efeff0" whiteSpace="pre-wrap" gridColumn="1 / 1">
             <DiscordMarkdown text={embed.description?.trim()} />
           </Typography>
         )}
         {embed.image && (
           <Box mt="16px" maxWidth="400px" maxHeight="225px">
-            <img style={{ userSelect: "none", maxWidth: "100%", maxHeight: "100%", borderRadius: "4px" }} alt="Image" src={embed.image}></img>
+            <img style={{ userSelect: "none", WebkitUserSelect: "none", maxWidth: "100%", maxHeight: "100%", borderRadius: "4px" }} alt="Image" src={embed.image}></img>
           </Box>
         )}
         {(embed.footer || embed.timestamp) && (
-          <Typography component="span" mt="8px" fontSize="0.75rem" lineHeight="1rem" fontWeight={500} color="#dbdee1" gridColumn="1 / 1">
+          <Typography component="span" mt="8px" fontSize="0.75rem" lineHeight="1rem" fontWeight={500} color="#efeff0" gridColumn="1 / 1">
             {embed.footer?.text}
             {embed.footer && timestamp && " • "}
             {timestamp}
           </Typography>
         )}
         {embed.thumbnail && (
           <Box gridRow="1 / 8" gridColumn="2 / 2" ml="16px" mt="8px" flexShrink={0} justifySelf="end">
-            <img style={{ userSelect: "none", maxWidth: "80px", maxHeight: "80px", borderRadius: "4px" }} alt="Thumbnail" src={embed.thumbnail}></img>
+            <img style={{ userSelect: "none", WebkitUserSelect: "none", maxWidth: "80px", maxHeight: "80px", borderRadius: "4px" }} alt="Thumbnail" src={embed.thumbnail}></img>
           </Box>
         )}
       </Box>

src/components/common/DiscordTimestamp.tsx

@@ -17,7 +17,7 @@ export default function Timestamp({ timestamp, format }: TimestampProps) {
   return (
     <span style={{
       display: "inline-flex",
-      backgroundColor: "#4e50587a",
+      backgroundColor: "#97979f1f",
       borderRadius: 3,
       padding: "0 2px",
     }}