github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-09-26 04:54:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Leon
2022-01-31 20:15:31 +02:00
parent 1a7e4a90c9
commit ba49f7c1d5
4 changed files with 52 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
ui/src/components/Modals/AddUserModal/AddUserModal.sass
View File

@@ -1,13 +1,13 @@
@import '../../../variables.module'
@mixin generate-icon
display: block
text-indent: -9999px
width: 26px
height: 26px
background-repeat: no-repeat
background-size: 26px
margin-right: 10px
display: block;
text-indent: -9999px;
width: 17px;
height: 17px;
background-repeat: no-repeat;
background-size: 19px;
background-size: cover;
.invite-link
&-row
@@ -24,8 +24,10 @@
&-field
width: 80%
max-width: 435px
.generate-link-button
&.MuiButtonBase-root
padding: 6.5px 13px
&:disabled
background: #BCC6DD;
.generate-link-button__icon
@@ -55,7 +57,14 @@
.search-workspace
width: 186px
.u-margin-left
margin-left : 20px
.u-input-padding
& .MuiInputLabel-outlined.MuiInputLabel-marginDense
transform: translate(14px, 8px) scale(1);
& .MuiInputLabel-outlined.MuiInputLabel-shrink
transform: translate(14px, -6px) scale(0.75);
font-size: 12px;
&.MuiOutlinedInput-input, &.MuiSelect-outlined,
padding-top: 5.5px
padding-bottom: 5.5px
font-size: 12px;

44
ui/src/components/Modals/AddUserModal/AddUserModal.tsx
View File

@@ -96,7 +96,6 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
const updateUser = async() =>{
try {
const res = await api.updateUser(userDataModel)
onClose()
toast.success("User has been modified")
} catch (error) {
toast.error("Error accured modifing user")
@@ -173,27 +172,11 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
const handleCopyinviteLink = (e) => {navigator.clipboard.writeText(invite.link)}
const addUsermodalCustomActions = <>
{showGenerateButton() && <Button
className={classes.button + " generate-link-button"} size={"small"}
onClick={!isEditMode ? generateLink : inviteExistingUser}
disabled={disable}
endIcon={isLoading && <img src={spinner} alt="spinner"/>}>
<span className='generate-link-button__icon'></span>
{"Generate Invite Link"}
</Button>}
{
isEditMode && <Button style={{height: '100%'}} disabled={disable} className={classes.button + " u-margin-left"} size={"small"} onClick={updateUser}>
Save
</Button>
}
<div className="invite-link-row">
{isShowInviteLink() && <FormControl variant="outlined" size={"small"} className='invite-link-field'>
<div className={isShowInviteLink() ? "invite-link-row" : ""}>
{isShowInviteLink() && <FormControl variant="outlined" size={"small"} className='invite-link-field'>
<InputLabel htmlFor="outlined-adornment-password">Invite link</InputLabel>
<OutlinedInput
type={'text'}
value={invite.link}
onChange={handleChange('password')}
<OutlinedInput type={'text'} value={invite.link} onChange={handleChange('password')} classes={{input: "u-input-padding"}}
endAdornment={
<InputAdornment position="end">
<IconButton aria-label="cpoy invite link" onClick={handleCopyinviteLink} edge="end">
@@ -202,9 +185,22 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
</InputAdornment>
} label="Invite link"/>
</FormControl>}
{!isEditMode && isShowInviteLink() && <Button style={{height: '100%'}} className={classes.button + " u-margin-left"} size={"small"} onClick={onClose}>
{showGenerateButton() && <Button
className={classes.button + " generate-link-button"} size={"small"}
onClick={!isEditMode ? generateLink : inviteExistingUser}
disabled={disable}
endIcon={isLoading && <img src={spinner} alt="spinner"/>}
startIcon={<span className='generate-link-button__icon'></span>}>
{"Generate Invite Link"}
</Button>}
{!isEditMode && isShowInviteLink() && <Button style={{height: '100%',marginLeft:'20px'}} className={classes.button} size={"small"} onClick={onClose}>
Done
</Button>}
</Button>}
{isEditMode && <Button style={{height: '100%', marginLeft:'20px'}} disabled={disable} className={classes.button} size={"small"} onClick={updateUser}>
Save
</Button>
}
</div>
@@ -226,9 +222,9 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
render={({ field }) => }
/> */}
<FormControl size='small' variant="outlined" className='user__role'>
<FormControl size='small' variant="outlined" className='user__role u-input-padding'>
<InputLabel>User Role</InputLabel>
<Select value={userDataModel.role ?? ""} onChange={userRoleChange} classes={{ root : 'my-class-name' }} >
<Select value={userDataModel.role ?? ""} onChange={userRoleChange} classes={{ select : 'u-input-padding' }} >
<MenuItem value="0">
<em>None</em>
</MenuItem>

25
ui/src/components/assets/copy-enabled.svg
View File

@@ -1,17 +1,10 @@
<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2252_4609)">
<path d="M4.00005 3.22263V2.125C4.00005 1.82663 4.11857 1.54048 4.32955 1.3295C4.54053 1.11853 4.82668 1 5.12505 1H14.875C15.1734 1 15.4596 1.11853 15.6705 1.3295C15.8815 1.54048 16 1.82663 16 2.125V11.875C16 12.1734 15.8815 12.4595 15.6705 12.6705C15.4596 12.8815 15.1734 13 14.875 13H13.7564" fill="#BCCEFD"/>
<path d="M4.00005 3.22263V2.125C4.00005 1.82663 4.11857 1.54048 4.32955 1.3295C4.54053 1.11853 4.82668 1 5.12505 1H14.875C15.1734 1 15.4596 1.11853 15.6705 1.3295C15.8815 1.54048 16 1.82663 16 2.125V11.875C16 12.1734 15.8815 12.4595 15.6705 12.6705C15.4596 12.8815 15.1734 13 14.875 13H13.7564" stroke="#BCCEFD"/>
<path d="M3.00005 4.22263V3.125C3.00005 2.82663 3.11857 2.54048 3.32955 2.3295C3.54053 2.11853 3.82668 2 4.12505 2H13.875C14.1734 2 14.4596 2.11853 14.6705 2.3295C14.8815 2.54048 15 2.82663 15 3.125V12.875C15 13.1734 14.8815 13.4595 14.6705 13.6705C14.4596 13.8815 14.1734 14 13.875 14H12.7564" fill="white"/>
<path d="M12.3958 4.0415H2.47917C1.89237 4.0415 1.41667 4.5172 1.41667 5.104V15.0207C1.41667 15.6075 1.89237 16.0832 2.47917 16.0832H12.3958C12.9826 16.0832 13.4583 15.6075 13.4583 15.0207V5.104C13.4583 4.5172 12.9826 4.0415 12.3958 4.0415Z" fill="#BCCEFD" stroke="#BCCEFD" stroke-linejoin="round"/>
<path d="M6.53084 8.68467L8.40509 6.73322C8.91934 6.21932 9.76403 6.2303 10.2921 6.75872C10.8205 7.28643 10.8318 8.13147 10.3176 8.64572L9.64113 9.36219" stroke="#205CF5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.76922 10.6812C4.58859 10.8618 4.21495 11.223 4.21495 11.223C3.7007 11.7366 3.68653 12.6532 4.21495 13.1816C4.74266 13.7093 5.5877 13.7206 6.10195 13.2064L7.93086 11.546" stroke="#205CF5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.60982 10.5325C6.37468 10.2987 6.23246 9.98746 6.20961 9.65665C6.19597 9.47111 6.22237 9.28479 6.28702 9.11034C6.35167 8.93589 6.45306 8.77736 6.58431 8.64551" stroke="#205CF5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.90572 9.65918C8.43343 10.1872 8.44511 11.0323 7.93086 11.5462" stroke="#205CF5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_2252_4609">
<rect width="17" height="17" fill="white" transform="translate(0 0.5)"/>
</clipPath>
</defs>
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 3.22263V2.125C4 1.82663 4.11853 1.54048 4.3295 1.3295C4.54048 1.11853 4.82663 1 5.125 1H14.875C15.1734 1 15.4595 1.11853 15.6705 1.3295C15.8815 1.54048 16 1.82663 16 2.125V11.875C16 12.1734 15.8815 12.4595 15.6705 12.6705C15.4595 12.8815 15.1734 13 14.875 13H13.7564" fill="#BCCEFD"/>
<path d="M4 3.22263V2.125C4 1.82663 4.11853 1.54048 4.3295 1.3295C4.54048 1.11853 4.82663 1 5.125 1H14.875C15.1734 1 15.4595 1.11853 15.6705 1.3295C15.8815 1.54048 16 1.82663 16 2.125V11.875C16 12.1734 15.8815 12.4595 15.6705 12.6705C15.4595 12.8815 15.1734 13 14.875 13H13.7564" stroke="#BCCEFD"/>
<path d="M3 4.22263V3.125C3 2.82663 3.11853 2.54048 3.3295 2.3295C3.54048 2.11853 3.82663 2 4.125 2H13.875C14.1734 2 14.4595 2.11853 14.6705 2.3295C14.8815 2.54048 15 2.82663 15 3.125V12.875C15 13.1734 14.8815 13.4595 14.6705 13.6705C14.4595 13.8815 14.1734 14 13.875 14H12.7564" fill="white"/>
<path d="M12.3958 4.0415H2.47913C1.89232 4.0415 1.41663 4.5172 1.41663 5.104V15.0207C1.41663 15.6075 1.89232 16.0832 2.47913 16.0832H12.3958C12.9826 16.0832 13.4583 15.6075 13.4583 15.0207V5.104C13.4583 4.5172 12.9826 4.0415 12.3958 4.0415Z" fill="#BCCEFD" stroke="#BCCEFD" stroke-linejoin="round"/>
<path d="M6.53076 8.68467L8.40501 6.73322C8.91926 6.21932 9.76395 6.2303 10.292 6.75872C10.8204 7.28643 10.8318 8.13147 10.3175 8.64572L9.64105 9.36219" stroke="#205CF5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.76914 10.6812C4.58852 10.8618 4.21487 11.223 4.21487 11.223C3.70062 11.7366 3.68645 12.6532 4.21487 13.1816C4.74258 13.7093 5.58762 13.7206 6.10187 13.2064L7.93079 11.546" stroke="#205CF5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.60975 10.5325C6.37462 10.2987 6.2324 9.98746 6.20955 9.65665C6.19591 9.47111 6.22231 9.28479 6.28696 9.11034C6.35161 8.93589 6.453 8.77736 6.58425 8.64551" stroke="#205CF5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.90564 9.65918C8.43335 10.1872 8.44504 11.0323 7.93079 11.5462" stroke="#205CF5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

3
ui/src/helpers/commonStyle.ts
View File

@@ -13,6 +13,9 @@ export const useCommonStyles = makeStyles(() => ({
"&:hover": {
backgroundColor: "#205cf5",
},
"&:disabled":{
backgroundColor: "rgba(0, 0, 0, 0.26)"
}
},
outlinedButton: {
backgroundColor: "transparent",