Fix InvisibleChat button getting hidden by themes

This commit is contained in:
Vendicated 2023-01-11 01:50:00 +01:00
parent c525672777
commit 19c9a13273
No known key found for this signature in database
GPG key ID: EC781ADFB93EFFA3
3 changed files with 35 additions and 26 deletions

View file

@ -70,32 +70,41 @@ function ChatBarIcon() {
<Tooltip text="Encrypt Message"> <Tooltip text="Encrypt Message">
{({ onMouseEnter, onMouseLeave }) => ( {({ onMouseEnter, onMouseLeave }) => (
// size="" = Button.Sizes.NONE // size="" = Button.Sizes.NONE
<Button /*
aria-haspopup="dialog" many themes set "> button" to display: none, as the gift button is
aria-label="Encrypt Message" the only directly descending button (all the other elements are divs.)
size="" Thus, wrap in a div here to avoid getting hidden by that.
look={ButtonLooks.BLANK} flex is for some reason necessary as otherwise the button goes flying off
onMouseEnter={onMouseEnter} */
onMouseLeave={onMouseLeave} <div style={{ display: "flex" }}>
innerClassName={ButtonWrapperClasses.button} <Button
onClick={() => buildEncModal()} aria-haspopup="dialog"
style={{ marginRight: "2px" }} aria-label="Encrypt Message"
> size=""
<div className={ButtonWrapperClasses.buttonWrapper}> look={ButtonLooks.BLANK}
<svg onMouseEnter={onMouseEnter}
aria-hidden onMouseLeave={onMouseLeave}
role="img" innerClassName={ButtonWrapperClasses.button}
width="24" onClick={() => buildEncModal()}
height="24" style={{ marginRight: "2px" }}
viewBox={"0 0 64 64"} >
style={{ scale: "1.1" }} <div className={ButtonWrapperClasses.buttonWrapper}>
> <svg
<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" /> aria-hidden
</svg> role="img"
</div> width="24"
</Button> height="24"
)} viewBox={"0 0 64 64"}
</Tooltip> style={{ scale: "1.1" }}
>
<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>
</div>
</Button>
</div>
)
}
</Tooltip >
); );
} }