Layout updates.

components/layout/AppLayout.js

@@ -1,6 +1,5 @@
 import { Container } from 'react-basics';
 import Head from 'next/head';
-import { useRouter } from 'next/router';
 import NavBar from 'components/layout/NavBar';
 import UpdateNotice from 'components/common/UpdateNotice';
 import useRequireLogin from 'hooks/useRequireLogin';

components/layout/AppLayout.module.css

@@ -18,4 +18,5 @@
   min-height: 0;
   height: calc(100vh - 60px);
   overflow-y: auto;
+  padding-bottom: 60px;
 }

components/layout/Footer.js

@@ -1,31 +1,12 @@
-import { Row, Column } from 'react-basics';
+import { CURRENT_VERSION, HOMEPAGE_URL } from 'lib/constants';
-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';
 
 export function Footer() {
   return (
     <footer className={styles.footer}>
-      <Row>
+      <a href={HOMEPAGE_URL}>
-        <Column defaultSize={12} lg={11} xl={11}>
+        <b>umami</b> {`v${CURRENT_VERSION}`}
-          <div>
+      </a>
-            <FormattedMessage
-              {...labels.poweredBy}
-              values={{
-                name: (
-                  <a href={HOMEPAGE_URL}>
-                    <b>umami</b>
-                  </a>
-                ),
-              }}
-            />
-          </div>
-        </Column>
-        <Column className={styles.version} defaultSize={12} lg={1} xl={1}>
-          <a href={REPO_URL}>{`v${CURRENT_VERSION}`}</a>
-        </Column>
-      </Row>
     </footer>
   );
 }

components/layout/Footer.module.css

@@ -1,16 +1,12 @@
 .footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
   font-size: var(--font-size-sm);
-  text-align: center;
   line-height: 30px;
-  margin: 60px 0;
+  margin: 40px 0;
 }
 
 .footer a {
   color: var(--font-color100);
 }
-
-.version {
-  text-align: right;
-  padding-right: 10px;
-  white-space: nowrap;
-}

components/layout/Header.js

@@ -9,7 +9,7 @@ import styles from './Header.module.css';
 export function Header() {
   return (
     <header className={styles.header}>
-      <Row>
+      <Row className={styles.row}>
         <Column>
           <Link href="https://umami.is" target="_blank" className={styles.title}>
             <Icon size="lg">

components/layout/Header.module.css

@@ -1,8 +1,13 @@
 .header {
   display: flex;
+  flex-direction: row;
   align-items: center;
   width: 100%;
-  padding: 30px 30px 0 30px;
+  height: 100px;
+}
+
+.row {
+  align-items: center;
 }
 
 .title {
@@ -35,18 +40,8 @@
 }
 
 @media only screen and (max-width: 768px) {
-  .header {
-    padding: 0 30px;
-  }
-
   .buttons,
   .links {
     display: none;
   }
-
-  .title {
-    flex: 1;
-    padding: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
 }

components/layout/Page.module.css

@@ -4,11 +4,4 @@
   flex-direction: column;
   background: var(--base50);
   position: relative;
-  padding: 30px;
-}
-
-@media only screen and (max-width: 768px) {
-  .page {
-    padding: 10px 0;
-  }
 }

components/layout/PageHeader.module.css

@@ -1,10 +1,12 @@
 .header {
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
   align-items: center;
   align-content: center;
   align-self: stretch;
   flex-wrap: wrap;
+  height: 100px;
 }
 
 .header a {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "A simple, fast, privacy-focused alternative to Google Analytics.",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",