ViewRaw: improve UI

src/components/CodeBlock.tsx

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import { classes } from "@utils/misc";
 import { findCssClassesLazy } from "@webpack";
 import { Parser } from "@webpack/common";
 
@@ -12,9 +13,9 @@ const CodeContainerClasses = findCssClassesLazy("markup", "codeContainer");
 /**
  * Renders code in a Discord codeblock
  */
-export function CodeBlock(props: { content?: string, lang: string; }) {
+export function CodeBlock({ className, ...props }: { content?: string, lang: string; className?: string; }) {
     return (
-        <div className={CodeContainerClasses.markup}>
+        <div className={classes(CodeContainerClasses.markup, className)}>
             {Parser.defaultRules.codeBlock.react(props, null, {})}
         </div>
     );
@@ -23,9 +24,9 @@ export function CodeBlock(props: { content?: string, lang: string; }) {
 /**
  * Renders inline code like `this`
  */
-export function InlineCode({ children }: { children: React.ReactNode; }) {
+export function InlineCode({ children, className }: { children: React.ReactNode; className?: string; }) {
     return (
-        <span className={CodeContainerClasses.markup}>
+        <span className={classes(CodeContainerClasses.markup, className)}>
             <code className="inline">{children}</code>
         </span>
     );

src/plugins/viewRaw/index.tsx

@@ -16,22 +16,24 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./style.css";
+
 import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { definePluginSettings } from "@api/Settings";
 import { CodeBlock } from "@components/CodeBlock";
-import { Divider } from "@components/Divider";
 import ErrorBoundary from "@components/ErrorBoundary";
+import { HeadingSecondary } from "@components/Heading";
+import { Margins } from "@components/margins";
 import { Devs } from "@utils/constants";
 import { copyWithToast, getCurrentGuild, getIntlMessage } from "@utils/discord";
 import { isTruthy } from "@utils/guards";
-import { Margins } from "@utils/margins";
 import definePlugin, { IconComponent, OptionType } from "@utils/types";
 import { Message } from "@vencord/discord-types";
-import { ChannelStore, Forms, GuildRoleStore, Menu, Modal, openModal, UserProfileStore } from "@webpack/common";
+import { ChannelStore, GuildRoleStore, Menu, Modal, openModal, UserProfileStore } from "@webpack/common";
 import { MouseEventHandler } from "react";
 
 
-const CopyIcon: IconComponent = ({ height = 20, width = 20, className }) => {
+const CopyRawIcon: IconComponent = ({ height = 20, width = 20, className }) => {
     return (
         <svg
             viewBox="0 0 20 20"
@@ -75,12 +77,12 @@ function openViewRawModal(json: string, type: string, msgContent?: string) {
         <ErrorBoundary>
             <Modal
                 {...props}
-                title="View Raw"
+                title={`Raw ${type} Data`}
                 size="xl"
                 actions={[
                     {
-                        text: `Copy ${type} JSON`,
-                        variant: "primary",
+                        text: `Copy ${type} Data`,
+                        variant: "secondary",
                         onClick: () => copyWithToast(json, `${type} data copied to clipboard!`)
                     },
                     msgContent && {
@@ -92,14 +94,12 @@ function openViewRawModal(json: string, type: string, msgContent?: string) {
             >
                 {!!msgContent && (
                     <>
-                        <Forms.FormTitle tag="h5">Content</Forms.FormTitle>
-                        <CodeBlock content={msgContent} lang="" />
-                        <Divider className={Margins.bottom20} />
+                        <HeadingSecondary>Message Content</HeadingSecondary>
+                        <CodeBlock className="vc-viewRaw-codeBlock" content={msgContent} lang="" />
+                        <HeadingSecondary className={Margins.top16}>Message Data</HeadingSecondary>
                     </>
                 )}
-
-                <Forms.FormTitle tag="h5">{type} Data</Forms.FormTitle>
-                <CodeBlock content={json} lang="json" />
+                <CodeBlock className="vc-viewRaw-codeBlock" content={json} lang="json" />
             </Modal>
         </ErrorBoundary >
     ));
@@ -150,7 +150,7 @@ function MakeContextCallback(name: "Guild" | "Role" | "User" | "Channel" | "Mess
                 id={id}
                 label="View Raw"
                 action={action}
-                icon={CopyIcon}
+                icon={CopyRawIcon}
             />
         );
     };
@@ -168,7 +168,7 @@ const devContextCallback: NavContextMenuPatchCallback = (children, { id }: { id:
             id={"vc-view-role-raw"}
             label="View Raw"
             action={() => openViewRawModal(JSON.stringify(role, null, 4), "Role")}
-            icon={CopyIcon}
+            icon={CopyRawIcon}
         />
     );
 };
@@ -193,7 +193,7 @@ export default definePlugin({
     },
 
     messagePopoverButton: {
-        icon: CopyIcon,
+        icon: CopyRawIcon,
         render(msg) {
             const handleClick = () => {
                 if (settings.store.clickMethod === "Right") {
@@ -221,7 +221,7 @@ export default definePlugin({
 
             return {
                 label,
-                icon: CopyIcon,
+                icon: CopyRawIcon,
                 message: msg,
                 channel: ChannelStore.getChannel(msg.channel_id),
                 onClick: handleClick,

src/plugins/viewRaw/style.css

@@ -0,0 +1,6 @@
+.vc-viewRaw-codeBlock,
+.vc-viewRaw-codeBlock :is(pre, code, [class*="codeContainer"]) {
+    max-width: unset;
+    width: 100%;
+    box-sizing: border-box;
+}