search

UNLV-CS472-672 / 2024-S-GROUP1-Roadwatch

The Roadwatch project aims to revolutionize how communities interact with and navigate their local road systems by providing a combined platform for reporting road conditions, alerting users to hazards, allowing community input, and influencing road infrastructure improvements.
https://cs472-roadwatch.vercel.app
2 stars 5 forks source link

Style Audit: Ensure Compliance with Stylelint #131

Closed KingJordan152 closed 3 weeks ago

KingJordan152 commented 4 weeks ago

Description

When this project was first initialized, I added a configuration for Stylelint, which is a linter that forces us to align on certain design principles and practices. Some of the things it's strict about include:

Unfortunately, the only way to see these errors is by either using the Stylelint CLI or by installing the Stylelint VS Code extension, so most members on the team didn't realize they were violating Stylelint rules.

The following is an example of Stylelint errors in one of our Sass files:

image

For this ticket, comb through the codebase to ensure we're not violating any Stylelint rules.

Acceptance Criteria

Help

The most prominent issue you'll likely come across is Unexpected unit "px" (unit-allowed-list). When I set up Stylelint, I made it so that the only units you're allowed to use are the following:

image

The main unit I wanted everyone to use was rem.

rem values are calculated based off the default font size the user has set in their browser. By default, all browsers set this value to 16px. By using rem, we can scale every aspect of the site according to the user's default font size, thereby allowing users with vision issues to have an enjoyable experience using our site.

When we only use px, the size of all elements are constant, meaning that while the text size might change, things like images, buttons, speed dials, markers, etc. all stay the same, making them inaccessible to users with vision issues.

For more information on rem, please read this article: https://www.freecodecamp.org/news/why-use-rem-to-set-font-size-in-css/#:~:text=For%20styling%20a%20webpage%2C%20we,the%20size%20of%20the%20screen.

[!TIP] To convert px to rem, divide the number of pixels by 16.

For example...

font-size: 24px;

will become

font-size: 1.5rem;
trevortippery commented 3 weeks ago

I can help if the task gets cumbersome.

RedPenguin88 commented 3 weeks ago

@trevortippery Sure. From what I can tell, here are all of the relevant files:

client/src/components/LocationNotification/LocationNotification.module.scss
client/src/components/EnableNotification/EnableNotification.module.scss
client/src/components/Map/Map.module.scss
client/src/components/PasswordField/PasswordField.module.scss
client/src/components/CreatePost/CreatePost.module.scss
client/src/components/ForgotPassword/ForgotPassword.module.scss
client/src/components/CommunityCard/CommunityCard.module.scss
client/src/components/SignUp/GeneralInfo/GeneralInfo.module.scss
client/src/components/SignUp/SignUp.module.scss
client/src/components/Loading/Loading.module.scss
client/src/components/CreateAccount/CreateAccount.module.scss
client/src/components/CustomButton/CustomButton.module.scss
client/src/components/CommunityPost/CommunityPost.module.scss
client/src/components/Navbar/Navbar.module.scss
client/src/components/Header/Header.module.scss
client/src/components/ResetPassword/ResetPassword.module.scss
client/src/components/ResetPasswordVerify/ResetPasswordVerify.module.scss
client/src/components/TextField/TextField.module.scss
client/src/pages/Profile/Profile.module.scss
client/src/pages/Instructions/Instructions.module.scss
client/src/pages/Register/Register.module.scss
client/src/pages/Login/Login.module.scss
client/src/pages/Community/Community.module.scss
client/src/pages/Home/Home.module.scss
client/src/pages/Chat/Chat.module.scss
client/src/pages/ResetPassword/ResetPassword.module.scss
client/src/pages/Forgot/Forgot.module.scss

There are 27 files here, so one of us handles these (14 files):

client/src/components/LocationNotification/LocationNotification.module.scss
client/src/components/EnableNotification/EnableNotification.module.scss
client/src/components/Map/Map.module.scss
client/src/components/PasswordField/PasswordField.module.scss
client/src/components/CreatePost/CreatePost.module.scss
client/src/components/ForgotPassword/ForgotPassword.module.scss
client/src/components/CommunityCard/CommunityCard.module.scss
client/src/components/SignUp/GeneralInfo/GeneralInfo.module.scss
client/src/components/SignUp/SignUp.module.scss
client/src/components/Loading/Loading.module.scss
client/src/components/CreateAccount/CreateAccount.module.scss
client/src/components/CustomButton/CustomButton.module.scss
client/src/components/CommunityPost/CommunityPost.module.scss
client/src/components/Navbar/Navbar.module.scss

and the other takes the rest (13 files):

client/src/components/Header/Header.module.scss
client/src/components/ResetPassword/ResetPassword.module.scss
client/src/components/ResetPasswordVerify/ResetPasswordVerify.module.scss
client/src/components/TextField/TextField.module.scss
client/src/pages/Profile/Profile.module.scss
client/src/pages/Instructions/Instructions.module.scss
client/src/pages/Register/Register.module.scss
client/src/pages/Login/Login.module.scss
client/src/pages/Community/Community.module.scss
client/src/pages/Home/Home.module.scss
client/src/pages/Chat/Chat.module.scss
client/src/pages/ResetPassword/ResetPassword.module.scss
client/src/pages/Forgot/Forgot.module.scss

I can handle the 14 files.

trevortippery commented 3 weeks ago

Alright will do.

KingJordan152 commented 3 weeks ago

@trevortippery @RedPenguin88 I forgot to mention, you don't have to convert px to rem that are 3 or below. Converting these values gives you a rem value with a really long decimal. I believe I configured Stylelint not to complain about these cases, but in case I didn't you can modify the configuration file.

RedPenguin88 commented 3 weeks ago

@KingJordan152 What would we consider to be a long decimal? Yes px values of 3 or below give rem values with 4 numbers after the decimal point. Consider, then, the px values of 5, 13, and even 85. These give rem values of 0.3125, 0.8125, and 5.3125.

These are examples in CreatePost.module.scss of the before and after.

https://github.com/UNLV-CS472-672/2024-S-GROUP1-Roadwatch/assets/105743189/536db2c7-7219-4a26-945b-d6dfc4b7f36b

Would these rem values have too many numbers after the decimal point?

KingJordan152 commented 3 weeks ago

@RedPenguin88 That's a great point. Typically, in my personal projects and at work, I only use px values that are a multiple of 4. This gives rem values that increment by values of 0.25 (e.g., 4px = 0.25rem, 8px = 0.5rem, etc.).

If you want, you can try rounding px values to the nearest multiple of 4 to get these nice rem values, or round the rem values to the nearest hundredth place. But since that involves more work, you can just ignore long decimals for any value that's greater than 3px. The choice is yours 😎

RedPenguin88 commented 3 weeks ago

Ok. If I find a way to automate it with regex or something, then I might do the rounding px method. Otherwise, I'll just ignore long decimals for values greater than 3px. Thanks for the input!