fix: rest MUI components - Introduced ForwardRef (#224)

* refactor(162): added forwardRef Card

* refactor(162): introduced forwardRefDivider

* refactor(162): introduced forwardRef MuiComponents

* refactor(162): introducing forwardRef

* refactor(162): introduced forwardRef

* refactor(162): introduced forwardRef

* fix(162): fixed link

* fix: fixed port number

* fix: fixed duplicated id

* fix: fixed ref iconbutton

* fix: updated snaps

* fix: fixed port

* fix: fixed eslint errors

* fix: the item should be a button

* fix: fixed eslint errors

src/components/Dependencies/Dependencies.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { useHistory } from 'react-router-dom';
-import CardContent from '@material-ui/core/CardContent';
 
+import CardContent from '../../muiComponents/CardContent';
 import { PackageDependencies } from '../../../types/packageMeta';
 import { DetailContext } from '../../pages/Version';
 import NoItems from '../NoItems';

src/components/Dependencies/styles.ts

@@ -1,14 +1,12 @@
 import styled from 'react-emotion';
-import Chip from '@material-ui/core/Chip';
 
 import { fontWeight } from '../../utils/styles/sizes';
 import Text from '../../muiComponents/Text';
 import Card from '../../muiComponents/Card';
+import Chip from '../../muiComponents/Chip';
 
 export const CardWrap = styled(Card)({
-  '&&': {
-    margin: '0 0 16px',
-  },
+  margin: '0 0 16px',
 });
 
 export const StyledText = styled(Text)({
@@ -17,16 +15,12 @@ export const StyledText = styled(Text)({
 });
 
 export const Tags = styled('div')({
-  '&&': {
-    display: 'flex',
-    justifyContent: 'start',
-    flexWrap: 'wrap',
-    margin: '0 -5px',
-  },
+  display: 'flex',
+  justifyContent: 'start',
+  flexWrap: 'wrap',
+  margin: '0 -5px',
 });
 
 export const Tag = styled(Chip)({
-  '&&': {
-    margin: '5px',
-  },
+  margin: '5px',
 });