Created RoleCard Component #1129
Conversation
|
| import React from 'react' | ||
| import { RoleCardContainer, PicWrapper, TextContents, IconImg} from './StyledRoleCard' | ||
|
|
||
| // @description This component renders the RoleCard Component. |
There was a problem hiding this comment.
you can comment in multiple lines using /** @description ....comment */
| return ( | ||
| <RoleCardContainer> | ||
|
|
||
| <PicWrapper> |
There was a problem hiding this comment.
Rename this styled component to 'IconWrapper', this explains the code better
|
|
||
| export const RoleCardContainer = styled.div` | ||
| margin-top: 50px; | ||
| /* Components */ |
There was a problem hiding this comment.
Not 100% sure if this is the right type of comments for this, but if your not receiving any errors, then this is fine. could you double check in the console: so when you run the app, inspect the code through the browser, then head to the console, any errors printed? if not this is fine
There was a problem hiding this comment.
There was no error.
| switch (props.theme) { | ||
| case 'theme1': | ||
| return ( | ||
| <TextWrapper> |
There was a problem hiding this comment.
This works fine., but is there a way to refine this condition to be cleaner? so we're not duplicating the <Typography style={....}/> .... <Typography /> x2 for each case. Just an idea - this logic does not have to remain in the StyledRoleCard.js file, have a look at adding classes dynamically to html tags e.g <TextWrapper className={'${theme}'} etc
There was a problem hiding this comment.
Added classes for each theme dynamically.
There was a problem hiding this comment.
Can you revert your changes. There's no need to push this into development/user-profile branch. As the role card is not meant to be shown here. This should only be in your local/task branch.
There was a problem hiding this comment.
Deleted the RoleCard Component from UserOnboardingModal.js.
<RoleCard iconImg={"Onboarding"} title={"Developer"} subtitle={"You are here to work on our codebase"} theme={"theme1"} />