From ef107b9292899956d88f26a5ae3dc2c660f85fd2 Mon Sep 17 00:00:00 2001
From: Luke <39926192+LukeWasTakenn@users.noreply.github.com>
Date: Sun, 1 Oct 2023 14:02:50 +0200
Subject: [PATCH] feat(web): custom dialog component

---
 .../components/inventory/UsefulControls.tsx   | 133 +++++++++---------
 web/src/index.scss                            |  50 +++++--
 2 files changed, 104 insertions(+), 79 deletions(-)

diff --git a/web/src/components/inventory/UsefulControls.tsx b/web/src/components/inventory/UsefulControls.tsx
index 773418c47a..26274040b5 100644
--- a/web/src/components/inventory/UsefulControls.tsx
+++ b/web/src/components/inventory/UsefulControls.tsx
@@ -4,81 +4,82 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { Locale } from '../../store/locale';
 import React, { useState } from 'react';
 import { TransitionProps } from '@mui/material/transitions';
+import {
+  FloatingFocusManager,
+  FloatingOverlay,
+  FloatingPortal,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useTransitionStyles,
+} from '@floating-ui/react';
 
 interface Props {
   infoVisible: boolean;
   setInfoVisible: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const Transition = React.forwardRef(function Transition(
-  props: TransitionProps & {
-    children: React.ReactElement<any, any>;
-  },
-  ref: React.Ref<unknown>
-) {
-  return <Slide direction="up" ref={ref} {...props} />;
-});
-
 const UsefulControls: React.FC<Props> = ({ infoVisible, setInfoVisible }) => {
-  const [open, setOpen] = useState(false);
+  const { refs, context } = useFloating({
+    open: infoVisible,
+    onOpenChange: setInfoVisible,
+  });
+
+  const dismiss = useDismiss(context, {
+    outsidePressEvent: 'mousedown',
+  });
+
+  const { isMounted, styles } = useTransitionStyles(context);
+
+  const { getFloatingProps } = useInteractions([dismiss]);
 
   return (
-    <Dialog
-      open={infoVisible}
-      fullWidth
-      maxWidth={'xs'}
-      onClose={() => setInfoVisible(false)}
-      TransitionComponent={Transition}
-    >
-      <DialogTitle>
-        <p>{Locale.ui_usefulcontrols}</p>
-        <IconButton className="useful-controls-exit-button" aria-label="close" onClick={() => setInfoVisible(false)}>
-          <FontAwesomeIcon icon={faTimes} />
-        </IconButton>
-      </DialogTitle>
-      <DialogContent>
-        <div className="useful-controls-content-wrapper">
-          <p>
-            <kbd>RMB</kbd>
-            <br />
-            {Locale.ui_rmb}
-          </p>
-          <p>
-            <kbd>ALT + LMB</kbd>
-            <br />
-            {Locale.ui_alt_lmb}
-          </p>
-          <p>
-            <kbd>CTRL + LMB</kbd>
-            <br />
-            {Locale.ui_ctrl_lmb}
-          </p>
-          <p>
-            <kbd>SHIFT + Drag</kbd>
-            <br />
-            {Locale.ui_shift_drag}
-          </p>
-          <p>
-            <kbd>CTRL + SHIFT + LMB</kbd>
-            <br />
-            {Locale.ui_ctrl_shift_lmb}
-          </p>
-        </div>
-      </DialogContent>
-      <DialogActions>
-        <span onClick={() => setOpen(true)}>🐂</span>
-      </DialogActions>
-      <Snackbar
-        open={open}
-        onClose={() => setOpen(false)}
-        autoHideDuration={2000}
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-      >
-        <Alert severity="success" color="info" sx={{ width: '100%' }}>
-          Made with 🐂 by the Overextended team
-        </Alert>
-      </Snackbar>
-    </Dialog>
+    <>
+      {isMounted && (
+        <FloatingPortal>
+          <FloatingOverlay lockScroll className="useful-controls-dialog-overlay" data-open={infoVisible} style={styles}>
+            <FloatingFocusManager context={context}>
+              <div ref={refs.setFloating} {...getFloatingProps()} className="useful-controls-dialog" style={styles}>
+                <div className="useful-controls-dialog-title">
+                  <p>{Locale.ui_usefulcontrols || 'Useful controls'}</p>
+                  <div className="useful-controls-dialog-close" onClick={() => setInfoVisible(false)}>
+                    <FontAwesomeIcon icon={faTimes} />
+                  </div>
+                </div>
+                <div className="useful-controls-content-wrapper">
+                  <p>
+                    <kbd>RMB</kbd>
+                    <br />
+                    {Locale.ui_rmb}
+                  </p>
+                  <p>
+                    <kbd>ALT + LMB</kbd>
+                    <br />
+                    {Locale.ui_alt_lmb}
+                  </p>
+                  <p>
+                    <kbd>CTRL + LMB</kbd>
+                    <br />
+                    {Locale.ui_ctrl_lmb}
+                  </p>
+                  <p>
+                    <kbd>SHIFT + Drag</kbd>
+                    <br />
+                    {Locale.ui_shift_drag}
+                  </p>
+                  <p>
+                    <kbd>CTRL + SHIFT + LMB</kbd>
+                    <br />
+                    {Locale.ui_ctrl_shift_lmb}
+                  </p>
+                  <div style={{ textAlign: 'right' }}>🐂</div>
+                </div>
+              </div>
+            </FloatingFocusManager>
+          </FloatingOverlay>
+        </FloatingPortal>
+      )}
+    </>
   );
 };
 
diff --git a/web/src/index.scss b/web/src/index.scss
index 7af9490245..0e33cf1fb6 100644
--- a/web/src/index.scss
+++ b/web/src/index.scss
@@ -153,9 +153,46 @@ button:active {
 }
 
 .useful-controls-dialog {
+  background-color: $mainColor;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: $textColor;
+  width: 450px;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  border-radius: 4px;
+  gap: 16px;
+}
+
+.useful-controls-dialog-overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.useful-controls-dialog-title {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
   font-size: 18px;
 }
 
+.useful-controls-dialog-close {
+  width: 25px;
+  height: 25px;
+  padding: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  &:hover {
+    background-color: $secondaryColorHighlight;
+    cursor: pointer;
+  }
+}
+
 .useful-controls-content-wrapper {
   display: flex;
   flex-direction: column;
@@ -183,20 +220,7 @@ button:active {
 }
 
 // Dialog is used fro useful controls window
-.MuiDialogContent-root {
-  background-color: $mainColor;
-  color: $textColor;
-}
-
-.MuiDialogTitle-root {
-  background-color: $mainColor;
-  color: $textColor;
-}
 
-.MuiDialogActions-root {
-  background-color: $mainColor;
-  color: $textColor;
-}
 
 // inventory grids
 .inventory-grid-wrapper {