glitch effect avatar

src/features/login/components/layout.tsx

@@ -1,4 +1,6 @@
+import GlitchAvatar from '@/components/glitch-avatar';
 import useVisualViewportSize from '@/features/core/hooks/use-visual-viewport-size';
+import { useCurrentTournament } from '@/features/tournaments/queries';
 import { AppShell, Flex, Paper, em, Title, Stack } from '@mantine/core';
 import { useMediaQuery, useViewportSize } from '@mantine/hooks';
 import { TrophyIcon } from '@phosphor-icons/react';
@@ -8,6 +10,7 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
   const isMobile = useMediaQuery(`(max-width: ${em(450)})`);
   const visualViewport = useVisualViewportSize();
   const viewport = useViewportSize();
+  const { data: tournament } = useCurrentTournament();
   
   return (
     <AppShell>
@@ -31,8 +34,27 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
             radius='md'
           >
             <Stack align='center' gap='xs' mb='md'>
-              <TrophyIcon size={75} />
-              <Title order={1} ta='center'>Welcome to Flexxon</Title>
+              <GlitchAvatar
+                name={tournament.name}
+                contain
+                src={
+                  tournament.logo
+                    ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
+                    : undefined
+                }
+                glitchSrc={
+                  tournament.glitch_logo
+                    ? `/api/files/tournaments/${tournament.id}/${tournament.glitch_logo}`
+                    : undefined
+                }
+                radius="md"
+                size={250}
+                px="xs"
+                withBorder={false}
+              >
+                <TrophyIcon size={32} />
+              </GlitchAvatar>
+              <Title order={1} ta='center'>Welcome to FLXN</Title>
             </Stack>
             {children}
           </Paper>

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">

src/features/tournaments/types.ts

@@ -25,6 +25,7 @@ export interface TournamentInfo {
   start_time?: string;
   end_time?: string;
   logo?: string;
+  glitch_logo?: string;
   first_place?: TeamInfo;
   second_place?: TeamInfo;
   third_place?: TeamInfo;
@@ -37,6 +38,7 @@ export interface Tournament {
   desc?: string;
   rules?: string;
   logo?: string;
+  glitch_logo?: string;
   enroll_time?: string;
   start_time: string;
   end_time?: string;