fix: more UI fixes after MUI4 rollback

drodil · Nov 26, 2024 · 94e34a7 · 94e34a7
1 parent 6f27725
commit 94e34a7
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 20 deletions.
diff --git a/plugins/qeta-react/src/components/AnswerCard/AnswerCard.tsx b/plugins/qeta-react/src/components/AnswerCard/AnswerCard.tsx
@@ -29,6 +29,7 @@ export type AnswerCardClassKeys =
   | 'highlight'
   | 'buttons'
   | 'metadata'
+  | 'markdownContainer'
   | 'contentContainer';
 
 const useStyles = makeStyles(
@@ -37,8 +38,12 @@ const useStyles = makeStyles(
       marginTop: '1em',
     },
     contentContainer: {
+      marginLeft: '0.5em',
+      display: 'inline-block',
+      width: 'calc(100% - 70px)',
+    },
+    markdownContainer: {
       minHeight: '6em',
-      paddingTop: '0.5em',
       paddingBottom: '0.5em',
     },
     metadata: {
@@ -108,16 +113,13 @@ export const AnswerCard = (props: {
             justifyContent="flex-start"
             style={{ flexWrap: 'nowrap' }}
           >
-            <Grid item justifyContent="center">
+            <Grid item>
               <VoteButtonContainer>
                 <VoteButtons entity={answerEntity} post={question} />
                 <LinkButton entity={answerEntity} />
               </VoteButtonContainer>
             </Grid>
-            <Grid
-              item
-              style={{ display: 'inline-block', width: 'calc(100% - 70px)' }}
-            >
+            <Grid item className={styles.contentContainer}>
               {editMode ? (
                 <AnswerForm
                   post={question}
@@ -126,7 +128,7 @@ export const AnswerCard = (props: {
                 />
               ) : (
                 <>
-                  <Grid item className={styles.contentContainer}>
+                  <Grid item className={styles.markdownContainer}>
                     <Typography variant="body1" gutterBottom>
                       <MarkdownRenderer content={answerEntity.content} />
                     </Typography>

diff --git a/plugins/qeta-react/src/components/FilterPanel/DateRangeFilter.tsx b/plugins/qeta-react/src/components/FilterPanel/DateRangeFilter.tsx
@@ -1,7 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { formatDate } from '../../utils/utils';
 import { useTranslation } from '../../hooks';
-import { Grid, MenuItem, TextField, Typography } from '@material-ui/core';
+import {
+  Grid,
+  makeStyles,
+  MenuItem,
+  TextField,
+  Typography,
+} from '@material-ui/core';
 
 export interface DateRangeFilterProps {
   value?: string;
@@ -13,8 +19,21 @@ type DateRangeValidation = {
   message?: string;
 };
 
+const useStyles = makeStyles(
+  theme => ({
+    root: {},
+    textInput: {
+      minWidth: '200px',
+      marginTop: theme.spacing(2),
+      marginBottom: theme.spacing(2),
+    },
+  }),
+  { name: 'QetaDateRangeFilter' },
+);
+
 export const DateRangeFilter = (props: DateRangeFilterProps) => {
   const { value, onChange } = props;
+  const styles = useStyles();
   const [dateRangeOption, setDateRangeOption] = useState<string | undefined>(
     value,
   );
@@ -50,7 +69,7 @@ export const DateRangeFilter = (props: DateRangeFilterProps) => {
   };
 
   return (
-    <Grid container>
+    <Grid container className={styles.root}>
       {validation.message && (
         <Grid item xs={12}>
           <Typography color="error" variant="body2">
@@ -61,6 +80,7 @@ export const DateRangeFilter = (props: DateRangeFilterProps) => {
       <Grid item>
         <TextField
           select
+          className={styles.textInput}
           label={t('datePicker.range.label')}
           value={dateRangeOption || 'select'}
           onChange={e => {
@@ -84,6 +104,7 @@ export const DateRangeFilter = (props: DateRangeFilterProps) => {
         <>
           <Grid item>
             <TextField
+              className={styles.textInput}
               variant="outlined"
               label={t('datePicker.from')}
               id="from-date"
@@ -101,6 +122,7 @@ export const DateRangeFilter = (props: DateRangeFilterProps) => {
           </Grid>
           <Grid item>
             <TextField
+              className={styles.textInput}
               variant="outlined"
               label={t('datePicker.to')}
               id="to-date"

diff --git a/plugins/qeta-react/src/components/FilterPanel/FilterPanel.tsx b/plugins/qeta-react/src/components/FilterPanel/FilterPanel.tsx
@@ -20,6 +20,7 @@ import {
   FormLabel,
   Grid,
   IconButton,
+  makeStyles,
   Radio,
   RadioGroup,
   Tooltip,
@@ -116,6 +117,18 @@ export interface FilterPanelProps<T extends Filters> {
   type?: PostType;
 }
 
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      padding: '1em',
+      paddingTop: '2em',
+      marginTop: '1em',
+      border: `1px solid ${theme.palette.divider}`,
+    },
+  }),
+  { name: 'QetaFilterPanel' },
+);
+
 export const FilterPanel = <T extends Filters>(props: FilterPanelProps<T>) => {
   const {
     onChange,
@@ -133,6 +146,7 @@ export const FilterPanel = <T extends Filters>(props: FilterPanelProps<T>) => {
   const starredEntitiesApi = useStarredEntities();
   const catalogApi = useApi(catalogApiRef);
   const identityApi = useApi(identityApiRef);
+  const styles = useStyles();
 
   const handleChange = (event: {
     target: {
@@ -195,7 +209,7 @@ export const FilterPanel = <T extends Filters>(props: FilterPanelProps<T>) => {
   const collectionFilters = isCollectionFilters(filters);
 
   return (
-    <Box>
+    <Box className={styles.root}>
       <Grid
         container
         spacing={4}

diff --git a/plugins/qeta-react/src/components/QuestionCard/QuestionCard.tsx b/plugins/qeta-react/src/components/QuestionCard/QuestionCard.tsx
@@ -31,15 +31,18 @@ import {
 export type QuestionCardClassKeys =
   | 'root'
   | 'contentContainer'
+  | 'markdownContainer'
   | 'buttons'
   | 'metadata';
 
 const useStyles = makeStyles(
   () => ({
     root: {},
     contentContainer: {
+      marginLeft: '0.5em',
+    },
+    markdownContainer: {
       minHeight: '6em',
-      paddingTop: '0.5em',
       paddingBottom: '0.5em',
     },
     buttons: {
@@ -93,15 +96,19 @@ export const QuestionCard = (props: { question: PostResponse }) => {
             justifyContent="flex-start"
             style={{ flexWrap: 'nowrap' }}
           >
-            <Grid item justifyContent="center">
+            <Grid item>
               <VoteButtonContainer>
                 <VoteButtons entity={questionEntity} />
                 <FavoriteButton entity={questionEntity} />
                 <LinkButton entity={questionEntity} />
               </VoteButtonContainer>
             </Grid>
-            <Grid item style={{ flexGrow: '1' }}>
-              <Grid item className={styles.contentContainer}>
+            <Grid
+              item
+              className={styles.contentContainer}
+              style={{ flexGrow: '1' }}
+            >
+              <Grid item className={styles.markdownContainer}>
                 <Typography variant="body1" gutterBottom>
                   <MarkdownRenderer content={questionEntity.content} />
                 </Typography>

diff --git a/plugins/qeta/src/components/QuestionPage/QuestionPage.tsx b/plugins/qeta/src/components/QuestionPage/QuestionPage.tsx
@@ -26,17 +26,29 @@ import {
   Divider,
   FormControl,
   Grid,
+  makeStyles,
   MenuItem,
   TextField,
   Typography,
 } from '@material-ui/core';
 import { Skeleton } from '@material-ui/lab';
 
+const useDescriptionStyles = makeStyles(
+  () => ({
+    root: {},
+    box: {
+      display: 'inline',
+    },
+  }),
+  { name: 'QetaDescription' },
+);
+
 export const QuestionPage = () => {
   const { id } = useParams();
   const { t } = useTranslation();
   const [newAnswers, setNewAnswers] = React.useState<AnswerResponse[]>([]);
   const [answerSort, setAnswerSort] = React.useState<string>('default');
+  const dStyles = useDescriptionStyles();
 
   const [answersCount, setAnswersCount] = useState(0);
   const [views, setViews] = useState(0);
@@ -115,21 +127,23 @@ export const QuestionPage = () => {
 
   const getDescription = (q: PostResponse) => {
     return (
-      <span>
-        {t('authorBox.postedAtTime')}{' '}
-        <Box fontWeight="fontWeightMedium" display="inline">
+      <span className={dStyles.root}>
+        <Box fontWeight="fontWeightMedium" className={dStyles.box}>
+          {t('authorBox.postedAtTime')}{' '}
           <RelativeTimeWithTooltip value={q.created} />
+          {' · '}
         </Box>
         {q.updated && (
           <React.Fragment>
-            {t('authorBox.updatedAtTime')}{' '}
-            <Box fontWeight="fontWeightMedium" display="inline">
+            <Box fontWeight="fontWeightMedium" className={dStyles.box}>
+              {t('authorBox.updatedAtTime')}{' '}
               <RelativeTimeWithTooltip value={q.updated} />{' '}
               {t('authorBox.updatedBy')} <UpdatedByLink entity={q} />
+              {' · '}
             </Box>
           </React.Fragment>
         )}
-        <Box fontWeight="fontWeightMedium" display="inline">
+        <Box fontWeight="fontWeightMedium" className={dStyles.box}>
           {t('common.views', { count: views })}
         </Box>
       </span>