Fix update notice.

components/common/UpdateNotice.js

@@ -1,13 +1,14 @@
 import { useState, useEffect, useCallback } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { useIntl } from 'react-intl';
+import { Button, Banner, Row, Column, Flexbox } from 'react-basics';
 import { setItem } from 'next-basics';
-import ButtonLayout from 'components/layout/ButtonLayout';
 import useStore, { checkVersion } from 'store/version';
 import { REPO_URL, VERSION_CHECK } from 'lib/constants';
-import { Button } from 'react-basics';
+import { labels, messages } from 'components/messages';
 import styles from './UpdateNotice.module.css';
 
 export default function UpdateNotice() {
+  const { formatMessage } = useIntl();
   const { latest, checked, hasUpdate, releaseUrl } = useStore();
   const [dismissed, setDismissed] = useState(false);
 
@@ -37,22 +38,16 @@ export default function UpdateNotice() {
   }
 
   return (
-    <div className={styles.notice}>
-      <div className={styles.message}>
-        <FormattedMessage
-          id="message.new-version-available"
-          defaultMessage="A new version of umami {version} is available!"
-          values={{ version: `v${latest}` }}
-        />
-      </div>
-      <ButtonLayout className={styles.buttons}>
-        <Button size="xsmall" variant="action" onClick={handleViewClick}>
-          <FormattedMessage id="label.view-details" defaultMessage="View details" />
+    <Row className={styles.notice}>
+      <Column variant="two" className={styles.message}>
+        {formatMessage(messages.newVersionAvailable, { version: `v${latest}` })}
+      </Column>
+      <Column className={styles.buttons}>
+        <Button variant="primary" onClick={handleViewClick}>
+          {formatMessage(labels.viewDetails)}
         </Button>
-        <Button size="xsmall" onClick={handleDismissClick}>
-          <FormattedMessage id="label.dismiss" defaultMessage="Dismiss" />
-        </Button>
-      </ButtonLayout>
-    </div>
+        <Button onClick={handleDismissClick}>{formatMessage(labels.dismiss)}</Button>
+      </Column>
+    </Row>
   );
 }