fix: add names for styled components

drodil · Nov 25, 2024 · 46d0a27 · 46d0a27
1 parent 361c0ca
commit 46d0a27
Show file tree

Hide file tree

Showing 12 changed files with 85 additions and 65 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)<MenuItemProps & { active: boolean }>(
-    ({ 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
@@ -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
@@ -21,7 +21,9 @@ interface StyledReactMarkdownProps {
   sx?: SxProps;
 }
 
-const StyledReactMarkdown = styled(ReactMarkdown)<StyledReactMarkdownProps>(
+const StyledReactMarkdown = styled(ReactMarkdown, {
+  name: 'QetaReactMarkdown',
+})<StyledReactMarkdownProps>(
   unstable_styleFunctionSx as StyleFunction<StyledReactMarkdownProps>,
 );
 

diff --git 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: {
           <Grid container spacing={2} style={{ paddingTop: '1rem' }}>
             {response.posts.map((post, i) => {
               return (
-                <Grid item xs={12} key={post.id}>
+                <Grid
+                  item
+                  xs={12}
+                  key={post.id}
+                  style={{ marginTop: '0.5rem' }}
+                >
                   <PostListItem post={post} entity={entity} type={type} />
                   {i !== response.total - 1 && <Divider />}
                 </Grid>

diff --git a/plugins/qeta-react/src/components/PostsContainer/PostListItem.tsx b/plugins/qeta-react/src/components/PostsContainer/PostListItem.tsx
@@ -67,24 +67,23 @@ 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' }}
     >
       <Grid item justifyContent="center" style={{ paddingTop: '0px' }}>
         <VoteButtonContainer>
           <VoteButtons entity={post} />
           <FavoriteButton entity={post} />
         </VoteButtonContainer>
       </Grid>
-      <Grid item sx={{ display: 'inline-block', width: 'calc(100% - 80px)' }}>
+      <Grid
+        item
+        style={{ display: 'inline-block', width: 'calc(100% - 80px)' }}
+      >
         <Grid container>
           <Grid
             item
             xs={12}
-            style={{
-              paddingTop: '0.4rem',
-              paddingBottom: '0.4rem',
-              paddingLeft: '0.8rem',
-            }}
+            style={{ paddingTop: 0, paddingBottom: '6px', marginLeft: '-2px' }}
           >
             {type === undefined && (
               <Chip

diff --git a/plugins/qeta-react/src/components/Styled/CardActionContainer.tsx b/plugins/qeta-react/src/components/Styled/CardActionContainer.tsx
@@ -1,6 +1,8 @@
 import { styled } from '@mui/system';
 
-export const CardActionContainer = styled('div')({
+export const CardActionContainer = styled('div', {
+  name: 'QetaCardActionContainer',
+})({
   marginTop: 2,
   '& a': {
     marginRight: 1,

diff --git a/plugins/qeta-react/src/components/Styled/ModalContent.tsx b/plugins/qeta-react/src/components/Styled/ModalContent.tsx
@@ -1,17 +1,19 @@
 import { styled } from '@mui/system';
 
-export const ModalContent = styled('div')(({ 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',
-  },
-}));
+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
@@ -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',