Improve PreviewMessage icon; make button padding/margin more consistent
Co-authored-by: Andrew Grant <andrew.grant@mail.rit.edu>
This commit is contained in:
parent
7592b5c172
commit
685b6f2fa7
9 changed files with 31 additions and 28 deletions
|
@ -13,8 +13,8 @@ import { Button, ButtonLooks, ButtonWrapperClasses, Tooltip } from "@webpack/com
|
||||||
import { Channel } from "discord-types/general";
|
import { Channel } from "discord-types/general";
|
||||||
import { HTMLProps, MouseEventHandler, ReactNode } from "react";
|
import { HTMLProps, MouseEventHandler, ReactNode } from "react";
|
||||||
|
|
||||||
let CssClasses: { buttonContainer: string; };
|
let ChannelTextAreaClasses: Record<"button" | "buttonContainer", string>;
|
||||||
waitFor(["buttonContainer", "channelTextArea"], m => CssClasses = m);
|
waitFor(["buttonContainer", "channelTextArea"], m => ChannelTextAreaClasses = m);
|
||||||
|
|
||||||
export interface ChatBarProps {
|
export interface ChatBarProps {
|
||||||
channel: Channel;
|
channel: Channel;
|
||||||
|
@ -106,14 +106,14 @@ export const ChatBarButton = ErrorBoundary.wrap((props: ChatBarButtonProps) => {
|
||||||
return (
|
return (
|
||||||
<Tooltip text={props.tooltip}>
|
<Tooltip text={props.tooltip}>
|
||||||
{({ onMouseEnter, onMouseLeave }) => (
|
{({ 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
|
<Button
|
||||||
aria-label={props.tooltip}
|
aria-label={props.tooltip}
|
||||||
size=""
|
size=""
|
||||||
look={ButtonLooks.BLANK}
|
look={ButtonLooks.BLANK}
|
||||||
onMouseEnter={onMouseEnter}
|
onMouseEnter={onMouseEnter}
|
||||||
onMouseLeave={onMouseLeave}
|
onMouseLeave={onMouseLeave}
|
||||||
innerClassName={ButtonWrapperClasses.button}
|
innerClassName={`${ButtonWrapperClasses.button} ${ChannelTextAreaClasses?.button}`}
|
||||||
onClick={props.onClick}
|
onClick={props.onClick}
|
||||||
onContextMenu={props.onContextMenu}
|
onContextMenu={props.onContextMenu}
|
||||||
{...props.buttonProps}
|
{...props.buttonProps}
|
||||||
|
|
|
@ -75,16 +75,15 @@ const ChatBarIcon: ChatBarButton = (_, isMainChat) => {
|
||||||
|
|
||||||
buttonProps={{
|
buttonProps={{
|
||||||
"aria-haspopup": "dialog",
|
"aria-haspopup": "dialog",
|
||||||
style: { padding: "0 2px", scale: "0.9" }
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
aria-hidden
|
aria-hidden
|
||||||
role="img"
|
role="img"
|
||||||
width="32"
|
width="24"
|
||||||
height="32"
|
height="24"
|
||||||
viewBox={"0 0 64 64"}
|
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" />
|
<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>
|
</svg>
|
||||||
|
|
|
@ -100,12 +100,20 @@ const PreviewButton: ChatBarButton = (props, isMainChat) => {
|
||||||
)}
|
)}
|
||||||
buttonProps={{
|
buttonProps={{
|
||||||
style: {
|
style: {
|
||||||
padding: "0 6px",
|
|
||||||
translate: "0 2px"
|
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>
|
</ChatBarButton>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -137,10 +137,7 @@ const ChatBarIcon: ChatBarButton = (_, isMainChat) => {
|
||||||
/>
|
/>
|
||||||
));
|
));
|
||||||
}}
|
}}
|
||||||
buttonProps={{
|
buttonProps={{ "aria-haspopup": "dialog" }}
|
||||||
"aria-haspopup": "dialog",
|
|
||||||
className: cl("button")
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
|
@ -148,6 +145,7 @@ const ChatBarIcon: ChatBarButton = (_, isMainChat) => {
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
|
style={{ scale: "1.2" }}
|
||||||
>
|
>
|
||||||
<g fill="none" fill-rule="evenodd">
|
<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" />
|
<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" />
|
||||||
|
|
|
@ -42,10 +42,6 @@
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vc-st-button {
|
|
||||||
padding: 0 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vc-st-button svg {
|
.vc-st-button svg {
|
||||||
transform: scale(1.1) translateY(1px);
|
transform: scale(1.1) translateY(1px);
|
||||||
}
|
}
|
||||||
|
|
|
@ -67,11 +67,13 @@ const SilentMessageToggle: ChatBarButton = (_, isMainChat) => {
|
||||||
<ChatBarButton
|
<ChatBarButton
|
||||||
tooltip={enabled ? "Disable Silent Message" : "Enable Silent Message"}
|
tooltip={enabled ? "Disable Silent Message" : "Enable Silent Message"}
|
||||||
onClick={() => setEnabledValue(!enabled)}
|
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" />
|
<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 && <>
|
{!enabled && <>
|
||||||
<mask id="_">
|
<mask id="_">
|
||||||
|
|
|
@ -47,9 +47,6 @@ const SilentTypingToggle: ChatBarButton = (_, isMainChat) => {
|
||||||
<ChatBarButton
|
<ChatBarButton
|
||||||
tooltip={isEnabled ? "Disable Silent Typing" : "Enable Silent Typing"}
|
tooltip={isEnabled ? "Disable Silent Typing" : "Enable Silent Typing"}
|
||||||
onClick={toggle}
|
onClick={toggle}
|
||||||
buttonProps={{
|
|
||||||
style: { padding: "0 6px" }
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
|
<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" />
|
<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" />
|
||||||
|
|
|
@ -78,11 +78,10 @@ export const TranslateChatBarIcon: ChatBarButton = (props, isMainChat) => {
|
||||||
}}
|
}}
|
||||||
onContextMenu={() => toggle()}
|
onContextMenu={() => toggle()}
|
||||||
buttonProps={{
|
buttonProps={{
|
||||||
"aria-haspopup": "dialog",
|
"aria-haspopup": "dialog"
|
||||||
style: { padding: "0 4px" }
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TranslateIcon className={cl({ "auto-translate": autoTranslate })} />
|
<TranslateIcon className={cl({ "auto-translate": autoTranslate, "chat-button": true })} />
|
||||||
</ChatBarButton>
|
</ChatBarButton>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -35,3 +35,7 @@
|
||||||
.vc-trans-auto-translate {
|
.vc-trans-auto-translate {
|
||||||
color: var(--green-360);
|
color: var(--green-360);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vc-trans-chat-button {
|
||||||
|
scale: 1.085;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue