hexolan/panels
1
0
Fork 0
mirror of https://github.com/hexolan/panels.git synced 2026-05-20 03:29:23 +01:00
Code Issues Packages Releases Activity

feat(frontend): updates to latest mantine attributes

Browse Source 
Pending adaption to breaking changes for element attributes since
changed within existing components. Adjustments to `ta`, `gap`, `fw`,
etc.
This commit is contained in:
Declan Teevan
2026-05-14 14:53:04 +01:00
parent 998eb474ec
commit 0e21fe9483
26 changed files with 58 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/frontend/src/components/AppHeader.tsx
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+2 -1
View File
@@ -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
+3 -3
View File
@@ -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}>
<Text weight={600}>{post.title}</Text>
<Stack align='flex-start' mt={2} gap={1}>
<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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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 -2
View File
@@ -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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+10 -10
View File
@@ -17,22 +17,22 @@ const ErrorPage = () => {
<Center h='100%'>
<Container>
<Title
align='center'
weight={800}
sx={(theme) => ({
fontSize: rem(38),
[theme.fn.smallerThan('sm')]: {
fontSize: rem(32),
},
})}
ta='center'
fw={800}
// sx={(theme) => ({
// fontSize: rem(38),
// [theme.fn.smallerThan('sm')]: {
// 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
+3 -3
View File
@@ -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
+1 -1
View File
@@ -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
+3 -3
View File
@@ -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
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+4 -4
View File
@@ -47,8 +47,8 @@ function SignInPage() {
return (
<Center h='95%'>
<Container>
<Title align='center' weight={900}>Sign In</Title>
<Text color='dimmed' size='sm' align='center' mt={5}>
<Title ta='center' fw={900}>Sign In</Title>
<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
+4 -4
View File
@@ -56,15 +56,15 @@ const SignUpPage = () => {
return (
<Center h='95%'>
<Container>
<Title align='center' weight={900}>Sign Up</Title>
<Text color='dimmed' size='sm' align='center' mt={5}>
<Title ta='center' fw={900}>Sign Up</Title>
<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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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>
)