Refactoring ConvertCard #7
Description
Type of Change
- Name variables and functions well
- Remove magic numbers
- Extract each step of logic into a function
- Extract styled component
- Remove duplicate code
Description
Currently, ConvertCard is a styled component and should be in its own file.
Code Before
const ConvertCard = styled.div`
font-family: Roboto, sans-serif;
min-height: 50px;
background-color: #white;
box-shadow: ${props =>
props.theme.main === 'dark'
? '0 1px 4px 0 rgb(41, 57, 93)'
: '0 1px 4px 0 rgba(0, 0, 0, 0.37)'};
border-radius: 8px;
${props => {
if (props.theme.main === 'dark') {
return 'border: 1px solid hsl(221, 25%, 65%)';
}
return null;
}}
`;Code Expected after Refactoring
export const ConvertCard = styled.div`
font-family: Roboto, sans-serif;
min-height: 50px;
background-color: #white;
box-shadow: ${props =>
props.theme.main === 'dark'
? '0 1px 4px 0 rgb(41, 57, 93)'
: '0 1px 4px 0 rgba(0, 0, 0, 0.37)'};
border-radius: 8px;
${props => {
if (props.theme.main === 'dark') {
return 'border: 1px solid hsl(221, 25%, 65%)';
}
return null;
}}
`;This component should then be imported by the main file and used there.
Files involved
index.tsx./src/styled/ConvertCard.ts- This folder/file might not exist and needs to created