Update app icon, manifest name, and add attributions page

sjkneisler · Mar 22, 2024 · a74394b · a74394b
1 parent 3fe3216
commit a74394b
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 27 deletions.
diff --git a/app/public/favicon.ico b/app/public/favicon.ico
diff --git a/app/public/index.html b/app/public/index.html
@@ -9,7 +9,7 @@
       name="description"
       content="Scheduling tool for recurring weekly events"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo128.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/app/public/logo128.png b/app/public/logo128.png
diff --git a/app/public/logo192.png b/app/public/logo192.png
diff --git a/app/public/logo512.png b/app/public/logo512.png
diff --git a/app/public/manifest.json b/app/public/manifest.json
@@ -1,16 +1,16 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "TTRPG Scheduler",
+  "name": "TTRPG Scheduler",
   "icons": [
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "logo128.png",
       "type": "image/png",
-      "sizes": "192x192"
+      "sizes": "128x128"
     },
     {
       "src": "logo512.png",

diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -8,6 +8,7 @@ import { CampaignView } from './components/CampaignView';
 import { ExceptionsCalendar } from './components/ExceptionsCalendar';
 import { AggregateExceptionsCalendar } from './components/AggregateExceptionsCalendar';
 import { NewUserPage } from './components/NewUserPage';
+import { AttributionsPage } from './components/AttributionsPage';
 
 const router = createBrowserRouter([
   {
@@ -34,6 +35,10 @@ const router = createBrowserRouter([
     path: '/schedule/:scheduleInviteCode/user/:userId/exceptions',
     element: <ExceptionsCalendar />,
   },
+  {
+    path: '/attributions',
+    element: <AttributionsPage />,
+  },
 ]);
 
 function App() {

diff --git a/app/src/components/AttributionsPage.tsx b/app/src/components/AttributionsPage.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Box, Container, Link, Stack } from '@mui/material';
+import { PageContainer } from './PageContainer';
+
+export const AttributionsPage: React.FC = () => {
+  return (
+    <PageContainer>
+      <Container>
+        <Box>
+          •{' '}
+          <Link
+            display="inline"
+            href="https://www.iconfinder.com/icons/299092/calendar_icon"
+          >
+            Calendar Icon
+          </Link>{' '}
+          by{' '}
+          <Link display="inline" href="https://www.iconfinder.com/paomedia">
+            Paomedia
+          </Link>{' '}
+          is licensed under{' '}
+          <Link
+            display="inline"
+            href="https://creativecommons.org/licenses/by/3.0/"
+          >
+            CC BY 3.0
+          </Link>
+        </Box>
+      </Container>
+    </PageContainer>
+  );
+};
diff --git a/app/src/components/TopBar.tsx b/app/src/components/TopBar.tsx
@@ -1,5 +1,14 @@
 /** @jsxImportSource @emotion/react */
-import { AppBar, Button, ButtonBase, Toolbar, Typography } from '@mui/material';
+import {
+  AppBar,
+  Box,
+  Button,
+  ButtonBase,
+  Container,
+  Stack,
+  Toolbar,
+  Typography,
+} from '@mui/material';
 import { css } from '@emotion/react';
 import React from 'react';
 import { Link } from 'react-router-dom';
@@ -17,27 +26,44 @@ export const TopBar: React.FC = () => {
         flex: 0 0 auto;
       `}
     >
-      <Toolbar
-        css={css`
-          gap: 30px;
-        `}
-      >
-        <ButtonBase component={Link} to="/">
-          <Typography variant="h4">TTRPG Scheduler</Typography>
-        </ButtonBase>
-        {schedule && (
-          <ButtonBase component={Link} to={`/schedule/${schedule?.inviteCode}`}>
-            <Typography variant="h5">Schedule: {schedule.name}</Typography>
-          </ButtonBase>
-        )}
-        {schedule && user && (
-          <ButtonBase
-            component={Link}
-            to={`/schedule/${schedule.inviteCode}/user/${user.id}`}
-          >
-            <Typography variant="h5">User: {user.name}</Typography>
-          </ButtonBase>
-        )}
+      <Toolbar disableGutters>
+        <Container maxWidth={false}>
+          <Stack direction="row" justifyContent="space-between">
+            <Stack
+              direction="row"
+              css={css`
+                gap: 30px;
+              `}
+            >
+              <ButtonBase component={Link} to="/">
+                <Typography variant="h4">TTRPG Scheduler</Typography>
+              </ButtonBase>
+              {schedule && (
+                <ButtonBase
+                  component={Link}
+                  to={`/schedule/${schedule?.inviteCode}`}
+                >
+                  <Typography variant="h5">
+                    Schedule: {schedule.name}
+                  </Typography>
+                </ButtonBase>
+              )}
+              {schedule && user && (
+                <ButtonBase
+                  component={Link}
+                  to={`/schedule/${schedule.inviteCode}/user/${user.id}`}
+                >
+                  <Typography variant="h5">User: {user.name}</Typography>
+                </ButtonBase>
+              )}
+            </Stack>
+            <Box alignContent="center">
+              <ButtonBase component={Link} to="/attributions">
+                <Typography variant="body2">Attributions</Typography>
+              </ButtonBase>
+            </Box>
+          </Stack>
+        </Container>
       </Toolbar>
     </AppBar>
   );