@drodil/backstage-plugin-qeta 1.11.0 → 1.12.0

package/dist/esm/{index-4867abd8.esm.js → index-44c96bf9.esm.js}

@@ -1,4 +1,4 @@
-export { C as Content, g as QuestionsTable } from './index-6bfa5b72.esm.js';
+export { C as Content, g as QuestionsTable } from './index-d0c348c4.esm.js';
 import '@backstage/core-plugin-api';
 import '@backstage/plugin-home';
 import '@backstage/errors';
@@ -25,7 +25,7 @@ import 'react-mde/lib/styles/css/react-mde-editor.css';
 import 'react-mde/lib/styles/css/react-mde-toolbar.css';
 import 'file-type';
 import '@material-ui/icons/Refresh';
-import '@material-ui/icons/HomeOutlined';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
-//# sourceMappingURL=index-4867abd8.esm.js.map
+import '@material-ui/icons/HomeOutlined';
+//# sourceMappingURL=index-44c96bf9.esm.js.map

package/dist/esm/index-44c96bf9.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-44c96bf9.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/{index-8cc27392.esm.js → index-600a4b78.esm.js}

@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { Grid, useTheme, Tooltip, IconButton, Typography, Box, Modal, Backdrop, Button, Avatar, Divider, TextField, Card, CardContent, Container, Chip, List, ListSubheader, ListItem, ListItemText, Menu, MenuItem, ListItemIcon } from '@material-ui/core';
-import { Content, ContentHeader, LinkButton, InfoCard, Link, MarkdownContent, WarningPanel, Progress, Page, Header } from '@backstage/core-components';
+import { Content, ContentHeader, InfoCard, Link, MarkdownContent, WarningPanel, Progress, Page, Header } from '@backstage/core-components';
 import { useParams, useNavigate, Routes, Route } from 'react-router-dom';
-import { A as AskForm, q as qetaApiRef, u as useBasePath, a as useStyles, f as formatEntityName, T as TagsAndEntities, M as MarkdownEditor, b as useQetaApi, c as AskQuestionButton, Q as QuestionsContainer, S as StatisticsPage, d as useIdentityApi, e as TrophyIcon } from './index-6bfa5b72.esm.js';
-import HomeOutlined from '@material-ui/icons/HomeOutlined';
+import { B as BackToQuestionsButton, A as AskForm, q as qetaApiRef, u as useBasePath, a as useStyles, f as formatEntityName, T as TagsAndEntities, M as MarkdownEditor, b as useQetaApi, c as AskQuestionButton, Q as QuestionsContainer, S as StatisticsPage, d as useIdentityApi, e as TrophyIcon } from './index-d0c348c4.esm.js';
 import ArrowDownward from '@material-ui/icons/ArrowDownward';
 import ArrowUpward from '@material-ui/icons/ArrowUpward';
 import Check from '@material-ui/icons/Check';
@@ -39,10 +38,11 @@ import 'react-mde/lib/styles/css/react-mde-editor.css';
 import 'react-mde/lib/styles/css/react-mde-toolbar.css';
 import 'file-type';
 import '@material-ui/icons/Refresh';
+import '@material-ui/icons/HomeOutlined';
 
 const AskPage = () => {
   const { id } = useParams();
-  return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: id ? "Edit question" : "Ask question" }, /* @__PURE__ */ React.createElement(LinkButton, { to: "/qeta", startIcon: /* @__PURE__ */ React.createElement(HomeOutlined, null) }, "Back to questions")), /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 3, direction: "column" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(InfoCard, null, /* @__PURE__ */ React.createElement(AskForm, { id })))));
+  return /* @__PURE__ */ React.createElement(Content, { className: "qetaAskPage" }, /* @__PURE__ */ React.createElement(ContentHeader, { title: id ? "Edit question" : "Ask question" }, /* @__PURE__ */ React.createElement(BackToQuestionsButton, null)), /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 3, direction: "column" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(InfoCard, null, /* @__PURE__ */ React.createElement(AskForm, { id })))));
 };
 
 const VoteButtons = (props) => {
@@ -121,6 +121,7 @@ const VoteButtons = (props) => {
     {
       "aria-label": "vote up",
       color: ownVote > 0 ? "primary" : "default",
+      className: ownVote > 0 ? "qetaVoteUpSelected" : "qetaVoteUp",
       disabled: own,
       size: "small",
       onClick: voteUp
@@ -131,6 +132,7 @@ const VoteButtons = (props) => {
     {
       "aria-label": "vote down",
       color: ownVote < 0 ? "primary" : "default",
+      className: ownVote < 0 ? "qetaVoteDownSelected" : "qetaVoteDown",
       disabled: own,
       size: "small",
       onClick: voteDown
@@ -146,6 +148,7 @@ const VoteButtons = (props) => {
     /* @__PURE__ */ React.createElement(
       Check,
       {
+        className: correct ? "qetaCorrectAnswerSelected" : "qetaCorrectAnswer",
         style: {
           color: correct ? theme.palette.success.main : void 0
         }
@@ -189,6 +192,7 @@ const DeleteModal = (props) => {
     {
       open,
       onClose,
+      className: "qetaDeleteModal",
       "aria-labelledby": "modal-modal-title",
       "aria-describedby": "modal-modal-description",
       closeAfterTransition: true,
@@ -197,7 +201,25 @@ const DeleteModal = (props) => {
         timeout: 500
       }
     },
-    /* @__PURE__ */ React.createElement(Box, { className: styles.deleteModal }, error && /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, "Failed to delete"), /* @__PURE__ */ React.createElement(Typography, { id: "modal-modal-title", variant: "h6", component: "h2" }, title), /* @__PURE__ */ React.createElement(Button, { onClick: handleDelete, startIcon: /* @__PURE__ */ React.createElement(Delete, null), color: "secondary" }, "Delete"), /* @__PURE__ */ React.createElement(Button, { onClick: onClose }, "Cancel"))
+    /* @__PURE__ */ React.createElement(Box, { className: `qetaDeleteModalContent ${styles.deleteModal}` }, error && /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, "Failed to delete"), /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        id: "modal-modal-title",
+        className: "qetaDeleteModalTitle",
+        variant: "h6",
+        component: "h2"
+      },
+      title
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: handleDelete,
+        className: "qetaDeleteModalDeleteBtn",
+        startIcon: /* @__PURE__ */ React.createElement(Delete, null),
+        color: "secondary"
+      },
+      "Delete"
+    ), /* @__PURE__ */ React.createElement(Button, { onClick: onClose, className: "qetaDeleteModalCancelBtn" }, "Cancel"))
   );
 };
 
@@ -219,7 +241,8 @@ const FavoriteButton = (props) => {
     {
       "aria-label": "unfavorite",
       size: "small",
-      onClick: unfavoriteQuestion
+      onClick: unfavoriteQuestion,
+      className: "qetaUnfavoriteBtn"
     },
     /* @__PURE__ */ React.createElement(StarIcon, null)
   )) : /* @__PURE__ */ React.createElement(Tooltip, { title: "Mark this question as favorite" }, /* @__PURE__ */ React.createElement(
@@ -227,7 +250,8 @@ const FavoriteButton = (props) => {
     {
       "aria-label": "favorite",
       size: "small",
-      onClick: favoriteQuestion
+      onClick: favoriteQuestion,
+      className: "qetaFavoriteBtn"
     },
     /* @__PURE__ */ React.createElement(StarOutlineIcon, null)
   )));
@@ -244,16 +268,16 @@ const AuthorBox = (props) => {
   }, [catalogApi, entity]);
   const name = formatEntityName(entity.author);
   const initials = (name != null ? name : "").split(" ").map((p) => p[0]).join("").substring(0, 2).toUpperCase();
-  return /* @__PURE__ */ React.createElement(Box, { className: styles.questionCardAuthor }, /* @__PURE__ */ React.createElement(Grid, { container: true, alignItems: "center" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, style: { paddingBottom: 0 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, "Posted ", /* @__PURE__ */ React.createElement(RelativeTime, { value: entity.created }))), entity.updated && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, style: { paddingBottom: 0, paddingTop: 0 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, "Updated ", /* @__PURE__ */ React.createElement(RelativeTime, { value: entity.updated }))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 2 }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Box, { className: `qetaAuthorBox ${styles.questionCardAuthor}` }, /* @__PURE__ */ React.createElement(Grid, { container: true, alignItems: "center" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, style: { paddingBottom: 0 } }, /* @__PURE__ */ React.createElement(Typography, { className: "qetaAuthorBoxCreated", variant: "caption" }, "Posted ", /* @__PURE__ */ React.createElement(RelativeTime, { value: entity.created }))), entity.updated && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, style: { paddingBottom: 0, paddingTop: 0 } }, /* @__PURE__ */ React.createElement(Typography, { className: "qetaAuthorBoxUpdated", variant: "caption" }, "Updated ", /* @__PURE__ */ React.createElement(RelativeTime, { value: entity.updated }))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 2 }, /* @__PURE__ */ React.createElement(
     Avatar,
     {
       src: (_a = user == null ? void 0 : user.spec.profile) == null ? void 0 : _a.picture,
-      className: "avatar",
+      className: "qetaAuthorBoxAvatar avatar",
       alt: name,
       variant: "rounded"
     },
     initials
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 10, className: styles.authorLink }, /* @__PURE__ */ React.createElement(Link, { to: `/qeta/users/${entity.author}` }, name))));
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 10, className: styles.authorLink }, /* @__PURE__ */ React.createElement(Link, { className: "qetaUserBtn", to: `/qeta/users/${entity.author}` }, name))));
 };
 
 const CommentList = (props) => {
@@ -273,18 +297,19 @@ const CommentList = (props) => {
   };
   return /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = entity.comments) == null ? void 0 : _a.map((c) => {
     const name = formatEntityName(c.author);
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { key: c.id }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { key: c.id, className: "qetaCommentBox" }, /* @__PURE__ */ React.createElement(
       MarkdownContent,
       {
         dialect: "gfm",
         content: c.content,
         className: `${styles.markdownContent} inline`
       }
-    ), " \u2013 ", /* @__PURE__ */ React.createElement(Link, { to: `/qeta/users/${c.author}` }, name), " ", /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, /* @__PURE__ */ React.createElement(RelativeTime, { value: c.created })), c.own && /* @__PURE__ */ React.createElement(React.Fragment, null, " / ", /* @__PURE__ */ React.createElement(
+    ), " \u2013 ", /* @__PURE__ */ React.createElement(Link, { to: `/qeta/users/${c.author}`, className: "qetaUserBtn" }, name), " ", /* @__PURE__ */ React.createElement(Typography, { variant: "caption", className: "qetaCommentTime" }, /* @__PURE__ */ React.createElement(RelativeTime, { value: c.created })), c.own && /* @__PURE__ */ React.createElement(React.Fragment, null, " / ", /* @__PURE__ */ React.createElement(
       Link,
       {
         underline: "none",
         to: "#",
+        className: "qetaCommentDeleteBtn",
         onClick: () => deleteComment(c.id)
       },
       "delete"
@@ -320,14 +345,23 @@ const CommentSection = (props) => {
       onCommentPost(q);
     });
   };
-  return /* @__PURE__ */ React.createElement(Box, { marginLeft: 9 }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Box, { marginLeft: 9, className: "qetaCommentSection" }, /* @__PURE__ */ React.createElement(
     CommentList,
     {
       question,
       answer,
       onCommentDelete
     }
-  ), !formVisible && /* @__PURE__ */ React.createElement(Link, { underline: "none", to: "#", onClick: () => setFormVisible(true) }, "Add comment"), formVisible && /* @__PURE__ */ React.createElement("form", { onSubmit: handleSubmit(postComment) }, /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 11 }, /* @__PURE__ */ React.createElement(
+  ), !formVisible && /* @__PURE__ */ React.createElement(
+    Link,
+    {
+      underline: "none",
+      to: "#",
+      className: "qetaAddCommentBtn",
+      onClick: () => setFormVisible(true)
+    },
+    "Add comment"
+  ), formVisible && /* @__PURE__ */ React.createElement("form", { onSubmit: handleSubmit(postComment), className: "qetaCommentForm" }, /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 11 }, /* @__PURE__ */ React.createElement(
     Controller,
     {
       control,
@@ -342,6 +376,7 @@ const CommentSection = (props) => {
           multiline: true,
           minRows: 2,
           fullWidth: true,
+          className: "qetaCommentInput",
           value,
           placeholder: "Your commment",
           onChange,
@@ -356,6 +391,7 @@ const CommentSection = (props) => {
     {
       variant: "contained",
       size: "small",
+      className: "qetaCommentBtn",
       type: "submit",
       color: "primary"
     },
@@ -373,36 +409,45 @@ const QuestionCard = (props) => {
   const onCommentAction = (q, _) => {
     setQuestionEntity(q);
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Card, { variant: "outlined", className: styles.questionCard }, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement("div", { className: styles.questionCardVote }, /* @__PURE__ */ React.createElement(VoteButtons, { entity: questionEntity }), /* @__PURE__ */ React.createElement(FavoriteButton, { entity: questionEntity })), /* @__PURE__ */ React.createElement("div", { className: styles.questionCardContent }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", gutterBottom: true }, /* @__PURE__ */ React.createElement(
-    MarkdownContent,
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Card,
     {
-      content: questionEntity.content,
-      dialect: "gfm",
-      className: styles.markdownContent
-    }
-  )), /* @__PURE__ */ React.createElement(Box, { className: styles.questionCardMetadata }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 0 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(TagsAndEntities, { question: questionEntity }))), /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "space-around" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 9 }, question.own && /* @__PURE__ */ React.createElement(Box, { className: styles.questionCardActions }, /* @__PURE__ */ React.createElement(
-    Link,
-    {
-      underline: "none",
-      to: "#",
-      onClick: handleDeleteModalOpen
-    },
-    "Delete"
-  ), /* @__PURE__ */ React.createElement(
-    Link,
-    {
-      underline: "none",
-      to: `/qeta/questions/${questionEntity.id}/edit`
+      variant: "outlined",
+      className: `qetaQuestionCard ${styles.questionCard}`
     },
-    "Edit"
+    /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement("div", { className: styles.questionCardVote }, /* @__PURE__ */ React.createElement(VoteButtons, { entity: questionEntity }), /* @__PURE__ */ React.createElement(FavoriteButton, { entity: questionEntity })), /* @__PURE__ */ React.createElement("div", { className: styles.questionCardContent }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", gutterBottom: true }, /* @__PURE__ */ React.createElement(
+      MarkdownContent,
+      {
+        content: questionEntity.content,
+        dialect: "gfm",
+        className: styles.markdownContent
+      }
+    )), /* @__PURE__ */ React.createElement(Box, { className: styles.questionCardMetadata }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 0 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(TagsAndEntities, { question: questionEntity }))), /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "space-around" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 9 }, question.own && /* @__PURE__ */ React.createElement(Box, { className: styles.questionCardActions }, /* @__PURE__ */ React.createElement(
+      Link,
+      {
+        underline: "none",
+        to: "#",
+        onClick: handleDeleteModalOpen,
+        className: "qetaQuestionCardDeleteBtn"
+      },
+      "Delete"
+    ), /* @__PURE__ */ React.createElement(
+      Link,
+      {
+        underline: "none",
+        to: `/qeta/questions/${questionEntity.id}/edit`,
+        className: "qetaQuestionCardEditBtn"
+      },
+      "Edit"
+    ), /* @__PURE__ */ React.createElement(
+      DeleteModal,
+      {
+        open: deleteModalOpen,
+        onClose: handleDeleteModalClose,
+        entity: questionEntity
+      }
+    ))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React.createElement(AuthorBox, { entity: questionEntity }))))))
   ), /* @__PURE__ */ React.createElement(
-    DeleteModal,
-    {
-      open: deleteModalOpen,
-      onClose: handleDeleteModalClose,
-      entity: questionEntity
-    }
-  ))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React.createElement(AuthorBox, { entity: questionEntity }))))))), /* @__PURE__ */ React.createElement(
     CommentSection,
     {
       question: questionEntity,
@@ -480,7 +525,7 @@ const AnswerForm = (props) => {
       permission: qetaCreateAnswerPermission,
       errorPage: /* @__PURE__ */ React.createElement(React.Fragment, null)
     },
-    /* @__PURE__ */ React.createElement("form", { onSubmit: handleSubmit(postAnswer) }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, "Your answer"), error && /* @__PURE__ */ React.createElement(WarningPanel, { severity: "error", title: "Could not post answer" }), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("form", { onSubmit: handleSubmit(postAnswer), className: "qetaAnswerForm" }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, "Your answer"), error && /* @__PURE__ */ React.createElement(WarningPanel, { severity: "error", title: "Could not post answer" }), /* @__PURE__ */ React.createElement(
       Controller,
       {
         control,
@@ -509,7 +554,7 @@ const AnswerForm = (props) => {
         variant: "outlined",
         type: "submit",
         color: "primary",
-        className: styles.postButton
+        className: `qetaAnswerFormPostBtn ${styles.postButton}`
       },
       id ? "Save" : "Post"
     ))
@@ -533,45 +578,62 @@ const AnswerCard = (props) => {
       setAnswerEntity(a);
     }
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Card, { id: `a${answer.id}`, className: styles.questionCard }, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement("div", { className: styles.questionCardVote }, /* @__PURE__ */ React.createElement(VoteButtons, { entity: answerEntity, question })), /* @__PURE__ */ React.createElement("div", { className: styles.questionCardContent }, editMode ? /* @__PURE__ */ React.createElement(
-    AnswerForm,
-    {
-      question,
-      onPost: onAnswerEdit,
-      id: answerEntity.id
-    }
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", gutterBottom: true }, /* @__PURE__ */ React.createElement(
-    MarkdownContent,
-    {
-      className: styles.markdownContent,
-      content: answerEntity.content,
-      dialect: "gfm"
-    }
-  )), /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "space-around" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 9 }, answerEntity.own && /* @__PURE__ */ React.createElement(Box, { className: styles.questionCardActions }, !answerEntity.correct && /* @__PURE__ */ React.createElement(
-    Link,
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Card,
     {
-      underline: "none",
-      to: "#",
-      onClick: handleDeleteModalOpen
+      id: `a${answer.id}`,
+      className: `qetaAnswerCard ${styles.questionCard}`
     },
-    "Delete"
-  ), /* @__PURE__ */ React.createElement(
-    Link,
-    {
-      underline: "none",
-      to: "#",
-      onClick: () => setEditMode(true)
-    },
-    "Edit"
+    /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement("div", { className: styles.questionCardVote }, /* @__PURE__ */ React.createElement(VoteButtons, { entity: answerEntity, question })), /* @__PURE__ */ React.createElement("div", { className: styles.questionCardContent }, editMode ? /* @__PURE__ */ React.createElement(
+      AnswerForm,
+      {
+        question,
+        onPost: onAnswerEdit,
+        id: answerEntity.id
+      }
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", gutterBottom: true }, /* @__PURE__ */ React.createElement(
+      MarkdownContent,
+      {
+        className: `qetaAndswerCardAnswerContent ${styles.markdownContent}`,
+        content: answerEntity.content,
+        dialect: "gfm"
+      }
+    )), /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "space-around" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 9 }, answerEntity.own && /* @__PURE__ */ React.createElement(
+      Box,
+      {
+        className: `qetaAnswerCardActions ${styles.questionCardActions}`
+      },
+      !answerEntity.correct && /* @__PURE__ */ React.createElement(
+        Link,
+        {
+          underline: "none",
+          to: "#",
+          onClick: handleDeleteModalOpen,
+          className: "qetaAnswerCardDeleteBtn"
+        },
+        "Delete"
+      ),
+      /* @__PURE__ */ React.createElement(
+        Link,
+        {
+          underline: "none",
+          to: "#",
+          onClick: () => setEditMode(true),
+          className: "qetaAnswerCardEditBtn"
+        },
+        "Edit"
+      ),
+      /* @__PURE__ */ React.createElement(
+        DeleteModal,
+        {
+          open: deleteModalOpen,
+          onClose: handleDeleteModalClose,
+          entity: answerEntity,
+          question
+        }
+      )
+    )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React.createElement(AuthorBox, { entity: answerEntity }))))))
   ), /* @__PURE__ */ React.createElement(
-    DeleteModal,
-    {
-      open: deleteModalOpen,
-      onClose: handleDeleteModalClose,
-      entity: answerEntity,
-      question
-    }
-  ))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React.createElement(AuthorBox, { entity: answerEntity }))))))), /* @__PURE__ */ React.createElement(
     CommentSection,
     {
       question,
@@ -610,16 +672,8 @@ const QuestionPage = () => {
       title: question.title,
       description: getDescription(question)
     },
-    /* @__PURE__ */ React.createElement(
-      LinkButton,
-      {
-        className: styles.marginRight,
-        to: "/qeta",
-        startIcon: /* @__PURE__ */ React.createElement(HomeOutlined, null)
-      },
-      "Back to questions"
-    ),
-    /* @__PURE__ */ React.createElement(AskQuestionButton, null)
+    /* @__PURE__ */ React.createElement(AskQuestionButton, null),
+    /* @__PURE__ */ React.createElement(BackToQuestionsButton, null)
   ), /* @__PURE__ */ React.createElement(QuestionCard, { question }), /* @__PURE__ */ React.createElement(Box, { sx: { mt: 3, mb: 2 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, question.answersCount + newAnswers.length, " answers")), ((_a = question.answers) != null ? _a : []).concat(newAnswers).map((a) => {
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Divider, { className: styles.questionDivider }), /* @__PURE__ */ React.createElement(Box, { key: a.id, sx: { mb: 1 } }, /* @__PURE__ */ React.createElement(AnswerCard, { answer: a, question })));
   }), /* @__PURE__ */ React.createElement(Divider, { className: styles.questionDivider }), /* @__PURE__ */ React.createElement(AnswerForm, { question, onPost: onAnswerPost })));
@@ -645,24 +699,32 @@ const TagsContainer = () => {
     return data.filter((t) => t.tag.toLowerCase().includes(query));
   };
   const tags = filterData(searchQuery, response);
-  return /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, className: "qetaTagsContainer" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
     TextField,
     {
       id: "search-bar",
-      className: "text",
+      className: "text qetaTagsContainerSearchInput",
       onChange: (event) => setSearchQuery(event.target.value),
       label: "Search tag",
       variant: "outlined",
       placeholder: "Search...",
       size: "small"
     }
-  ), /* @__PURE__ */ React.createElement(IconButton, { type: "submit", "aria-label": "search" })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, `Showing ${tags.length} tags`)), /* @__PURE__ */ React.createElement(Grid, { item: true }, tags.map((tag) => /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(IconButton, { type: "submit", "aria-label": "search" })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      variant: "h6",
+      className: "qetaTagsContainerTitle"
+    },
+    `Showing ${tags.length} tags`
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true }, tags.map((tag) => /* @__PURE__ */ React.createElement(
     Chip,
     {
       key: tag.tag,
       variant: "outlined",
       avatar: /* @__PURE__ */ React.createElement(Avatar, null, tag.questionsCount),
       label: tag.tag,
+      className: "qetaTagsContainerChip",
       component: "a",
       clickable: true,
       href: `/qeta/tags/${tag.tag}`
@@ -672,23 +734,13 @@ const TagsContainer = () => {
 
 const TagPage = () => {
   const { tag } = useParams();
-  const styles = useStyles();
-  return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Container, { maxWidth: "lg" }, /* @__PURE__ */ React.createElement(ContentHeader, { title: tag ? `Questions tagged [${tag}]` : "Tags" }, /* @__PURE__ */ React.createElement(
-    LinkButton,
-    {
-      to: "/qeta",
-      className: styles.marginRight,
-      startIcon: /* @__PURE__ */ React.createElement(HomeOutlined, null)
-    },
-    "Back to questions"
-  ), /* @__PURE__ */ React.createElement(AskQuestionButton, null)), tag ? /* @__PURE__ */ React.createElement(QuestionsContainer, { tags: [tag != null ? tag : ""] }) : /* @__PURE__ */ React.createElement(TagsContainer, null)));
+  return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Container, { maxWidth: "lg" }, /* @__PURE__ */ React.createElement(ContentHeader, { title: tag ? `Questions tagged [${tag}]` : "Tags" }, /* @__PURE__ */ React.createElement(BackToQuestionsButton, null), /* @__PURE__ */ React.createElement(AskQuestionButton, null)), tag ? /* @__PURE__ */ React.createElement(QuestionsContainer, { tags: [tag != null ? tag : ""] }) : /* @__PURE__ */ React.createElement(TagsContainer, null)));
 };
 
 const UserPage = () => {
   var _a;
   const identity = (_a = useParams()["*"]) != null ? _a : "unknown";
-  const styles = useStyles();
-  return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Container, { maxWidth: "lg" }, /* @__PURE__ */ React.createElement(ContentHeader, { title: `Questions by ${formatEntityName(identity)}` }, /* @__PURE__ */ React.createElement(LinkButton, { to: "/qeta", className: styles.marginRight }, "Back to questions"), /* @__PURE__ */ React.createElement(AskQuestionButton, null)), /* @__PURE__ */ React.createElement(QuestionsContainer, { author: identity != null ? identity : "" })));
+  return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Container, { maxWidth: "lg" }, /* @__PURE__ */ React.createElement(ContentHeader, { title: `Questions by ${formatEntityName(identity)}` }, /* @__PURE__ */ React.createElement(BackToQuestionsButton, null), /* @__PURE__ */ React.createElement(AskQuestionButton, null)), /* @__PURE__ */ React.createElement(QuestionsContainer, { author: identity != null ? identity : "" })));
 };
 
 const QuestionHighlightList = (props) => {
@@ -703,7 +755,7 @@ const QuestionHighlightList = (props) => {
   return /* @__PURE__ */ React.createElement(
     Box,
     {
-      className: classes.questionHighlightList,
+      className: `qetaQuestionHighlightList ${classes.questionHighlightList}`,
       display: { md: "none", lg: "block" }
     },
     /* @__PURE__ */ React.createElement(
@@ -711,6 +763,7 @@ const QuestionHighlightList = (props) => {
       {
         component: "nav",
         "aria-labelledby": "nested-list-subheader",
+        className: "qetaQuestionHighlightListList",
         subheader: /* @__PURE__ */ React.createElement(
           ListSubheader,
           {
@@ -728,6 +781,7 @@ const QuestionHighlightList = (props) => {
       !error && questions.map((q) => /* @__PURE__ */ React.createElement(React.Fragment, { key: q.id }, /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(
         ListItem,
         {
+          className: "qetaQuestionHighlightListListItem",
           button: true,
           dense: true,
           component: "a",
@@ -740,16 +794,7 @@ const QuestionHighlightList = (props) => {
 };
 
 const FavoritePage = () => {
-  const styles = useStyles();
-  return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Container, { maxWidth: "lg" }, /* @__PURE__ */ React.createElement(ContentHeader, { title: "Your favorite questions" }, /* @__PURE__ */ React.createElement(
-    LinkButton,
-    {
-      to: "/qeta",
-      className: styles.marginRight,
-      startIcon: /* @__PURE__ */ React.createElement(HomeOutlined, null)
-    },
-    "Back to questions"
-  ), /* @__PURE__ */ React.createElement(AskQuestionButton, null)), /* @__PURE__ */ React.createElement(QuestionsContainer, { favorite: true })));
+  return /* @__PURE__ */ React.createElement(Content, { className: "qetaFavoritePage" }, /* @__PURE__ */ React.createElement(Container, { maxWidth: "lg" }, /* @__PURE__ */ React.createElement(ContentHeader, { title: "Your favorite questions" }, /* @__PURE__ */ React.createElement(BackToQuestionsButton, null), /* @__PURE__ */ React.createElement(AskQuestionButton, null)), /* @__PURE__ */ React.createElement(QuestionsContainer, { favorite: true })));
 };
 
 const MoreMenu = () => {
@@ -801,7 +846,7 @@ const MoreMenu = () => {
   ));
 };
 const HomePageContent = () => {
-  return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Container, { maxWidth: "lg" }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 3 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, lg: 9, xl: 10 }, /* @__PURE__ */ React.createElement(ContentHeader, { title: "All questions" }, /* @__PURE__ */ React.createElement(MoreMenu, null), /* @__PURE__ */ React.createElement(AskQuestionButton, null)), /* @__PURE__ */ React.createElement(QuestionsContainer, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, lg: 3, xl: 2 }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Content, { className: "qetaHomePage" }, /* @__PURE__ */ React.createElement(Container, { maxWidth: "lg" }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 3 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, lg: 9, xl: 10 }, /* @__PURE__ */ React.createElement(ContentHeader, { title: "All questions" }, /* @__PURE__ */ React.createElement(MoreMenu, null), /* @__PURE__ */ React.createElement(AskQuestionButton, null)), /* @__PURE__ */ React.createElement(QuestionsContainer, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, lg: 3, xl: 2 }, /* @__PURE__ */ React.createElement(
     QuestionHighlightList,
     {
       type: "hot",
@@ -831,4 +876,4 @@ const HomePage = (props) => {
 };
 
 export { HomePage };
-//# sourceMappingURL=index-8cc27392.esm.js.map
+//# sourceMappingURL=index-600a4b78.esm.js.map