From f277e488c29b80d803ddc8ea958187e6810887ef Mon Sep 17 00:00:00 2001 From: Ben Waples Date: Fri, 26 Jan 2024 13:29:04 -0800 Subject: [PATCH] shared help text styles --- .../HelpTexts/ADCSESC10a/General.tsx | 21 ++----------------- .../HelpTexts/ADCSESC10a/LinuxAbuse.tsx | 20 ++---------------- .../HelpTexts/ADCSESC10a/WindowsAbuse.tsx | 20 ++---------------- .../HelpTexts/ADCSESC9a/General.tsx | 21 ++----------------- .../HelpTexts/ADCSESC9a/LinuxAbuse.tsx | 20 ++---------------- .../HelpTexts/ADCSESC9a/WindowsAbuse.tsx | 20 ++---------------- .../HelpTexts/ADCSESC9b/General.tsx | 21 ++----------------- .../HelpTexts/ADCSESC9b/LinuxAbuse.tsx | 20 ++---------------- .../HelpTexts/ADCSESC9b/WindowsAbuse.tsx | 20 ++---------------- .../src/components/HelpTexts/utils.ts | 19 +++++++++++++++++ 10 files changed, 37 insertions(+), 165 deletions(-) diff --git a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC10a/General.tsx b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC10a/General.tsx index b00ca9b1b..02c61e356 100644 --- a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC10a/General.tsx +++ b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC10a/General.tsx @@ -15,29 +15,12 @@ // SPDX-License-Identifier: Apache-2.0 import { FC } from 'react'; -import { groupSpecialFormat } from '../utils'; +import { useHelpTextStyles, groupSpecialFormat } from '../utils'; import { EdgeInfoProps } from '../index'; import { Typography } from '@mui/material'; -import { makeStyles } from '@mui/styles'; - -const useStyles = makeStyles((theme) => ({ - containsCodeEl: { - '& code': { - backgroundColor: 'darkgrey', - padding: '2px .5ch', - fontWeight: 'normal', - fontSize: '.875em', - borderRadius: '3px', - display: 'inline', - - overflowWrap: 'break-word', - whiteSpace: 'pre-wrap', - }, - }, -})); const General: FC = ({ sourceName, sourceType, targetName }) => { - const classes = useStyles(); + const classes = useHelpTextStyles(); return ( {groupSpecialFormat(sourceType, sourceName)} has the privileges to perform the ADCS ESC10 Scenario A attack diff --git a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC10a/LinuxAbuse.tsx b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC10a/LinuxAbuse.tsx index e7987bc68..b86b3aa9d 100644 --- a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC10a/LinuxAbuse.tsx +++ b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC10a/LinuxAbuse.tsx @@ -16,26 +16,10 @@ import { FC } from 'react'; import { Box, Link, List, ListItem, Typography } from '@mui/material'; -import { makeStyles } from '@mui/styles'; - -const useStyles = makeStyles((theme) => ({ - containsCodeEl: { - '& code': { - backgroundColor: 'darkgrey', - padding: '2px .5ch', - fontWeight: 'normal', - fontSize: '.875em', - borderRadius: '3px', - display: 'inline', - - overflowWrap: 'break-word', - whiteSpace: 'pre-wrap', - }, - }, -})); +import { useHelpTextStyles } from '../utils'; const LinuxAbuse: FC = () => { - const classes = useStyles(); + const classes = useHelpTextStyles(); const step1 = ( <> diff --git a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC10a/WindowsAbuse.tsx b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC10a/WindowsAbuse.tsx index fc0652d1e..dd9909443 100644 --- a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC10a/WindowsAbuse.tsx +++ b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC10a/WindowsAbuse.tsx @@ -15,27 +15,11 @@ // SPDX-License-Identifier: Apache-2.0 import { FC } from 'react'; -import makeStyles from '@mui/styles/makeStyles'; import { Typography, Link, List, ListItem, Box } from '@mui/material'; - -const useStyles = makeStyles((theme) => ({ - containsCodeEl: { - '& code': { - backgroundColor: 'darkgrey', - padding: '2px .5ch', - fontWeight: 'normal', - fontSize: '.875em', - borderRadius: '3px', - display: 'inline', - - overflowWrap: 'break-word', - whiteSpace: 'pre-wrap', - }, - }, -})); +import { useHelpTextStyles } from '../utils'; const WindowsAbuse: FC = () => { - const classes = useStyles(); + const classes = useHelpTextStyles(); const step1 = ( <> diff --git a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9a/General.tsx b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9a/General.tsx index a53caf54b..6d1b25bb9 100644 --- a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9a/General.tsx +++ b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9a/General.tsx @@ -15,29 +15,12 @@ // SPDX-License-Identifier: Apache-2.0 import { FC } from 'react'; -import { groupSpecialFormat } from '../utils'; +import { useHelpTextStyles, groupSpecialFormat } from '../utils'; import { EdgeInfoProps } from '../index'; import { Typography } from '@mui/material'; -import { makeStyles } from '@mui/styles'; - -const useStyles = makeStyles((theme) => ({ - containsCodeEl: { - '& code': { - backgroundColor: 'darkgrey', - padding: '2px .5ch', - fontWeight: 'normal', - fontSize: '.875em', - borderRadius: '3px', - display: 'inline', - - overflowWrap: 'break-word', - whiteSpace: 'pre-wrap', - }, - }, -})); const General: FC = ({ sourceName, sourceType, targetName }) => { - const classes = useStyles(); + const classes = useHelpTextStyles(); return ( <> diff --git a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9a/LinuxAbuse.tsx b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9a/LinuxAbuse.tsx index dbea805e6..f990bed66 100644 --- a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9a/LinuxAbuse.tsx +++ b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9a/LinuxAbuse.tsx @@ -16,26 +16,10 @@ import { FC } from 'react'; import { Box, Link, List, ListItem, Typography } from '@mui/material'; -import { makeStyles } from '@mui/styles'; - -const useStyles = makeStyles((theme) => ({ - containsCodeEl: { - '& code': { - backgroundColor: 'darkgrey', - padding: '2px .5ch', - fontWeight: 'normal', - fontSize: '.875em', - borderRadius: '3px', - display: 'inline', - - overflowWrap: 'break-word', - whiteSpace: 'pre-wrap', - }, - }, -})); +import { useHelpTextStyles } from '../utils'; const LinuxAbuse: FC = () => { - const classes = useStyles(); + const classes = useHelpTextStyles(); const step1 = ( <> diff --git a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9a/WindowsAbuse.tsx b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9a/WindowsAbuse.tsx index 43bfac392..844173b1f 100644 --- a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9a/WindowsAbuse.tsx +++ b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9a/WindowsAbuse.tsx @@ -15,27 +15,11 @@ // SPDX-License-Identifier: Apache-2.0 import { FC } from 'react'; -import makeStyles from '@mui/styles/makeStyles'; import { Typography, Link, List, ListItem, Box } from '@mui/material'; - -const useStyles = makeStyles((theme) => ({ - containsCodeEl: { - '& code': { - backgroundColor: 'darkgrey', - padding: '2px .5ch', - fontWeight: 'normal', - fontSize: '.875em', - borderRadius: '3px', - display: 'inline', - - overflowWrap: 'break-word', - whiteSpace: 'pre-wrap', - }, - }, -})); +import { useHelpTextStyles } from '../utils'; const WindowsAbuse: FC = () => { - const classes = useStyles(); + const classes = useHelpTextStyles(); const step1 = ( <> diff --git a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9b/General.tsx b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9b/General.tsx index 131b29f7d..6ca89a668 100644 --- a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9b/General.tsx +++ b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9b/General.tsx @@ -15,29 +15,12 @@ // SPDX-License-Identifier: Apache-2.0 import { FC } from 'react'; -import { groupSpecialFormat } from '../utils'; +import { useHelpTextStyles, groupSpecialFormat } from '../utils'; import { EdgeInfoProps } from '../index'; import { Typography } from '@mui/material'; -import { makeStyles } from '@mui/styles'; - -const useStyles = makeStyles((theme) => ({ - containsCodeEl: { - '& code': { - backgroundColor: 'darkgrey', - padding: '2px .5ch', - fontWeight: 'normal', - fontSize: '.875em', - borderRadius: '3px', - display: 'inline', - - overflowWrap: 'break-word', - whiteSpace: 'pre-wrap', - }, - }, -})); const General: FC = ({ sourceName, sourceType, targetName }) => { - const classes = useStyles(); + const classes = useHelpTextStyles(); return ( <> diff --git a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9b/LinuxAbuse.tsx b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9b/LinuxAbuse.tsx index 16e51819f..fa5a0e84e 100644 --- a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9b/LinuxAbuse.tsx +++ b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9b/LinuxAbuse.tsx @@ -16,26 +16,10 @@ import { FC } from 'react'; import { Link, Typography } from '@mui/material'; -import { makeStyles } from '@mui/styles'; - -const useStyles = makeStyles((theme) => ({ - containsCodeEl: { - '& code': { - backgroundColor: 'darkgrey', - padding: '2px .5ch', - fontWeight: 'normal', - fontSize: '.875em', - borderRadius: '3px', - display: 'inline', - - overflowWrap: 'break-word', - whiteSpace: 'pre-wrap', - }, - }, -})); +import { useHelpTextStyles } from '../utils'; const LinuxAbuse: FC = () => { - const classes = useStyles(); + const classes = useHelpTextStyles(); const step1 = ( <> diff --git a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9b/WindowsAbuse.tsx b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9b/WindowsAbuse.tsx index 64e75ad6d..35305c6e9 100644 --- a/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9b/WindowsAbuse.tsx +++ b/packages/javascript/bh-shared-ui/src/components/HelpTexts/ADCSESC9b/WindowsAbuse.tsx @@ -15,27 +15,11 @@ // SPDX-License-Identifier: Apache-2.0 import { FC } from 'react'; -import makeStyles from '@mui/styles/makeStyles'; import { Typography, Link } from '@mui/material'; - -const useStyles = makeStyles((theme) => ({ - containsCodeEl: { - '& code': { - backgroundColor: 'darkgrey', - padding: '2px .5ch', - fontWeight: 'normal', - fontSize: '.875em', - borderRadius: '3px', - display: 'inline', - - overflowWrap: 'break-word', - whiteSpace: 'pre-wrap', - }, - }, -})); +import { useHelpTextStyles } from '../utils'; const WindowsAbuse: FC = () => { - const classes = useStyles(); + const classes = useHelpTextStyles(); const step1 = ( <> diff --git a/packages/javascript/bh-shared-ui/src/components/HelpTexts/utils.ts b/packages/javascript/bh-shared-ui/src/components/HelpTexts/utils.ts index 0ad6a85cb..7a6caf3ab 100644 --- a/packages/javascript/bh-shared-ui/src/components/HelpTexts/utils.ts +++ b/packages/javascript/bh-shared-ui/src/components/HelpTexts/utils.ts @@ -14,6 +14,8 @@ // // SPDX-License-Identifier: Apache-2.0 +import { makeStyles } from "@mui/styles"; + export const groupSpecialFormat = (sourceType: string | undefined, sourceName: string | undefined) => { if (!sourceType || !sourceName) return 'This entity has'; if (sourceType === 'Group') { @@ -41,3 +43,20 @@ export const typeFormat = (type: string | undefined): string => { return type.toLowerCase(); } }; + + +export const useHelpTextStyles = makeStyles((theme) => ({ + containsCodeEl: { + '& code': { + backgroundColor: 'darkgrey', + padding: '2px .5ch', + fontWeight: 'normal', + fontSize: '.875em', + borderRadius: '3px', + display: 'inline', + + overflowWrap: 'break-word', + whiteSpace: 'pre-wrap', + }, + }, +})); \ No newline at end of file