From 46d0a278967f8c89e53b3363463fcf295075d851 Mon Sep 17 00:00:00 2001 From: Heikki Hellgren Date: Mon, 25 Nov 2024 11:44:38 +0200 Subject: [PATCH] fix: add names for styled components --- .../ArticleContent/ArticleButtons.tsx | 4 ++- .../ArticleContent/ArticleContent.tsx | 22 ++++++------ .../components/CommentSection/CommentList.tsx | 2 +- .../HeaderImageInput/HeaderImageInput.tsx | 18 +++++----- .../src/components/LeftMenu/LeftMenu.tsx | 36 +++++++++---------- .../MarkdownEditor/MarkdownEditor.tsx | 4 ++- .../MarkdownRenderer/MarkdownRenderer.tsx | 4 ++- .../components/PostsContainer/PostList.tsx | 7 +++- .../PostsContainer/PostListItem.tsx | 13 ++++--- .../components/Styled/CardActionContainer.tsx | 4 ++- .../src/components/Styled/ModalContent.tsx | 32 +++++++++-------- .../components/Styled/VoteButtonContainer.tsx | 4 ++- 12 files changed, 85 insertions(+), 65 deletions(-) diff --git a/plugins/qeta-react/src/components/ArticleContent/ArticleButtons.tsx b/plugins/qeta-react/src/components/ArticleContent/ArticleButtons.tsx index 63a9f97d..2a095f25 100644 --- a/plugins/qeta-react/src/components/ArticleContent/ArticleButtons.tsx +++ b/plugins/qeta-react/src/components/ArticleContent/ArticleButtons.tsx @@ -17,7 +17,9 @@ import { useVoting } from '../../hooks/useVoting'; import { useTranslation } from '../../hooks'; import { styled } from '@mui/system'; -const ArticleButtonContainer = styled('div')(({ theme }) => ({ +const ArticleButtonContainer = styled('div', { + name: 'QetaArticleButtonContainer', +})(({ theme }) => ({ width: '100%', paddingTop: '0.5rem', paddingBottom: '0.5rem', diff --git a/plugins/qeta-react/src/components/ArticleContent/ArticleContent.tsx b/plugins/qeta-react/src/components/ArticleContent/ArticleContent.tsx index 50017cec..a65c3d6c 100644 --- a/plugins/qeta-react/src/components/ArticleContent/ArticleContent.tsx +++ b/plugins/qeta-react/src/components/ArticleContent/ArticleContent.tsx @@ -16,16 +16,18 @@ import { useTranslation } from '../../hooks'; import { useEntityAuthor } from '../../hooks/useEntityAuthor'; import { styled } from '@mui/system'; -const HeaderImage = styled('img')(({ theme }) => ({ - marginBottom: theme.spacing(2), - marginTop: theme.spacing(2), - height: '250px', - objectFit: 'cover', - width: '100%', - borderColor: theme.palette.background.paper, - borderStyle: 'solid', - borderWidth: '1px', -})); +const HeaderImage = styled('img', { name: 'QetaArticleHeaderImage' })( + ({ theme }) => ({ + marginBottom: theme.spacing(2), + marginTop: theme.spacing(2), + height: '250px', + objectFit: 'cover', + width: '100%', + borderColor: theme.palette.background.paper, + borderStyle: 'solid', + borderWidth: '1px', + }), +); export const ArticleContent = (props: { post: PostResponse; diff --git a/plugins/qeta-react/src/components/CommentSection/CommentList.tsx b/plugins/qeta-react/src/components/CommentSection/CommentList.tsx index da4f65a3..5738028f 100644 --- a/plugins/qeta-react/src/components/CommentSection/CommentList.tsx +++ b/plugins/qeta-react/src/components/CommentSection/CommentList.tsx @@ -14,7 +14,7 @@ import { qetaApiRef } from '../../api'; import { useTranslation } from '../../hooks'; import { styled } from '@mui/system'; -const CommentBox = styled('div')({ +const CommentBox = styled('div', { name: 'QetaCommentBox' })({ padding: '0.5rem', }); diff --git a/plugins/qeta-react/src/components/HeaderImageInput/HeaderImageInput.tsx b/plugins/qeta-react/src/components/HeaderImageInput/HeaderImageInput.tsx index c9dda221..8e6fff1c 100644 --- a/plugins/qeta-react/src/components/HeaderImageInput/HeaderImageInput.tsx +++ b/plugins/qeta-react/src/components/HeaderImageInput/HeaderImageInput.tsx @@ -9,14 +9,16 @@ import { qetaApiRef } from '../../api'; import { useTranslation } from '../../hooks'; import { styled } from '@mui/system'; -const HeaderImage = styled('img')(({ theme }) => ({ - marginBottom: '1rem', - marginTop: '1rem', - height: '250px', - objectFit: 'cover', - width: '100%', - border: `1px solid ${theme.palette.background.paper}`, -})); +const HeaderImage = styled('img', { name: 'QetaHeaderImageInputImage' })( + ({ theme }) => ({ + marginBottom: '1rem', + marginTop: '1rem', + height: '250px', + objectFit: 'cover', + width: '100%', + border: `1px solid ${theme.palette.background.paper}`, + }), +); export const HeaderImageInput = (props: { url?: string; diff --git a/plugins/qeta-react/src/components/LeftMenu/LeftMenu.tsx b/plugins/qeta-react/src/components/LeftMenu/LeftMenu.tsx index 8eb006a4..2a85af94 100644 --- a/plugins/qeta-react/src/components/LeftMenu/LeftMenu.tsx +++ b/plugins/qeta-react/src/components/LeftMenu/LeftMenu.tsx @@ -36,7 +36,7 @@ import { TrophyIcon } from '../TopRankingUsersCard'; import { useIdentityApi, useIsModerator, useTranslation } from '../../hooks'; import { styled } from '@mui/system'; -const LeftMenuItem = styled(ListItemIcon)({ +const LeftMenuItem = styled(ListItemIcon, { name: 'QetaLeftMenuIcon' })({ minWidth: '26px !important', }); @@ -70,24 +70,24 @@ export const LeftMenu = (props: { error: userError, } = useIdentityApi(api => api.getBackstageIdentity(), []); - const StyledMenuItem = styled(MenuItem)( - ({ theme, ...p }) => { - return p.active - ? { - width: '100%', + const StyledMenuItem = styled(MenuItem, { name: 'QetaLeftMenuItem' })< + MenuItemProps & { active: boolean } + >(({ theme, ...p }) => { + return p.active + ? { + width: '100%', + color: theme.palette.primary.contrastText, + backgroundColor: theme.palette.primary.light, + borderRadius: 1, + '&:hover': { + backgroundColor: theme.palette.primary.dark, + }, + '& svg': { color: theme.palette.primary.contrastText, - backgroundColor: theme.palette.primary.light, - borderRadius: 1, - '&:hover': { - backgroundColor: theme.palette.primary.dark, - }, - '& svg': { - color: theme.palette.primary.contrastText, - }, - } - : { width: '100%', backgroundColor: 'initial', borderRadius: 1 }; - }, - ); + }, + } + : { width: '100%', backgroundColor: 'initial', borderRadius: 1 }; + }); const CustomMenuItem = ({ route, diff --git a/plugins/qeta-react/src/components/MarkdownEditor/MarkdownEditor.tsx b/plugins/qeta-react/src/components/MarkdownEditor/MarkdownEditor.tsx index 7c3e3016..6970fb98 100644 --- a/plugins/qeta-react/src/components/MarkdownEditor/MarkdownEditor.tsx +++ b/plugins/qeta-react/src/components/MarkdownEditor/MarkdownEditor.tsx @@ -14,7 +14,9 @@ import { catalogApiRef } from '@backstage/plugin-catalog-react'; import { stringifyEntityRef, UserEntity } from '@backstage/catalog-model'; import { styled } from '@mui/material/styles'; -const MarkdownEditorContainer = styled('div')(({ theme }) => ({ +const MarkdownEditorContainer = styled('div', { + name: 'QetaMarkdownEditorContainer', +})(({ theme }) => ({ '.react-mde': { backgroundColor: 'initial', color: theme.palette.text.primary, diff --git a/plugins/qeta-react/src/components/MarkdownRenderer/MarkdownRenderer.tsx b/plugins/qeta-react/src/components/MarkdownRenderer/MarkdownRenderer.tsx index 6cd71ef3..a28df39f 100644 --- a/plugins/qeta-react/src/components/MarkdownRenderer/MarkdownRenderer.tsx +++ b/plugins/qeta-react/src/components/MarkdownRenderer/MarkdownRenderer.tsx @@ -21,7 +21,9 @@ interface StyledReactMarkdownProps { sx?: SxProps; } -const StyledReactMarkdown = styled(ReactMarkdown)( +const StyledReactMarkdown = styled(ReactMarkdown, { + name: 'QetaReactMarkdown', +})( unstable_styleFunctionSx as StyleFunction, ); diff --git a/plugins/qeta-react/src/components/PostsContainer/PostList.tsx b/plugins/qeta-react/src/components/PostsContainer/PostList.tsx index b30c35f2..7f851c2a 100644 --- a/plugins/qeta-react/src/components/PostsContainer/PostList.tsx +++ b/plugins/qeta-react/src/components/PostsContainer/PostList.tsx @@ -101,7 +101,12 @@ export const PostList = (props: { {response.posts.map((post, i) => { return ( - + {i !== response.total - 1 && } diff --git a/plugins/qeta-react/src/components/PostsContainer/PostListItem.tsx b/plugins/qeta-react/src/components/PostsContainer/PostListItem.tsx index df4069e4..921046ff 100644 --- a/plugins/qeta-react/src/components/PostsContainer/PostListItem.tsx +++ b/plugins/qeta-react/src/components/PostsContainer/PostListItem.tsx @@ -67,7 +67,7 @@ export const PostListItem = (props: PostListItemProps) => { container spacing={2} justifyContent="flex-start" - sx={{ padding: '0.7rem', paddingBottom: '1.0rem' }} + style={{ padding: '0.7rem', paddingBottom: '1.0rem' }} > @@ -75,16 +75,15 @@ export const PostListItem = (props: PostListItemProps) => { - + {type === undefined && ( ({ - position: 'absolute', - top: '20%', - left: '50%', - transform: 'translate(-50%, -50%)', - width: 400, - backgroundColor: theme.palette.background.default, - border: `1px solid ${theme.palette.action.selected}`, - borderRadius: theme.shape.borderRadius, - padding: theme.spacing(2), - '& button': { - marginTop: theme.spacing(2), - float: 'right', - }, -})); +export const ModalContent = styled('div', { name: 'QetaModalContent' })( + ({ theme }) => ({ + position: 'absolute', + top: '20%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 400, + backgroundColor: theme.palette.background.default, + border: `1px solid ${theme.palette.action.selected}`, + borderRadius: theme.shape.borderRadius, + padding: theme.spacing(2), + '& button': { + marginTop: theme.spacing(2), + float: 'right', + }, + }), +); diff --git a/plugins/qeta-react/src/components/Styled/VoteButtonContainer.tsx b/plugins/qeta-react/src/components/Styled/VoteButtonContainer.tsx index 6e5d06cf..9cbc93bd 100644 --- a/plugins/qeta-react/src/components/Styled/VoteButtonContainer.tsx +++ b/plugins/qeta-react/src/components/Styled/VoteButtonContainer.tsx @@ -1,6 +1,8 @@ import { styled } from '@mui/system'; -export const VoteButtonContainer = styled('div')({ +export const VoteButtonContainer = styled('div', { + name: 'QetaVoteButtonContainer', +})({ textAlign: 'center', width: '32px', marginLeft: '5px',