Show language on the song list if its not english

src/Elements/Flag.tsx

@@ -0,0 +1,12 @@
+import { Song } from 'interfaces';
+import languageNameToIsoCode from 'utils/languageNameToIsoCode';
+
+interface Props {
+  language: Song['language'];
+}
+export const Flag = ({ language, ...props }: Props) => {
+  const lang = Array.isArray(language) ? language[0] : language;
+  const isoCode = languageNameToIsoCode(lang);
+
+  return <img src={`https://flagcdn.com/${isoCode}.svg`} alt={lang} {...props} />;
+};

src/Scenes/ExcludeLanguages/ExcludeLanguagesView.tsx

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { CheckBox, CheckBoxOutlineBlank, Warning } from '@mui/icons-material';
+import { Flag } from 'Elements/Flag';
 import { MenuButton } from 'Elements/Menu';
 import MenuWithLogo from 'Elements/MenuWithLogo';
 import { typography } from 'Elements/cssMixins';
@@ -105,7 +106,7 @@ function ExcludeLanguagesView({ onClose, closeText }: Props) {
                 <LanguageName>{name}</LanguageName> ({count} songs)
               </span>
               <LanguageFlagBackground excluded={excluded}>
-                <img src={`https://flagcdn.com/${languageNameToIsoCode(name)}.svg`} alt={name} />
+                <Flag language={name} />
               </LanguageFlagBackground>
             </LanguageEntry>
           );

src/Scenes/RemoteMic/Panels/RemoteSongList.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { Flag } from 'Elements/Flag';
 import RemoteMicClient from 'RemoteMic/Network/Client';
 import { transportErrorReason } from 'RemoteMic/Network/Client/NetworkClient';
 import { NetworkSongListMessage } from 'RemoteMic/Network/messages';
@@ -8,7 +9,6 @@ import SongDao from 'Songs/SongsService';
 import useSongIndex from 'Songs/hooks/useSongIndex';
 import { uniqBy } from 'lodash-es';
 import { useEffect, useMemo, useState } from 'react';
-import languageNameToIsoCode from 'utils/languageNameToIsoCode';
 
 interface Props {
   roomId: string;
@@ -60,12 +60,10 @@ function RemoteSongList({
   return (
     <Container>
       {songList.map((song) => {
-        const language = Array.isArray(song.language) ? song.language[0] : song.language!;
-
         return (
           <SongItemContainer key={`${song.artist}-${song.title}`} data-test={song.id}>
             <Language>
-              <img src={`https://flagcdn.com/${languageNameToIsoCode(language)}.svg`} alt={language} />
+              <Flag language={song.language} />
             </Language>
             <ArtistTitle>
               <Title>{song.title}</Title>

src/Scenes/SingASong/SongSelection/SongCard.tsx

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import PeopleAltIcon from '@mui/icons-material/PeopleAlt';
+import { Flag } from 'Elements/Flag';
 import { typography } from 'Elements/cssMixins';
 import styles from 'Scenes/Game/Singing/GameOverlay/Drawing/styles';
 import { useSongStats } from 'Songs/stats/hooks';
@@ -69,6 +70,7 @@ export const FinalSongCard = ({
               <SongListEntryStats song={song} />
             </>
           )}
+          {!expanded && song.language !== 'English' && <Language language={song.language} />}
         </ExpandedData>
       </SongInfo>
       {children}
@@ -77,6 +79,18 @@ export const FinalSongCard = ({
   );
 };
 
+export const Language = styled(Flag)`
+  width: 3.15rem;
+  height: 2.75rem;
+  object-fit: cover;
+  border-top-right-radius: 1rem;
+  position: absolute;
+  z-index: -1;
+  left: 0rem;
+  bottom: 0rem;
+  opacity: 0.95;
+`;
+
 export const ExpandedData = styled.div<{ expanded: boolean }>`
   display: flex;
   flex-direction: column;
@@ -112,10 +126,10 @@ export const SongCardContainer = styled.div`
   flex-direction: column;
   box-sizing: border-box;
   position: relative;
-  padding: 1.3rem;
+  padding: 0.5rem;
 
   border: 0.1rem black solid;
-  border-radius: 0.5rem;
+  border-radius: 1rem;
 `;
 
 export const SongCardBackground = styled.div<{ focused: boolean; expanded: boolean }>`