feat(frontend): updates to latest mantine attributes

Pending adaption to breaking changes for element attributes since
changed within existing components. Adjustments to `ta`, `gap`, `fw`,
etc.

services/frontend/src/components/AppHeader.tsx

@@ -26,9 +26,9 @@ function AppHeader() {
           <Menu>
             <Menu.Target>
               <Button color='teal' variant='outline'>
-                <Group spacing={7}>
+                <Group gap={7}>
                   <Avatar color='teal' radius='xl' size={25} />
-                  <Text weight={500} size='sm' sx={{ lineHeight: 1 }} mr={3}>
+                  <Text fw={500} size='sm' mr={3}> {/* sx={{ lineHeight: 1 }} */}
                     {currentUser.username}
                   </Text>
                   <IconChevronDown size={20} />

services/frontend/src/components/AppNavbar.tsx

@@ -36,7 +36,7 @@ function AppNavbar() {
   return (
     <Navbar width={{ base: 300 }} p='xs'>
       <Navbar.Section py='xs'>
-        <Text size='xs' color='dimmed' my='xs' weight={500}>Browse</Text>
+        <Text size='xs' color='dimmed' my='xs' fw={500}>Browse</Text>
         <NavbarButton text='Feed' page='/' icon={IconTrendingUp} />
         <NavbarButton text='Find Panels' page='/panels' icon={IconSearch} />
       </Navbar.Section>
@@ -48,7 +48,7 @@ function AppNavbar() {
           borderTop: `${rem(1)} solid ${theme.colors.gray[3]}`
         })}
       >
-        <Text size='xs' color='dimmed' m='xs' weight={500}>Suggested Panels</Text>
+        <Text size='xs' color='dimmed' m='xs' fw={500}>Suggested Panels</Text>
         <NavbarButton text='panel/Panel' page='/panel/Panel' icon={IconMessages} />
       </Navbar.Section>
     </Navbar>

services/frontend/src/components/CommentsFeed.tsx

@@ -5,7 +5,7 @@ import type { Comment } from '../app/types/common'
 
 function CommentsFeed({ comments }: { comments: Comment[] }) {
   return (
-    <Stack spacing='sm'>
+    <Stack gap='sm'>
       {Object.values(comments).map(comment => <FeedComment key={comment.id} comment={comment} />)}
     </Stack>
   )

services/frontend/src/components/FeedComment.tsx

@@ -12,7 +12,7 @@ import type { UpdateCommentData } from '../app/types/comments'
 
 const FeedCommentBase = ({ children, extraChildren }: { children: React.ReactNode, extraChildren?: React.ReactNode }) => (
   <Paper shadow='sm' radius='md' p='md' withBorder>
-    <Group w='100%' position='apart'>
+    <Group w='100%' justify='apart'>
       <Group>
         <ThemeIcon color='teal' variant='light' size='xl'><IconMessage /></ThemeIcon>
         {children}

services/frontend/src/components/FeedPost.tsx

@@ -63,12 +63,12 @@ const FeedPost = ({ post, hidePanel, hideAuthor }: { post: Post, hidePanel?: boo
 
   return (
     <Paper shadow='xl' radius='lg' p='lg' withBorder>
-      <Group spacing='xs'>
+      <Group gap='xs'>
         {panelElement}
         {authorElement}
       </Group>
       <Box component={Link} to={panelData ? `/panel/${panelData.name}/post/${post.id}` : '#'} style={{ textDecoration: 'none', color: 'inherit' }}>
-        <Text mt={3} weight={600} lineClamp={1}>{post.title}</Text>
+        <Text mt={3} fw={600} lineClamp={1}>{post.title}</Text>
         <Text size='sm' lineClamp={2}>{post.content}</Text>
         <Text size='xs' color='dimmed' mt={3}>Click to View</Text>
       </Box>

services/frontend/src/components/HomePostFeed.tsx

@@ -9,10 +9,10 @@ function HomePostFeed() {
   if (isLoading) {
     return <SkeletonPostFeed />
   } else if (!data) {
-    return <Text align='center' color='red'>Failed to Load Posts</Text>
+    return <Text ta='center' color='red'>Failed to Load Posts</Text>
   } else if (!data.length) {
     // Check that there are posts.
-    return <Text align='center'>No Posts Found!</Text>
+    return <Text ta='center'>No Posts Found!</Text>
   }
 
   return (

services/frontend/src/components/LoadingBar.tsx

@@ -1,5 +1,6 @@
 import { Progress } from '@mantine/core'
 
-const LoadingBar = () => <Progress color='lime' radius='xs' size='sm' value={100} striped animate />
+// animate
+const LoadingBar = () => <Progress color='lime' radius='xs' size='sm' value={100} striped />
 
 export default LoadingBar

services/frontend/src/components/PagePost.tsx

@@ -133,14 +133,14 @@ const PagePostItem = ({ post, setPost }: { post: Post, setPost: React.Dispatch<P
       )}
 
       {modifying ? <ModifyPostForm post={post} setModifying={setModifying} setPost={setPost} /> : (
-        <Stack align='flex-start' mt={2} spacing={1}>
+        <Stack align='flex-start' mt={2} gap={1}>
-          <Text weight={600}>{post.title}</Text>
+          <Text fw={600}>{post.title}</Text>
           <Text size='sm'>{post.content}</Text>
           <Text size='xs' color='dimmed' mt={3}>Created {post.createdAt}</Text>
         </Stack>
       )}
 
-      {errorMsg && <Text color='red' align='center' size='xs' mt='md'>{'Error: ' + errorMsg}</Text>}
+      {errorMsg && <Text color='red' ta='center' size='xs' mt='md'>{'Error: ' + errorMsg}</Text>}
     </Paper>
   )
 }

services/frontend/src/components/PanelLayout.tsx

@@ -24,13 +24,13 @@ const PanelLayoutComponent = ({ panel, setPanel }: { panel: Panel, setPanel: Rea
     <>
       <Paper py={rem(50)} shadow='md' sx={{ borderBottom: '1px' }}>
         <Container>
-          <Group position='apart'>
+          <Group gap='apart'>
             <Box component={Link} to={`/panel/${panel.name}`} style={{ textDecoration: 'none' }}>
               <Text size='lg' color='black'>{panel.name}</Text>
               <Text size='sm' color='dimmed'>{panel.description}</Text>
             </Box>
 
-            <Group spacing='sm'>
+            <Group gap='sm'>
               {currentUser && <Button size='xs' variant='filled' color='teal' component={Link} to={`/panel/${panel.name}/posts/new`}>Create Post</Button>}
               {currentUser && currentUser.isAdmin && <Button size='xs' variant='outline' color='green' component={Link} to={`/panel/${panel.name}/settings`}>Manage Panel</Button>}
             </Group>

services/frontend/src/components/PanelPostFeed.tsx

@@ -10,10 +10,10 @@ function PanelPostFeed({ panel }: { panel: Panel }) {
   if (isLoading) {
     return <SkeletonPostFeed />
   } else if (!data) {
-    return <Text align='center'>Failed to Load Posts</Text>
+    return <Text ta='center'>Failed to Load Posts</Text>
   } else if (!data.length) {
     // Check that there are posts.
-    return <Text align='center'>No Posts Found!</Text>
+    return <Text ta='center'>No Posts Found!</Text>
   }
 
   return (

services/frontend/src/components/PostCommentsFeed.tsx

@@ -13,7 +13,7 @@ function PostCommentsFeed({ post }: { post: Post }) {
       </Center>
     )
   } else if (!data) {
-    return <Text color='red' align='center'>Failed to Load Comments</Text>
+    return <Text color='red' ta='center'>Failed to Load Comments</Text>
   } else if (!data.length) {
     return null
   }

services/frontend/src/components/SkeletonFeedPost.tsx

@@ -2,11 +2,11 @@ import { Paper, Skeleton, Box, Stack, Group } from '@mantine/core'
 
 const SkeletonFeedPost = () => (
   <Paper shadow='xl' radius='lg' p='lg' withBorder>
-    <Group spacing='xs'>
+    <Group gap='xs'>
       <Skeleton height={8} mt={6} width='20%' radius='xl' />
       <Skeleton height={8} mt={6} width='20%' radius='xl' />
     </Group>
-    <Stack mt={2} spacing={1}>
+    <Stack mt={2} gap={1}>
       <Box>
         <Skeleton h='md' radius='xl' w='60%' />
         <Skeleton h='md' radius='xl' mt='sm' />

services/frontend/src/components/UserLayout.tsx

@@ -61,7 +61,7 @@ function UserLayout() {
             <Paper w='100%'>
               <Box h='100%' pos='relative'>
                 <Center h='100%'>
-                  <Text weight={600} mr={3}>User:</Text>
+                  <Text fw={600} mr={3}>User:</Text>
                   <Text>{data.username}</Text>
                 </Center>
 

services/frontend/src/components/UserPostFeed.tsx

@@ -10,10 +10,10 @@ function UserPostFeed({ user }: { user: User }) {
   if (isLoading) {
     return <SkeletonPostFeed />
   } else if (!data) {
-    return <Text align='center' color='red'>Failed to Load Posts</Text>
+    return <Text ta='center' color='red'>Failed to Load Posts</Text>
   } else if (!data.length) {
     // Check that there are posts.
-    return <Text align='center'>No Posts Found!</Text>
+    return <Text ta='center'>No Posts Found!</Text>
   }
 
   return (

services/frontend/src/pages/Error.tsx

@@ -17,22 +17,22 @@ const ErrorPage = () => {
     <Center h='100%'>
       <Container>
         <Title
-          align='center'
+          ta='center'
-          weight={800}
+          fw={800}
-          sx={(theme) => ({
+          // sx={(theme) => ({
-            fontSize: rem(38),
+          //   fontSize: rem(38),
-            [theme.fn.smallerThan('sm')]: {
+          //   [theme.fn.smallerThan('sm')]: {
-              fontSize: rem(32),
+          //     fontSize: rem(32),
-            },
+          //   },
-          })}
+          // })}
         >
           {title}
         </Title>
-        <Text size='lg' color='dimmed' maw={rem(250)} align='center' my='xl'>
+        <Text size='lg' color='dimmed' maw={rem(250)} ta='center' my='xl'>
           {subTitle}
         </Text>
 
-        <Group position='center'>
+        <Group justify='center'>
           <Button component={Link} to='/' variant='subtle' size='md'>
             Back to Home
           </Button>

services/frontend/src/pages/ExplorePanels.tsx

@@ -17,12 +17,12 @@ const ExplorePanelsPage = () => {
       )}
       <Divider my='md' variant='dotted' />
 
-      <Stack spacing='sm' align='stretch'>
+      <Stack gap='sm' align='stretch'>
         <Paper shadow='xl' radius='md' p='md' withBorder component={Link} to='/panel/Panel'>
           <Group>
             <ThemeIcon color='teal' variant='light' size='xl'><IconMessages /></ThemeIcon>
             <Box>
-              <Text weight={600}>Panel</Text>
+              <Text fw={600}>Panel</Text>
               <Text>The first and therefore defacto primary panel.</Text>
               <Text color='dimmed' size='xs' mt={3}>Click to View</Text>
             </Box>
@@ -33,7 +33,7 @@ const ExplorePanelsPage = () => {
           <Group>
             <ThemeIcon color='red' variant='light' size='xl'><IconTableOff /></ThemeIcon>
             <Box>
-              <Text weight={600}>Note</Text>
+              <Text fw={600}>Note</Text>
               <Text>This page is exemplary as this feature is currently unimplemented.</Text>
               <Text color='dimmed' size='xs' mt={3}>Planned Functionality</Text>
             </Box>

services/frontend/src/pages/Home.tsx

@@ -7,7 +7,7 @@ const Homepage = () => {
     <Container mt='xl'>
       <Title>Feed</Title>
       <Divider my='md' variant='dotted' />
-      <Stack my='lg' spacing='md'>
+      <Stack my='lg' gap='md'>
         <HomePostFeed />
       </Stack>
     </Container>

services/frontend/src/pages/NewPanel.tsx

@@ -46,11 +46,11 @@ const NewPanelPage = () => {
   return (
     <Center h='95%'>
       <Container>
-        <Title align='center' weight={900}>Create a Panel</Title>
+        <Title ta='center' fw={900}>Create a Panel</Title>
 
         <Paper withBorder shadow='md' radius='md' p={30} mt={30}>
           <form onSubmit={panelForm.onSubmit(submitPanelForm)}>
-            <Stack spacing='md'>
+            <Stack gap='md'>
               <TextInput 
                 label='Name'
                 placeholder='e.g. music, programming, football'
@@ -63,7 +63,7 @@ const NewPanelPage = () => {
                 {...panelForm.getInputProps('description')}
               />
 
-              { errorMsg && <Text color='red' align='center'>{'Error: ' + errorMsg}</Text> }
+              { errorMsg && <Text color='red' ta='center'>{'Error: ' + errorMsg}</Text> }
 
               <Button type='submit' variant='outline' color='teal' disabled={isLoading} fullWidth>Create Panel</Button>
             </Stack>

services/frontend/src/pages/NewPanelPost.tsx

@@ -49,7 +49,7 @@ const NewPanelPostPage = () => {
   return (
     <Paper shadow='md' radius='md' p='lg' withBorder>
       <form onSubmit={createPostForm.onSubmit(submitPost)}>
-        <Stack spacing='md'>
+        <Stack gap='md'>
           <TextInput 
             label='Title'
             placeholder='Post Title'
@@ -62,7 +62,7 @@ const NewPanelPostPage = () => {
             {...createPostForm.getInputProps('content')}
           />
           
-          { errorMsg && <Text color='red' align='center'>{'Error: ' + errorMsg}</Text> }
+          { errorMsg && <Text color='red' ta='center'>{'Error: ' + errorMsg}</Text> }
 
           <Button type='submit' variant='outline' color='teal' disabled={isLoading} fullWidth>
             Create Post

services/frontend/src/pages/Panel.tsx

@@ -8,7 +8,7 @@ function PanelPage() {
   const { panel } = useOutletContext<PanelContext>()
 
   return (
-    <Stack my='lg' spacing='md'>
+    <Stack my='lg' gap='md'>
       <PanelPostFeed panel={panel} />
     </Stack>
   )

services/frontend/src/pages/PanelPost.tsx

@@ -53,7 +53,7 @@ function PanelPostPage() {
     <Box mb='lg'>
       <PagePost post={data} />
       <Divider my='md' variant='none' />
-      <Stack spacing='sm'>
+      <Stack gap='sm'>
         { currentUser && <CreateComment post={data} addNewComment={addNewComment} /> }
         { newComments.length > 0 && <CommentsFeed comments={newComments} /> }
         <PostCommentsFeed post={data} />

services/frontend/src/pages/PanelSettings.tsx

@@ -51,7 +51,7 @@ const UpdatePanelForm = ({
 
   return (
     <form onSubmit={panelForm.onSubmit(submitUpdatePanel)}>
-      <Stack spacing='md'>
+      <Stack gap='md'>
         <TextInput label='Name' {...panelForm.getInputProps('name')} />
         <Textarea label='Description' {...panelForm.getInputProps('description')} />
 
@@ -90,7 +90,7 @@ function PanelSettingsPage() {
   return (
     <Paper mt='md' radius='lg' shadow='md' p='lg' withBorder>
       <Center>
-        <Group spacing='sm'>
+        <Group gap='sm'>
           {modifying 
             ? <Button color='teal' onClick={() => { setModifying(false); setErrorMsg('') }}>Stop Modifying</Button>
             : <Button color='teal' onClick={() => setModifying(true)}>Modify Panel</Button>

services/frontend/src/pages/SignIn.tsx

@@ -47,8 +47,8 @@ function SignInPage() {
   return (
     <Center h='95%'>
       <Container>
-        <Title align='center' weight={900}>Sign In</Title>
+        <Title ta='center' fw={900}>Sign In</Title>
-        <Text color='dimmed' size='sm' align='center' mt={5}>
+        <Text color='dimmed' size='sm' ta='center' mt={5}>
           Do not have an account yet?{' '}
           <Anchor size='sm' component={Link} to='/signup'>Sign up</Anchor> instead.
         </Text>
@@ -56,7 +56,7 @@ function SignInPage() {
 
         <Paper withBorder shadow='md' radius='md' p={30} mt={30}>
           <form onSubmit={loginForm.onSubmit(submitLoginForm)}>
-            <Stack spacing='md'>
+            <Stack gap='md'>
               <TextInput 
                 label='Username'
                 placeholder='Your username'
@@ -69,7 +69,7 @@ function SignInPage() {
                 {...loginForm.getInputProps('password')}
               />
 
-              { errorMsg && <Text color='red' align='center'>{'Error: ' + errorMsg}</Text> }
+              { errorMsg && <Text color='red' ta='center'>{'Error: ' + errorMsg}</Text> }
 
               <Button type='submit' color='teal' disabled={isLoading} fullWidth>Login</Button>
             </Stack>

services/frontend/src/pages/SignUp.tsx

@@ -56,15 +56,15 @@ const SignUpPage = () => {
   return (
     <Center h='95%'>
       <Container>
-        <Title align='center' weight={900}>Sign Up</Title>
+        <Title ta='center' fw={900}>Sign Up</Title>
-        <Text color='dimmed' size='sm' align='center' mt={5}>
+        <Text color='dimmed' size='sm' ta='center' mt={5}>
           Already have an account?{' '}
           <Anchor size='sm' component={Link} to='/signin'>Sign in</Anchor> instead.
         </Text>
 
         <Paper withBorder shadow='md' radius='md' p={30} mt={30}>
           <form onSubmit={registrationForm.onSubmit(submitRegistrationForm)}>
-            <Stack spacing='md'>
+            <Stack gap='md'>
               <TextInput 
                 label='Username'
                 placeholder='Your username'
@@ -83,7 +83,7 @@ const SignUpPage = () => {
                 {...registrationForm.getInputProps('confPassword')}
               />
 
-              { errorMsg && <Text color='red' align='center'>{'Error: ' + errorMsg}</Text> }
+              { errorMsg && <Text color='red' ta='center'>{'Error: ' + errorMsg}</Text> }
 
               <Button type='submit' color='teal' disabled={isLoading} fullWidth>Register</Button>
             </Stack>

services/frontend/src/pages/User.tsx

@@ -8,7 +8,7 @@ function UserPage() {
   const { user } = useOutletContext<UserContext>()
 
   return (
-    <Stack my='lg' spacing='md'>
+    <Stack my='lg' gap='md'>
       <UserPostFeed user={user} />
     </Stack>
   )

services/frontend/src/pages/UserAbout.tsx

@@ -8,7 +8,7 @@ function UserAboutPage() {
 
   return (
     <Paper mt='md' radius='lg' shadow='md' p='lg' withBorder>
-      <Text weight={500}>About {user.username}</Text>
+      <Text fw={500}>About {user.username}</Text>
       {user.createdAt && <Text>Signed up {new Date(user.createdAt).toUTCString()}</Text>}
     </Paper>
   )