styling

src/components/glitch-avatar.tsx

@@ -7,6 +7,7 @@ interface GlitchAvatarProps {
   glitchSrc?: string;
   size?: number;
   radius?: string | number;
+  withBorder?: boolean;
   children?: React.ReactNode;
 }
 
@@ -21,6 +22,7 @@ const GlitchAvatar = ({
   glitchSrc,
   size = 35,
   radius = "md",
+  withBorder = true,
   children,
 }: GlitchAvatarProps) => {
   const [showGlitch, setShowGlitch] = useState(false);
@@ -89,7 +91,9 @@ const GlitchAvatar = ({
         position: "relative",
         width: "fit-content",
         padding: FRAME_PADDING,
-        border: "1px solid var(--mantine-color-default-border)",
+        border: withBorder
+          ? "1px solid var(--mantine-color-default-border)"
+          : "1px solid transparent",
         borderRadius: `calc(${innerRadius} + ${FRAME_PADDING}px)`,
       }}
     >

src/features/login/components/layout.tsx

@@ -28,7 +28,6 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
         >
           <Paper
             shadow='md'
-            withBorder
             p='md'
             w='100%'
             maw='375px'
@@ -49,6 +48,7 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
                 }
                 radius="md"
                 size={250}
+                withBorder={false}
               >
                 <TrophyIcon size={32} />
               </GlitchAvatar>