From 27f99b4c8708e53d0bb83fb754a358ff148f5662 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Sat, 26 Oct 2024 20:41:07 +0200
Subject: [PATCH] refactor: generalise modal footer style

---
 .../client-modal/ClientModal.module.scss         |  6 ------
 .../client-modal/RedirectClientModal.tsx         | 16 ++++++----------
 .../client-modal/RenameClientModal.tsx           | 16 ++++++----------
 .../navigation-menu/NavigationMenu.tsx           |  2 +-
 .../panel/shutdown-panel/ShutdownPanel.tsx       |  2 +-
 apps/client/src/theme/ontimeModal.ts             |  4 +++-
 6 files changed, 17 insertions(+), 29 deletions(-)
 delete mode 100644 apps/client/src/common/components/client-modal/ClientModal.module.scss

diff --git a/apps/client/src/common/components/client-modal/ClientModal.module.scss b/apps/client/src/common/components/client-modal/ClientModal.module.scss
deleted file mode 100644
index 2c291157e..000000000
--- a/apps/client/src/common/components/client-modal/ClientModal.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.buttonSection {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: $element-spacing;
-  margin-top: -$element-spacing;
-}
diff --git a/apps/client/src/common/components/client-modal/RedirectClientModal.tsx b/apps/client/src/common/components/client-modal/RedirectClientModal.tsx
index 86df1c776..097447f6c 100644
--- a/apps/client/src/common/components/client-modal/RedirectClientModal.tsx
+++ b/apps/client/src/common/components/client-modal/RedirectClientModal.tsx
@@ -15,8 +15,6 @@ import {
 
 import { setClientRemote } from '../../hooks/useSocket';
 
-import style from './ClientModal.module.scss';
-
 interface RedirectClientModalProps {
   id: string;
   name?: string;
@@ -54,14 +52,12 @@ export function RedirectClientModal(props: RedirectClientModalProps) {
           </InputGroup>
         </ModalBody>
         <ModalFooter>
-          <div className={style.buttonSection}>
-            <Button size='md' variant='ontime-subtle' onClick={onClose}>
-              Cancel
-            </Button>
-            <Button size='md' variant='ontime-filled' onClick={handleRedirect} isDisabled={!canSubmit}>
-              Submit
-            </Button>
-          </div>
+          <Button size='md' variant='ontime-subtle' onClick={onClose}>
+            Cancel
+          </Button>
+          <Button size='md' variant='ontime-filled' onClick={handleRedirect} isDisabled={!canSubmit}>
+            Submit
+          </Button>
         </ModalFooter>
       </ModalContent>
     </Modal>
diff --git a/apps/client/src/common/components/client-modal/RenameClientModal.tsx b/apps/client/src/common/components/client-modal/RenameClientModal.tsx
index a66991278..4dbf95ea4 100644
--- a/apps/client/src/common/components/client-modal/RenameClientModal.tsx
+++ b/apps/client/src/common/components/client-modal/RenameClientModal.tsx
@@ -13,8 +13,6 @@ import {
 
 import { setClientRemote } from '../../hooks/useSocket';
 
-import style from './ClientModal.module.scss';
-
 interface RenameClientModalProps {
   id: string;
   name?: string;
@@ -53,14 +51,12 @@ export function RenameClientModal(props: RenameClientModalProps) {
           />
         </ModalBody>
         <ModalFooter>
-          <div className={style.buttonSection}>
-            <Button size='md' variant='ontime-subtle' onClick={onClose}>
-              Cancel
-            </Button>
-            <Button size='md' variant='ontime-filled' onClick={handleRename} isDisabled={!canSubmit}>
-              Submit
-            </Button>
-          </div>
+          <Button size='md' variant='ontime-subtle' onClick={onClose}>
+            Cancel
+          </Button>
+          <Button size='md' variant='ontime-filled' onClick={handleRename} isDisabled={!canSubmit}>
+            Submit
+          </Button>
         </ModalFooter>
       </ModalContent>
     </Modal>
diff --git a/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx b/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx
index f09c52a04..199b495f4 100644
--- a/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx
+++ b/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx
@@ -20,7 +20,7 @@ import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
 import { navigatorConstants } from '../../../viewerConfig';
 import { isLocalhost, serverPort } from '../../api/constants';
 import useClickOutside from '../../hooks/useClickOutside';
-import useElectronEvent from '../../hooks/useElectronEvent';
+import { useElectronEvent } from '../../hooks/useElectronEvent';
 import useInfo from '../../hooks-query/useInfo';
 import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
diff --git a/apps/client/src/features/app-settings/panel/shutdown-panel/ShutdownPanel.tsx b/apps/client/src/features/app-settings/panel/shutdown-panel/ShutdownPanel.tsx
index 3961312a8..e72ac7b67 100644
--- a/apps/client/src/features/app-settings/panel/shutdown-panel/ShutdownPanel.tsx
+++ b/apps/client/src/features/app-settings/panel/shutdown-panel/ShutdownPanel.tsx
@@ -11,7 +11,7 @@ import {
 } from '@chakra-ui/react';
 
 import { isLocalhost } from '../../../../common/api/constants';
-import useElectronEvent from '../../../../common/hooks/useElectronEvent';
+import { useElectronEvent } from '../../../../common/hooks/useElectronEvent';
 import * as Panel from '../../panel-utils/PanelUtils';
 
 export default function ShutdownPanel() {
diff --git a/apps/client/src/theme/ontimeModal.ts b/apps/client/src/theme/ontimeModal.ts
index be0ebdca1..b71235b2c 100644
--- a/apps/client/src/theme/ontimeModal.ts
+++ b/apps/client/src/theme/ontimeModal.ts
@@ -25,6 +25,8 @@ export const ontimeModal = {
     color: '#fefefe', // $gray-50
   },
   footer: {
-    padding: '0.5rem',
+    padding: '1rem',
+    display: 'flex',
+    gap: '0.5rem',
   },
 };