React.js, react-router, flex, grid, axios

Hi!

Some points for improvement -

• I guess the body background color in light mode is not correct.
• You are sending a separate network request for every filter change. A better approach can be fetching all countries once on the initial page load, storing the data in a variable and performing all the filter operations on the stored data.
• There are many ways to manage the country flag. If you want to keep using the flag as a background image, you can change the background styling as below :-

/*** CSS ***/
.image{
    background-size: contain; /* So that you don't end up cutting the flag */
    background-position: top; /* Keeping the flag on top */
    background-repeat: no-repeat; /* Don't repeat the background */
}

• The icon and text in theme changer are misaligned.

/*** CSS ***/
.theme-toggle{
    align-items: center;
}

• Set cursor: pointer on clickable elements.

Some additional improvements (optional) -

• You can set pagination or infinite scrolling for long lists of countries.
• Allow users to directly visit country detail view by entering url in browser like https://countries-search-api.netlify.app/detail/India.

Happy Coding!