Touch up footer.

components/layout/Footer.js

@@ -1,38 +1,31 @@
 import { Row, Column } from 'react-basics';
-import { useRouter } from 'next/router';
+import { FormattedMessage } from 'react-intl';
-import Script from 'next/script';
-import classNames from 'classnames';
-import { useIntl, defineMessages } 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({
+export default function Footer() {
-  poweredBy: { id: 'message.powered-by', defaultMessage: 'Powered by {name}' },
-});
-
-export default function Footer({ className }) {
-  const { pathname } = useRouter();
-  const { formatMessage } = useIntl();
-
   return (
-    <footer className={classNames(styles.footer, className)}>
+    <footer className={styles.footer}>
       <Row>
-        <Column>
+        <Column defaultSize={11} xs={12} sm={12}>
           <div>
-            {formatMessage(messages.poweredBy, {
+            <FormattedMessage
-              name: (
+              {...labels.poweredBy}
-                <a href={HOMEPAGE_URL}>
+              values={{
-                  <b>umami</b>
+                name: (
-                </a>
+                  <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>
   );
 }

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 {

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({

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

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