Refactoring ConvertCard

[igeligel]

Type of Change

• [ ] Name variables and functions well
• [ ] Remove magic numbers
• [ ] Extract each step of logic into a function
• [X] 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

[Tshamp7]

I would like to do this one! Thanks!

[igeligel]

Hey @Tshamp7, I am assigning the ticket to you, feel free to work on that. If you encounter any problem, feel free to reach out to me.

[Tshamp7]

Hello! I made the change but I keep getting the following error and am unsure how to fix it.

   8:5   error  Delete `····`                   prettier/prettier
   9:1   error  Delete `······`                 prettier/prettier
  10:7   error  Delete `······`                 prettier/prettier
  14:1   error  Replace `········` with `····`  prettier/prettier
  15:1   error  Delete `······`                 prettier/prettier
  16:1   error  Replace `········` with `····`  prettier/prettier
  17:1   error  Delete `····`                   prettier/prettier
  18:1   error  Delete `··`                     prettier/prettier
  21:28  error  Insert `⏎`                      prettier/prettier

Do you know what I can do to resolve these errors? I think its just a stylistic difference.

[igeligel]

Hey @Tshamp7, you probably can run yarn lint --fix in the main directory and that should fix the issue. Sorry for not answering in such a long time.