fix(web-ui): improve styling for blog error view (#827)

Co-authored-by: Johan Book <{ID}+{username}@users.noreply.github.com>

Author: johanbook

services/web-ui/public/locales/en/blog.json

@@ -22,6 +22,7 @@
   "comments": {
     "placeholder": "Leave a comment"
   },
+  "error": "Unable to fetch blog posts",
   "form": {
     "placeholder": "Perhaps say something about your day"
   },

services/web-ui/public/locales/sv/blog.json

@@ -22,6 +22,7 @@
   "comments": {
     "placeholder": "Lämna en kommentar"
   },
+  "error": "Kunde inte hämta blogposter",
   "form": {
     "placeholder": "Säg något om din dag"
   },

services/web-ui/src/features/blogs/pages/BlogPostListPage/BlogPostListPage.container.tsx

@@ -3,11 +3,11 @@ import { ReactElement } from "react";
 import { Box, Typography } from "@mui/material";
 
 import { blogsApi } from "src/apis";
-import { ErrorMessage } from "src/components/ui/ErrorMessage";
 import { useTranslation } from "src/core/i18n";
 import { InteractionObserver } from "src/core/infinite-scroll";
 import { CacheKeysConstants, useInfiniteQuery } from "src/core/query";
 import { useMetaData } from "src/hooks/useMetaData";
+import { ErrorView } from "src/views/ErrorView";
 
 import { BlogPostForm } from "../../components/BlogPostForm";
 import { BlogPostPageComponent } from "./BlogPostListPage.component";
@@ -42,7 +42,7 @@ export function BlogPostListPageContainer(): ReactElement {
   if (error) {
     return (
       <BlogPostListPageNav>
-        <ErrorMessage error={error} />
+        <ErrorView message={t("error")} />
       </BlogPostListPageNav>
     );
   }

services/web-ui/src/views/ErrorView/ErrorView.tsx

@@ -5,12 +5,12 @@ import { Box, Typography } from "@mui/material";
 
 interface ErrorViewProps {
   description?: string;
-  message?: string;
+  message?: string | null;
 }
 
 export function ErrorView({
   description,
-  message="Un unexpected error occured",
+  message = "Un unexpected error occured",
 }: ErrorViewProps): ReactElement {
   return (
     <Box