Language button's arrow icon and text not aligned properly.

[prajwalkulkarni]

Describe the bug

The Language button consisting of an arrow icon(up or down depending on the state) and a div with text content in it, is supposed to be oriented row-wise and properly aligned. But, it is not properly aligned, and has improper padding, leading to a large button, with lots of inconsistent space around.

To Reproduce

Steps to reproduce the behavior:

1. Start the dev server
2. Go to the login or signup page
3. Observe the Language button with a misaligned arrow and text.

Expected behavior

The icon and text inside the button should be properly aligned, and preferably not have large space around/between.

Logs

Screenshot depicting the problem.

Environment (please complete the following information):

• OS: Windows 10
• Browser: Internet Edge, Chrome

[prajwalkulkarni]

When I cloned this project and started to look for issues before I could even register and navigate to authenticated routes, I could find lots of problems in signup/login routes only, most of them being related to styling. Upon looking further into the issue, I could notice that the stylesheet codes(SCSS) are in a pretty bad form, be it how attributes are given absolute values (in px) or code duplication by writing tons of media queries with one or two changes to support different screen sizes. Additionally, I could also notice how un-recommended properties are used (such as float) when one could rather adopt flexbox or grid styling. This ultimately fails the site from being responsive and continues having inconsistencies across different browsers.
I feel the whole styling could be re-written using a library like tailwindCSS for the following reasons:

1. tailwindCSS uses a mobile-first approach, solving the issue of responsiveness.
2. It provides standard breakpoints suiting to different screen sizes eliminating the need of writing different media queries for different screen sizes.
3. Styles are defined within the elements className eliminating the need for external stylesheets, thereby making the codebase much lighter and, easier to maintain and improve the readability of the styles.
4. Considers important factors, such as colors, typography, and sizing.
5. Minified CSS bundle making the website more performant.

These points are from my personal usage and experience. I would love to hear feedback from the project owners/moderators on what they think about this.