more design changes

client/src/components/MainCard.jsx

@@ -52,7 +52,7 @@ const MainCard = forwardRef(
                         : theme.palette.grey.A800,
                     background: theme.palette.mode === 'dark'
                         ? 'rgba(30,30,30,0.65)'
-                        : 'rgba(255,255,255,0.7)',
+                        : 'rgba(255,255,255)',
                     backdropFilter: 'blur(8px)',
                     WebkitBackdropFilter: 'blur(8px)',
                     boxShadow: theme.customShadows?.glass || 'none',

client/src/components/routeComponents.jsx

@@ -1,51 +1,46 @@
 import { CheckOutlined, ClockCircleOutlined, CopyOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, LockOutlined, SafetyOutlined, UpOutlined } from "@ant-design/icons";
-import { Card, Chip, Stack, Tooltip } from "@mui/material";
+import { Card, Chip, ListItemIcon, ListItemText, MenuItem, Stack, Tooltip } from "@mui/material";
 import { useState } from "react";
 import { useTheme } from '@mui/material/styles';
 import { Trans, useTranslation } from 'react-i18next';
+import MenuButton from './MenuButton';
 
 let routeImages = {
   "TUNNEL": {
     label: "Tunnel",
-    icon: "💫",
+    icon: "TU",
     backgroundColor: "#082452",
     color: "white",
-    colorDark: "white",
   },
   "SERVAPP": {
     label: "ServApp",
-    icon: "🐳",
+    icon: "SA",
     backgroundColor: "#0db7ed",
-    color: "white",
-    colorDark: "black",
+    color: "black",
   },
   "STATIC": {
     label: "Static",
-    icon: "📁",
+    icon: "ST",
     backgroundColor: "#f9d71c",
     color: "black",
-    colorDark: "black",
   },
   "REDIRECT": {
     label: "Redir",
-    icon: "🔀",
+    icon: "RE",
     backgroundColor: "#2c3e50",
     color: "white",
-    colorDark: "white",
   },
   "PROXY": {
     label: "Proxy",
-    icon: "🔗",
+    icon: "PR",
     backgroundColor: "#2ecc71",
-    color: "white",
-    colorDark: "black",
+    color: "black",
   },
   "SPA": {
     label: "SPA",
-    icon: "🌐",
+    icon: "SP",
     backgroundColor: "#e74c3c",
-    color: "white",
-    colorDark: "black",
+    color: "black",
   },
 }
 
@@ -60,17 +55,25 @@ export const RouteMode = ({route}) => {
     cicon = c.icon + " 💫";
   }
 
-  return c ? <>
+  return c ? <><Tooltip title={c.label}>
     <Chip
       icon={<span>{cicon}</span>}
-      label={c.label}
+      // label={c.label}
       sx={{
         backgroundColor: c.backgroundColor,
-        color: isDark ? c.colorDark : c.color,
         paddingLeft: "5px",
-        alignItems: "right",
+
+        '& .MuiChip-label': {
+          paddingLeft: 1,
+          paddingRight: 1,
+        },
+
+        '& .MuiChip-icon': {
+          color: c.color,
+        },
       }}
     ></Chip>
+    </Tooltip>
   </> : <></>;
 }
 
@@ -119,43 +122,43 @@ export const RouteSecurity = ({route}) => {
 
 export const RouteActions = ({route, routeKey, up, down, deleteRoute, duplicateRoute}) => {
   const [confirmDelete, setConfirmDelete] = useState(false);
-  const theme = useTheme();
-  const isDark = theme.palette.mode === 'dark';
   const { t } = useTranslation();
 
-  const miniChip = {
-    width: '30px',
-    height: '20px',
-    display: 'inline-block',
-    textAlign: 'center',
-    cursor: 'pointer',
-    color: theme.palette.text.secondary,
-    fontSize: '12px',
-    lineHeight: '20px',
-    padding: '0px',
-    borderRadius: '0px',
-    background: isDark ? 'rgba(255, 255, 255, 0.03)' : '',
-    fontWeight: 'bold',
-  
-    '&:hover': {
-      backgroundColor: 'rgba(0, 0, 0, 0.04)',
-    }
-  }
-
-  return <>
-    <Stack direction={'row'} spacing={2} alignItems={'center'} justifyContent={'right'}>
-      {!confirmDelete && (<Chip label={<DeleteOutlined />} onClick={() => setConfirmDelete(true)}/>)}
-      {confirmDelete && (<Chip label={<CheckOutlined />} color="error" onClick={(event) => deleteRoute(event)}/>)}
-      
-      <Chip label={<CopyOutlined />} onClick={(event) => duplicateRoute(event)}/>
-
-      <Tooltip title={t('tooltip.route.move')}>
-        <Stack direction={'column'} spacing={0}>
-          <Card sx={{...miniChip, borderBottom: 'none'}} onClick={(event) => up(event)}><UpOutlined /></Card>
-          <Card sx={{...miniChip, cursor: 'auto'}}>{routeKey}</Card>
-          <Card sx={{...miniChip, borderTop: 'none'}} onClick={(event) => down(event)}><DownOutlined /></Card>
-        </Stack>
-      </Tooltip>
-    </Stack>
-  </>;
+  return (
+    <MenuButton>
+      <MenuItem onClick={(event) => up(event)}>
+        <ListItemIcon>
+          <UpOutlined />
+        </ListItemIcon>
+        <ListItemText>{t('global.moveUp')}</ListItemText>
+      </MenuItem>
+      <MenuItem onClick={(event) => down(event)}>
+        <ListItemIcon>
+          <DownOutlined />
+        </ListItemIcon>
+        <ListItemText>{t('global.moveDown')}</ListItemText>
+      </MenuItem>
+      <MenuItem onClick={(event) => duplicateRoute(event)}>
+        <ListItemIcon>
+          <CopyOutlined />
+        </ListItemIcon>
+        <ListItemText>{t('global.duplicate')}</ListItemText>
+      </MenuItem>
+      <MenuItem onClick={(event) => {
+        if (confirmDelete) {
+          deleteRoute(event);
+          setConfirmDelete(false);
+        } else {
+          setConfirmDelete(true);
+        }
+      }}>
+        <ListItemIcon>
+          <DeleteOutlined style={{color: confirmDelete ? 'red' : 'inherit'}} />
+        </ListItemIcon>
+        <ListItemText style={{color: confirmDelete ? 'red' : 'inherit'}}>
+          {confirmDelete ? t('global.confirmDelete') : t('global.delete')}
+        </ListItemText>
+      </MenuItem>
+    </MenuButton>
+  );
 }

client/src/components/tableView/prettyTableView.jsx

@@ -63,17 +63,16 @@ const PrettyTableView = ({ isLoading, getKey, data, columns, sort, onRowClick, l
 
       {!isLoading && <TableContainer style={{
         width: fullWidth ? '100%': '',
-        background: isDark ? 'rgba(20,24,35,0.7)' : 'rgba(255,255,255,0.7)',
-        backdropFilter: 'blur(8px)',
-        WebkitBackdropFilter: 'blur(8px)',
+        backgroundColor: isDark ? 'rgba(32,35,43,1)' : 'rgba(255,255,255)',
         borderRadius: '12px',
-        border: isDark ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(0,0,0,0.06)',
+        border: isDark ? '1px solid rgba(40,48,70,0.6)' : '1px solid rgba(0,0,0,0.06)',
+        boxShadow: theme.customShadows?.glass || 'none',
         overflow: 'hidden',
       }} component={Paper} elevation={0}>
         <Table aria-label="simple table">
           <TableHead>
             <TableRow sx={{
-              background: isDark ? 'rgba(0,0,0,0.15)' : 'rgba(0,0,0,0.03)',
+              background: isDark ? 'rgba(0,0,0,0.20)' : 'rgba(0,0,0,0.03)',
               '& .MuiTableCell-head': { fontWeight: 600 },
             }}>
               {columns.filter(c=>c).map((column) => (

client/src/pages/backups/backups.jsx

@@ -59,7 +59,7 @@ export const Backups = ({pathFilters}) => {
     refresh();
   }, []);
 
-  return <>
+  return  <div style={{ maxWidth: "1200px", margin: "auto" }}>
     {(config) ? <>
       {deleteBackup && <ConfirmModalDirect
         title="Delete Backup"
@@ -159,5 +159,5 @@ export const Backups = ({pathFilters}) => {
     </> : <center>
       <CircularProgress color="inherit" size={20} />
     </center>}
-  </>;
+  </div>;
 };

client/src/pages/backups/repositories.jsx

@@ -40,7 +40,7 @@ export const Repositories = () => {
     );
   }
 
-  return <>
+  return  <div style={{ maxWidth: "1200px", margin: "auto" }}>
     {(repositories) ? <>
       <Stack direction="row" spacing={2} justifyContent="flex-start">  
         <ResponsiveButton variant="outlined" startIcon={<ReloadOutlined />} onClick={refresh}>
@@ -85,5 +85,5 @@ export const Repositories = () => {
     </> : <center>
       <CircularProgress color="inherit" size={20} />
     </center>}
-  </>;
+  </div>;
 };

client/src/pages/config/users/configman.jsx

@@ -102,7 +102,7 @@ Ijy+/SYjyHfakFQm7JDhKpbNPC5oc+e4uM6Y9UyC0686toqpTYBSzbgaQw==
     refresh();
   }, []);
 
-  return <div style={{maxWidth: '1000px', margin: ''}}>
+  return <div style={{ maxWidth: "1000px", margin: "auto" }}>
     <Stack direction="row" spacing={2} style={{marginBottom: '15px'}}>
       <Button variant="contained" color="primary" startIcon={<SyncOutlined />} onClick={() => {
           refresh();

client/src/pages/config/users/proxyman.jsx

@@ -184,7 +184,7 @@ const ProxyManagement = () => {
     routes = [...tunnelRoutes, ...routes];
   }
 
-  return <div style={{   }}>
+  return <div style={{ maxWidth: "1200px", margin: "auto" }}>
     <Stack direction="row" spacing={1} style={{ marginBottom: '20px' }}>
       <Button variant="contained" color="primary" startIcon={<SyncOutlined />} onClick={() => {
           refresh();

client/src/pages/config/users/usermanagement.jsx

@@ -70,7 +70,7 @@ const UserManagement = () => {
         });
     }
 
-    return <>
+    return <div style={{ maxWidth: "1200px", margin: "auto" }}>
         {openInviteForm ? <Dialog open={openInviteForm} onClose={() => setOpenInviteForm(false)}>
             <DialogTitle>{t('mgmt.usermgmt.inviteUserTitle')}</DialogTitle>
             <DialogContent>
@@ -320,7 +320,7 @@ const UserManagement = () => {
                 },
             ]}
         />)}
-    </>;
+    </div>;
 };
 
 export default UserManagement;

client/src/pages/cron/jobsManage.jsx

@@ -83,7 +83,7 @@ export const CronManager = () => {
 
   const jobsInProgress = cronJobs && Object.values(cronJobs).map((jobs) => Object.values(jobs).filter((job) => job.Running)).flat();
 
-  return <>
+  return <div style={{ maxWidth: "1200px", margin: "auto" }}>
     {(config && cronJobs) ? <>
       {jobLogs && <JobLogsDialog job={jobLogs} OnClose={() => {
         setJobLogs(false);
@@ -179,5 +179,5 @@ export const CronManager = () => {
     </> : <center>
       <CircularProgress color="inherit" size={20} />
     </center>}
-  </>
+  </div>
 };

client/src/pages/dashboard/AlertPage.jsx

@@ -407,7 +407,7 @@ const AlertPage = () => {
     }
   }
 
-  return <div style={{maxWidth: '1200px', margin: ''}}>
+  return <div style={{ maxWidth: "1200px", margin: "auto" }}>
     {openModal && <EditAlertModal open={openModal} onClose={() => setOpenModal(false)} onSave={saveAlert} />}
 
     <Stack direction="row" spacing={2} style={{marginBottom: '15px'}}>

client/src/pages/dashboard/eventsExplorer.jsx

@@ -114,7 +114,7 @@ const EventsExplorer = ({from, to, xAxis, zoom, slot, initLevel, initSearch = ''
 		refresh(page);
 	}, [page]);
 
-	return (<div>
+	return ( <div style={{ maxWidth: "1200px", margin: "auto" }}>
 		<Stack spacing={2} direction="column" style={{width: '100%'}}>
 			<Stack spacing={2} direction="row" style={{width: '100%'}}>
 				<div>

client/src/pages/dashboard/proxyDashboard.jsx

@@ -11,7 +11,7 @@ import { InfoCircleOutlined } from '@ant-design/icons';
 
 const ProxyDashboard = ({ xAxis, zoom, setZoom, slot, metrics }) => {
   const { t } = useTranslation();
-  return (<>
+  return ( <div style={{ maxWidth: "1200px", margin: "auto" }}>
 
     <Grid container rowSpacing={4.5} columnSpacing={2.75} >
       <Grid item xs={12} md={6} lg={6}>
@@ -53,7 +53,7 @@ const ProxyDashboard = ({ xAxis, zoom, setZoom, slot, metrics }) => {
         Object.keys(metrics).filter((key) => key.startsWith("cosmos.proxy.blocked.")).map((key) => metrics[key])
       } />
     </Grid>
-  </>)
+  </div>)
 }
 
 export default ProxyDashboard;

client/src/pages/dashboard/resourceDashboard.jsx

@@ -9,7 +9,7 @@ import TableComponent from './components/table';
 
 const ResourceDashboard = ({ xAxis, zoom, setZoom, slot, metrics }) => {
   const { t } = useTranslation();
-  return (<>
+  return ( <div style={{ maxWidth: "1200px", margin: "auto" }}>
 
     <Grid container rowSpacing={4.5} columnSpacing={2.75} >
       <Grid item xs={12} md={7} lg={8}>
@@ -55,7 +55,7 @@ const ResourceDashboard = ({ xAxis, zoom, setZoom, slot, metrics }) => {
         />
       </Grid>
     </Grid>
-  </>)
+  </div>)
 }
 
 export default ResourceDashboard;

client/src/pages/market/listing.jsx

@@ -74,7 +74,7 @@ function ShowcasesItem({ isDark, item, isAdmin }) {
     }}>
       <Stack direction="row" spacing={2} style={{ height: '100%', overflow: 'hidden' }} justifyContent="flex-end">
         <Stack direction="column" spacing={2} style={{ height: '100%' }} sx={{
-          backgroundColor: isDark ? '#20232b' : 'rgba(255,255,255,0.95)',
+          backgroundColor: isDark ? '#20232b' : 'rgba(255,255,255)',
           padding: '20px 100px',
           width: '50%',
           filter: 'drop-shadow(-20px 0px 20px rgba(0, 0, 0, 1))',
@@ -238,7 +238,7 @@ const MarketPage = () => {
 
       <Stack direction="row" spacing={2} style={{ height: '100%' }} justifyContent="flex-end">
         <Stack direction="column" spacing={3} style={{ height: '100%', overflow: "auto" }} sx={{
-          backgroundColor: isDark ? '#20232b' : 'rgba(255,255,255,0.95)',
+          backgroundColor: isDark ? '#20232b' : 'rgba(255,255,255)',
           padding: '80px 80px',
           width: '100%',
           maxWidth: '800px',

client/src/pages/openid/openid-list.jsx

@@ -127,7 +127,7 @@ const OpenIdList = () => {
 
   let clients = config && (config.OpenIDClients || []);
 
-  return <div style={{}}>
+  return <div style={{ maxWidth: "1200px", margin: "auto" }}>
     <Stack direction="row" spacing={1} style={{ marginBottom: '20px' }}>
       <Button variant="contained" color="primary" startIcon={<SyncOutlined />} onClick={() => {
         refresh();

client/src/pages/servapps/servapps.jsx

@@ -25,7 +25,7 @@ import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 
 const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: theme.palette.mode === 'dark' ? 'rgba(20,24,35,0.7)' : 'rgba(255,255,255,0.7)',
+  backgroundColor: theme.palette.mode === 'dark' ? 'rgba(20,24,35,0.7)' : 'rgba(255,255,255)',
   backdropFilter: 'blur(8px)',
   WebkitBackdropFilter: 'blur(8px)',
   borderRadius: '12px',
@@ -35,11 +35,6 @@ const Item = styled(Paper)(({ theme }) => ({
   padding: theme.spacing(1),
   textAlign: 'center',
   color: theme.palette.text.secondary,
-  transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
-  '&:hover': {
-    transform: 'translateY(-2px)',
-    boxShadow: theme.customShadows?.glassHover || '0 8px 32px rgba(0,0,0,0.15)',
-  },
 }));
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
@@ -55,7 +50,7 @@ const noOver = {
   overflowX: 'auto',
   width: "100%",
   maxWidth: "800px",
-  height: "50px"
+  height: "55px"
 }
 
 const ServApps = ({stack}) => {
@@ -237,7 +232,7 @@ const ServApps = ({stack}) => {
     }
   });
 
-  return <div>
+  return <div style={{ maxWidth: "1200px", margin: "auto" }}>
     <RestartModal openModal={openRestartModal} setOpenModal={setOpenRestartModal} config={config} newRoute />
     <ExposeModal
       openModal={openModal} 
@@ -258,17 +253,6 @@ const ServApps = ({stack}) => {
         {stack && <Link to="/cosmos-ui/servapps">
           <ResponsiveButton variant="secondary" startIcon={<RollbackOutlined />}>Back</ResponsiveButton>
         </Link>}
-        <Input placeholder={t('global.searchPlaceholder')}
-          value={search}
-          startAdornment={
-            <InputAdornment position="start">
-              <SearchOutlined />
-            </InputAdornment>
-          }
-          onChange={(e) => {
-            setSearch(e.target.value);
-          }}
-        />
         <ResponsiveButton variant="contained" startIcon={<ReloadOutlined />} onClick={() => {
           refreshServApps();
         }}>{t('global.refresh')}</ResponsiveButton>
@@ -287,6 +271,20 @@ const ServApps = ({stack}) => {
         />
         </>}
       </Stack>
+
+      <div>
+        <Input placeholder={t('global.searchPlaceholder')}
+          value={search}
+          startAdornment={
+            <InputAdornment position="start">
+              <SearchOutlined />
+            </InputAdornment>
+          }
+          onChange={(e) => {
+            setSearch(e.target.value);
+          }}
+        />
+      </div>
       
       <Grid2 container spacing={{xs: 1, sm: 1, md: 2 }}>
         {updatesAvailable && updatesAvailable.length && <Grid2 style={gridAnim} xs={12} item>
@@ -378,7 +376,7 @@ const ServApps = ({stack}) => {
                     }}
                   />
                 </Stack>
-                <Stack style={noOver} spacing={1} direction="row" flexWrap="wrap" alignItems="center">
+                <Stack style={noOver} spacing={1} direction="row" alignItems="center" >
                   {getContainersRoutes(config, app.name.replace('/', '')).map((route) => {
                     return <HostChip route={route} settings/>
                   })}

client/src/pages/storage/disks.jsx

@@ -236,7 +236,7 @@ export const StorageDisks = () => {
     })();
   }, []);
 
-  return <>
+  return  <div style={{ maxWidth: "1200px", margin: "auto" }}>
     {(config) ? <>
       <SMARTDialog disk={SMARTDialogOpened} OnClose={() => SetSMARTDialogOpened(false)} />
 
@@ -268,5 +268,5 @@ export const StorageDisks = () => {
     </> : <center>
       <CircularProgress color="inherit" size={20} />
     </center>}
-  </>
+  </div>
 };

client/src/pages/storage/merges.jsx

@@ -45,7 +45,7 @@ export const StorageMerges = () => {
     refresh();
   }, []);
 
-  return <>
+  return <div style={{ maxWidth: "1200px", margin: "auto" }}>
     {(config) ? <>
       {mergeDialog && <MergerDialogInternal data={mergeDialog.data} refresh={refresh} unmount={mergeDialog.unmount} open={mergeDialog} setOpen={setMergeDialog} />}
       <Stack spacing={2}>
@@ -98,5 +98,5 @@ export const StorageMerges = () => {
     </> : <center>
       <CircularProgress color="inherit" size={20} />
     </center>}
-  </>
+  </div>
 };

client/src/pages/storage/mounts.jsx

@@ -46,7 +46,7 @@ export const StorageMounts = () => {
     refresh();
   }, []);
 
-  return <>
+  return <div style={{ maxWidth: "1200px", margin: "auto" }}>
     {mountDialog && <MountDialogInternal data={mountDialog.data} refresh={refresh} unmount={mountDialog.unmount} open={mountDialog} setOpen={setMountDialog} />}
     {(config) ? <Stack spacing={2}>
       {containerized && <VMWarning />}
@@ -102,5 +102,5 @@ export const StorageMounts = () => {
     </Stack> : <center>
       <CircularProgress color="inherit" size={20} />
     </center>}
-  </>
+  </div>
 };

client/src/pages/storage/parity.jsx

@@ -121,7 +121,7 @@ export const Parity = () => {
     refresh();
   }, []);
 
-  return <>
+  return <div style={{ maxWidth: "1200px", margin: "auto" }}>
     {(config) ? <>
       {deleteRaid && <ConfirmModalDirect
         title="Delete Parity"
@@ -252,5 +252,5 @@ export const Parity = () => {
     </> : <center>
       <CircularProgress color="inherit" size={20} />
     </center>}
-  </>
+  </div>
 };

client/src/pages/storage/raid.jsx

@@ -87,7 +87,7 @@ export const RAIDArrays = () => {
     refresh();
   }, []);
 
-  return <>
+  return <div style={{ maxWidth: "1200px", margin: "auto" }}>
     {(config) ? <>
       {deleteRaid && <ConfirmModalDirect
         title={t('mgmt.storage.raid.deleteTitle')}
@@ -218,5 +218,5 @@ export const RAIDArrays = () => {
     </> : <center>
       <CircularProgress color="inherit" size={20} />
     </center>}
-  </>;
+  </div>;
 };

client/src/pages/storage/rclone/rclone_config.jsx

@@ -67,7 +67,7 @@ const RClonePage = ({coStatus, containerized}) => {
     return <VMWarning />;
   }
 
-  return (<>
+  return ( <div style={{ maxWidth: "1200px", margin: "auto" }}>
     {configModal && <RCloneNewConfig initialValues={configModal} onClose={() => {setConfigModal(false); refresh(true);}} open={configModal} setOpen={setConfigModal} />}
     {isTransfering && <Alert severity="warning">{t('mgmt.storage.rclone.transferWarning')}</Alert>}
     <MiniPlotComponent  metrics={[
@@ -179,7 +179,7 @@ const RClonePage = ({coStatus, containerized}) => {
     : <Stack spacing={2} direction="row" justifyContent="center">
       <CircularProgress />
     </Stack>}
-  </>);
+  </div>);
 };
 
 export default RClonePage;

client/src/pages/storage/rclone/rclone_serve_config.jsx

@@ -28,7 +28,7 @@ const RCloneServePage = ({containerized}) => {
     return <VMWarning />;
   }
 
-  return (<>
+  return (<div style={{ maxWidth: "1200px", margin: "auto" }}>
     {configModal && <RCloneNewServeConfig initialValues={configModal} onClose={() => {setConfigModal(false); refresh();}} open={configModal} setOpen={setConfigModal} />}
     <br/>
     {config ? 
@@ -85,7 +85,7 @@ const RCloneServePage = ({containerized}) => {
     : <Stack spacing={2} direction="row" justifyContent="center">
       <CircularProgress />
     </Stack>}
-  </>);
+  </div>);
 };
 
 export default RCloneServePage;

client/src/themes/palette.jsx

@@ -81,8 +81,8 @@ const Palette = (mode, PrimaryColor, SecondaryColor) => {
             },
             divider: '#e8e8ec',
             background: {
-                paper: '#fafafa',
-                default: '#f5f5f7'
+                paper: '#ffffff',
+                default: 'rgb(250,250,251)'
             }
         },
     });

client/src/utils/locales/en/translation.json

@@ -42,9 +42,11 @@
 	"global.cancelAction": "Cancel",
 	"global.close": "Close",
 	"global.confirmAction": "Confirm",
+	"global.confirmDelete": "Confirm Delete",
 	"global.confirmDeletion": "Are you sure?",
 	"global.copyFilenameSuffix": "Copy",
 	"global.createAction": "Create",
+	"global.duplicate": "Duplicate",
 	"global.createdAt": "Created At",
 	"global.delete": "Delete",
 	"global.default": "Default",
@@ -60,6 +62,8 @@
 	"global.logout": "Logout",
 	"global.mount": "Mount",
 	"global.mode.validation": "Mode is required",
+	"global.moveDown": "Move Down",
+	"global.moveUp": "Move Up",
 	"global.name.validation": "Name is required",
 	"global.nameTitle": "Name",
 	"global.network": "Network",