github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-09-28 13:55:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix compile error

Browse Source
This commit is contained in:
Leon
2022-01-20 13:53:51 +02:00
parent e117a100e4
commit f2ded08569
3 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/components/UI/Modals/ConfirmationModal.sass
View File

@@ -5,20 +5,20 @@
padding: 40px padding: 40px
border-bottom: 1px solid #252C47 border-bottom: 1px solid #252C47
border-top: 1px solid #252C4C border-top: 1px solid #252C4C
​
.confirmationHeader .confirmationHeader
display: flex display: flex
justify-content: space-between justify-content: space-between
align-items: center align-items: center
padding: 20px padding: 20px
​
.confirmationTitle .confirmationTitle
font-size: 20px font-size: 20px
​
img img
cursor: pointer cursor: pointer
height: 30px height: 30px
​
.confirmationActions .confirmationActions
padding: 20px padding: 20px
text-align: right text-align: right

10
ui/src/components/UI/Modals/ConfirmationModal.tsx
View File

@@ -5,7 +5,7 @@ import {observer} from 'mobx-react-lite';
import {Button} from "@material-ui/core"; import {Button} from "@material-ui/core";
import './ConfirmationModal.sass'; import './ConfirmationModal.sass';
import spinner from "../../assets/spinner.svg"; import spinner from "../../assets/spinner.svg";
​
interface ConfirmationModalProps { interface ConfirmationModalProps {
title?: string; title?: string;
content: any; content: any;
@@ -22,9 +22,9 @@ interface ConfirmationModalProps {
img?: ReactElement; img?: ReactElement;
isLoading?: boolean; isLoading?: boolean;
} }
​
const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, content, isOpen, onClose, onConfirm, confirmButtonText, closeButtonText, subContent, confirmDisabled = false, isWide, confirmButtonColor, titleColor, img, isLoading}) => { const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, content, isOpen, onClose, onConfirm, confirmButtonText, closeButtonText, subContent, confirmDisabled = false, isWide, confirmButtonColor, titleColor, img, isLoading}) => {
​
return ( return (
<CustomModal open={isOpen} onClose={onClose} disableBackdropClick={true} isWide={isWide}> <CustomModal open={isOpen} onClose={onClose} disableBackdropClick={true} isWide={isWide}>
<div className="confirmationHeader"> <div className="confirmationHeader">
@@ -42,7 +42,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, co
</div>} </div>}
</div> </div>
</div> </div>
​
<div className="confirmationActions"> <div className="confirmationActions">
<Button disabled={isLoading} style={{marginRight: 15}} variant="outlined" color="primary" size='large' onClick={onClose}>{closeButtonText ?? "CANCEL"}</Button> <Button disabled={isLoading} style={{marginRight: 15}} variant="outlined" color="primary" size='large' onClick={onClose}>{closeButtonText ?? "CANCEL"}</Button>
<Button disabled={confirmDisabled || isLoading} color='primary' variant='contained' style={confirmButtonColor ? {backgroundColor: confirmButtonColor} : {}} onClick={onConfirm} size='large' endIcon={isLoading && <img src={spinner} alt="spinner"/>}>{confirmButtonText ?? "YES"}</Button> <Button disabled={confirmDisabled || isLoading} color='primary' variant='contained' style={confirmButtonColor ? {backgroundColor: confirmButtonColor} : {}} onClick={onConfirm} size='large' endIcon={isLoading && <img src={spinner} alt="spinner"/>}>{confirmButtonText ?? "YES"}</Button>
@@ -50,5 +50,5 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, co
</CustomModal> </CustomModal>
) )
}); });
​
export default ConfirmationModal; export default ConfirmationModal;

14
ui/src/components/UI/Modals/CustomModal.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { makeStyles, withStyles, Modal, Backdrop } from '@material-ui/core'; import { makeStyles, withStyles, Modal, Backdrop } from '@material-ui/core';
​
const useStyles = makeStyles({ const useStyles = makeStyles({
modal: { modal: {
display: "flex", display: "flex",
@@ -25,18 +25,18 @@ const useStyles = makeStyles({
width: "50vw", width: "50vw",
maxWidth: 700, maxWidth: 700,
}, },
​
modalButton: { modalButton: {
margin: "0 auto" margin: "0 auto"
}, },
}); });
​
const MyBackdrop = withStyles({ const MyBackdrop = withStyles({
root: { root: {
backgroundColor: '#090b14e6' backgroundColor: '#090b14e6'
}, },
})(Backdrop); })(Backdrop);
​
export interface CustomModalProps { export interface CustomModalProps {
open: boolean; open: boolean;
children: React.ReactElement | React.ReactElement[]; children: React.ReactElement | React.ReactElement[];
@@ -46,15 +46,15 @@ export interface CustomModalProps {
isPadding?: boolean; isPadding?: boolean;
isWide? :boolean; isWide? :boolean;
} }
​
const CustomModal: React.FunctionComponent<CustomModalProps> = ({ open = false, onClose, disableBackdropClick = false, children, className, isPadding, isWide }) => { const CustomModal: React.FunctionComponent<CustomModalProps> = ({ open = false, onClose, disableBackdropClick = false, children, className, isPadding, isWide }) => {
const classes = useStyles({}); const classes = useStyles({});
​
return <Modal disableEnforceFocus open={open} onClose={onClose} disableBackdropClick={disableBackdropClick} className={`${classes.modal} ${className ? className : ''}`} BackdropComponent={MyBackdrop}> return <Modal disableEnforceFocus open={open} onClose={onClose} disableBackdropClick={disableBackdropClick} className={`${classes.modal} ${className ? className : ''}`} BackdropComponent={MyBackdrop}>
<div className={`${classes.modalContents} ${isPadding ? classes.paddingModal : ''} ${isWide ? classes.wideModal : ''}`} > <div className={`${classes.modalContents} ${isPadding ? classes.paddingModal : ''} ${isWide ? classes.wideModal : ''}`} >
{children} {children}
</div> </div>
</Modal> </Modal>
} }
​
export default CustomModal; export default CustomModal;