refactor: generalise modal footer style

apps/client/src/common/components/client-modal/ClientModal.module.scss

@@ -1,6 +0,0 @@
-.buttonSection {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: $element-spacing;
-  margin-top: -$element-spacing;
-}

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}>
-            <Button size='md' variant='ontime-subtle' onClick={onClose}>
+            Cancel
-              Cancel
+          </Button>
-            </Button>
+          <Button size='md' variant='ontime-filled' onClick={handleRedirect} isDisabled={!canSubmit}>
-            <Button size='md' variant='ontime-filled' onClick={handleRedirect} isDisabled={!canSubmit}>
+            Submit
-              Submit
+          </Button>
-            </Button>
-          </div>
         </ModalFooter>
       </ModalContent>
     </Modal>

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}>
-            <Button size='md' variant='ontime-subtle' onClick={onClose}>
+            Cancel
-              Cancel
+          </Button>
-            </Button>
+          <Button size='md' variant='ontime-filled' onClick={handleRename} isDisabled={!canSubmit}>
-            <Button size='md' variant='ontime-filled' onClick={handleRename} isDisabled={!canSubmit}>
+            Submit
-              Submit
+          </Button>
-            </Button>
-          </div>
         </ModalFooter>
       </ModalContent>
     </Modal>

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';

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() {

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',
   },
 };