fix: small ui improvements

drodil · Nov 25, 2024 · 6b86ded · 6b86ded
1 parent 24df0ad
commit 6b86ded
Show file tree

Hide file tree

Showing 42 changed files with 79 additions and 85 deletions.
diff --git a/plugins/qeta-react/src/components/AIAnswerCard/AIAnswerCard.tsx b/plugins/qeta-react/src/components/AIAnswerCard/AIAnswerCard.tsx
@@ -128,15 +128,15 @@ export const AIAnswerCard = (props: AIAnswerCardProps) => {
   return (
     <Card
       sx={theme => ({
-        marginTop: '1rem',
+        marginTop: '1em',
         backgroundColor: theme.palette.background.default,
         border: `3px solid ${theme.palette.status.ok}`,
       })}
       style={style}
     >
       <CardHeader
         avatar={<FlareIcon />}
-        style={!expanded ? { paddingBottom: '1rem' } : {}}
+        style={!expanded ? { paddingBottom: '1em' } : {}}
         title={
           <Typography variant="h5">
             {article

diff --git a/plugins/qeta-react/src/components/AnswerCard/AnswerCard.tsx b/plugins/qeta-react/src/components/AnswerCard/AnswerCard.tsx
@@ -91,7 +91,7 @@ export const AnswerCard = (props: {
                 />
               ) : (
                 <>
-                  <Grid item sx={{ minHeight: '3rem', paddingTop: 1 }}>
+                  <Grid item sx={{ minHeight: '3em', paddingTop: 1 }}>
                     <Typography variant="body1" gutterBottom>
                       <MarkdownRenderer content={answerEntity.content} />
                     </Typography>

diff --git a/plugins/qeta-react/src/components/AnswersContainer/AnswerList.tsx b/plugins/qeta-react/src/components/AnswersContainer/AnswerList.tsx
@@ -74,7 +74,7 @@ export const AnswerList = (props: {
 
   if (initialLoad && (!response.answers || response.answers.length === 0)) {
     return (
-      <Card style={{ marginTop: '2rem' }}>
+      <Card style={{ marginTop: '2em' }}>
         <CardContent>
           <Grid
             container
@@ -100,7 +100,7 @@ export const AnswerList = (props: {
     <div ref={listRef}>
       <Box sx={{ mt: 2 }} className="qetaAnswerList">
         <Card>
-          <Grid container spacing={2} style={{ paddingTop: '1rem' }}>
+          <Grid container spacing={2} style={{ paddingTop: '1em' }}>
             {response.answers.map(answer => {
               return (
                 <Grid item xs={12} key={answer.id}>

diff --git a/plugins/qeta-react/src/components/AnswersContainer/AnswersContainer.tsx b/plugins/qeta-react/src/components/AnswersContainer/AnswersContainer.tsx
@@ -209,7 +209,7 @@ export const AnswersContainer = (props: AnswersContainerProps) => {
         <Typography
           variant="h5"
           className="qetaAnswersContainerTitle"
-          style={{ marginBottom: '1.5rem' }}
+          style={{ marginBottom: '1.5em' }}
         >
           {shownTitle} {link}
         </Typography>

diff --git a/plugins/qeta-react/src/components/ArticleContent/ArticleButtons.tsx b/plugins/qeta-react/src/components/ArticleContent/ArticleButtons.tsx
@@ -21,8 +21,8 @@ const ArticleButtonContainer = styled('div', {
   name: 'QetaArticleButtonContainer',
 })(({ theme }) => ({
   width: '100%',
-  paddingTop: '0.5rem',
-  paddingBottom: '0.5rem',
+  paddingTop: '0.5em',
+  paddingBottom: '0.5em',
   borderTop: `1px solid ${theme.palette.background.paper}`,
   borderBottom: `1px solid ${theme.palette.background.paper}`,
 }));
@@ -75,7 +75,7 @@ export const ArticleButtons = (props: { post: PostResponse }) => {
           </Tooltip>
           <Tooltip title={t('common.score', { score: score.toString(10) })}>
             <Typography
-              sx={{ marginLeft: '0.5rem', userSelect: 'none' }}
+              sx={{ marginLeft: '0.5em', userSelect: 'none' }}
               display="inline"
             >
               {score}

diff --git a/plugins/qeta-react/src/components/ArticleContent/ArticleContent.tsx b/plugins/qeta-react/src/components/ArticleContent/ArticleContent.tsx
@@ -18,8 +18,8 @@ import { styled } from '@mui/system';
 
 const HeaderImage = styled('img', { name: 'QetaArticleHeaderImage' })(
   ({ theme }) => ({
-    marginBottom: theme.spacing(2),
-    marginTop: theme.spacing(2),
+    marginBottom: '2em',
+    marginTop: '2em',
     height: '250px',
     objectFit: 'cover',
     width: '100%',

diff --git a/plugins/qeta-react/src/components/AuthorBox/AuthorBox.tsx b/plugins/qeta-react/src/components/AuthorBox/AuthorBox.tsx
@@ -26,9 +26,9 @@ export const AuthorBox = (props: { entity: PostResponse | AnswerResponse }) => {
         border: `1px solid ${theme.palette.action.selected}`,
         borderRadius: 1,
         '& .avatar': {
-          width: theme.spacing(3),
-          height: theme.spacing(3),
-          fontSize: '1rem',
+          width: '2em',
+          height: '2em',
+          fontSize: '1em',
         },
       })}
     >

diff --git a/plugins/qeta-react/src/components/CollectionForm/CollectionForm.tsx b/plugins/qeta-react/src/components/CollectionForm/CollectionForm.tsx
@@ -223,7 +223,7 @@ export const CollectionForm = (props: CollectionFormProps) => {
         name="description"
       />
       {canModifyAccess && (
-        <Grid container style={{ marginTop: '1rem', marginBottom: '1rem' }}>
+        <Grid container style={{ marginTop: '1em', marginBottom: '1em' }}>
           <Grid item>
             <Controller
               control={control}

diff --git a/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGridContent.tsx b/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGridContent.tsx
@@ -41,7 +41,7 @@ export const CollectionsGridContent = (props: {
         item
         direction="row"
         alignItems="stretch"
-        style={{ marginTop: '1rem' }}
+        style={{ marginTop: '1em' }}
       >
         {response.collections.map(p => {
           return (

diff --git a/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGridItem.tsx b/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGridItem.tsx
@@ -44,7 +44,7 @@ export const CollectionsGridItem = (props: PostsGridItemProps) => {
             alt={collection.title}
           />
         )}
-        <CardContent style={{ paddingBottom: '0.5rem' }}>
+        <CardContent style={{ paddingBottom: '0.5em' }}>
           <Typography gutterBottom variant="h6" component="div">
             {collection.title}
           </Typography>

diff --git a/plugins/qeta-react/src/components/CollectionsGrid/NoCollectionsCard.tsx b/plugins/qeta-react/src/components/CollectionsGrid/NoCollectionsCard.tsx
@@ -9,7 +9,7 @@ export const NoCollectionsCard = () => {
   const { t } = useTranslation();
 
   return (
-    <Card style={{ marginTop: '2rem' }}>
+    <Card style={{ marginTop: '2em' }}>
       <CardContent>
         <Grid
           container

diff --git a/plugins/qeta-react/src/components/CommentSection/CommentList.tsx b/plugins/qeta-react/src/components/CommentSection/CommentList.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from '../../hooks';
 import { styled } from '@mui/system';
 
 const CommentBox = styled('div', { name: 'QetaCommentBox' })({
-  padding: '0.5rem',
+  padding: '0.5em',
 });
 
 export const CommentList = (props: {

diff --git a/plugins/qeta-react/src/components/EntitiesGrid/NoEntitiesCard.tsx b/plugins/qeta-react/src/components/EntitiesGrid/NoEntitiesCard.tsx
@@ -9,7 +9,7 @@ export const NoEntitiesCard = () => {
   const { t } = useTranslation();
 
   return (
-    <Card style={{ marginTop: '2rem' }}>
+    <Card style={{ marginTop: '2em' }}>
       <CardContent>
         <Grid
           container

diff --git a/plugins/qeta-react/src/components/FilterPanel/FilterPanel.tsx b/plugins/qeta-react/src/components/FilterPanel/FilterPanel.tsx
@@ -292,7 +292,7 @@ export const FilterPanel = <T extends Filters>(props: FilterPanelProps<T>) => {
               style={{
                 display: 'grid',
                 gridTemplateColumns: '1fr 1fr',
-                gap: '0 1rem',
+                gap: '0 1em',
               }}
             >
               {postFilters &&

diff --git a/plugins/qeta-react/src/components/HomePageCards/ImpactCard.tsx b/plugins/qeta-react/src/components/HomePageCards/ImpactCard.tsx
@@ -33,7 +33,7 @@ export const ImpactCard = () => {
             {response.impact >= 1000
               ? numeral(response.impact).format('0.0 a')
               : response.impact}
-            <Typography variant="caption" style={{ marginLeft: '1rem' }}>
+            <Typography variant="caption" style={{ marginLeft: '1em' }}>
               {t('impactCard.views')}
             </Typography>
           </Typography>

diff --git a/plugins/qeta-react/src/components/LeftMenu/LeftMenu.tsx b/plugins/qeta-react/src/components/LeftMenu/LeftMenu.tsx
@@ -119,9 +119,9 @@ export const LeftMenu = (props: {
       sx={{
         top: '0',
         maxWidth: '165px',
-        paddingTop: '2rem',
+        paddingTop: '2em',
         ...(props.inPopup
-          ? { marginRight: 0, padding: '0.5rem' }
+          ? { marginRight: 0, padding: '0.5em' }
           : {
               marginRight: 4,
               float: 'right',

diff --git a/plugins/qeta-react/src/components/LeftMenu/LeftMenuButton.tsx b/plugins/qeta-react/src/components/LeftMenu/LeftMenuButton.tsx
@@ -57,7 +57,7 @@ export const LeftMenuButton = () => {
         variant="contained"
         onClick={handleToggle}
         startIcon={<MenuIcon />}
-        style={{ marginBottom: '0.5rem' }}
+        style={{ marginBottom: '0.5em' }}
       >
         {t('leftMenu.buttonLabel')}
       </Button>

diff --git a/plugins/qeta-react/src/components/MarkdownEditor/MarkdownEditor.tsx b/plugins/qeta-react/src/components/MarkdownEditor/MarkdownEditor.tsx
@@ -65,7 +65,7 @@ const MarkdownEditorContainer = styled('div', {
       borderRadius: theme.shape.borderRadius,
       '& li': {
         width: '100%',
-        padding: '0.5rem',
+        padding: '0.5em',
         '&:hover': {
           backgroundColor: theme.palette.action.hover,
         },

diff --git a/plugins/qeta-react/src/components/MarkdownRenderer/MarkdownRenderer.tsx b/plugins/qeta-react/src/components/MarkdownRenderer/MarkdownRenderer.tsx
@@ -37,7 +37,7 @@ const styles = (theme: any) => ({
   },
   '& th, & td': {
     border: `1px solid ${theme.palette.border}`,
-    padding: theme.spacing(1),
+    padding: '1em',
   },
   '& h1': {
     ...theme.typography?.h1,
@@ -65,24 +65,24 @@ const styles = (theme: any) => ({
   },
   '& blockquote': {
     backgroundColor: theme.palette.background.paper,
-    border: `.1rem solid ${theme.palette.divider}`,
-    padding: theme.spacing(2),
+    border: `.1em solid ${theme.palette.divider}`,
+    padding: '1em',
   },
   '& ol, ul': {
-    marginLeft: '1rem',
-    marginTop: '1rem',
-    marginBottom: '1rem',
+    marginLeft: '1em',
+    marginTop: '1em',
+    marginBottom: '1em',
   },
   '& li': {
-    marginTop: '0.5rem',
+    marginTop: '0.5em',
   },
   '& td': {
     wordBreak: 'break-word',
     overflow: 'hidden',
     verticalAlign: 'middle',
     lineHeight: '1',
     margin: 0,
-    padding: theme.spacing(3, 2, 3, 2.5),
+    padding: '1em',
     borderBottom: 0,
   },
   '& th': {

diff --git a/plugins/qeta-react/src/components/PostAnonymouslyCheckbox/PostAnonymouslyCheckbox.tsx b/plugins/qeta-react/src/components/PostAnonymouslyCheckbox/PostAnonymouslyCheckbox.tsx
@@ -13,7 +13,7 @@ export const PostAnonymouslyCheckbox = (props: {
   const { control, label } = props;
   const { t } = useTranslation();
   return (
-    <Box style={{ marginLeft: '0.2rem' }}>
+    <Box style={{ marginLeft: '0.2em' }}>
       <Controller
         control={control}
         render={({ field: { onChange, value } }) => (

diff --git a/plugins/qeta-react/src/components/PostsContainer/NoPostsCard.tsx b/plugins/qeta-react/src/components/PostsContainer/NoPostsCard.tsx
@@ -40,7 +40,7 @@ export const NoPostsCard = (props: {
 
   const itemType = t(`common.${type ?? 'post'}`, {});
   return (
-    <Card style={{ marginTop: '2rem' }}>
+    <Card style={{ marginTop: '2em' }}>
       <CardContent>
         <Grid
           container

diff --git a/plugins/qeta-react/src/components/PostsContainer/PostList.tsx b/plugins/qeta-react/src/components/PostsContainer/PostList.tsx
@@ -98,15 +98,10 @@ export const PostList = (props: {
     <div ref={listRef}>
       <Box sx={{ mt: 2 }} className="qetaPostList">
         <Card>
-          <Grid container spacing={2} style={{ paddingTop: '1rem' }}>
+          <Grid container spacing={2} style={{ paddingTop: '1em' }}>
             {response.posts.map((post, i) => {
               return (
-                <Grid
-                  item
-                  xs={12}
-                  key={post.id}
-                  style={{ marginTop: '0.5rem' }}
-                >
+                <Grid item xs={12} key={post.id} style={{ marginTop: '0.5em' }}>
                   <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,7 +67,7 @@ export const PostListItem = (props: PostListItemProps) => {
       container
       spacing={2}
       justifyContent="flex-start"
-      style={{ padding: '0.7rem', paddingBottom: '1.0rem' }}
+      style={{ padding: '0.7em', paddingBottom: '1.0em' }}
     >
       <Grid item justifyContent="center" style={{ paddingTop: '0px' }}>
         <VoteButtonContainer>
@@ -83,7 +83,11 @@ export const PostListItem = (props: PostListItemProps) => {
           <Grid
             item
             xs={12}
-            style={{ paddingTop: 0, paddingBottom: '6px', marginLeft: '-2px' }}
+            style={{
+              paddingTop: '0.5em',
+              paddingBottom: '0.4em',
+              marginLeft: '-0.2em',
+            }}
           >
             {type === undefined && (
               <Chip
@@ -159,10 +163,10 @@ export const PostListItem = (props: PostListItemProps) => {
                 variant="rounded"
                 sx={{
                   display: 'inline-flex !important',
-                  marginRight: '0.25rem',
-                  fontSize: '1rem',
-                  maxWidth: '1rem',
-                  maxHeight: '1rem',
+                  marginRight: '0.25em',
+                  fontSize: '1em',
+                  maxWidth: '1em',
+                  maxHeight: '1em',
                 }}
               >
                 {initials}

diff --git a/plugins/qeta-react/src/components/PostsContainer/PostsContainer.tsx b/plugins/qeta-react/src/components/PostsContainer/PostsContainer.tsx
@@ -81,7 +81,7 @@ export const PostsContainer = (
         <Typography
           variant="h5"
           className="qetaPostsContainerTitle"
-          style={{ marginBottom: '1.5rem' }}
+          style={{ marginBottom: '1.5em' }}
         >
           {shownTitle} {link} {btn}
         </Typography>

diff --git a/plugins/qeta-react/src/components/PostsGrid/PostsGrid.tsx b/plugins/qeta-react/src/components/PostsGrid/PostsGrid.tsx
@@ -83,7 +83,7 @@ export const PostsGrid = (props: PostGridProps) => {
         <Typography
           variant="h5"
           className="qetaPostsGridTitle"
-          style={{ marginBottom: '1.5rem' }}
+          style={{ marginBottom: '1.5em' }}
         >
           {shownTitle} {link} {btn}
         </Typography>

diff --git a/plugins/qeta-react/src/components/PostsGrid/PostsGridContent.tsx b/plugins/qeta-react/src/components/PostsGrid/PostsGridContent.tsx
@@ -99,7 +99,7 @@ export const PostsGridContent = (props: {
           container
           direction="row"
           alignItems="stretch"
-          style={{ marginTop: '1rem' }}
+          style={{ marginTop: '1em' }}
         >
           {response.posts.map(p => {
             return (

diff --git a/plugins/qeta-react/src/components/PostsGrid/PostsGridItem.tsx b/plugins/qeta-react/src/components/PostsGrid/PostsGridItem.tsx
@@ -90,7 +90,7 @@ export const PostsGridItem = (props: PostsGridItemProps) => {
             alt={post.title}
           />
         )}
-        <CardContent style={{ paddingBottom: '0.5rem' }}>
+        <CardContent style={{ paddingBottom: '0.5em' }}>
           <Typography gutterBottom variant="h6" component="div">
             {post.title}
           </Typography>
@@ -101,20 +101,20 @@ export const PostsGridItem = (props: PostsGridItemProps) => {
           </Typography>
         </CardContent>
       </CardActionArea>
-      <CardContent style={{ paddingTop: '0.5rem' }}>
+      <CardContent style={{ paddingTop: '0.5em' }}>
         <TagsAndEntities entity={post} />
-        <Box style={{ paddingLeft: '0.2rem', paddingTop: '0.5rem' }}>
+        <Box style={{ paddingLeft: '0.2em', paddingTop: '0.5em' }}>
           <Typography variant="caption">
             <Avatar
               src={user?.spec?.profile?.picture}
               alt={name}
               variant="rounded"
               sx={{
                 display: 'inline-flex !important',
-                marginRight: '0.25rem',
-                fontSize: '1rem',
-                maxWidth: '1rem',
-                maxHeight: '1rem',
+                marginRight: '0.25em',
+                fontSize: '1em',
+                maxWidth: '1em',
+                maxHeight: '1em',
               }}
             >
               {initials}
@@ -132,8 +132,8 @@ export const PostsGridItem = (props: PostsGridItemProps) => {
             direction="row"
             spacing={0}
             style={{
-              paddingRight: '0.2rem',
-              paddingTop: '0.5rem',
+              paddingRight: '0.2em',
+              paddingTop: '0.5em',
               float: 'right',
             }}
           >

diff --git a/plugins/qeta-react/src/components/QuestionCard/QuestionCard.tsx b/plugins/qeta-react/src/components/QuestionCard/QuestionCard.tsx
@@ -70,7 +70,7 @@ export const QuestionCard = (props: { question: PostResponse }) => {
               </VoteButtonContainer>
             </Grid>
             <Grid item marginLeft={1} sx={{ flexGrow: 1 }}>
-              <Grid item sx={{ minHeight: '5rem', paddingTop: 1 }}>
+              <Grid item sx={{ minHeight: '5em', paddingTop: 1 }}>
                 <Typography variant="body1" gutterBottom>
                   <MarkdownRenderer content={questionEntity.content} />
                 </Typography>