Fix InvisibleChat button getting hidden by themes
This commit is contained in:
parent
c525672777
commit
19c9a13273
3 changed files with 35 additions and 26 deletions
|
@ -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 >
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue