diff --git a/client/src/components/design-elements/BulletPointCheck.tsx b/client/src/components/design-elements/BulletPointCheck.tsx index 4ae6c598a..9a198d025 100644 --- a/client/src/components/design-elements/BulletPointCheck.tsx +++ b/client/src/components/design-elements/BulletPointCheck.tsx @@ -19,12 +19,7 @@ export const BulletPointCheck = ({ }; return ( - + {text} diff --git a/client/src/components/design-elements/Fallback.tsx b/client/src/components/design-elements/Fallback.tsx index 54c738583..0f5226352 100644 --- a/client/src/components/design-elements/Fallback.tsx +++ b/client/src/components/design-elements/Fallback.tsx @@ -8,8 +8,9 @@ import { Button } from "@/components/inputs"; import { useNavigate } from "react-router"; import useMediaQuery from "@mui/material/useMediaQuery"; import { useTheme } from "@mui/material/styles"; -import type { BoxProps } from "@mui/material"; -interface BaseFallbackProps extends BoxProps { +import type { StackProps } from "@mui/material/Stack"; + +interface BaseFallbackProps extends StackProps { children: React.ReactNode; } @@ -21,7 +22,8 @@ export const BaseFallback: React.FC = ({ const isSmall = useMediaQuery(theme.breakpoints.down("md")); return ( - = ({ lg: "50%", xl: "40%", }} - padding={theme.spacing(16)} + padding={{ xs: theme.spacing(4), md: theme.spacing(16) }} bgcolor={theme.palette.primary.main} - position="relative" border={1} borderColor={theme.palette.primary.lowContrast} borderRadius={theme.shape.borderRadius} - overflow="hidden" sx={{ borderStyle: "dashed", }} {...props} > - - - - - - - - {children} - - + + - + {children} + ); }; diff --git a/client/src/components/design-elements/SkeletonCard.tsx b/client/src/components/design-elements/SkeletonCard.tsx index 2dfe86aa5..70aebbaf1 100644 --- a/client/src/components/design-elements/SkeletonCard.tsx +++ b/client/src/components/design-elements/SkeletonCard.tsx @@ -12,7 +12,7 @@ interface SkeletonCardProps { * Default size is 60% of original design */ const SkeletonCard: React.FC = ({ - width = 216, + width = "100%", showHalo = true, }) => { const theme = useTheme(); diff --git a/client/src/locales/en.json b/client/src/locales/en.json index 5ce5f261a..557f086a8 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -789,7 +789,7 @@ "packetsSent": "Packets Sent", "pageSpeedMonitor": { "fallback": { - "actionButton": "Let's create your first PageSpeed monitor!", + "actionButton": "Create a PageSpeed monitor!", "checks": [ "Report on the user experience of a page", "Help analyze webpage speed", diff --git a/client/src/pages/pagespeed/PageSpeedMonitors.tsx b/client/src/pages/pagespeed/PageSpeedMonitors.tsx index 66d931f17..69cc160f7 100644 --- a/client/src/pages/pagespeed/PageSpeedMonitors.tsx +++ b/client/src/pages/pagespeed/PageSpeedMonitors.tsx @@ -77,7 +77,7 @@ const PageSpeedMonitorsPage = () => { return (