Minor UI issues

[MehrinFirdousi]

Minor UI issues that can be fixed in a future PR

~~- For the round border styling on user images, use the same one that the game uses so that the images aren't squeezed

Eg: The profile image on the top right corner is squeezed, please use the appropriate Bootstrap styling that avoids this, the correct one is already being used in game.css so please check that.~~

~~- Spacing issues, alignment and fonts, and font size issues with modals: edit profile, add friend, profile

Eg 1: In edit profile, the font sizes for the field labels are too small, the wrong font is being used for the buttons ~~

Eg 2: In the profile summary card, the font sizes, spacing and alignment are off for the icons, their labels, and the button

Here's a reference of how its expected (from the Figma prototype)

-~~ Profile popup is not centered on the screen:~~

• Spacing issues with pop ups:
  

- Profile background color is different, missing icons for match history and tournament history card headings and spacing differences

Here's the Figma prototype of the expected UI

• Player image in the tournament bracket resizes if the player name is long:

For all these issues, please refer to the Figma prototype for how it is expected. There are still a lot that aren't mentioned here.

_Originally posted by @MehrinFirdousi in https://github.com/ghamry03/ft_transcendence/issues/20#issuecomment-2004714123_

[karimomino]

can the comments be a bit more clear. I am unable to see what you are mentioning on my screen, would be easier if you attached screen shots or added reproducing steps. @MehrinFirdousi

[karimomino]

Profile image fixed, will be in the next PR