Update several packages

apps/blifrivillig/components/BlurImage.js

@@ -1,39 +1,39 @@
-import React, {useState} from 'react'
-import Image from 'next/image'
-
-import styles from '../styles/BlurImage.module.css'
-
-export default function BlurImage(props) {
-    const [loading, setLoading] = useState(true);
-    const imageId = props.imageId;
-    const data = {...props};
-    delete data.imageId;
-    const base64 = props.base64;
-    if(base64) {
-        return (
-            <Image
-            src={`https://cms.kvarteret.no/assets/${imageId}`}
-            blurDataURL={base64}
-            placeholder="blur"
-            {...data}
-            />
-        )
-    }
-
-    return (
-        <div>
-            <Image
-                src={`https://cms.kvarteret.no/assets/${imageId}`}
-                onLoadingComplete={() => setLoading(false)}
-                {...data}
-                />
-            <div className={loading ? styles.loading : styles.loadingComplete }>
-                <Image
-                    src={`https://cms.kvarteret.no/assets/${imageId}?width=5&height=5&transforms=[["blur",%205]]`}
-
-                    {...data}
-                    />
-            </div>
-        </div>
-    )
+import React, {useState} from 'react'
+import Image from 'next/image'
+
+import styles from '../styles/BlurImage.module.css'
+
+export default function BlurImage(props) {
+    const [loading, setLoading] = useState(true);
+    const imageId = props.imageId;
+    const data = {...props};
+    delete data.imageId;
+    const base64 = props.base64;
+    if(base64) {
+        return (
+            <Image
+            src={`https://cms.kvarteret.no/assets/${imageId}`}
+            blurDataURL={base64}
+            placeholder="blur"
+            {...data}
+            />
+        )
+    }
+
+    return (
+        <div>
+            <Image
+                src={`https://cms.kvarteret.no/assets/${imageId}`}
+                onLoadingComplete={() => setLoading(false)}
+                {...data}
+                />
+            <div className={loading ? styles.loading : styles.loadingComplete }>
+                <Image
+                    src={`https://cms.kvarteret.no/assets/${imageId}?width=5&height=5&transforms=[["blur",%205]]`}
+
+                    {...data}
+                    />
+            </div>
+        </div>
+    )
 }

apps/blifrivillig/components/DangerousSetHtmlContent.js

@@ -1,18 +1,18 @@
-import React, { useEffect, useRef } from 'react'
-
-function DangerouslySetHtmlContent(props) {
-  const { html, ...rest } = props
-  const divRef = useRef(null)
-
-  useEffect(() => {
-    if (!html) return
-
-    const slotHtml = document.createRange().createContextualFragment(html) // Create a 'tiny' document and parse the html string
-    divRef.current.innerHTML = '' // Clear the container
-    divRef.current.appendChild(slotHtml) // Append the new content
-  }, [html])
-
-  return <div {...rest} ref={divRef}></div>
-}
-
+import React, { useEffect, useRef } from 'react'
+
+function DangerouslySetHtmlContent(props) {
+  const { html, ...rest } = props
+  const divRef = useRef(null)
+
+  useEffect(() => {
+    if (!html) return
+
+    const slotHtml = document.createRange().createContextualFragment(html) // Create a 'tiny' document and parse the html string
+    divRef.current.innerHTML = '' // Clear the container
+    divRef.current.appendChild(slotHtml) // Append the new content
+  }, [html])
+
+  return <div {...rest} ref={divRef}></div>
+}
+
 export default DangerouslySetHtmlContent

apps/blifrivillig/components/ExternalContent.js

@@ -1,32 +1,32 @@
-import { withStyles } from '@material-ui/styles'
-import React from 'react'
-import DangerouslySetHtmlContent from './DangerousSetHtmlContent'
-
-const styles = (theme) => {
-  return {
-    root: {
-      '& h1': {
-        color: theme.palette.primary.main,
-        ...theme.typography.h1,
-      },
-      '& h2': {
-        color: theme.palette.primary.main,
-        ...theme.typography.h2,
-      },
-      '& h3': {
-        color: theme.palette.primary.main,
-        ...theme.typography.h3,
-      },
-    },
-  }
-}
-const ExternalContent = withStyles(styles)((props) => {
-  return (
-    <DangerouslySetHtmlContent
-      className={props.classes.root}
-      html={props.data}
-    />
-  )
-})
-
-export default ExternalContent
+import { withStyles } from "@mui/styles";
+import React from "react";
+import DangerouslySetHtmlContent from "./DangerousSetHtmlContent";
+
+const styles = (theme) => {
+  return {
+    root: {
+      "& h1": {
+        color: theme.palette.primary.main,
+        ...theme.typography.h1,
+      },
+      "& h2": {
+        color: theme.palette.primary.main,
+        ...theme.typography.h2,
+      },
+      "& h3": {
+        color: theme.palette.primary.main,
+        ...theme.typography.h3,
+      },
+    },
+  };
+};
+const ExternalContent = withStyles(styles)((props) => {
+  return (
+    <DangerouslySetHtmlContent
+      className={props.classes.root}
+      html={props.data}
+    />
+  );
+});
+
+export default ExternalContent;

apps/blifrivillig/components/FAQSection.js

@@ -1,36 +1,36 @@
-import React from 'react'
-import TranslatedField from './TranslatedField'
-import ExternalContent from './ExternalContent'
-import { Box, Container, Grid, Typography } from '@material-ui/core'
-
-export const FAQuestion = ({ title, text }) => {
-  return (
-    <div>
-      <Typography variant="h3" component="h3" color="primary">
-            {title}
-      </Typography>
-        <ExternalContent data={text} />
-    </div>
-  )
-}
-
-const FAQSection = ({ faq }) => {
-  const faqQuestions = faq.map((item, key) => (
-    <Grid item key={key}>
-      <FAQuestion title={item.title} text={item.text}></FAQuestion>
-    </Grid>
-  ))
-
-  return (
-    <Grid container direction="column" spacing={4}>
-      <Grid item>
-        <Typography variant="h1" component="h1" color="primary">
-            <TranslatedField tKey="blifrivillig-faq" />
-        </Typography>
-      </Grid>
-      {faqQuestions}
-    </Grid>
-  )
-}
-
-export default FAQSection
+import React from "react";
+import TranslatedField from "./TranslatedField";
+import ExternalContent from "./ExternalContent";
+import { Box, Container, Grid, Typography } from "@mui/material";
+
+export const FAQuestion = ({ title, text }) => {
+  return (
+    <div>
+      <Typography variant="h3" component="h3" color="primary">
+        {title}
+      </Typography>
+      <ExternalContent data={text} />
+    </div>
+  );
+};
+
+const FAQSection = ({ faq }) => {
+  const faqQuestions = faq.map((item, key) => (
+    <Grid item key={key}>
+      <FAQuestion title={item.title} text={item.text}></FAQuestion>
+    </Grid>
+  ));
+
+  return (
+    <Grid container direction="column" spacing={4}>
+      <Grid item>
+        <Typography variant="h1" component="h1" color="primary">
+          <TranslatedField tKey="blifrivillig-faq" />
+        </Typography>
+      </Grid>
+      {faqQuestions}
+    </Grid>
+  );
+};
+
+export default FAQSection;