npm - @drodil/backstage-plugin-qeta-react - Versions diffs - 3.57.0 → 3.58.0 - Mend

@drodil/backstage-plugin-qeta-react 3.57.0 → 3.58.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/dist/components/HomePageCards/FollowedItemsCard.esm.js ADDED Viewed

@@ -0,0 +1,296 @@
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+import { makeStyles, Card, CardHeader, CardContent, Box, List, ListItem, Typography, ListItemText, ListItemAvatar, Avatar } from '@material-ui/core';
+import { Skeleton } from '@material-ui/lab';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
+import { tagRouteRef, userRouteRef, collectionRouteRef, entityRouteRef } from '../../routes.esm.js';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import '../../api.esm.js';
+import 'react-use';
+import '@backstage/plugin-signals-react';
+import '../../hooks/useListItemStyles.esm.js';
+import { useTagsFollow } from '../../hooks/useTagsFollow.esm.js';
+import { useEntityFollow } from '../../hooks/useEntityFollow.esm.js';
+import '@backstage/catalog-model';
+import 'dataloader';
+import { useEntityPresentation } from '@backstage/plugin-catalog-react';
+import { useUserFollow } from '../../hooks/useUserFollow.esm.js';
+import 'react-use/lib/useAsync';
+import { useCollectionsFollow } from '../../hooks/useCollectionsFollow.esm.js';
+import '@backstage/plugin-permission-react';
+import '@drodil/backstage-plugin-qeta-common';
+import '@backstage/plugin-permission-common';
+import { Link } from 'react-router-dom';
+import 'react-use/lib/useDebounce';
+import '../FilterPanel/FilterPanel.esm.js';
+import '../QetaContext/QetaContext.esm.js';
+import { TagTooltip } from '../Tooltips/TagTooltip.esm.js';
+import { EntityTooltip } from '../Tooltips/EntityTooltip.esm.js';
+import { CollectionTooltip } from '../Tooltips/CollectionTooltip.esm.js';
+import { UserTooltip } from '../Tooltips/UserTooltip.esm.js';
+import 'react-relative-time';
+import '@material-ui/icons/ThumbUpOutlined';
+import '@material-ui/icons/VisibilityOutlined';
+import '@material-ui/icons/QuestionAnswerOutlined';
+import '@material-ui/icons/ChatBubbleOutline';
+import '@material-ui/icons/CheckCircleOutline';
+import '../../hooks/useTooltipStyles.esm.js';
+import LocalOfferOutlined from '@material-ui/icons/LocalOfferOutlined';
+import LibraryBooks from '@material-ui/icons/LibraryBooks';
+import CategoryIcon from '@material-ui/icons/Category';
+import NotificationsActive from '@material-ui/icons/NotificationsActive';
+const useStyles = makeStyles((theme) => ({
+  root: {
+    height: "100%",
+    display: "flex",
+    flexDirection: "column"
+  },
+  header: {
+    padding: theme.spacing(2, 2, 1, 2)
+  },
+  content: {
+    padding: theme.spacing(0, 2, 2, 2),
+    flexGrow: 1,
+    overflow: "auto",
+    "&:last-child": {
+      paddingBottom: theme.spacing(2)
+    }
+  },
+  sectionTitle: {
+    color: theme.palette.text.secondary,
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(0.5),
+    fontSize: "0.75rem",
+    fontWeight: 500,
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  },
+  list: {
+    padding: 0
+  },
+  listItem: {
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5)
+  },
+  iconBox: {
+    minWidth: 24,
+    maxWidth: 24,
+    height: 20,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: theme.spacing(1),
+    color: theme.palette.text.secondary
+  },
+  avatar: {
+    width: 20,
+    height: 20,
+    fontSize: "0.65rem"
+  },
+  emptyMessage: {
+    color: theme.palette.text.disabled,
+    fontStyle: "italic",
+    padding: theme.spacing(2, 0),
+    textAlign: "center"
+  },
+  entityText: {
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  }
+}));
+const EntityItem = ({ entityRef }) => {
+  const classes = useStyles();
+  const entityRoute = useRouteRef(entityRouteRef);
+  const { primaryTitle, Icon } = useEntityPresentation(entityRef);
+  return /* @__PURE__ */ jsx(
+    EntityTooltip,
+    {
+      entity: entityRef,
+      interactive: false,
+      enterDelay: 400,
+      enterNextDelay: 400,
+      placement: "left",
+      children: /* @__PURE__ */ jsxs(
+        ListItem,
+        {
+          button: true,
+          component: Link,
+          to: entityRoute({ entityRef }),
+          className: classes.listItem,
+          children: [
+            /* @__PURE__ */ jsx(Box, { className: classes.iconBox, children: Icon ? /* @__PURE__ */ jsx(Icon, { fontSize: "small" }) : /* @__PURE__ */ jsx(CategoryIcon, { style: { fontSize: 14 } }) }),
+            /* @__PURE__ */ jsx(
+              ListItemText,
+              {
+                primary: primaryTitle ?? entityRef,
+                classes: { primary: classes.entityText }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const FollowedItemsCard = () => {
+  const classes = useStyles();
+  const { t } = useTranslationRef(qetaTranslationRef);
+  const { tags, loading: tagsLoading } = useTagsFollow();
+  const { entities, loading: entitiesLoading } = useEntityFollow();
+  const { users, userEntities, loading: usersLoading } = useUserFollow();
+  const { collections, loading: collectionsLoading } = useCollectionsFollow();
+  const tagRoute = useRouteRef(tagRouteRef);
+  const userRoute = useRouteRef(userRouteRef);
+  const collectionRoute = useRouteRef(collectionRouteRef);
+  const isLoading = tagsLoading || entitiesLoading || usersLoading || collectionsLoading;
+  const hasAnyItems = tags.length > 0 || entities.length > 0 || users.length > 0 || collections.length > 0;
+  const renderContent = () => {
+    if (isLoading) {
+      return /* @__PURE__ */ jsx(Box, { children: [1, 2, 3].map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "text",
+            width: "40%",
+            style: { marginTop: 16, marginBottom: 8 }
+          }
+        ),
+        /* @__PURE__ */ jsx(List, { dense: true, children: [1, 2].map((i) => /* @__PURE__ */ jsxs(ListItem, { className: classes.listItem, children: [
+          /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              variant: "circle",
+              width: 20,
+              height: 20,
+              style: { marginRight: 8 }
+            }
+          ),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "60%" })
+        ] }, i)) })
+      ] }, row)) });
+    }
+    if (!hasAnyItems) {
+      return /* @__PURE__ */ jsx(Typography, { className: classes.emptyMessage, children: t("homePage.noFollowedItems") });
+    }
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      tags.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx(Typography, { className: classes.sectionTitle, children: t("homePage.tags") }),
+        /* @__PURE__ */ jsx(List, { className: classes.list, dense: true, children: tags.slice(0, 5).map((tag) => /* @__PURE__ */ jsx(
+          TagTooltip,
+          {
+            tag,
+            interactive: false,
+            enterDelay: 400,
+            enterNextDelay: 400,
+            placement: "left",
+            children: /* @__PURE__ */ jsxs(
+              ListItem,
+              {
+                button: true,
+                component: Link,
+                to: tagRoute({ tag }),
+                className: classes.listItem,
+                children: [
+                  /* @__PURE__ */ jsx(Box, { className: classes.iconBox, children: /* @__PURE__ */ jsx(LocalOfferOutlined, { style: { fontSize: 14 } }) }),
+                  /* @__PURE__ */ jsx(ListItemText, { primary: tag })
+                ]
+              }
+            )
+          },
+          tag
+        )) })
+      ] }),
+      entities.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx(Typography, { className: classes.sectionTitle, children: t("homePage.entities") }),
+        /* @__PURE__ */ jsx(List, { className: classes.list, dense: true, children: entities.slice(0, 5).map((entity) => /* @__PURE__ */ jsx(EntityItem, { entityRef: entity }, entity)) })
+      ] }),
+      users.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx(Typography, { className: classes.sectionTitle, children: t("homePage.users") }),
+        /* @__PURE__ */ jsx(List, { className: classes.list, dense: true, children: users.slice(0, 5).map((user) => {
+          const entity = userEntities.get(user);
+          const displayName = entity?.spec?.profile?.displayName ?? user;
+          const initials = (displayName ?? "").replace(/[^a-zA-Z]/g, "").split(" ").map((p) => p[0]).join("").substring(0, 2).toUpperCase();
+          return /* @__PURE__ */ jsx(
+            UserTooltip,
+            {
+              entityRef: user,
+              interactive: false,
+              enterDelay: 400,
+              enterNextDelay: 400,
+              placement: "left",
+              children: /* @__PURE__ */ jsxs(
+                ListItem,
+                {
+                  button: true,
+                  component: Link,
+                  to: `${userRoute()}/${user}`,
+                  className: classes.listItem,
+                  children: [
+                    /* @__PURE__ */ jsx(ListItemAvatar, { style: { minWidth: 32 }, children: /* @__PURE__ */ jsx(
+                      Avatar,
+                      {
+                        alt: user,
+                        src: entity?.spec?.profile?.picture,
+                        className: classes.avatar,
+                        children: initials || user.charAt(0).toUpperCase()
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(ListItemText, { primary: displayName })
+                  ]
+                }
+              )
+            },
+            user
+          );
+        }) })
+      ] }),
+      collections.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx(Typography, { className: classes.sectionTitle, children: t("homePage.collections") }),
+        /* @__PURE__ */ jsx(List, { className: classes.list, dense: true, children: collections.slice(0, 5).map((collection) => /* @__PURE__ */ jsx(
+          CollectionTooltip,
+          {
+            collectionId: collection.id,
+            interactive: false,
+            enterDelay: 400,
+            enterNextDelay: 400,
+            placement: "left",
+            children: /* @__PURE__ */ jsxs(
+              ListItem,
+              {
+                button: true,
+                component: Link,
+                to: collectionRoute({ id: collection.id.toString() }),
+                className: classes.listItem,
+                children: [
+                  /* @__PURE__ */ jsx(Box, { className: classes.iconBox, children: /* @__PURE__ */ jsx(LibraryBooks, { style: { fontSize: 14 } }) }),
+                  /* @__PURE__ */ jsx(ListItemText, { primary: collection.title })
+                ]
+              }
+            )
+          },
+          collection.id
+        )) })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(Card, { className: classes.root, variant: "outlined", children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        title: t("homePage.followedItems"),
+        className: classes.header,
+        avatar: /* @__PURE__ */ jsx(NotificationsActive, {}),
+        titleTypographyProps: { variant: "h5" }
+      }
+    ),
+    /* @__PURE__ */ jsx(CardContent, { className: classes.content, children: renderContent() })
+  ] });
+};
+export { FollowedItemsCard };
+//# sourceMappingURL=FollowedItemsCard.esm.js.map

package/dist/components/HomePageCards/FollowedItemsCard.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FollowedItemsCard.esm.js","sources":["../../../src/components/HomePageCards/FollowedItemsCard.tsx"],"sourcesContent":["import { Fragment } from 'react';\nimport {\n Box,\n Card,\n CardContent,\n CardHeader,\n List,\n ListItem,\n ListItemText,\n ListItemAvatar,\n Avatar,\n makeStyles,\n Typography,\n} from '@material-ui/core';\nimport { Skeleton } from '@material-ui/lab';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation';\nimport {\n tagRouteRef,\n userRouteRef,\n collectionRouteRef,\n entityRouteRef,\n} from '../../routes';\nimport {\n useTagsFollow,\n useEntityFollow,\n useUserFollow,\n useCollectionsFollow,\n} from '../../hooks';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { Link } from 'react-router-dom';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport {\n EntityTooltip,\n UserTooltip,\n TagTooltip,\n CollectionTooltip,\n} from '../Tooltips';\nimport LocalOfferOutlined from '@material-ui/icons/LocalOfferOutlined';\nimport LibraryBooks from '@material-ui/icons/LibraryBooks';\nimport CategoryIcon from '@material-ui/icons/Category';\nimport NotificationsActive from '@material-ui/icons/NotificationsActive';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n },\n header: {\n padding: theme.spacing(2, 2, 1, 2),\n },\n content: {\n padding: theme.spacing(0, 2, 2, 2),\n flexGrow: 1,\n overflow: 'auto',\n '&:last-child': {\n paddingBottom: theme.spacing(2),\n },\n },\n sectionTitle: {\n color: theme.palette.text.secondary,\n marginTop: theme.spacing(2),\n marginBottom: theme.spacing(0.5),\n fontSize: '0.75rem',\n fontWeight: 500,\n textTransform: 'uppercase',\n letterSpacing: '0.5px',\n },\n list: {\n padding: 0,\n },\n listItem: {\n paddingLeft: 0,\n paddingRight: 0,\n paddingTop: theme.spacing(0.5),\n paddingBottom: theme.spacing(0.5),\n },\n iconBox: {\n minWidth: 24,\n maxWidth: 24,\n height: 20,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginRight: theme.spacing(1),\n color: theme.palette.text.secondary,\n },\n avatar: {\n width: 20,\n height: 20,\n fontSize: '0.65rem',\n },\n emptyMessage: {\n color: theme.palette.text.disabled,\n fontStyle: 'italic',\n padding: theme.spacing(2, 0),\n textAlign: 'center',\n },\n entityText: {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n },\n}));\n\nconst EntityItem = ({ entityRef }: { entityRef: string }) => {\n const classes = useStyles();\n const entityRoute = useRouteRef(entityRouteRef);\n const { primaryTitle, Icon } = useEntityPresentation(entityRef);\n\n return (\n <EntityTooltip\n entity={entityRef}\n interactive={false}\n enterDelay={400}\n enterNextDelay={400}\n placement=\"left\"\n >\n <ListItem\n button\n component={Link}\n to={entityRoute({ entityRef })}\n className={classes.listItem}\n >\n <Box className={classes.iconBox}>\n {Icon ? (\n <Icon fontSize=\"small\" />\n ) : (\n <CategoryIcon style={{ fontSize: 14 }} />\n )}\n </Box>\n <ListItemText\n primary={primaryTitle ?? entityRef}\n classes={{ primary: classes.entityText }}\n />\n </ListItem>\n </EntityTooltip>\n );\n};\n\nexport const FollowedItemsCard = () => {\n const classes = useStyles();\n const { t } = useTranslationRef(qetaTranslationRef);\n\n const { tags, loading: tagsLoading } = useTagsFollow();\n const { entities, loading: entitiesLoading } = useEntityFollow();\n const { users, userEntities, loading: usersLoading } = useUserFollow();\n const { collections, loading: collectionsLoading } = useCollectionsFollow();\n\n const tagRoute = useRouteRef(tagRouteRef);\n const userRoute = useRouteRef(userRouteRef);\n const collectionRoute = useRouteRef(collectionRouteRef);\n\n const isLoading =\n tagsLoading || entitiesLoading || usersLoading || collectionsLoading;\n\n const hasAnyItems =\n tags.length > 0 ||\n entities.length > 0 ||\n users.length > 0 ||\n collections.length > 0;\n\n const renderContent = () => {\n if (isLoading) {\n return (\n <Box>\n {[1, 2, 3].map(row => (\n <Fragment key={row}>\n <Skeleton\n variant=\"text\"\n width=\"40%\"\n style={{ marginTop: 16, marginBottom: 8 }}\n />\n <List dense>\n {[1, 2].map(i => (\n <ListItem key={i} className={classes.listItem}>\n <Skeleton\n variant=\"circle\"\n width={20}\n height={20}\n style={{ marginRight: 8 }}\n />\n <Skeleton variant=\"text\" width=\"60%\" />\n </ListItem>\n ))}\n </List>\n </Fragment>\n ))}\n </Box>\n );\n }\n\n if (!hasAnyItems) {\n return (\n <Typography className={classes.emptyMessage}>\n {t('homePage.noFollowedItems')}\n </Typography>\n );\n }\n\n return (\n <>\n {tags.length > 0 && (\n <>\n <Typography className={classes.sectionTitle}>\n {t('homePage.tags')}\n </Typography>\n <List className={classes.list} dense>\n {tags.slice(0, 5).map(tag => (\n <TagTooltip\n key={tag}\n tag={tag}\n interactive={false}\n enterDelay={400}\n enterNextDelay={400}\n placement=\"left\"\n >\n <ListItem\n button\n component={Link}\n to={tagRoute({ tag })}\n className={classes.listItem}\n >\n <Box className={classes.iconBox}>\n <LocalOfferOutlined style={{ fontSize: 14 }} />\n </Box>\n <ListItemText primary={tag} />\n </ListItem>\n </TagTooltip>\n ))}\n </List>\n </>\n )}\n\n {entities.length > 0 && (\n <>\n <Typography className={classes.sectionTitle}>\n {t('homePage.entities')}\n </Typography>\n <List className={classes.list} dense>\n {entities.slice(0, 5).map(entity => (\n <EntityItem key={entity} entityRef={entity} />\n ))}\n </List>\n </>\n )}\n\n {users.length > 0 && (\n <>\n <Typography className={classes.sectionTitle}>\n {t('homePage.users')}\n </Typography>\n <List className={classes.list} dense>\n {users.slice(0, 5).map(user => {\n const entity = userEntities.get(user);\n const displayName = entity?.spec?.profile?.displayName ?? user;\n const initials = (displayName ?? '')\n .replace(/[^a-zA-Z]/g, '')\n .split(' ')\n .map(p => p[0])\n .join('')\n .substring(0, 2)\n .toUpperCase();\n return (\n <UserTooltip\n key={user}\n entityRef={user}\n interactive={false}\n enterDelay={400}\n enterNextDelay={400}\n placement=\"left\"\n >\n <ListItem\n button\n component={Link}\n to={`${userRoute()}/${user}`}\n className={classes.listItem}\n >\n <ListItemAvatar style={{ minWidth: 32 }}>\n <Avatar\n alt={user}\n src={entity?.spec?.profile?.picture}\n className={classes.avatar}\n >\n {initials || user.charAt(0).toUpperCase()}\n </Avatar>\n </ListItemAvatar>\n <ListItemText primary={displayName} />\n </ListItem>\n </UserTooltip>\n );\n })}\n </List>\n </>\n )}\n\n {collections.length > 0 && (\n <>\n <Typography className={classes.sectionTitle}>\n {t('homePage.collections')}\n </Typography>\n <List className={classes.list} dense>\n {collections.slice(0, 5).map(collection => (\n <CollectionTooltip\n key={collection.id}\n collectionId={collection.id}\n interactive={false}\n enterDelay={400}\n enterNextDelay={400}\n placement=\"left\"\n >\n <ListItem\n button\n component={Link}\n to={collectionRoute({ id: collection.id.toString() })}\n className={classes.listItem}\n >\n <Box className={classes.iconBox}>\n <LibraryBooks style={{ fontSize: 14 }} />\n </Box>\n <ListItemText primary={collection.title} />\n </ListItem>\n </CollectionTooltip>\n ))}\n </List>\n </>\n )}\n </>\n );\n };\n\n return (\n <Card className={classes.root} variant=\"outlined\">\n <CardHeader\n title={t('homePage.followedItems')}\n className={classes.header}\n avatar={<NotificationsActive />}\n titleTypographyProps={{ variant: 'h5' }}\n />\n <CardContent className={classes.content}>{renderContent()}</CardContent>\n </Card>\n );\n};\n"],"names":["Fragment"],"mappings":"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"}

package/dist/components/HomePageCards/ImpactCard.esm.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import numeral from 'numeral';
 import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
 import 'react';
@@ -15,7 +15,7 @@ import { useIdentityApi } from '../../hooks/useIdentityApi.esm.js';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
-import { useTheme, Box, Card, CardContent, Divider, Grid, Typography, Tooltip } from '@material-ui/core';
+import { makeStyles, Card, CardHeader, CardContent, Box, Grid, Typography, Tooltip } from '@material-ui/core';
 import 'react-router-dom';
 import 'react-use/lib/useDebounce';
 import '../FilterPanel/FilterPanel.esm.js';
@@ -31,10 +31,88 @@ import LinkIcon from '@material-ui/icons/Link';
 import StarIcon from '@material-ui/icons/Star';
 import CheckCircle from '@material-ui/icons/CheckCircle';
 import TrendingUp from '@material-ui/icons/TrendingUp';
+import Visibility from '@material-ui/icons/Visibility';
+const useStyles = makeStyles((theme) => ({
+  card: {
+    height: "100%"
+  },
+  header: {
+    paddingBottom: 0
+  },
+  content: {
+    paddingTop: theme.spacing(1)
+  },
+  heroSection: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: theme.spacing(1, 0),
+    marginBottom: theme.spacing(1.5)
+  },
+  viewsBox: {
+    display: "flex",
+    alignItems: "baseline"
+  },
+  viewsValue: {
+    fontSize: "2rem",
+    fontWeight: "bold",
+    color: theme.palette.primary.main,
+    lineHeight: 1
+  },
+  viewsLabel: {
+    marginLeft: theme.spacing(0.5),
+    color: theme.palette.text.secondary,
+    fontSize: "0.9rem"
+  },
+  reputationBox: {
+    display: "flex",
+    alignItems: "center",
+    background: theme.palette.type === "dark" ? "rgba(255, 215, 0, 0.1)" : "rgba(255, 215, 0, 0.15)",
+    padding: theme.spacing(0.75, 1.5),
+    borderRadius: 20
+  },
+  reputationIcon: {
+    color: "#FFD700",
+    marginRight: theme.spacing(0.5),
+    fontSize: "1.2rem"
+  },
+  reputationValue: {
+    fontWeight: "bold",
+    fontSize: "1rem",
+    userSelect: "none"
+  },
+  statGrid: {
+    marginTop: theme.spacing(0.5)
+  },
+  statItem: {
+    display: "flex",
+    alignItems: "center",
+    padding: theme.spacing(0.5, 0)
+  },
+  statIcon: {
+    color: theme.palette.text.secondary,
+    marginRight: theme.spacing(1),
+    fontSize: "1rem"
+  },
+  statValue: {
+    fontWeight: "bold",
+    marginRight: theme.spacing(0.5),
+    minWidth: 24
+  },
+  statLabel: {
+    color: theme.palette.text.secondary,
+    fontSize: "0.8rem"
+  },
+  contributionsText: {
+    color: theme.palette.text.secondary,
+    marginBottom: theme.spacing(1),
+    fontSize: "0.875rem"
+  }
+}));
 const ImpactCard = () => {
   const { t } = useTranslationRef(qetaTranslationRef);
-  const theme = useTheme();
+  const classes = useStyles();
   const { value: user, loading: userLoading } = useIdentityApi(
     (api) => api.getBackstageIdentity(),
     []
@@ -59,14 +137,20 @@ const ImpactCard = () => {
   const loading = userLoading || statsLoading;
   const renderContent = () => {
     if (loading) {
-      return /* @__PURE__ */ jsxs(Box, { p: 2, children: [
-        /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "60%", height: 32 }),
-        /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "40%", height: 48 }),
-        /* @__PURE__ */ jsx(Box, { mt: 2, children: /* @__PURE__ */ jsx(Divider, {}) }),
-        /* @__PURE__ */ jsx(Box, { mt: 2, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: Array.from(new Array(4)).map((_, i) => /* @__PURE__ */ jsxs(Grid, { item: true, xs: 6, children: [
-          /* @__PURE__ */ jsx(Skeleton, { variant: "circle", width: 24, height: 24 }),
-          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "80%" })
-        ] }, i)) }) })
+      return /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", mb: 2, children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "40%", height: 40 }),
+          /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              variant: "rect",
+              width: 80,
+              height: 32,
+              style: { borderRadius: 16 }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1, children: Array.from(new Array(6)).map((_, i) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "80%" }) }, i)) })
       ] });
     }
     if (error) {
@@ -77,143 +161,88 @@ const ImpactCard = () => {
     }
     const { impact, stats } = response;
     const formatNumber = (num) => {
-      return num >= 1e3 ? numeral(num).format("0.0 a") : num;
+      return num >= 1e3 ? numeral(num).format("0.0a") : num;
     };
-    const formattedImpact = formatNumber(impact.impact);
-    const totalContributions = stats.summary.totalQuestions + stats.summary.totalAnswers + stats.summary.totalArticles + stats.summary.totalLinks;
     const statItems = [
       {
-        icon: /* @__PURE__ */ jsx(TrendingUp, { fontSize: "small" }),
-        value: formatNumber(totalContributions),
+        icon: TrendingUp,
+        value: stats.summary.totalQuestions + stats.summary.totalAnswers + stats.summary.totalArticles + stats.summary.totalLinks,
         label: t("impactCard.totalContributions")
       },
       {
-        icon: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small" }),
-        value: formatNumber(stats.summary.totalQuestions),
+        icon: HelpOutline,
+        value: stats.summary.totalQuestions,
         label: t("impactCard.questions")
       },
       {
-        icon: /* @__PURE__ */ jsx(QuestionAnswerIcon, { fontSize: "small" }),
-        value: formatNumber(stats.summary.totalAnswers),
+        icon: QuestionAnswerIcon,
+        value: stats.summary.totalAnswers,
         label: t("impactCard.answers")
       },
       {
-        icon: /* @__PURE__ */ jsx(DescriptionIcon, { fontSize: "small" }),
-        value: formatNumber(stats.summary.totalArticles),
+        icon: DescriptionIcon,
+        value: stats.summary.totalArticles,
         label: t("impactCard.articles")
       },
       {
-        icon: /* @__PURE__ */ jsx(LinkIcon, { fontSize: "small" }),
-        value: formatNumber(stats.summary.totalLinks),
+        icon: LinkIcon,
+        value: stats.summary.totalLinks,
         label: t("impactCard.links")
       },
       {
-        icon: /* @__PURE__ */ jsx(ThumbUp, { fontSize: "small" }),
-        value: formatNumber(stats.summary.totalVotes),
+        icon: ThumbUp,
+        value: stats.summary.totalVotes,
         label: t("impactCard.votes")
       },
       {
-        icon: /* @__PURE__ */ jsx(PeopleIcon, { fontSize: "small" }),
-        value: formatNumber(stats.summary.totalFollowers),
+        icon: PeopleIcon,
+        value: stats.summary.totalFollowers,
         label: t("impactCard.followers")
       },
       {
-        icon: /* @__PURE__ */ jsx(StarIcon, { fontSize: "small" }),
-        value: formatNumber(stats.summary.answerScore),
-        label: t("impactCard.answerScore")
-      },
-      {
-        icon: /* @__PURE__ */ jsx(StarIcon, { fontSize: "small" }),
-        value: formatNumber(stats.summary.postScore),
+        icon: StarIcon,
+        value: stats.summary.postScore,
         label: t("impactCard.postScore")
       },
       {
-        icon: /* @__PURE__ */ jsx(CheckCircle, { fontSize: "small" }),
-        value: formatNumber(stats.summary.correctAnswers),
+        icon: CheckCircle,
+        value: stats.summary.correctAnswers,
         label: t("impactCard.correctAnswers")
       }
     ];
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h2", gutterBottom: true, children: t("impactCard.title") }),
-      /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", mb: 1, children: [
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "body1",
-            "aria-label": `${formattedImpact} views`,
-            style: { fontWeight: "bold", marginBottom: 0, fontSize: "32px" },
-            children: formattedImpact
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "body2",
-            component: "span",
-            style: { marginLeft: "0.5em", verticalAlign: "middle" },
-            color: "textSecondary",
-            children: t("impactCard.views")
-          }
-        )
+      /* @__PURE__ */ jsxs(Box, { className: classes.heroSection, children: [
+        /* @__PURE__ */ jsxs(Box, { className: classes.viewsBox, children: [
+          /* @__PURE__ */ jsx(Typography, { className: classes.viewsValue, children: formatNumber(impact.impact) }),
+          /* @__PURE__ */ jsx(Typography, { className: classes.viewsLabel, children: t("impactCard.views") })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { className: classes.reputationBox, children: [
+          /* @__PURE__ */ jsx(EmojiEvents, { className: classes.reputationIcon }),
+          /* @__PURE__ */ jsx(Typography, { className: classes.reputationValue, children: stats.summary.reputation || 0 })
+        ] })
       ] }),
-      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", paragraph: true, children: t("impactCard.contributions", {
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.contributionsText, children: t("impactCard.contributions", {
         lastWeek: impact.lastWeekImpact.toString(10)
       }) }),
-      /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", mt: 2, mb: 2, children: [
-        /* @__PURE__ */ jsx(
-          EmojiEvents,
-          {
-            style: { color: theme.palette.secondary.main, marginRight: "8px" }
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          Typography,
-          {
-            variant: "subtitle1",
-            component: "span",
-            style: { fontWeight: "bold" },
-            children: [
-              t("impactCard.reputation"),
-              ":",
-              " ",
-              /* @__PURE__ */ jsx(Box, { component: "span", style: { fontSize: "1.1em" }, children: stats.summary.reputation || 0 })
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(Divider, {}),
-      /* @__PURE__ */ jsx(Box, { mt: 2, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: statItems.map((item, index) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, sm: 4, md: 3, children: /* @__PURE__ */ jsx(Tooltip, { title: item.label, children: /* @__PURE__ */ jsxs(
-        Box,
-        {
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          style: { cursor: "default" },
-          children: [
-            /* @__PURE__ */ jsx(Box, { color: "textSecondary", children: item.icon }),
-            /* @__PURE__ */ jsx(
-              Typography,
-              {
-                variant: "body2",
-                style: { fontWeight: "bold", marginTop: "4px" },
-                children: item.value
-              }
-            )
-          ]
-        }
-      ) }) }, index)) }) })
+      /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1, className: classes.statGrid, children: statItems.map((item, index) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, sm: 4, children: /* @__PURE__ */ jsx(Tooltip, { title: item.label, children: /* @__PURE__ */ jsxs(Box, { className: classes.statItem, children: [
+        /* @__PURE__ */ jsx(item.icon, { className: classes.statIcon }),
+        /* @__PURE__ */ jsx(Typography, { className: classes.statValue, children: formatNumber(item.value) }),
+        /* @__PURE__ */ jsx(Typography, { className: classes.statLabel, noWrap: true, children: item.label })
+      ] }) }) }, index)) })
     ] });
   };
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      display: { md: "none", lg: "block" },
-      style: { marginBottom: "1em" },
-      role: "region",
-      "aria-label": t("impactCard.title"),
-      children: /* @__PURE__ */ jsx(Card, { elevation: 2, children: /* @__PURE__ */ jsx(CardContent, { children: renderContent() }) })
-    }
-  );
+  return /* @__PURE__ */ jsxs(Card, { className: classes.card, variant: "outlined", children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        title: t("impactCard.title"),
+        className: classes.header,
+        avatar: /* @__PURE__ */ jsx(Visibility, {}),
+        titleTypographyProps: { variant: "h5" }
+      }
+    ),
+    /* @__PURE__ */ jsx(CardContent, { className: classes.content, children: renderContent() })
+  ] });
 };
 export { ImpactCard };