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>
   );
 }

components/common/UpdateNotice.module.css

@@ -1,15 +1,13 @@
-.wrapper {
-  width: 100%;
+.notice {
   display: flex;
-  flex-wrap: wrap;
   justify-content: center;
-  font-size: var(--font-size-xsmall);
-}
-.heading {
+  align-items: center;
+  padding-top: 10px;
+  font-size: var(--font-size-small);
   font-weight: 600;
-  margin: auto 10px;
 }
-.message,
-.heading {
-  display: inline-block;
+
+.message {
+  text-align: center;
+  margin-right: 20px;
 }

components/layout/Header.js

@@ -16,7 +16,7 @@ export default function Header() {
 
   return (
     <header className="container">
-      {user && <UpdateNotice />}
+      {user?.is_admin && <UpdateNotice />}
       <div className={classNames(styles.header, 'row align-items-center')}>
         <div className="col-12 col-md-12 col-lg-3">
           <div className={styles.title}>