Updated version check components and strings.

components/common/UpdateNotice.js

@@ -1,36 +1,41 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import useVersion from '../../hooks/useVersion';
-import Link from '../common/Link';
+import semver from 'semver';
+import useVersion from 'hooks/useVersion';
 import styles from './UpdateNotice.module.css';
+import ButtonLayout from '../layout/ButtonLayout';
+import Button from './Button';
 
 export default function UpdateNotice() {
   const versions = useVersion();
-  console.log(versions);
-  if (!versions) return null;
+
+  if (!versions) {
+    return null;
+  }
 
   const { current, latest } = versions;
 
+  if (latest && semver.gte(current, latest)) {
+    return null;
+  }
+
   return (
-    <div className={styles.wrapper}>
-      <div className={styles.heading}>
+    <div className={styles.notice}>
+      <div className={styles.message}>
         <FormattedMessage
           id="message.new-version-available"
-          default="Version {latest} available! Current version: {current}"
-          values={{
-            latest: latest,
-            current: current,
-          }}
+          defaultMessage="A new version of umami {version} is available!"
+          values={{ version: `v${latest}` }}
         />
       </div>
-      <Link href="https://github.com/mikecao/umami" size="xsmall">
-        <div className={styles.message}>
-          <FormattedMessage
-            id="message.visit-github-update"
-            default="Click here to visit umami on github for instructions"
-          />
-        </div>
-      </Link>
+      <ButtonLayout>
+        <Button size="xsmall" variant="action">
+          <FormattedMessage id="button.view-details" defaultMessage="View details" />
+        </Button>
+        <Button size="xsmall">
+          <FormattedMessage id="button.dismiss" defaultMessage="Dismiss" />
+        </Button>
+      </ButtonLayout>
     </div>
   );
 }