Responsive QR code component using React, SCSS and BEM

Please log in to post a comment
Log in with GitHubCommunity feedback
- @bulhakovolexii
Hi, nice work!
I see that the last commit to this repository was 2 years ago, so I'm not sure if feedback is still needed, however, below are some things I would suggest to improve.
I see that you are using react, but it doesn't add semantic tags on its own. It would be worth wrapping the root element in a main tag, for example.
I didn't see any accessibility or adaptability issues with this solution.
To improve code reuse, it would be cool to put the values for colors, and padding, in css variables. Something like this:
:root { /* colors */ --slate-900: #1f314f; --slate-500: #68778d; --slate-300: #d5e1ef; --white: #fff; /* spacing */ --spacing-500: 40px; --spacing-300: 24px; --spacing-200: 16px; }
Regarding design compliance, there are some shortcomings, such as the wrong border-radius in the square code, as well as the wrong dimensions.
The latter can be easily avoided with the following snippet.
* { box-sizing: border-box; }
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord