jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): country flag in replayer

Browse source
This commit is contained in:
Shekar Siri 2023-07-04 15:41:40 +02:00
parent 0afa74b446
commit 236227f2fb
2 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/shared/SessionItem/SessionItem.tsx
View file

@ -222,7 +222,7 @@ function SessionItem(props: RouteComponentProps & Props) {
</div> </div>
<div style={{ width: '30%' }} className="px-2 flex flex-col justify-between"> <div style={{ width: '30%' }} className="px-2 flex flex-col justify-between">
<div style={{ height: '21px' }}> <div style={{ height: '21px' }}>
<CountryFlag userCity={userCity} userState={userState} country={userCountry} label /> <CountryFlag userCity={userCity} userState={userState} country={userCountry} showLabel={true} />
</div> </div>
<div className="color-gray-medium flex items-center py-1"> <div className="color-gray-medium flex items-center py-1">
<span className="capitalize" style={{ maxWidth: '70px' }}> <span className="capitalize" style={{ maxWidth: '70px' }}>

8
frontend/app/components/ui/CountryFlag/CountryFlag.tsx
View file

@ -12,6 +12,7 @@ interface CountryFlagProps {
style?: CSSProperties; style?: CSSProperties;
width?: number; width?: number;
height?: number; height?: number;
showLabel?: boolean;
} }
@ -22,7 +23,8 @@ const CountryFlag: FC<CountryFlagProps> = ({
className = '', className = '',
style = {}, style = {},
width = 22, width = 22,
height = 15 height = 15,
showLabel = false,
}) => { }) => {
const knownCountry = !!country && country !== 'UN'; const knownCountry = !!country && country !== 'UN';
const countryFlag = knownCountry ? country.toLowerCase() : ''; const countryFlag = knownCountry ? country.toLowerCase() : '';
@ -54,14 +56,14 @@ const CountryFlag: FC<CountryFlagProps> = ({
{knownCountry ? ( {knownCountry ? (
<Tooltip title={fullGeoInfo} mouseEnterDelay={0.5}> <Tooltip title={fullGeoInfo} mouseEnterDelay={0.5}>
<div <div
className={cn(`flag flag-${countryFlag}`, className)} className={cn(`flag flag-${countryFlag} flex-shrink-0`, className)}
style={{ width: `${width}px`, height: `${height}px` }} style={{ width: `${width}px`, height: `${height}px` }}
/> />
</Tooltip> </Tooltip>
) : ( ) : (
renderUnknownCountry renderUnknownCountry
)} )}
{renderGeoInfo} {showLabel && renderGeoInfo}
</div> </div>
); );
}; };