Improve components structure

[irwinschmitt]

Is your feature request related to a problem? Please describe. Several components are not following the standard structure.

Describe the solution you'd like A component should have the following structure:

• /ComponentName
  • /index.jsx
  • /styles.js

All frequently used properties in a component must be added to a new component created from styled-components:

index.jsx

import { StyledGridContainer, StyledGridItem, StyledGridItemContainer } from "./styles";

// ...

<StyledGridContainer />
<StyledGridItem />
<StyledGridItemContainer />

styles.js

import styled from "styled-components";
import MuiGrid from '@material-ui/core/Grid';

// ...

export const StyledGridContainer = styled(MuiGrid).attrs(() => ({
  grid: true,
}))`
  border-radius: 5px;
  // ...
`

export const StyledGridItem = styled(MuiGrid).attrs(() => ({
  item: true,
}))`
  // ...
`

export const StyledGridItemContainer = styled(MuiGrid).attrs(() => ({
  grid: true,
  item: true,
}))`
  // ...
`

Describe alternatives you've considered We will be happy with any suggestions for improvement you give us.

[aquiles23]

I will make that for the circuit component. I saw that all circles have r=4 attribute and all rect have a rx=4 attribute, i can simplify them with a styles.js file. The other values doesn't have a pattern so i will not touch them.