Improve PreviewMessage icon; make button padding/margin more consistent

Co-authored-by: Andrew Grant <andrew.grant@mail.rit.edu>
9 months ago · 685b6f2fa7
parent 7592b5c172
commit 685b6f2fa7
9 changed files with 31 additions and 28 deletions
--- a/src/api/ChatButtons.tsx
+++ b/src/api/ChatButtons.tsx
@ -13,8 +13,8 @@ import { Button, ButtonLooks, ButtonWrapperClasses, Tooltip } from "@webpack/com
 import { Channel } from "discord-types/general";
 import { HTMLProps, MouseEventHandler, ReactNode } from "react";

-let CssClasses: { buttonContainer: string; };
-waitFor(["buttonContainer", "channelTextArea"], m => CssClasses = m);
+let ChannelTextAreaClasses: Record<"button" | "buttonContainer", string>;
+waitFor(["buttonContainer", "channelTextArea"], m => ChannelTextAreaClasses = m);

 export interface ChatBarProps {
    channel: Channel;
@ -106,14 +106,14 @@ export const ChatBarButton = ErrorBoundary.wrap((props: ChatBarButtonProps) => {
    return (
        <Tooltip text={props.tooltip}>
            {({ onMouseEnter, onMouseLeave }) => (
-                <div className={`expression-picker-chat-input-button ${CssClasses?.buttonContainer ?? ""} vc-chatbar-button`}>
+                <div className={`expression-picker-chat-input-button ${ChannelTextAreaClasses?.buttonContainer ?? ""} vc-chatbar-button`}>
                    <Button
                        aria-label={props.tooltip}
                        size=""
                        look={ButtonLooks.BLANK}
                        onMouseEnter={onMouseEnter}
                        onMouseLeave={onMouseLeave}
-                        innerClassName={ButtonWrapperClasses.button}
+                        innerClassName={`${ButtonWrapperClasses.button} ${ChannelTextAreaClasses?.button}`}
                        onClick={props.onClick}
                        onContextMenu={props.onContextMenu}
                        {...props.buttonProps}
--- a/src/plugins/invisibleChat.desktop/index.tsx
+++ b/src/plugins/invisibleChat.desktop/index.tsx
@ -75,16 +75,15 @@ const ChatBarIcon: ChatBarButton = (_, isMainChat) => {

            buttonProps={{
                "aria-haspopup": "dialog",
-                style: { padding: "0 2px", scale: "0.9" }
            }}
        >
            <svg
                aria-hidden
                role="img"
-                width="32"
-                height="32"
+                width="24"
+                height="24"
                viewBox={"0 0 64 64"}
-                style={{ scale: "1.1" }}
+                style={{ scale: "1.39", translate: "0 -1px" }}
            >
                <path fill="currentColor" d="M 32 9 C 24.832 9 19 14.832 19 22 L 19 27.347656 C 16.670659 28.171862 15 30.388126 15 33 L 15 49 C 15 52.314 17.686 55 21 55 L 43 55 C 46.314 55 49 52.314 49 49 L 49 33 C 49 30.388126 47.329341 28.171862 45 27.347656 L 45 22 C 45 14.832 39.168 9 32 9 z M 32 13 C 36.963 13 41 17.038 41 22 L 41 27 L 23 27 L 23 22 C 23 17.038 27.037 13 32 13 z" />
            </svg>
--- a/src/plugins/previewMessage/index.tsx
+++ b/src/plugins/previewMessage/index.tsx
@ -100,12 +100,20 @@ const PreviewButton: ChatBarButton = (props, isMainChat) => {
                )}
            buttonProps={{
                style: {
-                    padding: "0 6px",
                    translate: "0 2px"
                }
            }}
        >
-            <img width={24} height={24} src="https://discord.com/assets/4c5a77a89716352686f590a6f014770c.svg" />
+            <svg
+                fill="currentColor"
+                fillRule="evenodd"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                style={{ scale: "1.096", translate: "0 -1px" }}
+            >
+                <path d="M22.89 11.7c.07.2.07.4 0 .6C22.27 13.9 19.1 21 12 21c-7.11 0-10.27-7.11-10.89-8.7a.83.83 0 0 1 0-.6C1.73 10.1 4.9 3 12 3c7.11 0 10.27 7.11 10.89 8.7Zm-4.5-3.62A15.11 15.11 0 0 1 20.85 12c-.38.88-1.18 2.47-2.46 3.92C16.87 17.62 14.8 19 12 19c-2.8 0-4.87-1.38-6.39-3.08A15.11 15.11 0 0 1 3.15 12c.38-.88 1.18-2.47 2.46-3.92C7.13 6.38 9.2 5 12 5c2.8 0 4.87 1.38 6.39 3.08ZM15.56 11.77c.2-.1.44.02.44.23a4 4 0 1 1-4-4c.21 0 .33.25.23.44a2.5 2.5 0 0 0 3.32 3.32Z" />
+            </svg>
        </ChatBarButton>
    );

--- a/src/plugins/sendTimestamps/index.tsx
+++ b/src/plugins/sendTimestamps/index.tsx
@ -137,10 +137,7 @@ const ChatBarIcon: ChatBarButton = (_, isMainChat) => {
                    />
                ));
            }}
-            buttonProps={{
-                "aria-haspopup": "dialog",
-                className: cl("button")
-            }}
+            buttonProps={{ "aria-haspopup": "dialog" }}
        >
            <svg
                aria-hidden="true"
@ -148,6 +145,7 @@ const ChatBarIcon: ChatBarButton = (_, isMainChat) => {
                width="24"
                height="24"
                viewBox="0 0 24 24"
+                style={{ scale: "1.2" }}
            >
                <g fill="none" fill-rule="evenodd">
                    <path fill="currentColor" d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7v-5z" />
--- a/src/plugins/sendTimestamps/styles.css
+++ b/src/plugins/sendTimestamps/styles.css
@ -42,10 +42,6 @@
    margin-bottom: 1em;
 }

-.vc-st-button {
-    padding: 0 6px;
-}
-
 .vc-st-button svg {
    transform: scale(1.1) translateY(1px);
 }
--- a/src/plugins/silentMessageToggle/index.tsx
+++ b/src/plugins/silentMessageToggle/index.tsx
@ -67,11 +67,13 @@ const SilentMessageToggle: ChatBarButton = (_, isMainChat) => {
        <ChatBarButton
            tooltip={enabled ? "Disable Silent Message" : "Enable Silent Message"}
            onClick={() => setEnabledValue(!enabled)}
-            buttonProps={{
-                style: { padding: "0 6px" }
-            }}
        >
-            <svg width="24" height="24" viewBox="0 0 24 24">
+            <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                style={{ scale: "1.2" }}
+            >
                <path fill="currentColor" mask="url(#_)" d="M18 10.7101C15.1085 9.84957 13 7.17102 13 4c0-.30736.0198-.6101.0582-.907C12.7147 3.03189 12.3611 3 12 3 8.686 3 6 5.686 6 9v5c0 1.657-1.344 3-3 3v1h18v-1c-1.656 0-3-1.343-3-3v-3.2899ZM8.55493 19c.693 1.19 1.96897 2 3.44497 2s2.752-.81 3.445-2H8.55493ZM18.2624 5.50209 21 2.5V1h-4.9651v1.49791h2.4411L16 5.61088V7h5V5.50209h-2.7376Z" />
                {!enabled && <>
                    <mask id="_">
--- a/src/plugins/silentTyping/index.tsx
+++ b/src/plugins/silentTyping/index.tsx
@ -47,9 +47,6 @@ const SilentTypingToggle: ChatBarButton = (_, isMainChat) => {
        <ChatBarButton
            tooltip={isEnabled ? "Disable Silent Typing" : "Enable Silent Typing"}
            onClick={toggle}
-            buttonProps={{
-                style: { padding: "0 6px" }
-            }}
        >
            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                <path fill="currentColor" d="M528 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM128 180v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm288 0v-40c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z" />
--- a/src/plugins/translate/TranslateIcon.tsx
+++ b/src/plugins/translate/TranslateIcon.tsx
@ -78,11 +78,10 @@ export const TranslateChatBarIcon: ChatBarButton = (props, isMainChat) => {
            }}
            onContextMenu={() => toggle()}
            buttonProps={{
-                "aria-haspopup": "dialog",
-                style: { padding: "0 4px" }
+                "aria-haspopup": "dialog"
            }}
        >
-            <TranslateIcon className={cl({ "auto-translate": autoTranslate })} />
+            <TranslateIcon className={cl({ "auto-translate": autoTranslate, "chat-button": true })} />
        </ChatBarButton>
    );
 };
--- a/src/plugins/translate/styles.css
+++ b/src/plugins/translate/styles.css
@ -35,3 +35,7 @@
 .vc-trans-auto-translate {
    color: var(--green-360);
 }
+
+.vc-trans-chat-button {
+    scale: 1.085;
+}