added: theme access fallbacks (#493)

Signed-off-by: Nebojsa Ristic <[email protected]> Co-authored-by: Kurt King <[email protected]>
procore-oss · Dec 6, 2024 · 55a2084 · 55a2084
1 parent e44fb0c
commit 55a2084
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 54 deletions.
diff --git a/.changeset/flat-islands-travel.md b/.changeset/flat-islands-travel.md
@@ -0,0 +1,8 @@
+---
+'@procore-oss/backstage-plugin-announcements': minor
+---
+
+Fixes issues when theme object is empty. To solve this issue fallbacks are provided:
+
+- theme provided from mui useTheme function,
+- if previous fallback is not working hardcoded value is used.
diff --git a/plugins/announcements/src/components/AnnouncementForm/AnnouncementForm.tsx b/plugins/announcements/src/components/AnnouncementForm/AnnouncementForm.tsx
@@ -14,14 +14,19 @@ import Button from '@mui/material/Button';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
+import { useTheme } from '@mui/material/styles';
 
-const useStyles = makeStyles(theme => ({
-  formRoot: {
-    '& > *': {
-      margin: theme.spacing(1),
+const useStyles = makeStyles(theme => {
+  const currentTheme = useTheme();
+
+  return {
+    formRoot: {
+      '& > *': {
+        margin: theme.spacing ?? currentTheme.spacing(1) ?? '8px',
+      },
     },
-  },
-}));
+  };
+});
 
 type AnnouncementFormProps = {
   initialData: Announcement;

diff --git a/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx b/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx
@@ -53,19 +53,26 @@ import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
 import CardContent from '@mui/material/CardContent';
 import Pagination from '@mui/material/Pagination';
+import { useTheme } from '@mui/material/styles';
 
-const useStyles = makeStyles(theme => ({
-  cardHeader: {
-    color: theme.palette.text.primary,
-    fontSize: '1.5rem',
-  },
-  pagination: {
-    display: 'flex',
-    justifyContent: 'center',
-    marginTop: theme.spacing(4),
-  },
-}));
+const useStyles = makeStyles(theme => {
+  const currentTheme = useTheme();
 
+  return {
+    cardHeader: {
+      color:
+        theme?.palette?.text?.primary ||
+        currentTheme?.palette?.text?.primary ||
+        '#000',
+      fontSize: '1.5rem',
+    },
+    pagination: {
+      display: 'flex',
+      justifyContent: 'center',
+      marginTop: theme?.spacing?.(4) || currentTheme?.spacing?.(4) || 32,
+    },
+  };
+});
 /**
  * Truncate text to a given length and add ellipsis
  * @param text the text to truncate

diff --git a/plugins/announcements/src/components/CategoriesForm/CategoriesForm.tsx b/plugins/announcements/src/components/CategoriesForm/CategoriesForm.tsx
@@ -12,14 +12,19 @@ import makeStyles from '@mui/styles/makeStyles';
 import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
 import { usePermission } from '@backstage/plugin-permission-react';
+import { useTheme } from '@mui/material/styles';
 
-const useStyles = makeStyles(theme => ({
-  formRoot: {
-    '& > *': {
-      margin: theme.spacing(1),
+const useStyles = makeStyles(theme => {
+  const currentTheme = useTheme();
+
+  return {
+    formRoot: {
+      '& > *': {
+        margin: theme?.spacing?.(1) ?? currentTheme.spacing(1) ?? '8px',
+      },
     },
-  },
-}));
+  };
+});
 
 export type CategoriesFormProps = {
   initialData: Category;

diff --git a/plugins/announcements/src/components/NewAnnouncementBanner/NewAnnouncementBanner.tsx b/plugins/announcements/src/components/NewAnnouncementBanner/NewAnnouncementBanner.tsx
@@ -20,38 +20,52 @@ import Snackbar from '@mui/material/Snackbar';
 import SnackbarContent from '@mui/material/SnackbarContent';
 import IconButton from '@mui/material/IconButton';
 import Alert from '@mui/material/Alert';
-
-const useStyles = makeStyles(theme => ({
-  // showing on top, as a block
-  blockPositioning: {
-    padding: theme.spacing(0),
-    position: 'relative',
-    marginBottom: theme.spacing(4),
-    marginTop: -theme.spacing(3),
-    zIndex: 'unset',
-  },
-  // showing on top, as a floating alert
-  floatingPositioning: {},
-  icon: {
-    fontSize: 20,
-  },
-  bannerIcon: {
-    fontSize: 20,
-    marginRight: '0.5rem',
-  },
-  content: {
-    width: '100%',
-    maxWidth: 'inherit',
-    flexWrap: 'nowrap',
-    backgroundColor: theme.palette.banner.info,
-    display: 'flex',
-    alignItems: 'center',
-    color: theme.palette.banner.text,
-    '& a': {
-      color: theme.palette.banner.link,
+import { useTheme } from '@mui/material/styles';
+
+const useStyles = makeStyles(theme => {
+  const currentTheme = useTheme();
+
+  return {
+    // showing on top, as a block
+    blockPositioning: {
+      padding: theme?.spacing?.(0) ?? currentTheme.spacing(0) ?? 0,
+      position: 'relative',
+      marginBottom: theme?.spacing?.(4) ?? currentTheme.spacing(4) ?? 32,
+      marginTop: theme?.spacing?.(3) ?? currentTheme.spacing(3) ?? -24,
+      zIndex: 'unset',
+    },
+    // showing on top, as a floating alert
+    floatingPositioning: {},
+    icon: {
+      fontSize: 20,
+    },
+    bannerIcon: {
+      fontSize: 20,
+      marginRight: '0.5rem',
     },
-  },
-}));
+    content: {
+      width: '100%',
+      maxWidth: 'inherit',
+      flexWrap: 'nowrap',
+      backgroundColor:
+        theme?.palette?.banner?.info ??
+        currentTheme.palette?.banner?.info ??
+        '#f0f0f0',
+      display: 'flex',
+      alignItems: 'center',
+      color:
+        theme?.palette?.banner?.text ??
+        currentTheme.palette?.banner?.text ??
+        '#000000',
+      '& a': {
+        color:
+          theme?.palette?.banner?.link ??
+          currentTheme.palette?.banner?.link ??
+          '#0068c8',
+      },
+    },
+  };
+});
 
 type AnnouncementBannerProps = {
   announcement: Announcement;