bug fixes, new fonts, etc

src/features/teams/components/team-card.tsx

@@ -4,7 +4,8 @@ import {
   Group,
   Box,
   Stack,
-  Divider
+  Divider,
+  Title
 } from "@mantine/core";
 import { useTeam } from "../queries";
 import Avatar from "@/components/avatar";
@@ -56,9 +57,9 @@ const TeamCard = ({ teamId }: TeamCardProps) => {
             }}
           />
           <Box style={{ flex: 1, minWidth: 0 }}>
-            <Text size="md" fw={600} lineClamp={1} mb={2}>
+            <Title order={5} lineClamp={1}>
               {team.name}
-            </Text>
+            </Title>
             <Text size="sm" c="dimmed" lineClamp={1}>
               {team.players?.map(p => `${p.first_name} ${p.last_name}`).join(', ')}
             </Text>

src/features/teams/components/team-form/song-search.tsx

@@ -9,10 +9,10 @@ interface SongSearchProps {
 
 const SongSearch = ({ onChange, placeholder = "Search for songs..." }: SongSearchProps) => {
   const searchSpotifyTracks = async (query: string): Promise<TypeaheadOption<SpotifyTrack>[]> => {
-    if (!query.trim()) return [];
-
     try {
-      const response = await fetch(`/api/spotify/search?q=${encodeURIComponent(query)}`);
+      // Use a default search term when query is empty to show popular tracks
+      const searchTerm = query.trim() || 'top hits';
+      const response = await fetch(`/api/spotify/search?q=${encodeURIComponent(searchTerm)}`);
 
       if (!response.ok) {
         throw new Error('Search failed');

src/features/teams/components/team-profile/header.tsx

@@ -19,7 +19,7 @@ const Header = ({ name, logo, id }: HeaderProps) => {
           src={logo && id ? `/api/files/teams/${id}/${logo}` : undefined}
         />
         <Flex align="center" justify="center" gap={4} pb={20} w="100%">
-          <Title ta="center" order={2}>
+          <Title ta="center" order={1}>
             {name}
           </Title>
         </Flex>