Fix InvisibleChat button getting hidden by themes

src/plugins/invisibleChat/index.tsx

@@ -70,32 +70,41 @@ function ChatBarIcon() {
         <Tooltip text="Encrypt Message">
             {({ onMouseEnter, onMouseLeave }) => (
                 // 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 >
     );
 }