From 0c01b06f09d1b00eb2fc3dfe029bbe04d8475269 Mon Sep 17 00:00:00 2001 From: Md Kaif Ansari Date: Wed, 4 Dec 2024 13:58:08 +0000 Subject: [PATCH 1/6] chore: updated custom-tooltip style Signed-off-by: Md Kaif Ansari --- src/custom/CustomTooltip/customTooltip.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/custom/CustomTooltip/customTooltip.tsx b/src/custom/CustomTooltip/customTooltip.tsx index 7287c152e..0568d9ac6 100644 --- a/src/custom/CustomTooltip/customTooltip.tsx +++ b/src/custom/CustomTooltip/customTooltip.tsx @@ -21,7 +21,7 @@ function CustomTooltip({ fontSize, fontWeight = 400, variant = 'standard', - bgColor = '#333333', + bgColor = '#141414', ...props }: CustomTooltipProps): JSX.Element { return ( @@ -35,8 +35,7 @@ function CustomTooltip({ fontWeight: { fontWeight }, borderRadius: '0.5rem', padding: variant === 'standard' ? '0.9rem' : '0.5rem 0.75rem', - boxShadow: - 'rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px' + boxShadow: 'rgba(0, 0, 0, 0.6) 0px 4px 10px, rgba(0, 0, 0, 0.5) 0px 2px 4px' } }, popper: { From cf451176c56cda6a232cc5d825fa11ec3cb7393e Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 4 Dec 2024 19:52:05 +0530 Subject: [PATCH 2/6] fix(theme): theme of action menu Signed-off-by: Sudhanshu Dasgupta --- src/custom/CatalogDetail/ActionButton.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx index ee6cb48ce..76d14edd2 100644 --- a/src/custom/CatalogDetail/ActionButton.tsx +++ b/src/custom/CatalogDetail/ActionButton.tsx @@ -76,7 +76,7 @@ const ActionButtons: React.FC = ({ backgroundColor: 'transparent', border: `1px solid ${theme.palette.border.normal}`, gap: '10px', - color: charcoal[10] + color: theme.palette.text.default }} onClick={() => cleanedType === RESOURCE_TYPES.FILTERS @@ -84,7 +84,7 @@ const ActionButtons: React.FC = ({ : downloadYaml(details.pattern_file, details.name) } > - + Download @@ -104,7 +104,7 @@ const ActionButtons: React.FC = ({ ) : ( <> - + Clone )} From 509f3db795f47bdd1cf7c704094294ba4fd4a5a5 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Thu, 5 Dec 2024 16:41:39 +0530 Subject: [PATCH 3/6] fix(search): for users Signed-off-by: Sudhanshu Dasgupta --- src/custom/UserSearchField/index.ts | 3 ++- src/custom/UserSearchField/index.tsx | 3 --- 2 files changed, 2 insertions(+), 4 deletions(-) delete mode 100644 src/custom/UserSearchField/index.tsx diff --git a/src/custom/UserSearchField/index.ts b/src/custom/UserSearchField/index.ts index 7cf9a5ea5..29bbf2d52 100644 --- a/src/custom/UserSearchField/index.ts +++ b/src/custom/UserSearchField/index.ts @@ -1,3 +1,4 @@ +import UserShareSearch from './UserSearchField'; import UserSearchField from './UserSearchFieldInput'; -export { UserSearchField }; +export { UserSearchField, UserShareSearch }; diff --git a/src/custom/UserSearchField/index.tsx b/src/custom/UserSearchField/index.tsx deleted file mode 100644 index c02348088..000000000 --- a/src/custom/UserSearchField/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import UserSearchField from './UserSearchField'; - -export { UserSearchField }; From ad9f4ec2471bd231506483bb971853f8b0d7aa8e Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Wed, 11 Dec 2024 19:06:39 +0530 Subject: [PATCH 4/6] feat: visibility chip menu for the public private switch Signed-off-by: Amit Amrutiya --- .../VisibilityChipMenu/VisibilityChipMenu.tsx | 131 ++++++++++++++++++ src/custom/VisibilityChipMenu/index.ts | 3 + src/custom/index.tsx | 2 + 3 files changed, 136 insertions(+) create mode 100644 src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx create mode 100644 src/custom/VisibilityChipMenu/index.ts diff --git a/src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx b/src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx new file mode 100644 index 000000000..fddf901f6 --- /dev/null +++ b/src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx @@ -0,0 +1,131 @@ +import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; +import { Theme } from '@mui/material'; +import { MouseEvent, useState } from 'react'; +import { Button, Menu, MenuItem } from '../../base'; +import { iconSmall } from '../../constants/iconsSizes'; +import { styled } from '../../theme'; + +interface VisibilityChipMenuProps { + value: string; + onChange: (value: string) => void; + options: [string, React.ElementType][]; + enabled: boolean; +} + +const StyledMenu = styled(Menu)(({ theme }) => ({ + '& .MuiPaper-root': { + backgroundColor: theme.palette.mode === 'light' ? '#EBEFF1' : '#363636', + color: theme.palette.text.secondary, + border: `1px solid ${theme.palette.border.default}`, + borderRadius: '0.25rem', + padding: '0rem' + }, + '& .MuiMenuItem-root': { + fontSize: '.9rem', + padding: '0.5rem', + '&:hover': { + backgroundColor: theme.palette.mode === 'light' ? '#CCCCCC' : 'rgba(0, 179, 159, 0.25)' + } + }, + //selected + '& .Mui-selected': { + backgroundColor: theme.palette.mode === 'light' ? '#CCCCCC' : 'rgba(0, 179, 159, 0.25)' + }, + '& .MuiList-padding': { + padding: '0px' + } +})); + +const StyledButton = styled(Button)(() => ({ + padding: '0px', + width: '100%' +})); + +const StyledDiv = styled('div')(({ theme, enabled }: { theme?: Theme; enabled: boolean }) => ({ + paddingLeft: '0.5rem', + paddingRight: enabled ? '0' : '0.5rem', + borderRadius: '0.25rem', + border: '1px solid #666', + background: theme?.palette.mode === 'light' ? '#EBEFF1' : '#363636', + textTransform: 'uppercase', + color: theme?.palette.text.default, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: '4.5rem', + fontSize: '0.75rem', + fontFamily: theme?.typography.fontFamily +})); + +const StyledMenuItem = styled(MenuItem)(({ theme }) => ({ + textTransform: 'capitalize', + color: theme.palette.icon.default +})); + +const StyledIcon = styled('div')({ + marginRight: '0.5rem' +}); + +const VisibilityChipMenu: React.FC = ({ + value, + onChange, + options, + enabled +}) => { + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + const close = (e: MouseEvent) => { + e.stopPropagation(); + setAnchorEl(null); + }; + const handleOpen = (e: MouseEvent) => { + e.stopPropagation(); + if (!enabled) return; + setAnchorEl(e.currentTarget); + }; + const handleChange = (e: MouseEvent, value: string) => { + e.stopPropagation(); + onChange(value); + close(e); + }; + return ( + <> + + + {value} + {enabled && } + + + + + {options.map(([visibility, Icon], index) => ( + handleChange(e, visibility)} + > + + + + {visibility} + + ))} + + + ); +}; + +export default VisibilityChipMenu; diff --git a/src/custom/VisibilityChipMenu/index.ts b/src/custom/VisibilityChipMenu/index.ts new file mode 100644 index 000000000..6da896b00 --- /dev/null +++ b/src/custom/VisibilityChipMenu/index.ts @@ -0,0 +1,3 @@ +import VisibilityChipMenu from './VisibilityChipMenu'; + +export { VisibilityChipMenu }; diff --git a/src/custom/index.tsx b/src/custom/index.tsx index 70bef8d58..87668bbbf 100644 --- a/src/custom/index.tsx +++ b/src/custom/index.tsx @@ -47,6 +47,7 @@ import { TransferList } from './TransferModal/TransferList'; import { TransferListProps } from './TransferModal/TransferList/TransferList'; import UniversalFilter, { UniversalFilterProps } from './UniversalFilter'; import { UsersTable } from './UsersTable'; +import { VisibilityChipMenu } from './VisibilityChipMenu'; export { CatalogCard } from './CatalogCard'; export { CatalogFilterSidebar } from './CatalogFilterSection'; export type { FilterListType } from './CatalogFilterSection'; @@ -100,6 +101,7 @@ export { TransferList, UniversalFilter, UsersTable, + VisibilityChipMenu, updateVisibleColumns, useNotificationHandler, useWindowDimensions, From 91b84738493fc65e1a400175c1bfd2448394145b Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Tue, 10 Dec 2024 19:42:18 +0530 Subject: [PATCH 5/6] chore: use token and remove the hex code color Signed-off-by: Amit Amrutiya --- .../VisibilityChipMenu/VisibilityChipMenu.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx b/src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx index fddf901f6..5d0bef496 100644 --- a/src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx +++ b/src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx @@ -3,7 +3,7 @@ import { Theme } from '@mui/material'; import { MouseEvent, useState } from 'react'; import { Button, Menu, MenuItem } from '../../base'; import { iconSmall } from '../../constants/iconsSizes'; -import { styled } from '../../theme'; +import { ALICE_BLUE, CHINESE_SILVER, NOT_FOUND, styled } from '../../theme'; interface VisibilityChipMenuProps { value: string; @@ -14,7 +14,8 @@ interface VisibilityChipMenuProps { const StyledMenu = styled(Menu)(({ theme }) => ({ '& .MuiPaper-root': { - backgroundColor: theme.palette.mode === 'light' ? '#EBEFF1' : '#363636', + backgroundColor: + theme.palette.mode === 'light' ? ALICE_BLUE : theme.palette.background.constant?.table, color: theme.palette.text.secondary, border: `1px solid ${theme.palette.border.default}`, borderRadius: '0.25rem', @@ -24,12 +25,12 @@ const StyledMenu = styled(Menu)(({ theme }) => ({ fontSize: '.9rem', padding: '0.5rem', '&:hover': { - backgroundColor: theme.palette.mode === 'light' ? '#CCCCCC' : 'rgba(0, 179, 159, 0.25)' + backgroundColor: theme.palette.mode === 'light' ? CHINESE_SILVER : 'rgba(0, 179, 159, 0.25)' } }, //selected '& .Mui-selected': { - backgroundColor: theme.palette.mode === 'light' ? '#CCCCCC' : 'rgba(0, 179, 159, 0.25)' + backgroundColor: theme.palette.mode === 'light' ? CHINESE_SILVER : 'rgba(0, 179, 159, 0.25)' }, '& .MuiList-padding': { padding: '0px' @@ -45,8 +46,10 @@ const StyledDiv = styled('div')(({ theme, enabled }: { theme?: Theme; enabled: b paddingLeft: '0.5rem', paddingRight: enabled ? '0' : '0.5rem', borderRadius: '0.25rem', - border: '1px solid #666', - background: theme?.palette.mode === 'light' ? '#EBEFF1' : '#363636', + border: `1px solid ${NOT_FOUND}`, + background: + theme?.palette.mode === 'light' ? ALICE_BLUE : theme?.palette.background.constant?.table, + textTransform: 'uppercase', color: theme?.palette.text.default, display: 'flex', From dd6270e058fe03f97939da0190bbda6df47ac633 Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Fri, 13 Dec 2024 15:49:30 +0530 Subject: [PATCH 6/6] fix: build in sistent Signed-off-by: Amit Amrutiya --- src/constants/iconsSizes.ts | 5 +++++ src/custom/UserSearchField/UserSearchField.tsx | 2 ++ .../VisibilityChipMenu/VisibilityChipMenu.tsx | 13 +++++++------ 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/constants/iconsSizes.ts b/src/constants/iconsSizes.ts index d9a1dc9c1..bd09817f8 100644 --- a/src/constants/iconsSizes.ts +++ b/src/constants/iconsSizes.ts @@ -1,5 +1,10 @@ // icon styles, setting general height and width properties to solves scaling and consistency problems +export const iconXSmall = { + height: 16, + width: 16 +}; + export const iconSmall = { height: 20, width: 20 diff --git a/src/custom/UserSearchField/UserSearchField.tsx b/src/custom/UserSearchField/UserSearchField.tsx index c6e7feea8..0132ab9d8 100644 --- a/src/custom/UserSearchField/UserSearchField.tsx +++ b/src/custom/UserSearchField/UserSearchField.tsx @@ -136,6 +136,8 @@ const UserShareSearch: React.FC = ({ x} options={options} disableClearable diff --git a/src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx b/src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx index 5d0bef496..86492ff1c 100644 --- a/src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx +++ b/src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx @@ -2,7 +2,7 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; import { Theme } from '@mui/material'; import { MouseEvent, useState } from 'react'; import { Button, Menu, MenuItem } from '../../base'; -import { iconSmall } from '../../constants/iconsSizes'; +import { iconXSmall } from '../../constants/iconsSizes'; import { ALICE_BLUE, CHINESE_SILVER, NOT_FOUND, styled } from '../../theme'; interface VisibilityChipMenuProps { @@ -43,8 +43,9 @@ const StyledButton = styled(Button)(() => ({ })); const StyledDiv = styled('div')(({ theme, enabled }: { theme?: Theme; enabled: boolean }) => ({ - paddingLeft: '0.5rem', - paddingRight: enabled ? '0' : '0.5rem', + paddingLeft: '0.3rem', + height: '1.5rem', + paddingRight: enabled ? '0' : '0.3rem', borderRadius: '0.25rem', border: `1px solid ${NOT_FOUND}`, background: @@ -55,7 +56,7 @@ const StyledDiv = styled('div')(({ theme, enabled }: { theme?: Theme; enabled: b display: 'flex', justifyContent: 'center', alignItems: 'center', - width: '4.5rem', + width: '3.8rem', fontSize: '0.75rem', fontFamily: theme?.typography.fontFamily })); @@ -99,8 +100,8 @@ const VisibilityChipMenu: React.FC = ({ data-testid={`design-visibility-${value.toLowerCase()}`} > - {value} - {enabled && } + {value} + {enabled && }