ui tweaks, header size changes, icon fixing

its-a-feature · Dec 31, 2024 · 191191e · 191191e
1 parent 8d63fad
commit 191191e
Show file tree

Hide file tree

Showing 23 changed files with 242 additions and 63 deletions.
diff --git a/MythicReactUI/CHANGELOG.MD b/MythicReactUI/CHANGELOG.MD
@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.73] - 2024-12-31
+
+### Changed
+
+- Fixed an issue with the expanded callback page failing to render
+- Updated the page header bars to be smaller
+
 ## [0.2.72] - 2024-12-31
 
 ### Changed

diff --git a/MythicReactUI/src/components/MythicComponents/MythicNestedMenus.js b/MythicReactUI/src/components/MythicComponents/MythicNestedMenus.js
@@ -29,8 +29,6 @@ export const Dropdown = React.forwardRef(
         if (ref) {
             anchorRef = ref;
         }
-        console.log(anchorReference, absoluteY, absoluteX)
-        console.log(anchorReference === "anchorEl" ? undefined : {top: absoluteY, left: absoluteX})
         const handleClose = (event) => {
             event.stopPropagation();
 

diff --git a/MythicReactUI/src/components/pages/BrowserScripts/BrowserScriptsTable.js b/MythicReactUI/src/components/pages/BrowserScripts/BrowserScriptsTable.js
@@ -9,7 +9,7 @@ import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import { BrowserScriptsTableRow } from './BrowserScriptsTableRow';
 import {useTheme} from '@mui/material/styles';
-import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
 import Button from '@mui/material/Button';
 import { MythicDialog } from '../../MythicComponents/MythicDialog';
 import {EditScriptDialog} from './EditScriptDialog';
@@ -22,10 +22,13 @@ export function BrowserScriptsTable(props){
         <React.Fragment>
             <Paper elevation={5} style={{backgroundColor: theme.pageHeader.main, color: theme.pageHeaderText.main,
                 marginBottom: "5px", marginLeft: "5px", marginRight: "5px"}} variant={"elevation"}>
-                <Typography variant="h3" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
+                <Typography variant="h5" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
                     Browser Scripts
                 </Typography>
-                <Button size="small" onClick={() => setOpenNewScriptDialog(true)} style={{float: "right", marginTop: "10px", marginRight: "30px"}} startIcon={<AddCircleOutlineOutlinedIcon/>} color="primary" variant="contained">New Script</Button>
+                <Button size="small" onClick={() => setOpenNewScriptDialog(true)} style={{float: "right", marginRight: "30px", color: "white"}}
+                        startIcon={<AddCircleIcon color={"success"} style={{backgroundColor: "white", borderRadius: "10px"}}/>} >
+                    New Script
+                </Button>
                 {openNewScriptDialog ? (   
                     <MythicDialog fullWidth={true} maxWidth="xl" open={openNewScriptDialog}
                         onClose={()=>{setOpenNewScriptDialog(false);}} 

diff --git a/MythicReactUI/src/components/pages/ConsumingServices/ConsumingServicesTable.js b/MythicReactUI/src/components/pages/ConsumingServices/ConsumingServicesTable.js
@@ -164,17 +164,17 @@ export function ConsumingServicesTable({services}) {
                 marginBottom: "5px",
                 marginRight: "5px"
             }} variant={"elevation"}>
-                <Typography variant="h3" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
+                <Typography variant="h5" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
                     Containers Consuming Events
                 </Typography>
                 {showDeleted ? (
-                    <MythicStyledTooltip title={"Hide Deleted Services"} style={{float: "right"}}>
-                        <IconButton size="small" style={{float: "right", marginTop: "5px"}} variant="contained" onClick={() => setShowDeleted(!showDeleted)}><VisibilityIcon /></IconButton>
+                    <MythicStyledTooltip title={"Hide Deleted Services"} tooltipStyle={{float: "right"}}>
+                        <IconButton size="small" variant="contained" onClick={() => setShowDeleted(!showDeleted)}><VisibilityIcon /></IconButton>
                     </MythicStyledTooltip>
 
                 ) : (
-                    <MythicStyledTooltip title={"Show Deleted Services"} style={{float: "right"}}>
-                        <IconButton size="small" style={{float: "right",  marginTop: "5px"}} variant="contained" onClick={() => setShowDeleted(!showDeleted)} ><VisibilityOffIcon /></IconButton>
+                    <MythicStyledTooltip title={"Show Deleted Services"} tooltipStyle={{float: "right"}}>
+                        <IconButton size="small" variant="contained" onClick={() => setShowDeleted(!showDeleted)} ><VisibilityOffIcon /></IconButton>
                     </MythicStyledTooltip>
                 )}
             </Paper>

diff --git a/MythicReactUI/src/components/pages/ExpandedCallback/ExpandedCallback.js b/MythicReactUI/src/components/pages/ExpandedCallback/ExpandedCallback.js
@@ -119,7 +119,10 @@ export function ExpandedCallback(props){
                             <ExpandedCallbackSideDetails me={props.me} callback={callback} />
                         </div>
                         <div className="bg-gray-light" style={{display: "inline-flex"}}>
-                            <CallbacksTabsTaskingPanel me={props.me} tabInfo={tabInfo} callbacktokens={callback.callbacktokens}/>
+                            <CallbacksTabsTaskingPanel me={props.me}
+                                                       tabInfo={tabInfo}
+                                                       collapseTaskRequest={() => {}}
+                            />
                         </div>
                     </Split>
                 ) : (

diff --git a/MythicReactUI/src/components/pages/ExpandedCallback/ExpandedCallbackSideDetails.js b/MythicReactUI/src/components/pages/ExpandedCallback/ExpandedCallbackSideDetails.js
@@ -28,7 +28,7 @@ export function ExpandedCallbackSideDetails(props){
         <div style={{ width: "100%", height: "100%", overflowY: "scroll" }}>
             <Paper elevation={5} style={{backgroundColor: theme.pageHeader.main, color: theme.pageHeaderText.main, marginBottom: "5px"}}
                    variant={"elevation"}>
-                <Typography variant="h3" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
+                <Typography variant="h5" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
                     Callback {props.callback.display_id}
                 </Typography>
             </Paper>

diff --git a/MythicReactUI/src/components/pages/MITRE_ATTACK/MitreGrid.js b/MythicReactUI/src/components/pages/MITRE_ATTACK/MitreGrid.js
@@ -26,7 +26,7 @@ export function MitreGrid({entries, onGetCommands, onGetTasks, onGetCommandsFilt
         <div style={{display: "flex", flexDirection: "column", width: "100%", height: "100%"}}>
             <Paper elevation={5}  style={{backgroundColor: theme.pageHeader.main, color: theme.pageHeaderText.main,
                 marginBottom: "5px", marginRight: "5px"}} variant={"elevation"}>
-                <Typography variant="h3" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
+                <Typography variant="h5" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
                     {"MITRE ATT&CK Mappings"}
                 </Typography>
                 <PoperDropdown onGetCommands={onGetCommands} 
@@ -56,7 +56,6 @@ function PoperDropdown({onGetCommands, onGetTasks, onGetCommandsFiltered, onGetT
     const [openLicense, setOpenLicense] = React.useState(false);
     const [openFilterTasks, setOpenFilterTasks] = React.useState(false);
     const [openFilterCommands, setOpenFilterCommands] = React.useState(false);
-    const theme = useTheme();
     const dropDownOptions = [
         {
             name: "Fetch All Commands Mapped to MITRE",
@@ -242,8 +241,8 @@ function PoperDropdown({onGetCommands, onGetTasks, onGetCommandsFiltered, onGetT
     }
     return (
         <React.Fragment>
-            <ButtonGroup variant="contained" ref={dropdownAnchorRef} aria-label="split button" style={{marginRight: "10px", marginTop:"10px", float: "right"}} color="primary">
-                <Button size="small" color="primary" aria-controls={dropdownOpen ? 'split-button-menu' : undefined}
+            <ButtonGroup variant="text" ref={dropdownAnchorRef} aria-label="split button" style={{marginRight: "10px", float: "right", color: "white"}} >
+                <Button size="small" style={{color: "white"}} aria-controls={dropdownOpen ? 'split-button-menu' : undefined}
                     aria-expanded={dropdownOpen ? 'true' : undefined}
                     aria-haspopup="menu"
                     onClick={() => setDropdownOpen(!dropdownOpen)}>

diff --git a/MythicReactUI/src/components/pages/Operations/CommandBlockListTable.js b/MythicReactUI/src/components/pages/Operations/CommandBlockListTable.js
@@ -8,7 +8,7 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
 import { MythicDialog } from '../../MythicComponents/MythicDialog';
 import {useTheme} from '@mui/material/styles';
 import {EditBlockListDialog} from './EditBlockListDialog';
@@ -174,14 +174,14 @@ export function CommandBlockListTable(props){
         <React.Fragment>
         <Paper elevation={5} style={{backgroundColor: theme.pageHeader.main, color: theme.pageHeaderText.main,
             marginBottom: "5px", marginLeft: "5px", marginRight: "5px"}} variant={"elevation"}>
-            <Typography variant="h3" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
+            <Typography variant="h5" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
                 Command Block Lists
             </Typography>
             <Button size="small"
                     onClick={()=>{setOpenNewDialog(true);}}
-                    style={{marginRight: "10px", float: "right", marginTop: "10px"}}
-                    startIcon={<AddCircleOutlineOutlinedIcon color="success"/>}
-                    variant="contained">New Block List</Button>
+                    style={{marginRight: "10px", float: "right", color: "white"}}
+                    startIcon={<AddCircleIcon color="success" style={{backgroundColor: "white", borderRadius: "10px"}}/>}
+                    >New Block List</Button>
             {openNew &&
                 <MythicDialog open={openNew} fullWidth={true} maxWidth="lg"
                     onClose={()=>{setOpenNewDialog(false);}} 

diff --git a/MythicReactUI/src/components/pages/Operations/OperationTable.js b/MythicReactUI/src/components/pages/Operations/OperationTable.js
@@ -9,7 +9,7 @@ import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 import { OperationTableRow } from './OperationTableRow';
 import Typography from '@mui/material/Typography';
-import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
 import { MythicDialog } from '../../MythicComponents/MythicDialog';
 import {useTheme} from '@mui/material/styles';
 import {SettingsOperatorDialog} from '../Settings/SettingsOperatorDialog';
@@ -146,20 +146,20 @@ export function OperationTable(props){
         <React.Fragment>
         <Paper elevation={5} style={{backgroundColor: theme.pageHeader.main, color: theme.pageHeaderText.main,
             marginBottom: "5px", marginLeft: "5px", marginRight: "5px"}} variant={"elevation"}>
-            <Typography variant="h3" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
+            <Typography variant="h5" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
                 Operations
             </Typography>
             {showDeleted ? (
                 <MythicStyledTooltip title={"Hide Deleted Operations"} tooltipStyle={{float: "right"}}>
-                    <IconButton size="small" style={{float: "right", marginTop: "5px", marginRight: "10px"}}
+                    <IconButton size="small" style={{float: "right", marginRight: "10px"}}
                                 variant="contained" onClick={() => setShowDeleted(!showDeleted)}>
                         <VisibilityIcon />
                     </IconButton>
                 </MythicStyledTooltip>
 
               ) : (
                 <MythicStyledTooltip title={"Show Deleted Operations"} tooltipStyle={{float: "right"}}>
-                  <IconButton size="small" style={{float: "right",  marginTop: "5px", marginRight: "10px"}}
+                  <IconButton size="small" style={{float: "right",  marginRight: "10px"}}
                               variant="contained" onClick={() => setShowDeleted(!showDeleted)} >
                       <VisibilityOffIcon />
                   </IconButton>
@@ -168,12 +168,16 @@ export function OperationTable(props){
             <MythicStyledTooltip title={"Create new operator"} tooltipStyle={{float: "right"}}>
                 <IconButton size="small"
                             onClick={()=>{setOpenNewOperatorDialog(true);}}
-                            style={{marginRight: "10px", float: "right", marginTop: "5px"}}
+                            style={{marginRight: "10px", float: "right"}}
                             variant="contained">
                     <PersonAddIcon />
                 </IconButton>
             </MythicStyledTooltip>
-            <Button size="small" onClick={() => {setOpenNewOperationDialog(true);}} style={{marginRight: "20px", float: "right", marginTop: "10px"}} startIcon={<AddCircleOutlineOutlinedIcon color="success"/>}  variant="contained">New Operation</Button>
+            <Button size="small" onClick={() => {setOpenNewOperationDialog(true);}}
+                    style={{marginRight: "20px", float: "right", color: "white"}}
+                    startIcon={<AddCircleIcon color="success" style={{backgroundColor: "white", borderRadius: "10px"}}/>} >
+                New Operation
+            </Button>
 
             {openNewOperator &&
                 <MythicDialog open={openNewOperator} 

diff --git a/MythicReactUI/src/components/pages/PayloadTypesC2Profiles/PayloadTypesC2Profiles.js b/MythicReactUI/src/components/pages/PayloadTypesC2Profiles/PayloadTypesC2Profiles.js
@@ -141,17 +141,17 @@ export function PayloadTypesC2Profiles({me}){
         <div style={{display: "flex", flexDirection: "column", height: "100%"}}>
             <Paper elevation={5} style={{backgroundColor: theme.pageHeader.main, color: theme.pageHeaderText.main,marginBottom: "5px",
                 marginRight: "5px"}} variant={"elevation"}>
-                <Typography variant="h3" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
+                <Typography variant="h5" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
                     Payload / C2 Services
                 </Typography>
                 {showDeleted ? (
                     <MythicStyledTooltip title={"Hide Deleted Services"} tooltipStyle={{float: "right"}}>
-                        <IconButton size="small" style={{float: "right", marginTop: "5px"}} variant="contained" onClick={() => setShowDeleted(!showDeleted)}><VisibilityIcon /></IconButton>
+                        <IconButton size="small" style={{float: "right"}} variant="contained" onClick={() => setShowDeleted(!showDeleted)}><VisibilityIcon /></IconButton>
                     </MythicStyledTooltip>
 
                 ) : (
                     <MythicStyledTooltip title={"Show Deleted Services"} tooltipStyle={{float: "right"}}>
-                        <IconButton size="small" style={{float: "right",  marginTop: "5px"}} variant="contained" onClick={() => setShowDeleted(!showDeleted)} ><VisibilityOffIcon /></IconButton>
+                        <IconButton size="small" style={{float: "right"}} variant="contained" onClick={() => setShowDeleted(!showDeleted)} ><VisibilityOffIcon /></IconButton>
                     </MythicStyledTooltip>
                 )}
             </Paper>

diff --git a/MythicReactUI/src/components/pages/Payloads/PayloadsTable.js b/MythicReactUI/src/components/pages/Payloads/PayloadsTable.js
@@ -76,11 +76,11 @@ export function PayloadsTable({payload, onDeletePayload, onUpdateCallbackAlert,
         <div style={{display: "flex", flexDirection: "column", height: "100%"}}>
             <Paper elevation={5} style={{backgroundColor: theme.pageHeader.main, color: theme.pageHeaderText.main,marginBottom: "5px",
                 marginRight: "5px"}} variant={"elevation"}>
-                <Typography variant="h3" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
+                <Typography variant="h5" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
                     Payloads
                 </Typography>
-                <ButtonGroup variant="contained" ref={dropdownAnchorRef} aria-label="split button" style={{float: "right", marginRight: "10px", marginTop:"10px"}} color="primary">
-                    <Button size="small" color="primary" aria-controls={dropdownOpen ? 'split-button-menu' : undefined}
+                <ButtonGroup variant="text" ref={dropdownAnchorRef} aria-label="split button" style={{float: "right", marginRight: "10px", color: "white"}}>
+                    <Button size="small" style={{color: "white"}}  aria-controls={dropdownOpen ? 'split-button-menu' : undefined}
                         aria-expanded={dropdownOpen ? 'true' : undefined}
                         aria-haspopup="menu"
                         onClick={() => setDropdownOpen(!dropdownOpen)}>

diff --git a/MythicReactUI/src/components/pages/Payloads/PayloadsTableRow.js b/MythicReactUI/src/components/pages/Payloads/PayloadsTableRow.js
@@ -46,6 +46,7 @@ import IosShareIcon from '@mui/icons-material/IosShare';
 import {TagsDisplay, ViewEditTags} from "../../MythicComponents/MythicTag";
 import {MythicAgentSVGIcon} from "../../MythicComponents/MythicAgentSVGIcon";
 import SmartToyTwoToneIcon from '@mui/icons-material/SmartToyTwoTone';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 
 const rebuildPayloadMutation = gql`
 mutation triggerRebuildMutation($uuid: String!) {
@@ -220,7 +221,9 @@ export function PayloadsTableRow(props){
 
                 </MythicStyledTableCell>
                 <MythicStyledTableCell>
-                    <Button ref={dropdownAnchorRef} size="small" onClick={()=>{setOpenUpdateDialog(true);}} color="primary" variant="contained">Actions</Button>
+                    <Button ref={dropdownAnchorRef} size="small" onClick={()=>{setOpenUpdateDialog(true);}} color="primary" variant="contained">
+                        Actions <ArrowDropDownIcon />
+                    </Button>
                 <Popper open={openUpdate} anchorEl={dropdownAnchorRef.current} role={undefined} transition disablePortal style={{zIndex: 4}}>
                   {({ TransitionProps, placement }) => (
                     <Grow

diff --git a/MythicReactUI/src/components/pages/Reporting/Reporting.js b/MythicReactUI/src/components/pages/Reporting/Reporting.js
@@ -11,7 +11,7 @@ export function Reporting() {
   <div style={{height: "100%", display: "flex", flexDirection: "column"}}>
     <Paper elevation={5} style={{backgroundColor: theme.pageHeader.main, color: theme.pageHeaderText.main,
       marginBottom: "5px",marginRight: "5px"}} variant={"elevation"}>
-      <Typography variant="h3" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
+      <Typography variant="h5" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
           Mythic Report Generation
       </Typography>
     </Paper>