glitch effect avatar

src/features/tournaments/components/profile/header.tsx

@@ -11,7 +11,7 @@ const Header = ({ tournament }: HeaderProps) => {
   return (
     <>
       <Flex h="20dvh" px='xl' w='100%' align='self-end' gap='md'>
-        <Avatar contain name={tournament.name} radius={0} withBorder={false} size={150} src={`/api/files/tournaments/${tournament.id}/${tournament.logo}`} />
+        <Avatar contain name={tournament.name} radius="sm" size={150} src={`/api/files/tournaments/${tournament.id}/${tournament.logo}`} />
         <Flex align='center' justify='center' gap={4} pb={20} w='100%'>
           <Title ta='center' order={1}>{tournament.name}</Title>
         </Flex>

src/features/tournaments/components/started-tournament/header.tsx

@@ -1,12 +1,8 @@
 import { Group, Stack, ThemeIcon, Text, Flex } from "@mantine/core";
 import { Tournament } from "../../types";
-import Avatar from "@/components/avatar";
-import {
-  CalendarIcon,
-  MapPinIcon,
-  TrophyIcon,
-} from "@phosphor-icons/react";
+import { CalendarIcon, MapPinIcon, TrophyIcon } from "@phosphor-icons/react";
 import { useMemo } from "react";
+import GlitchAvatar from "@/components/glitch-avatar";
 
 const Header = ({ tournament }: { tournament: Tournament }) => {
   const tournamentStart = useMemo(
@@ -16,7 +12,7 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
 
   return (
     <Stack px="sm" align="center" gap={0}>
-      <Avatar
+      <GlitchAvatar
         name={tournament.name}
         contain
         src={
@@ -24,13 +20,18 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
             ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
             : undefined
         }
+        glitchSrc={
+          tournament.glitch_logo
+            ? `/api/files/tournaments/${tournament.id}/${tournament.glitch_logo}`
+            : undefined
+        }
         radius="md"
-        size={200}
+        size={250}
         px="xs"
         withBorder={false}
       >
-        <TrophyIcon size={24} />
-      </Avatar>
+        <TrophyIcon size={32} />
+      </GlitchAvatar>
       <Flex gap="xs" direction="row" wrap="wrap" justify="space-around">
         {tournament.location && (
           <Group gap="xs">
@@ -65,4 +66,4 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
   );
 };
 
-export default Header;
+export default Header;

src/features/tournaments/components/upcoming-tournament/enroll-free-agent.tsx

@@ -28,13 +28,13 @@ const EnrollFreeAgent = ({ tournamentId }: {tournamentId: string} ) => {
       <Sheet title="Free Agent Enrollment" opened={isOpen} onChange={toggle}>
         <Stack gap="xs">
           <Text size="md">
-            Enrolling as a free agent will enter you in a pool of players wanting to play but don't have a teammate yet.
+            Enrolling as a free agent adds you to a pool of players looking for teammates.
           </Text>
           <Text size="sm" c='dimmed'>
-            You will be able to see a list of other enrolled free agents, as well as their contact information for organizing your team and walkout song. By enrolling, your phone number will be visible to other free agents. 
+            Once enrolled, you can view other free agents and their phone number in order to coordinate teams and walkout songs.
           </Text>
           <Text size="xs" c="dimmed">
-            Note: this does not guarantee you a spot in the tournament. One person from your team must enroll in the app and choose a walkout song in order to secure a spot.
+            Important: Enrolling as a free agent does not guarantee a tournament spot. To secure a spot, one team member must register through the app and select a walkout song.
           </Text>
           <Button onClick={handleEnroll}>Confirm</Button>
           <Button variant="subtle" color="red" onClick={toggle}>Cancel</Button>

src/features/tournaments/components/upcoming-tournament/header.tsx

@@ -1,6 +1,6 @@
 import { Group, Stack, ThemeIcon, Text, Flex } from "@mantine/core";
 import { Tournament } from "../../types";
-import Avatar from "@/components/avatar";
+import GlitchAvatar from "@/components/glitch-avatar";
 import {
   CalendarIcon,
   MapPinIcon,
@@ -16,8 +16,8 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
   );
 
   return (
-    <Stack align="center" gap={0}>
-      <Avatar
+    <Stack align="center" gap={16}>
+      <GlitchAvatar
         name={tournament.name}
         contain
         src={
@@ -25,13 +25,18 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
             ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
             : undefined
         }
+        glitchSrc={
+          tournament.glitch_logo
+            ? `/api/files/tournaments/${tournament.id}/${tournament.glitch_logo}`
+            : undefined
+        }
         radius="md"
         size={300}
         px="xs"
         withBorder={false}
       >
         <TrophyIcon size={32} />
-      </Avatar>
+      </GlitchAvatar>
       <Flex gap="xs" direction="column" justify="space-around">
         {tournament.location && (
           <Group gap="xs">