fix: use primary color for buttons

markdown editor also to follow the styling of theme

fixes #37

Author: drodil

plugins/qeta/src/components/AskForm/AskForm.tsx

@@ -3,7 +3,6 @@ import { Button, TextField } from '@material-ui/core';
 import { Alert, Autocomplete } from '@material-ui/lab';
 import React, { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import 'react-mde/lib/styles/css/react-mde-all.css';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import {
   QetaApi,
@@ -300,7 +299,12 @@ export const AskForm = (props: {
           name="entities"
         />
       )}
-      <Button type="submit" variant="contained" className={styles.postButton}>
+      <Button
+        color="primary"
+        type="submit"
+        variant="contained"
+        className={styles.postButton}
+      >
         {id ? 'Save' : 'Post'}
       </Button>
     </form>

plugins/qeta/src/components/AskPage/AskPage.tsx

@@ -1,7 +1,7 @@
 import { Content, ContentHeader, InfoCard } from '@backstage/core-components';
 import { Button, Grid } from '@material-ui/core';
 import React from 'react';
-import 'react-mde/lib/styles/css/react-mde-all.css';
+
 import { AskForm } from '../AskForm/AskForm';
 import HomeOutlined from '@material-ui/icons/HomeOutlined';
 import { useParams } from 'react-router-dom';

plugins/qeta/src/components/HomePage/HomePage.tsx

@@ -111,6 +111,7 @@ export const HomePageContent = () => {
             <Button
               variant="contained"
               href="/qeta/ask"
+              color="primary"
               startIcon={<HelpOutline />}
             >
               Ask question

plugins/qeta/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import ReactMde from 'react-mde';
 import { MarkdownContent } from '@backstage/core-components';
+import 'react-mde/lib/styles/css/react-mde.css';
+import 'react-mde/lib/styles/css/react-mde-editor.css';
+import 'react-mde/lib/styles/css/react-mde-toolbar.css';
 import { useStyles } from '../../utils/hooks';
 
 export const MarkdownEditor = (props: {
@@ -27,10 +30,21 @@ export const MarkdownEditor = (props: {
       selectedTab={selectedTab}
       onTabChange={setSelectedTab}
       minEditorHeight={height}
-      minPreviewHeight={height}
-      childProps={{ textArea: { required: true, placeholder } }}
+      minPreviewHeight={height - 10}
+      childProps={{
+        textArea: {
+          required: true,
+          placeholder,
+        },
+      }}
       generateMarkdownPreview={content =>
-        Promise.resolve(<MarkdownContent content={content} />)
+        Promise.resolve(
+          <MarkdownContent
+            content={content}
+            dialect="gfm"
+            className={styles.markdownContent}
+          />,
+        )
       }
     />
   );

plugins/qeta/src/components/QuestionPage/AnswerCard.tsx

@@ -54,6 +54,7 @@ export const AnswerCard = (props: {
               <>
                 <Typography variant="body1" gutterBottom>
                   <MarkdownContent
+                    className={styles.markdownContent}
                     content={answerEntity.content}
                     dialect="gfm"
                   />

plugins/qeta/src/components/QuestionPage/AnswerForm.tsx

@@ -102,7 +102,12 @@ export const AnswerForm = (props: {
         )}
         name="answer"
       />
-      <Button variant="contained" type="submit" className={styles.postButton}>
+      <Button
+        variant="outlined"
+        type="submit"
+        color="primary"
+        className={styles.postButton}
+      >
         {id ? 'Save' : 'Post'}
       </Button>
     </form>

plugins/qeta/src/components/QuestionPage/QuestionCard.tsx

@@ -64,7 +64,11 @@ export const QuestionCard = (props: { question: QuestionResponse }) => {
         </div>
         <div className={styles.questionCardContent}>
           <Typography variant="body1" gutterBottom>
-            <MarkdownContent content={question.content} dialect="gfm" />
+            <MarkdownContent
+              content={question.content}
+              dialect="gfm"
+              className={styles.markdownContent}
+            />
           </Typography>
           <Box className={styles.questionCardMetadata}>
             <Grid container spacing={0} justifyContent="space-around">

plugins/qeta/src/components/QuestionPage/QuestionPage.tsx

@@ -84,6 +84,7 @@ export const QuestionPage = () => {
         <Button
           variant="contained"
           href="/qeta/ask"
+          color="primary"
           startIcon={<HelpOutline />}
         >
           Ask question

plugins/qeta/src/components/QuestionsContainer/QuestionList.tsx

@@ -78,6 +78,8 @@ export const QuestionList = (props: {
           <Button
             href={entity ? `/qeta/ask?entity=${entity}` : '/qeta/ask'}
             startIcon={<HelpOutline />}
+            color="primary"
+            variant="outlined"
           >
             Go ahead and ask one!
           </Button>

plugins/qeta/src/utils/hooks.ts

@@ -63,6 +63,14 @@ export const useStyles = makeStyles(theme => {
           color: `${theme.palette.text.primary} !important`,
         },
       },
+      '& .mde-preview-content': {
+        padding: '0 10px 0px 10px',
+      },
+      '& .mde-text, .mde-preview': {
+        fontSize: theme.typography.body1.fontSize,
+        fontFamily: theme.typography.body1.fontFamily,
+        lineHeight: theme.typography.body1.lineHeight,
+      },
       '& .mde-text': {
         backgroundColor: 'initial',
         color: theme.palette.text.primary,
@@ -72,6 +80,11 @@ export const useStyles = makeStyles(theme => {
     markdownEditorError: {
       border: `1px solid ${theme.palette.error.main} !important`,
     },
+    markdownContent: {
+      '& h1, h2, h3, h4, h5, h6': {
+        marginTop: 0,
+      },
+    },
     successColor: {
       color: theme.palette.success.main,
     },