@drodil/backstage-plugin-qeta-react 3.48.1 → 3.49.0

package/dist/components/UsersGrid/UsersGridItem.esm.js

@@ -3,122 +3,188 @@ import { useRouteRef } from '@backstage/core-plugin-api';
 import { useNavigate } from 'react-router-dom';
 import { useEntityPresentation } from '@backstage/plugin-catalog-react';
 import { userRouteRef } from '../../routes.esm.js';
-import { parseEntityRef } from '@backstage/catalog-model';
 import '../../api.esm.js';
 import 'react-use';
 import 'react';
 import { useEntityAuthor } from '../../hooks/useEntityAuthor.esm.js';
-import { useUserFollow } from '../../hooks/useUserFollow.esm.js';
 import { useIdentityApi } from '../../hooks/useIdentityApi.esm.js';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
-import { Grid, Card, CardActionArea, CardHeader, Tooltip, Avatar, CardContent, Typography, CardActions, Button } from '@material-ui/core';
-import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import { makeStyles, Grid, Card, Box, Avatar, Tooltip, Typography, CardContent } from '@material-ui/core';
+import { UserFollowButton } from '../Buttons/UserFollowButton.esm.js';
 import Visibility from '@material-ui/icons/Visibility';
+import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
+import ThumbUp from '@material-ui/icons/ThumbUp';
+import CheckCircle from '@material-ui/icons/CheckCircle';
+import DescriptionIcon from '@material-ui/icons/Description';
+import LinkIcon from '@material-ui/icons/Link';
 import { qetaTranslationRef } from '../../translation.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import useGridItemStyles from '../GridItemStyles/useGridItemStyles.esm.js';
 
+const useStyles = makeStyles((theme) => ({
+  statsGrid: {
+    marginTop: "auto"
+  },
+  statItem: {
+    padding: theme.spacing(1),
+    borderRadius: theme.shape.borderRadius,
+    width: "100%",
+    height: "100%",
+    justifyContent: "center"
+  },
+  flexColumn: {
+    display: "flex",
+    flexDirection: "column"
+  }
+}));
 const UsersGridItem = (props) => {
   const { user } = props;
   const classes = useGridItemStyles();
+  const localClasses = useStyles();
   const userRoute = useRouteRef(userRouteRef);
   const navigate = useNavigate();
   const { t } = useTranslationRef(qetaTranslationRef);
-  const compound = parseEntityRef(user.userRef);
-  const { primaryTitle, Icon } = useEntityPresentation(compound);
+  const { primaryTitle, Icon } = useEntityPresentation(user.userRef);
   const {
     name,
     initials,
     user: userEntity,
     secondaryTitle
   } = useEntityAuthor(user);
-  const users = useUserFollow();
   const {
     value: currentUser,
     loading: loadingUser,
     error: userError
   } = useIdentityApi((api) => api.getBackstageIdentity(), []);
-  return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, xl: 3, children: /* @__PURE__ */ jsxs(Card, { className: classes.card, variant: "outlined", children: [
-    /* @__PURE__ */ jsxs(
-      CardActionArea,
-      {
-        onClick: () => navigate(`${userRoute()}/${user.userRef}`),
-        children: [
-          /* @__PURE__ */ jsx(
-            CardHeader,
+  return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, xl: 4, children: /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: classes.card,
+      style: { cursor: "pointer" },
+      onClick: () => navigate(`${userRoute()}/${user.userRef}`),
+      children: [
+        /* @__PURE__ */ jsxs(Box, { className: classes.cardHeader, display: "flex", alignItems: "center", children: [
+          Icon && /* @__PURE__ */ jsx(
+            Avatar,
             {
-              className: classes.cardHeader,
-              title: /* @__PURE__ */ jsx(Tooltip, { title: secondaryTitle ?? "", arrow: true, children: /* @__PURE__ */ jsx("span", { className: classes.ellipsis, children: primaryTitle }) }),
-              titleTypographyProps: { variant: "h6" },
-              avatar: Icon ? /* @__PURE__ */ jsx(
-                Avatar,
-                {
-                  src: userEntity?.spec?.profile?.picture,
-                  className: "avatar",
-                  alt: name,
-                  variant: "rounded",
-                  children: initials
-                }
-              ) : null
+              src: userEntity?.spec?.profile?.picture,
+              className: "avatar",
+              alt: name,
+              variant: "rounded",
+              style: { marginRight: 16 },
+              children: initials
             }
           ),
-          /* @__PURE__ */ jsx(CardContent, { className: classes.cardContent, children: /* @__PURE__ */ jsxs(Typography, { className: classes.stats, variant: "caption", children: [
-            t("common.posts", {
-              count: user.totalQuestions,
-              itemType: "question"
-            }),
-            " \xB7 ",
-            t("common.answersCount", {
-              count: user.totalAnswers
-            }),
-            " \xB7 ",
-            t("common.posts", {
-              count: user.totalArticles,
-              itemType: "article"
-            }),
-            " \xB7 ",
-            t("common.posts", {
-              count: user.totalLinks,
-              itemType: "link"
-            }),
-            " \xB7 ",
-            t("common.posts", {
-              count: user.totalComments,
-              itemType: "comment"
-            }),
-            " \xB7 ",
-            t("common.votesCount", {
-              count: user.totalVotes
-            }),
-            " \xB7 ",
-            t("common.viewsShort", {
-              count: user.totalViews
-            })
-          ] }) })
-        ]
-      }
-    ),
-    !loadingUser && !userError && currentUser?.userEntityRef !== user.userRef && /* @__PURE__ */ jsx(CardActions, { className: classes.cardActions, children: /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "center", children: /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Tooltip, { title: t("userButton.tooltip"), children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        className: classes.actionButton,
-        size: "small",
-        variant: "outlined",
-        color: users.isFollowingUser(user.userRef) ? "secondary" : "primary",
-        onClick: () => {
-          if (users.isFollowingUser(user.userRef)) {
-            users.unfollowUser(user.userRef);
-          } else {
-            users.followUser(user.userRef);
+          /* @__PURE__ */ jsx(Box, { flex: 1, minWidth: 0, children: /* @__PURE__ */ jsx(Tooltip, { title: secondaryTitle ?? "", arrow: true, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", noWrap: true, children: primaryTitle }) }) }),
+          !loadingUser && !userError && currentUser?.userEntityRef !== user.userRef ? /* @__PURE__ */ jsx(Box, { flexShrink: 0, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: (e) => e.stopPropagation(),
+              onKeyPress: () => {
+              },
+              role: "button",
+              tabIndex: 0,
+              children: /* @__PURE__ */ jsx(UserFollowButton, { userRef: user.userRef })
+            }
+          ) }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          CardContent,
+          {
+            className: `${classes.cardContent} ${localClasses.flexColumn}`,
+            children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, className: localClasses.statsGrid, children: [
+              /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  className: localClasses.statItem,
+                  children: [
+                    /* @__PURE__ */ jsx(QuestionAnswerIcon, { fontSize: "small", color: "disabled" }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: user.totalQuestions }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("common.questions") })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  className: localClasses.statItem,
+                  children: [
+                    /* @__PURE__ */ jsx(CheckCircle, { fontSize: "small", color: "disabled" }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: user.totalAnswers }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("common.answers") })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  className: localClasses.statItem,
+                  children: [
+                    /* @__PURE__ */ jsx(ThumbUp, { fontSize: "small", color: "disabled" }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: user.totalVotes }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("common.votes") })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  className: localClasses.statItem,
+                  children: [
+                    /* @__PURE__ */ jsx(DescriptionIcon, { fontSize: "small", color: "disabled" }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: user.totalArticles }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("common.articles") })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  className: localClasses.statItem,
+                  children: [
+                    /* @__PURE__ */ jsx(Visibility, { fontSize: "small", color: "disabled" }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: user.totalViews }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("common.views") })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  className: localClasses.statItem,
+                  children: [
+                    /* @__PURE__ */ jsx(LinkIcon, { fontSize: "small", color: "disabled" }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: user.totalLinks }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("common.links") })
+                  ]
+                }
+              ) })
+            ] })
           }
-        },
-        startIcon: users.isFollowingUser(user.userRef) ? /* @__PURE__ */ jsx(VisibilityOff, {}) : /* @__PURE__ */ jsx(Visibility, {}),
-        children: users.isFollowingUser(user.userRef) ? t("userButton.unfollow") : t("userButton.follow")
-      }
-    ) }) }) }) })
-  ] }) });
+        )
+      ]
+    }
+  ) });
 };
 
 export { UsersGridItem };

package/dist/components/UsersGrid/UsersGridItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UsersGridItem.esm.js","sources":["../../../src/components/UsersGrid/UsersGridItem.tsx"],"sourcesContent":["import { UserResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { userRouteRef } from '../../routes';\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport { useIdentityApi, useUserFollow } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport {\n  Avatar,\n  Button,\n  Card,\n  CardActionArea,\n  CardActions,\n  CardContent,\n  CardHeader,\n  Grid,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport Visibility from '@material-ui/icons/Visibility';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport useGridItemStyles from '../GridItemStyles/useGridItemStyles';\n\nexport const UsersGridItem = (props: { user: UserResponse }) => {\n  const { user } = props;\n  const classes = useGridItemStyles();\n  const userRoute = useRouteRef(userRouteRef);\n  const navigate = useNavigate();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const compound = parseEntityRef(user.userRef);\n  const { primaryTitle, Icon } = useEntityPresentation(compound);\n  const {\n    name,\n    initials,\n    user: userEntity,\n    secondaryTitle,\n  } = useEntityAuthor(user);\n  const users = useUserFollow();\n  const {\n    value: currentUser,\n    loading: loadingUser,\n    error: userError,\n  } = useIdentityApi(api => api.getBackstageIdentity(), []);\n\n  return (\n    <Grid item xs={12} sm={6} md={4} xl={3}>\n      <Card className={classes.card} variant=\"outlined\">\n        <CardActionArea\n          onClick={() => navigate(`${userRoute()}/${user.userRef}`)}\n        >\n          <CardHeader\n            className={classes.cardHeader}\n            title={\n              <Tooltip title={secondaryTitle ?? ''} arrow>\n                <span className={classes.ellipsis}>{primaryTitle}</span>\n              </Tooltip>\n            }\n            titleTypographyProps={{ variant: 'h6' }}\n            avatar={\n              Icon ? (\n                <Avatar\n                  src={userEntity?.spec?.profile?.picture}\n                  className=\"avatar\"\n                  alt={name}\n                  variant=\"rounded\"\n                >\n                  {initials}\n                </Avatar>\n              ) : null\n            }\n          />\n          <CardContent className={classes.cardContent}>\n            <Typography className={classes.stats} variant=\"caption\">\n              {t('common.posts', {\n                count: user.totalQuestions,\n                itemType: 'question',\n              })}\n              {' · '}\n              {t('common.answersCount', {\n                count: user.totalAnswers,\n              })}\n              {' · '}\n              {t('common.posts', {\n                count: user.totalArticles,\n                itemType: 'article',\n              })}\n              {' · '}\n              {t('common.posts', {\n                count: user.totalLinks,\n                itemType: 'link',\n              })}\n              {' · '}\n              {t('common.posts', {\n                count: user.totalComments,\n                itemType: 'comment',\n              })}\n              {' · '}\n              {t('common.votesCount', {\n                count: user.totalVotes,\n              })}\n              {' · '}\n              {t('common.viewsShort', {\n                count: user.totalViews,\n              })}\n            </Typography>\n          </CardContent>\n        </CardActionArea>\n        {!loadingUser &&\n          !userError &&\n          currentUser?.userEntityRef !== user.userRef && (\n            <CardActions className={classes.cardActions}>\n              <Grid container justifyContent=\"center\">\n                <Grid item>\n                  <Tooltip title={t('userButton.tooltip')}>\n                    <Button\n                      className={classes.actionButton}\n                      size=\"small\"\n                      variant=\"outlined\"\n                      color={\n                        users.isFollowingUser(user.userRef)\n                          ? 'secondary'\n                          : 'primary'\n                      }\n                      onClick={() => {\n                        if (users.isFollowingUser(user.userRef)) {\n                          users.unfollowUser(user.userRef);\n                        } else {\n                          users.followUser(user.userRef);\n                        }\n                      }}\n                      startIcon={\n                        users.isFollowingUser(user.userRef) ? (\n                          <VisibilityOff />\n                        ) : (\n                          <Visibility />\n                        )\n                      }\n                    >\n                      {users.isFollowingUser(user.userRef)\n                        ? t('userButton.unfollow')\n                        : t('userButton.follow')}\n                    </Button>\n                  </Tooltip>\n                </Grid>\n              </Grid>\n            </CardActions>\n          )}\n      </Card>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"UsersGridItem.esm.js","sources":["../../../src/components/UsersGrid/UsersGridItem.tsx"],"sourcesContent":["import { UserResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { userRouteRef } from '../../routes';\nimport { useIdentityApi } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport {\n  Avatar,\n  Card,\n  CardContent,\n  Grid,\n  Tooltip,\n  Typography,\n  Box,\n  makeStyles,\n} from '@material-ui/core';\nimport { UserFollowButton } from '../Buttons/UserFollowButton';\nimport Visibility from '@material-ui/icons/Visibility';\nimport QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';\nimport ThumbUpIcon from '@material-ui/icons/ThumbUp';\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\nimport DescriptionIcon from '@material-ui/icons/Description';\nimport LinkIcon from '@material-ui/icons/Link';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport useGridItemStyles from '../GridItemStyles/useGridItemStyles';\n\nconst useStyles = makeStyles(theme => ({\n  statsGrid: {\n    marginTop: 'auto',\n  },\n  statItem: {\n    padding: theme.spacing(1),\n    borderRadius: theme.shape.borderRadius,\n    width: '100%',\n    height: '100%',\n    justifyContent: 'center',\n  },\n  flexColumn: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n}));\n\nexport const UsersGridItem = (props: { user: UserResponse }) => {\n  const { user } = props;\n  const classes = useGridItemStyles();\n  const localClasses = useStyles();\n  const userRoute = useRouteRef(userRouteRef);\n  const navigate = useNavigate();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { primaryTitle, Icon } = useEntityPresentation(user.userRef);\n  const {\n    name,\n    initials,\n    user: userEntity,\n    secondaryTitle,\n  } = useEntityAuthor(user);\n  const {\n    value: currentUser,\n    loading: loadingUser,\n    error: userError,\n  } = useIdentityApi(api => api.getBackstageIdentity(), []);\n\n  return (\n    <Grid item xs={12} md={6} xl={4}>\n      <Card\n        className={classes.card}\n        style={{ cursor: 'pointer' }}\n        onClick={() => navigate(`${userRoute()}/${user.userRef}`)}\n      >\n        <Box className={classes.cardHeader} display=\"flex\" alignItems=\"center\">\n          {Icon && (\n            <Avatar\n              src={userEntity?.spec?.profile?.picture}\n              className=\"avatar\"\n              alt={name}\n              variant=\"rounded\"\n              style={{ marginRight: 16 }}\n            >\n              {initials}\n            </Avatar>\n          )}\n          <Box flex={1} minWidth={0}>\n            <Tooltip title={secondaryTitle ?? ''} arrow>\n              <Typography variant=\"h6\" noWrap>\n                {primaryTitle}\n              </Typography>\n            </Tooltip>\n          </Box>\n          {!loadingUser &&\n          !userError &&\n          currentUser?.userEntityRef !== user.userRef ? (\n            <Box flexShrink={0}>\n              <div\n                onClick={e => e.stopPropagation()}\n                onKeyPress={() => {}}\n                role=\"button\"\n                tabIndex={0}\n              >\n                <UserFollowButton userRef={user.userRef} />\n              </div>\n            </Box>\n          ) : null}\n        </Box>\n        <CardContent\n          className={`${classes.cardContent} ${localClasses.flexColumn}`}\n        >\n          <Grid container spacing={1} className={localClasses.statsGrid}>\n            <Grid item xs={4}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <QuestionAnswerIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalQuestions}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.questions')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={4}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <CheckCircleIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalAnswers}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.answers')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={4}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <ThumbUpIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalVotes}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.votes')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={4}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <DescriptionIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalArticles}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.articles')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={4}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <Visibility fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalViews}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.views')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={4}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <LinkIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalLinks}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.links')}\n                </Typography>\n              </Box>\n            </Grid>\n          </Grid>\n        </CardContent>\n      </Card>\n    </Grid>\n  );\n};\n"],"names":["CheckCircleIcon","ThumbUpIcon"],"mappings":"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"}

package/dist/components/Utility/QetaGridHeader.esm.js

@@ -23,6 +23,7 @@ const QetaGridHeader = ({
         Typography,
         {
           variant: "h6",
+          component: "h2",
           style: { fontWeight: 500, paddingBottom: 2 },
           children: title
         }

package/dist/components/Utility/QetaGridHeader.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"QetaGridHeader.esm.js","sources":["../../../src/components/Utility/QetaGridHeader.tsx"],"sourcesContent":["import { Box, Grid, Typography } from '@material-ui/core';\nimport { SearchBar } from '../SearchBar/SearchBar';\n\nexport type QetaGridHeaderProps = {\n  title: React.ReactNode;\n  searchBarLabel: string;\n  loading: boolean;\n  onSearch: (val: string) => void;\n  buttons?: React.ReactNode;\n};\n\nexport const QetaGridHeader = ({\n  title,\n  searchBarLabel,\n  loading,\n  onSearch,\n  buttons,\n}: QetaGridHeaderProps) => {\n  return (\n    <Box mb={3}>\n      <Grid container alignItems=\"flex-end\" justifyContent=\"space-between\">\n        <Grid item xs={12} md={4}>\n          <SearchBar\n            onSearch={onSearch}\n            label={searchBarLabel}\n            loading={loading}\n          />\n        </Grid>\n      </Grid>\n      <Box mt={2} mb={2}>\n        <Grid container alignItems=\"center\" justifyContent=\"space-between\">\n          <Grid item>\n            {!loading && (\n              <Typography\n                variant=\"h6\"\n                style={{ fontWeight: 500, paddingBottom: 2 }}\n              >\n                {title}\n              </Typography>\n            )}\n          </Grid>\n          {buttons && <Grid item>{buttons}</Grid>}\n        </Grid>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;AAWO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,KAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EACE,uBAAA,IAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,CACP,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,UAAA,EAAW,YAAW,cAAe,EAAA,eAAA,EACnD,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAI,IAAI,CACrB,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,KAAO,EAAA,cAAA;AAAA,QACP;AAAA;AAAA,OAEJ,CACF,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,EAAI,EAAA,CAAA,EACd,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,UAAW,EAAA,QAAA,EAAS,gBAAe,eACjD,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IACP,EAAA,QAAA,EAAA,CAAC,OACA,oBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,KAAO,EAAA,EAAE,UAAY,EAAA,GAAA,EAAK,eAAe,CAAE,EAAA;AAAA,UAE1C,QAAA,EAAA;AAAA;AAAA,OAGP,EAAA,CAAA;AAAA,MACC,OAAW,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,MAAE,QAAQ,EAAA,OAAA,EAAA;AAAA,KAAA,EAClC,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"QetaGridHeader.esm.js","sources":["../../../src/components/Utility/QetaGridHeader.tsx"],"sourcesContent":["import { Box, Grid, Typography } from '@material-ui/core';\nimport { SearchBar } from '../SearchBar/SearchBar';\n\nexport type QetaGridHeaderProps = {\n  title: React.ReactNode;\n  searchBarLabel: string;\n  loading: boolean;\n  onSearch: (val: string) => void;\n  buttons?: React.ReactNode;\n};\n\nexport const QetaGridHeader = ({\n  title,\n  searchBarLabel,\n  loading,\n  onSearch,\n  buttons,\n}: QetaGridHeaderProps) => {\n  return (\n    <Box mb={3}>\n      <Grid container alignItems=\"flex-end\" justifyContent=\"space-between\">\n        <Grid item xs={12} md={4}>\n          <SearchBar\n            onSearch={onSearch}\n            label={searchBarLabel}\n            loading={loading}\n          />\n        </Grid>\n      </Grid>\n      <Box mt={2} mb={2}>\n        <Grid container alignItems=\"center\" justifyContent=\"space-between\">\n          <Grid item>\n            {!loading && (\n              <Typography\n                variant=\"h6\"\n                component=\"h2\"\n                style={{ fontWeight: 500, paddingBottom: 2 }}\n              >\n                {title}\n              </Typography>\n            )}\n          </Grid>\n          {buttons && <Grid item>{buttons}</Grid>}\n        </Grid>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;AAWO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,KAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EACE,uBAAA,IAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,CACP,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,UAAA,EAAW,YAAW,cAAe,EAAA,eAAA,EACnD,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAI,IAAI,CACrB,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,KAAO,EAAA,cAAA;AAAA,QACP;AAAA;AAAA,OAEJ,CACF,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,EAAI,EAAA,CAAA,EACd,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,UAAW,EAAA,QAAA,EAAS,gBAAe,eACjD,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IACP,EAAA,QAAA,EAAA,CAAC,OACA,oBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAU,EAAA,IAAA;AAAA,UACV,KAAO,EAAA,EAAE,UAAY,EAAA,GAAA,EAAK,eAAe,CAAE,EAAA;AAAA,UAE1C,QAAA,EAAA;AAAA;AAAA,OAGP,EAAA,CAAA;AAAA,MACC,OAAW,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,MAAE,QAAQ,EAAA,OAAA,EAAA;AAAA,KAAA,EAClC,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/Utility/VoteButtonContainer.esm.js

@@ -2,13 +2,18 @@ import { jsx } from 'react/jsx-runtime';
 import { makeStyles } from '@material-ui/core';
 
 const useStyles = makeStyles(
-  () => ({
+  (theme) => ({
     root: {
       textAlign: "center",
-      width: "32px",
-      marginLeft: "5px",
-      display: "inline-block",
-      verticalAlign: "top"
+      width: "auto",
+      minWidth: "40px",
+      marginLeft: "0",
+      marginRight: theme.spacing(1),
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      verticalAlign: "top",
+      padding: theme.spacing(0.5)
     }
   }),
   { name: "QetaVoteButtonContainer" }

package/dist/components/Utility/VoteButtonContainer.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"VoteButtonContainer.esm.js","sources":["../../../src/components/Utility/VoteButtonContainer.tsx"],"sourcesContent":["import { makeStyles } from '@material-ui/core';\nimport { ReactNode } from 'react';\n\nconst useStyles = makeStyles(\n  () => ({\n    root: {\n      textAlign: 'center',\n      width: '32px',\n      marginLeft: '5px',\n      display: 'inline-block',\n      verticalAlign: 'top',\n    },\n  }),\n  { name: 'QetaVoteButtonContainer' },\n);\n\nexport const VoteButtonContainer = (props: { children: ReactNode }) => {\n  const styles = useStyles();\n  return <div className={styles.root}>{props.children}</div>;\n};\n"],"names":[],"mappings":";;;AAGA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,OAAO;AAAA,IACL,IAAM,EAAA;AAAA,MACJ,SAAW,EAAA,QAAA;AAAA,MACX,KAAO,EAAA,MAAA;AAAA,MACP,UAAY,EAAA,KAAA;AAAA,MACZ,OAAS,EAAA,cAAA;AAAA,MACT,aAAe,EAAA;AAAA;AACjB,GACF,CAAA;AAAA,EACA,EAAE,MAAM,yBAA0B;AACpC,CAAA;AAEa,MAAA,mBAAA,GAAsB,CAAC,KAAmC,KAAA;AACrE,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,2BAAQ,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAO,gBAAM,QAAS,EAAA,CAAA;AACtD;;;;"}
+{"version":3,"file":"VoteButtonContainer.esm.js","sources":["../../../src/components/Utility/VoteButtonContainer.tsx"],"sourcesContent":["import { makeStyles } from '@material-ui/core';\nimport { ReactNode } from 'react';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      textAlign: 'center',\n      width: 'auto',\n      minWidth: '40px',\n      marginLeft: '0',\n      marginRight: theme.spacing(1),\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      verticalAlign: 'top',\n      padding: theme.spacing(0.5),\n    },\n  }),\n  { name: 'QetaVoteButtonContainer' },\n);\n\nexport const VoteButtonContainer = (props: { children: ReactNode }) => {\n  const styles = useStyles();\n  return <div className={styles.root}>{props.children}</div>;\n};\n"],"names":[],"mappings":";;;AAGA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAU,KAAA,MAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,SAAW,EAAA,QAAA;AAAA,MACX,KAAO,EAAA,MAAA;AAAA,MACP,QAAU,EAAA,MAAA;AAAA,MACV,UAAY,EAAA,GAAA;AAAA,MACZ,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC5B,OAAS,EAAA,MAAA;AAAA,MACT,aAAe,EAAA,QAAA;AAAA,MACf,UAAY,EAAA,QAAA;AAAA,MACZ,aAAe,EAAA,KAAA;AAAA,MACf,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,GAAG;AAAA;AAC5B,GACF,CAAA;AAAA,EACA,EAAE,MAAM,yBAA0B;AACpC,CAAA;AAEa,MAAA,mBAAA,GAAsB,CAAC,KAAmC,KAAA;AACrE,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,2BAAQ,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAO,gBAAM,QAAS,EAAA,CAAA;AACtD;;;;"}