me/owo-vencord
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve PreviewMessage icon; make button padding/margin more consistent

Browse source 
Co-authored-by: Andrew Grant <andrew.grant@mail.rit.edu>
This commit is contained in:
Vendicated 2024-02-06 17:50:45 +01:00
parent 7592b5c172
commit 685b6f2fa7
No known key found for this signature in database
GPG key ID: D66986BAF75ECF18
9 changed files with 31 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/api/ChatButtons.tsx
View file

@ -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}

7
src/plugins/invisibleChat.desktop/index.tsx
View file

@ -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>

12
src/plugins/previewMessage/index.tsx
View file

@ -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>
);

6
src/plugins/sendTimestamps/index.tsx
View file

@ -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" />

4
src/plugins/sendTimestamps/styles.css
View file

@ -42,10 +42,6 @@
margin-bottom: 1em;
}
.vc-st-button {
padding: 0 6px;
}
.vc-st-button svg {
transform: scale(1.1) translateY(1px);
}

10
src/plugins/silentMessageToggle/index.tsx
View file

@ -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="_">

3
src/plugins/silentTyping/index.tsx
View file

@ -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" />

5
src/plugins/translate/TranslateIcon.tsx
View file

@ -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>
);
};

4
src/plugins/translate/styles.css
View file

@ -35,3 +35,7 @@
.vc-trans-auto-translate {
color: var(--green-360);
}
.vc-trans-chat-button {
scale: 1.085;
}