Improve appearance of the Knowledge Base pages

beverloo · Apr 19, 2024 · 8ff4967 · 8ff4967
1 parent 475d980
commit 8ff4967
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/app/schedule/[event]/knowledge/[category]/page.tsx b/app/schedule/[event]/knowledge/[category]/page.tsx
@@ -7,11 +7,13 @@ import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 import type { NextPageParams } from '@lib/NextRouterParams';
 import { ContentType } from '@lib/database/Types';
-import { Header } from '../../components/Header';
+import { KnowledgeBaseIcon } from '@components/KnowledgeBaseIcon';
 import { Markdown } from '@components/Markdown';
 import { requireAuthenticationContext } from '@lib/auth/AuthenticationContext';
 import db, { tContent, tContentCategories } from '@lib/database';
@@ -54,7 +56,12 @@ export default async function ScheduleKnowledgeCategoryPage(
 
     return (
         <>
-            <Header title={category.title} subtitle={category.description} />
+            <Card>
+                <CardHeader avatar={ <KnowledgeBaseIcon variant={category.icon} /> }
+                            title={category.title}
+                            titleTypographyProps={{ variant: 'subtitle2' }}
+                            subheader={category.description} />
+            </Card>
             <Box sx={{ '& .MuiAccordionDetails-root': { paddingTop: 0 } }}>
                 { category.questions.map(({ id, question, answer }) =>
                     <Accordion key={id} id={id} defaultExpanded={ props.searchParams.q === id }>

diff --git a/app/schedule/[event]/knowledge/page.tsx b/app/schedule/[event]/knowledge/page.tsx
@@ -1,8 +1,10 @@
 // Copyright 2024 Peter Beverloo & AnimeCon. All rights reserved.
 // Use of this source code is governed by a MIT license that can be found in the LICENSE file.
 
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+
 import type { NextPageParams } from '@lib/NextRouterParams';
-import { Header } from '../components/Header';
 import { KnowledgeBaseCategories } from './KnowledgeBaseCategories';
 import { requireAuthenticationContext } from '@lib/auth/AuthenticationContext';
 
@@ -14,7 +16,14 @@ export default async function ScheduleKnowledgePage(props: NextPageParams<'event
     await requireAuthenticationContext({ check: 'event', event: props.params.event });
     return (
         <>
-            <Header title="Knowledge base" />
+            <Card>
+                <Box sx={{
+                    backgroundImage: 'url(/images/knowledge-base.jpg)',
+                    backgroundPosition: 'center',
+                    backgroundSize: 'cover',
+                    width: '100%',
+                    aspectRatio: 4 }} />
+            </Card>
             <KnowledgeBaseCategories />
         </>
     );