From 3fc5f5151b4d795dd0b79753acf6c4ecb9284bca Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Fri, 3 Mar 2023 21:26:39 -0800
Subject: [PATCH] Touch up footer.

---
 components/layout/Footer.js         | 39 ++++++++++++-----------------
 components/layout/Footer.module.css |  9 ++++---
 components/messages.js              |  1 +
 hooks/useSticky.js                  |  2 +-
 pages/_app.js                       |  4 ++-
 5 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/components/layout/Footer.js b/components/layout/Footer.js
index 452e070b..7d202256 100644
--- a/components/layout/Footer.js
+++ b/components/layout/Footer.js
@@ -1,38 +1,31 @@
 import { Row, Column } from 'react-basics';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import classNames from 'classnames';
-import { useIntl, defineMessages } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import { CURRENT_VERSION, HOMEPAGE_URL, REPO_URL } from 'lib/constants';
+import { labels } from 'components/messages';
 import styles from './Footer.module.css';
 
-const messages = defineMessages({
-  poweredBy: { id: 'message.powered-by', defaultMessage: 'Powered by {name}' },
-});
-
-export default function Footer({ className }) {
-  const { pathname } = useRouter();
-  const { formatMessage } = useIntl();
-
+export default function Footer() {
   return (
-    <footer className={classNames(styles.footer, className)}>
+    <footer className={styles.footer}>
       <Row>
-        <Column>
+        <Column defaultSize={11} xs={12} sm={12}>
           <div>
-            {formatMessage(messages.poweredBy, {
-              name: (
-                <a href={HOMEPAGE_URL}>
-                  <b>umami</b>
-                </a>
-              ),
-            })}
+            <FormattedMessage
+              {...labels.poweredBy}
+              values={{
+                name: (
+                  <a href={HOMEPAGE_URL}>
+                    <b>umami</b>
+                  </a>
+                ),
+              }}
+            />
           </div>
         </Column>
-        <Column className={styles.version}>
+        <Column className={styles.version} defaultSize={1} xs={12} sm={12}>
           <a href={REPO_URL}>{`v${CURRENT_VERSION}`}</a>
         </Column>
       </Row>
-      {!pathname.includes('/share/') && <Script src={`/telemetry.js`} />}
     </footer>
   );
 }
diff --git a/components/layout/Footer.module.css b/components/layout/Footer.module.css
index b86e9724..98e8b9ea 100644
--- a/components/layout/Footer.module.css
+++ b/components/layout/Footer.module.css
@@ -1,10 +1,11 @@
 .footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   font-size: var(--font-size-sm);
   text-align: center;
-  margin: 30px 0;
+  margin: 60px 0;
+}
+
+.footer a {
+  color: var(--font-color100);
 }
 
 .version {
diff --git a/components/messages.js b/components/messages.js
index 08548543..77a26d27 100644
--- a/components/messages.js
+++ b/components/messages.js
@@ -99,6 +99,7 @@ export const labels = defineMessages({
   pageNotFound: { id: 'message.page-not-found', defaultMessage: 'Page not found' },
   logs: { id: 'label.activity-log', defaultMessage: 'Activity log' },
   dismiss: { id: 'label.dismiss', defaultMessage: 'Dismiss' },
+  poweredBy: { id: 'label.powered-by', defaultMessage: 'Powered by {name}' },
 });
 
 export const messages = defineMessages({
diff --git a/hooks/useSticky.js b/hooks/useSticky.js
index f2c0c7a6..dc264f9d 100644
--- a/hooks/useSticky.js
+++ b/hooks/useSticky.js
@@ -19,7 +19,7 @@ export default function useSticky({ scrollElement = document, defaultSticky = fa
     return () => {
       scrollElement.removeEventListener('scroll', handleScroll, true);
     };
-  }, [ref, setIsSticky]);
+  }, [ref, setIsSticky, scrollElement]);
 
   return { ref, isSticky };
 }
diff --git a/pages/_app.js b/pages/_app.js
index 3fe13b0c..8886119a 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -10,6 +10,7 @@ import 'styles/locale.css';
 import 'styles/index.css';
 import '@fontsource/inter/400.css';
 import '@fontsource/inter/600.css';
+import Script from 'next/script';
 
 const client = new QueryClient({
   defaultOptions: {
@@ -22,7 +23,7 @@ const client = new QueryClient({
 
 export default function App({ Component, pageProps }) {
   const { locale, messages } = useLocale();
-  const { basePath } = useRouter();
+  const { basePath, pathname } = useRouter();
   useConfig();
 
   const Wrapper = ({ children }) => <span className={locale}>{children}</span>;
@@ -52,6 +53,7 @@ export default function App({ Component, pageProps }) {
           <meta name="viewport" content="width=device-width, initial-scale=1" />
         </Head>
         <Component {...pageProps} />
+        {!pathname.includes('/share/') && <Script src={`${basePath}/telemetry.js`} />}
       </IntlProvider>
     </QueryClientProvider>
   );