diff --git a/src/base/Skeleton/Skeleton.tsx b/src/base/Skeleton/Skeleton.tsx new file mode 100644 index 000000000..da7150074 --- /dev/null +++ b/src/base/Skeleton/Skeleton.tsx @@ -0,0 +1,7 @@ +import { Skeleton as MuiSkeleton, type SkeletonProps as MuiSkeletonProps } from '@mui/material'; + +export function Skeleton(props: MuiSkeletonProps): JSX.Element { + return ; +} + +export default Skeleton; diff --git a/src/base/Skeleton/index.tsx b/src/base/Skeleton/index.tsx new file mode 100644 index 000000000..190aa18c9 --- /dev/null +++ b/src/base/Skeleton/index.tsx @@ -0,0 +1,5 @@ +import { SkeletonProps } from '@mui/material'; +import Skeleton from './Skeleton'; + +export { Skeleton }; +export type { SkeletonProps }; diff --git a/src/base/index.tsx b/src/base/index.tsx index 0f7d8850f..e2e44121f 100644 --- a/src/base/index.tsx +++ b/src/base/index.tsx @@ -55,6 +55,7 @@ export * from './Paper'; export * from './Popper'; export * from './RadioGroup'; export * from './Select'; +export * from './Skeleton'; export * from './Slide'; export * from './Stack'; export * from './Switch'; diff --git a/src/custom/CatalogCard/CatalogCard.tsx b/src/custom/CatalogCard/CatalogCard.tsx index 16622404a..a038e925f 100644 --- a/src/custom/CatalogCard/CatalogCard.tsx +++ b/src/custom/CatalogCard/CatalogCard.tsx @@ -33,7 +33,6 @@ type CatalogCardProps = { // eslint-disable-next-line @typescript-eslint/no-explicit-any pattern: any; patternType: string; - cardLink: string; cardHeight: string; cardWidth: string; cardStyles: React.CSSProperties; @@ -64,7 +63,6 @@ const CatalogCard: React.FC = ({ cardHeight, cardWidth, cardStyles, - cardLink, onCardClick }) => { const outerStyles = { @@ -73,49 +71,47 @@ const CatalogCard: React.FC = ({ ...cardStyles }; return ( - - - - - {patternType} - - - {pattern.name} - - - - - - - - - {pattern.download_count} - - - - {pattern.clone_count} - - - - {pattern.view_count} - - - - {pattern.deployment_count} - - - - {pattern.share_count} - - - - - + + + + {patternType} + + + {pattern.name} + + + + + + + + + {pattern.download_count} + + + + {pattern.clone_count} + + + + {pattern.view_count} + + + + {pattern.deployment_count} + + + + {pattern.share_count} + + + + ); }; diff --git a/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx b/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx index d020d3412..1fd35bd57 100644 --- a/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx +++ b/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx @@ -4,6 +4,7 @@ import { useCallback, useState } from 'react'; import { Box, Drawer, Typography } from '../../base'; import { CloseIcon } from '../../icons'; import { darkTeal } from '../../theme'; +import { SLIGHT_BLUE } from '../../theme/colors/colors'; import { CloseBtn } from '../Modal'; import CatalogFilterSidebarState from './CatalogFilterSidebarState'; import { @@ -37,6 +38,7 @@ export interface CatalogFilterSidebarProps { setData: (callback: (prevFilters: FilterValues) => FilterValues) => void; lists: FilterList[]; value?: FilterValues; + styleProps?: StyleProps; } export type FilterValues = Record; @@ -44,6 +46,7 @@ export type FilterValues = Record; export interface StyleProps { backgroundColor?: string; sectionTitleBackgroundColor?: string; + fontFamily?: string; } /** @@ -56,7 +59,8 @@ export interface StyleProps { const CatalogFilterSidebar: React.FC = ({ lists, setData, - value = {} + value = {}, + styleProps }) => { const theme = useTheme(); // Get the current theme const [openDrawer, setOpenDrawer] = useState(false); @@ -69,23 +73,29 @@ const CatalogFilterSidebar: React.FC = ({ setOpenDrawer(false); }, []); - const styleProps: StyleProps = { + const defaultStyleProps: StyleProps = { backgroundColor: theme.palette.mode === 'light' ? theme.palette.background.default : theme.palette.background.secondary, sectionTitleBackgroundColor: - theme.palette.mode === 'light' ? theme.palette.background.surfaces : darkTeal.main + theme.palette.mode === 'light' ? theme.palette.background.surfaces : darkTeal.main, + fontFamily: theme.typography.fontFamily + }; + + const appliedStyleProps = { + ...defaultStyleProps, + ...styleProps }; return ( <> - + @@ -103,7 +113,11 @@ const CatalogFilterSidebar: React.FC = ({ > - + Filters @@ -114,18 +128,17 @@ const CatalogFilterSidebar: React.FC = ({ style={{ height: '75vh', overflowY: 'auto', - background: theme.palette.background.default + background: theme.palette.background.surfaces }} > - - {/* Use theme-aware color */} + diff --git a/src/custom/CatalogFilterSection/FilterSection.tsx b/src/custom/CatalogFilterSection/FilterSection.tsx index 2777fa38b..0696a6ed1 100644 --- a/src/custom/CatalogFilterSection/FilterSection.tsx +++ b/src/custom/CatalogFilterSection/FilterSection.tsx @@ -55,9 +55,11 @@ const FilterSection: React.FC = ({ <> onSectionToggle(filterKey)} - style={{ backgroundColor: styleProps.sectionTitleBackgroundColor }} + style={{ + backgroundColor: styleProps.sectionTitleBackgroundColor + }} > - + {(sectionDisplayName || filterKey).toUpperCase()} {openSections[filterKey] ? : } @@ -105,7 +107,7 @@ const FilterSection: React.FC = ({ {option.Icon && } - {option.label} + {option.label} {option.totalCount !== undefined && `(${option.totalCount || 0})`} diff --git a/src/custom/CatalogFilterSection/style.tsx b/src/custom/CatalogFilterSection/style.tsx index a7694c57f..105a244ca 100644 --- a/src/custom/CatalogFilterSection/style.tsx +++ b/src/custom/CatalogFilterSection/style.tsx @@ -1,5 +1,6 @@ import { styled } from '@mui/material/styles'; import { Box, Button, ListItemButton } from '../../base'; +import { SLIGHT_BLUE } from '../../theme/colors/colors'; import { StyleProps } from './CatalogFilterSidebar'; export const FiltersCardDiv = styled(Box)<{ styleProps: StyleProps }>(({ styleProps }) => ({ @@ -14,7 +15,8 @@ export const FiltersCardDiv = styled(Box)<{ styleProps: StyleProps }>(({ stylePr backgroundColor: styleProps.backgroundColor, ['@media (max-width:900px)']: { display: 'none' - } + }, + fontFamily: styleProps.fontFamily })); export const FilterDrawerDiv = styled('div')(() => ({ @@ -41,15 +43,13 @@ export const FilterButton = styled(Button)(({ theme }) => ({ } })); -export const FiltersDrawerHeader = styled(Box)(({ theme }) => ({ +export const FiltersDrawerHeader = styled(Box)(() => ({ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0.5rem 1rem', - backgroundColor: theme.palette.border.strong, - height: '10vh', - boxShadow: '0px 4px 4px rgba(0, 179, 159, 0.4)', - marginBottom: '0.625rem' + backgroundColor: SLIGHT_BLUE, + height: '10vh' })); export const CheckBoxButton = styled(ListItemButton)(({ theme }) => ({ diff --git a/src/custom/CustomCatalog/custom-card.tsx b/src/custom/CustomCatalog/custom-card.tsx index 1f8351924..004f5079f 100644 --- a/src/custom/CustomCatalog/custom-card.tsx +++ b/src/custom/CustomCatalog/custom-card.tsx @@ -190,16 +190,7 @@ const CustomCatalogCard: React.FC = ({ <> {patternType} - - - {pattern.name} - + {pattern.name} )} diff --git a/src/custom/CustomCatalog/style.tsx b/src/custom/CustomCatalog/style.tsx index 863caa418..7e89b1905 100644 --- a/src/custom/CustomCatalog/style.tsx +++ b/src/custom/CustomCatalog/style.tsx @@ -134,20 +134,23 @@ export const MetricsCount = styled('p')(({ theme }) => ({ color: theme.palette.text.secondary, fontWeight: '600' })); -export const DesignName = styled(Typography)(({ theme }) => ({ +export const DesignName = styled(Typography)(() => ({ fontWeight: 'bold', textTransform: 'capitalize', - color: theme.palette.text.default, + color: '#000D12', fontSize: '1.125rem', marginTop: '2rem', - padding: '0rem 1rem', // "0rem 1.5rem" + padding: '0rem 1rem', position: 'relative', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', textAlign: 'center', - width: '100%' + width: '100%', + margin: '3rem 0 1.59rem 0', + fontFamily: 'inherit' })); + export const MetricsContainerFront = styled('div')(({ isDetailed }) => ({ display: 'flex', justifyContent: 'space-around', diff --git a/src/custom/StyledSearchBar/StyledSearchBar.tsx b/src/custom/StyledSearchBar/StyledSearchBar.tsx index 2e2799bdb..f3dcce72f 100644 --- a/src/custom/StyledSearchBar/StyledSearchBar.tsx +++ b/src/custom/StyledSearchBar/StyledSearchBar.tsx @@ -1,5 +1,6 @@ import { SxProps, Theme, useTheme } from '@mui/material'; -import React from 'react'; +import { debounce } from 'lodash'; +import React, { useCallback, useState } from 'react'; import { InputAdornment } from '../../base'; import { SearchIcon } from '../../icons'; import { InputAdornmentEnd, StyledSearchInput } from './style'; @@ -36,14 +37,31 @@ function StyledSearchBar({ endAdornment }: SearchBarProps): JSX.Element { const theme = useTheme(); + const [inputValue, setInputValue] = useState(value); + + const debouncedOnChange = useCallback( + (event: React.ChangeEvent) => { + debounce(() => { + if (onChange) { + onChange(event); + } + }, 300)(); + }, + [onChange] + ); + + const handleChange = (event: React.ChangeEvent) => { + setInputValue(event.target.value); + debouncedOnChange(event); + }; return ( = ({ + width = DEFAULT_WIDTH, + height = DEFAULT_HEIGHT, + primaryFill = '#654ff0', + secondaryFill = '#ffffff', + ...props +}) => { + return ( + + + + + ); +}; + +export default MesheryFilterIcon; diff --git a/src/icons/MesheryFilter/index.tsx b/src/icons/MesheryFilter/index.tsx new file mode 100644 index 000000000..c6a3c59e4 --- /dev/null +++ b/src/icons/MesheryFilter/index.tsx @@ -0,0 +1 @@ +export { default as MesheryFilterIcon } from './MesheryFilterIcon'; diff --git a/src/icons/index.ts b/src/icons/index.ts index 6a8b44302..2a8522ad1 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -55,6 +55,7 @@ export * from './Kubernetes'; export * from './LeftAngledArrow'; export * from './LeftArrow'; export * from './Menu'; +export * from './MesheryFilter'; export * from './MesheryOperator'; export * from './Open'; export * from './PanTool';