added cmd+shift+x / ctrl+shift+x as a deletion key combination (#866)

* added cmd+shift+x as a deletion key combination

* added shift

* fix(keybinds): enter key to confirm delete. chore(style): linting

---------

Co-authored-by: Shaam <[email protected]>

client/src/components/StyledDialog.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton } from '@mui/material';
 import { Close as CloseIcon } from '@mui/icons-material';
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton } from '@mui/material';
 import { styled } from '@mui/system';
+import React from 'react';
 
 const ContentContainer = styled('div')`
   display: flex;
@@ -40,8 +40,8 @@ export const StyledDialogTitle = styled(DialogTitle)`
 `;
 
 const CustomCloseIconButton = styled(IconButton)`
-  width: 40px; 
-  height: 40px; 
+  width: 40px;
+  height: 40px;
   border-radius: 8px;
 `;
 

client/src/components/controls/CourseSelect.tsx

@@ -297,7 +297,7 @@ const CourseSelect: React.FC<CourseSelectProps> = ({ assignedColors, handleSelec
 
     // create a new fuse instance with the searchOptionsList after filtering by faculty
     // so that it allows for searching within the faculty's options
-    let fuzzy = new Fuse<CourseOverview>(searchOptionsList, searchOptions);
+    const fuzzy = new Fuse<CourseOverview>(searchOptionsList, searchOptions);
 
     const fuzzyResults = fuzzy.search(query).map((result) => result.item);
 

client/src/components/controls/History.tsx

@@ -1,18 +1,10 @@
-import { Close, Delete, Redo, Undo } from '@mui/icons-material';
-import { Button, Dialog, IconButton, Tooltip } from '@mui/material';
+import { Delete, Redo, Undo } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 
 import { AppContext } from '../../context/AppContext';
 import { CourseContext } from '../../context/CourseContext';
 import { CourseData, CreatedEvents, DisplayTimetablesMap, SelectedClasses } from '../../interfaces/Periods';
-import {
-  StyledCloseIcon,
-  StyledDialogButtons,
-  StyledDialogContent,
-  StyledDialogTitle,
-  StyledDialogTitleFont,
-  StyledTitleContainer,
-} from '../../styles/ControlStyles';
 import {
   ActionsPointer,
   areIdenticalTimetables,

client/src/components/sidebar/DarkModeButton.tsx

@@ -1,13 +1,10 @@
-import { 
-  NightsStay as DarkModeIcon,
-  LightMode as LightModeIcon,
-} from '@mui/icons-material';
+import { LightMode as LightModeIcon, NightsStay as DarkModeIcon } from '@mui/icons-material';
 import { IconButton, Tooltip, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import React, { useContext } from 'react';
 
-import { DarkModeButtonProps } from '../../interfaces/PropTypes';
 import { AppContext } from '../../context/AppContext';
+import { DarkModeButtonProps } from '../../interfaces/PropTypes';
 
 const ToggleDarkModeButton = styled(IconButton)`
   display: flex;
@@ -21,25 +18,20 @@ const IndividualComponentTypography = styled(Typography)<{ collapsed: boolean }>
   font-size: 16px;
 `;
 
-const DarkModeButton: React.FC<DarkModeButtonProps> = ({
-  collapsed,
-}) => {
-  const {
-    isDarkMode,
-    setIsDarkMode,
-  } = useContext(AppContext);
+const DarkModeButton: React.FC<DarkModeButtonProps> = ({ collapsed }) => {
+  const { isDarkMode, setIsDarkMode } = useContext(AppContext);
 
   const toggleDarkMode = () => {
     setIsDarkMode(!isDarkMode);
   };
 
   return (
     <>
-      <Tooltip title={collapsed ? (isDarkMode ? "Light Mode" : "Dark Mode") : ''} placement="right">
+      <Tooltip title={collapsed ? (isDarkMode ? 'Light Mode' : 'Dark Mode') : ''} placement="right">
         <ToggleDarkModeButton color="inherit" onClick={toggleDarkMode}>
-          {isDarkMode ? (<LightModeIcon />) : (<DarkModeIcon />)}
+          {isDarkMode ? <LightModeIcon /> : <DarkModeIcon />}
           <IndividualComponentTypography collapsed={collapsed}>
-            {collapsed ? '' : (isDarkMode ? "Change to Light Mode" : "Change to Dark Mode")}
+            {collapsed ? '' : isDarkMode ? 'Change to Light Mode' : 'Change to Dark Mode'}
           </IndividualComponentTypography>
         </ToggleDarkModeButton>
       </Tooltip>

client/src/components/sidebar/Sidebar.tsx

@@ -1,6 +1,5 @@
 import { CalendarMonth, Description, Group, Info, Security, Settings as SettingsIcon } from '@mui/icons-material';
 import { AppBar, AppBarProps, Divider, Typography } from '@mui/material';
-
 import { styled } from '@mui/system';
 import React, { useEffect, useRef, useState } from 'react';
 
@@ -10,14 +9,12 @@ import About from './About';
 import Changelog from './Changelog';
 import CollapseButton from './CollapseButton';
 import CustomModal from './CustomModal';
+import DarkModeButton from './DarkModeButton';
 import Privacy from './Privacy';
 import Settings from './Settings';
 import TermSelect from './TermSelect';
 import UserAccount from './UserAccount';
 
-import { uniqueId } from 'lodash-es';
-import DarkModeButton from './DarkModeButton';
-
 const LogoImg = styled('img')`
   height: 46px;
   margin-right: 12.5px;

client/src/components/sidebar/UserAccount.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react';
 import { AccountCircle, LoginRounded, LogoutRounded } from '@mui/icons-material';
-import { Button, Dialog, IconButton, Tooltip } from '@mui/material';
+import { Button, IconButton, Tooltip } from '@mui/material';
 import { styled } from '@mui/system';
+import React, { useEffect, useState } from 'react';
+
 import { API_URL } from '../../api/config';
 import StyledDialog from '../StyledDialog';
 

client/src/components/timetableTabs/TimetableTabContextMenu.tsx

@@ -50,7 +50,7 @@ const TimetableTabContextMenu: React.FC<TimetableTabContextMenuProps> = ({ ancho
 
   const isMacOS = navigator.userAgent.indexOf('Mac') != -1;
 
-  const deleteTimetabletip = isMacOS ? 'Delete Tab (Cmd+Delete)' : 'Delete Tab (Ctrl+Backspace)';
+  const deleteTimetabletip = isMacOS ? 'Delete Tab (Cmd+Shift+x)' : 'Delete Tab (Ctrl+Shift+x)';
 
   const [renameOpen, setRenameOpen] = useState<boolean>(false);
   const [renamedString, setRenamedString] = useState<string>('');
@@ -244,11 +244,11 @@ const TimetableTabContextMenu: React.FC<TimetableTabContextMenuProps> = ({ ancho
   // Hotkey for deleting timetables
   useEffect(() => {
     const handleDeletePopupShortcut = (event: KeyboardEvent) => {
-      // Ctrl+Backspace on Windows or Cmd+Delete on Mac deletes the selected timetable
-      if ((!isMacOS && event.ctrlKey) || (isMacOS && event.metaKey)) {
-        if (event.key === 'Backspace' && !renameOpen) {
-          setDeleteOpen(true);
-        }
+      // Ctrl+Shift+x on Windows or Cmd+Shift+x on Mac deletes the selected timetable
+      const isDeleteShortcut =
+        ((isMacOS && event.metaKey) || (!isMacOS && event.ctrlKey)) && event.shiftKey && event.key === 'x';
+      if (isDeleteShortcut && !renameOpen) {
+        setDeleteOpen(true);
       }
     };
 
@@ -413,6 +413,7 @@ const TimetableTabContextMenu: React.FC<TimetableTabContextMenuProps> = ({ ancho
         title="Confirm Deletion"
         content="Are you sure you want to delete this current timetable?"
         confirmButtonText="Delete"
+        confirmButtonId="confirm-delete-button"
       />
       {/* Restore deleted timetable Alert */}
       <StyledSnackbar

client/src/styles/ControlStyles.tsx

@@ -1,5 +1,5 @@
-import { Box, DialogContent, DialogTitle, ListItem, Typography } from '@mui/material';
 import { Close } from '@mui/icons-material';
+import { Box, DialogContent, DialogTitle, ListItem, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 
 export const StyledButtonText = styled(Box)`