SureRank onboarding welcome template #339
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| }, | ||
| tags: [ 'autodocs' ], | ||
| }; | ||
|
|
There was a problem hiding this comment.
What: The image source is hardcoded and points to an external URL.
Why: Hardcoding URLs can lead to future maintenance challenges if the image location changes or becomes unavailable. It's advisable to ensure that images are sourced from reliable internal assets or include a mechanism to handle external links gracefully.
How: Consider moving the image to your local assets and referencing it dynamically. If external hosting is necessary, ensure to provide fallback content in case the image fails to load.
| /> | ||
| </div> | ||
| <div> | ||
| <ul className="divide-y divide-gray-200 list-none pl-0 space-y-2"> |
There was a problem hiding this comment.
What: The list of features is hard-coded into the component.
Why: Hard-coded values can impact maintainability and scalability; changes would require altering the code directly rather than updating a data source or configuration.
How: Consider moving the feature list into a configuration object or an array and map over it to render the list dynamically. This allows for easier updates and better separation of data and presentation.
| @@ -616,3 +616,42 @@ export const EmailSetup = (props) => ( | |||
| /> | |||
There was a problem hiding this comment.
What: Consider adding PropTypes to the new component SureRankLogoFull for type checking.
Why: Using PropTypes can help ensure that the props being passed to the component are of the expected types, improving reliability and making it easier to debug potential issues related to prop misuse.
How: Import PropTypes at the top of your file: import PropTypes from 'prop-types';. After your component definition, add a line such as: SureRankLogoFull.propTypes = { width: PropTypes.number, height: PropTypes.number, ... }; Adjust the prop types according to the props that your component accepts.
| @@ -616,3 +616,42 @@ export const EmailSetup = (props) => ( | |||
| /> | |||
There was a problem hiding this comment.
What: Ensure that the SVG does not contain any user input to avoid potential XSS vulnerabilities.
Why: SVG can contain scripts or links which, if exposed to user input, could lead to XSS attacks. Always sanitize any data that gets rendered or passed into the SVG such as dynamically changing colors or attributes.
How: Ensure no dynamic props or values are being passed directly to the SVG. If any props are user-driven, validate and sanitize them before usage.
| @@ -616,3 +616,42 @@ export const EmailSetup = (props) => ( | |||
| /> | |||
There was a problem hiding this comment.
What: Consider optimizing your SVG paths if possible, as they can be quite large and complex.
Why: Long paths can lead to larger file sizes which may impact rendering speed, especially on lower-end devices. Reducing the complexity of the SVG can improve performance.
How: You might use a tool like SVGOMG or SVGO to optimize your SVG paths and reduce size without losing quality.
There was a problem hiding this comment.
- The template does not match the Figma mockup.
- Topbar and content container padding do not match.
- The gaps between the heading and sub-heading do not match.
- Use the same image and set the border radius to the same as the Figma mockup.
- Match the check mark icon size, gap, and alignment with the Figma mockup.
- Update and match the "Get started" button design and the gap between the divider and the Figma mockup.
Description
This PR adds the template for this figma design ->
https://www.figma.com/design/5PxINaOCAK9NdEHMlQk382/Force-UI-Components?node-id=13493-57551&t=kO8OVYnpvRKoerkS-4
Screenshots
https://tinyurl.com/27yczjnv
https://tinyurl.com/26829ks6
Types of changes
How has this been tested?
Checklist: