From ed6b8b125e59cf9ced9dae2aa797e163e6f4eb96 Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Thu, 21 Nov 2024 12:56:41 +0530 Subject: [PATCH 1/2] feat: standardize font family to inherit across multiple components Signed-off-by: Amit Amrutiya --- .../CatalogDetail/CollapsibleSection.tsx | 10 +++++- .../InputSearchField/InputSearchField.tsx | 5 +++ src/custom/Markdown/style.tsx | 36 ++++++++++++------- .../UserSearchField/UserSearchFieldInput.tsx | 5 +++ 4 files changed, 43 insertions(+), 13 deletions(-) diff --git a/src/custom/CatalogDetail/CollapsibleSection.tsx b/src/custom/CatalogDetail/CollapsibleSection.tsx index 49c41794..a356f301 100644 --- a/src/custom/CatalogDetail/CollapsibleSection.tsx +++ b/src/custom/CatalogDetail/CollapsibleSection.tsx @@ -38,7 +38,12 @@ const CollapsibleSection: React.FC = ({ {isOpen ? : } - + {items && items.length > 0 ? ( {items?.map(renderItem)} @@ -50,6 +55,9 @@ const CollapsibleSection: React.FC = ({ opacity: 0.8, padding: '7px' }} + primaryTypographyProps={{ + fontFamily: 'inherit' + }} primary={emptyState} /> )} diff --git a/src/custom/InputSearchField/InputSearchField.tsx b/src/custom/InputSearchField/InputSearchField.tsx index c6f9c647..b880049e 100644 --- a/src/custom/InputSearchField/InputSearchField.tsx +++ b/src/custom/InputSearchField/InputSearchField.tsx @@ -127,6 +127,11 @@ const InputSearchField: React.FC = ({ error={!!error} helperText={error} fullWidth + InputLabelProps={{ + style: { + fontFamily: 'inherit' + } + }} InputProps={{ ...params.InputProps, endAdornment: ( diff --git a/src/custom/Markdown/style.tsx b/src/custom/Markdown/style.tsx index 2043d283..5af5c13b 100644 --- a/src/custom/Markdown/style.tsx +++ b/src/custom/Markdown/style.tsx @@ -7,7 +7,8 @@ export const StyledMarkdown = styled('a')(({ theme }) => ({ '&:hover': { textDecoration: 'underline' }, - cursor: 'pointer' + cursor: 'pointer', + fontFamily: 'inherit' })); // anchor style for notifications markdown content @@ -28,31 +29,38 @@ export const StyledMarkdownP = styled('p')(({ theme }) => ({ export const StyledMarkdownTooltipP = styled('p')(({ theme }) => ({ color: theme.palette.text.constant?.white || text.inverse, - marginBlock: '0px' + marginBlock: '0px', + fontFamily: 'inherit' })); export const StyledMarkdownH1 = styled('h1')(({ theme }) => ({ - color: theme.palette.text.default + color: theme.palette.text.default, + fontFamily: 'inherit' })); export const StyledMarkdownH2 = styled('h2')(({ theme }) => ({ - color: theme.palette.text.default + color: theme.palette.text.default, + fontFamily: 'inherit' })); export const StyledMarkdownH3 = styled('h3')(({ theme }) => ({ - color: theme.palette.text.default + color: theme.palette.text.default, + fontFamily: 'inherit' })); export const StyledMarkdownH4 = styled('h4')(({ theme }) => ({ - color: theme.palette.text.default + color: theme.palette.text.default, + fontFamily: 'inherit' })); export const StyledMarkdownH5 = styled('h5')(({ theme }) => ({ - color: theme.palette.text.default + color: theme.palette.text.default, + fontFamily: 'inherit' })); export const StyledMarkdownH6 = styled('h6')(({ theme }) => ({ - color: theme.palette.text.default + color: theme.palette.text.default, + fontFamily: 'inherit' })); export const StyledMarkdownBlockquote = styled('blockquote')(({ theme }) => ({ @@ -67,22 +75,26 @@ export const StyledMarkdownUl = styled('ul')(({ theme }) => ({ export const StyledMarkdownLi = styled('li')(({ theme }) => ({ color: theme.palette.text.default, - ...theme.typography.textB1Regular + ...theme.typography.textB1Regular, + fontFamily: 'inherit' })); export const StyledMarkdownTh = styled('th')(({ theme }) => ({ color: theme.palette.text.default, ...theme.typography.textH3Medium, - marginBlock: '0px' + marginBlock: '0px', + fontFamily: 'inherit' })); export const StyledMarkdownTd = styled('td')(({ theme }) => ({ color: theme.palette.text.default, marginBlock: '0px', - ...theme.typography.textB1Regular + ...theme.typography.textB1Regular, + fontFamily: 'inherit' })); export const StyledMarkdownPre = styled('pre')(({ theme }) => ({ background: theme.palette.background.code, - whiteSpace: 'pre-line' + whiteSpace: 'pre-line', + fontFamily: 'inherit' })); diff --git a/src/custom/UserSearchField/UserSearchFieldInput.tsx b/src/custom/UserSearchField/UserSearchFieldInput.tsx index c2f79b07..67e747e2 100644 --- a/src/custom/UserSearchField/UserSearchFieldInput.tsx +++ b/src/custom/UserSearchField/UserSearchFieldInput.tsx @@ -194,6 +194,11 @@ const UserSearchField: React.FC = ({ label={label} error={!!error} helperText={error} + InputLabelProps={{ + style: { + fontFamily: 'inherit' + } + }} InputProps={{ ...params.InputProps, endAdornment: ( From a73a822581c50392e4bb74e71f0115afc4e06506 Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Thu, 21 Nov 2024 13:03:00 +0530 Subject: [PATCH 2/2] feat: replace Tooltip with CustomTooltip and update icon colors in SocialSharePopper Signed-off-by: Amit Amrutiya --- src/custom/CatalogDetail/SocialSharePopper.tsx | 15 ++++++++------- src/custom/CatalogDetail/style.tsx | 4 ++-- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/custom/CatalogDetail/SocialSharePopper.tsx b/src/custom/CatalogDetail/SocialSharePopper.tsx index 3c24b32d..01baabd5 100644 --- a/src/custom/CatalogDetail/SocialSharePopper.tsx +++ b/src/custom/CatalogDetail/SocialSharePopper.tsx @@ -1,9 +1,10 @@ -import { Box, IconButton, Menu, MenuItem, Tooltip } from '@mui/material'; +import { Box, IconButton, Menu, MenuItem } from '@mui/material'; import React, { useState } from 'react'; import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share'; import { ChainIcon, FacebookIcon, LinkedinIcon, ShareIcon, TwitterIcon } from '../../icons'; import { useTheme } from '../../theme'; import { Pattern } from '../CustomCatalog/CustomCard'; +import { CustomTooltip } from '../CustomTooltip'; import { ErrorBoundary } from '../ErrorBoundary'; import { CopyShareIconWrapper, VisibilityChip } from './style'; @@ -50,23 +51,23 @@ const SocialSharePopper: React.FC = ({ {details?.visibility !== 'private' && ( - + handleCopyUrl(cleanedType, details?.name, details?.id)} > - + - + )} {(details?.visibility === 'published' || details?.visibility === 'public') && ( <> - + - + - + ({ letterSpacing: '0.15px', lineHeight: '1.5', textTransform: 'lowercase', - color: theme.palette.background.supplementary, + color: theme.palette.icon.secondary, [' @media (max-width: 285px)']: { fontSize: '0.86rem' } })); export const MetricsData = styled('div')(({ theme }) => ({ - color: theme.palette.background.supplementary, + color: theme.palette.icon.secondary, fontSize: '1.2rem', fontWeight: 'bold', lineHeight: '1.5'