fix: style of the update bee version button (#222)

* fix: style of the update bee version button

* chore: remove unused import

src/pages/info/index.tsx

@@ -1,5 +1,5 @@
 import { ReactElement, useContext } from 'react'
-import { Chip, Button } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { Context as BeeContext } from '../../providers/Bee'
@@ -30,15 +30,11 @@ export default function Status(): ReactElement {
             <div>
               <a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
                 Bee
-              </a>{' '}
+              </a>
-              <span>{latestUserVersion || '-'}</span>{' '}
+              {` ${latestUserVersion || '-'} `}
-              {isLatestBeeVersion ? (
+              <Button size="small" variant="outlined" href={latestBeeVersionUrl} target="_blank">
-                <Chip style={{ marginLeft: '7px', color: '#2145a0' }} size="small" label="latest" />
+                {isLatestBeeVersion ? 'latest' : 'update'}
-              ) : (
-                <Button size="small" variant="outlined" href={latestBeeVersionUrl}>
-                  update
               </Button>
-              )}
             </div>
           }
         />

src/theme.tsx

@@ -18,11 +18,67 @@ const componentsOverrides = (theme: Theme) => ({
     maxWidthXl: { padding: theme.spacing(8) },
   },
   MuiButton: {
-    label: { margin: theme.spacing(2) },
     startIcon: { marginLeft: theme.spacing(1) },
     endIcon: { marginRight: theme.spacing(1) },
+    outlined: {
+      border: 'none',
+      borderRadius: theme.spacing(10),
+      color: theme.palette.primary.main,
+      backgroundColor: '#fcf2e8',
+    },
+    outlinedSizeSmall: {
+      padding: theme.spacing(1),
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+      boxShadow: 'none',
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+        boxShadow: 'none',
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.primary.main,
+          color: 'white',
+          boxShadow: 'none',
+        },
+      },
+    },
+    outlinedSizeLarge: {
+      padding: theme.spacing(4),
+      borderRadius: 0,
+      boxShadow: 'none',
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+        boxShadow: 'none',
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.primary.main,
+          color: 'white',
+          boxShadow: 'none',
+        },
+      },
+    },
     containedSizeLarge: {
-      padding: 0,
+      padding: theme.spacing(4),
+      borderRadius: 0,
+      boxShadow: 'none',
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+        boxShadow: 'none',
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.primary.main,
+          color: 'white',
+          boxShadow: 'none',
+        },
+      },
+    },
+    containedSizeSmall: {
+      padding: theme.spacing(1),
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
       borderRadius: 0,
       boxShadow: 'none',
       '&:hover': {
@@ -38,9 +94,9 @@ const componentsOverrides = (theme: Theme) => ({
       },
     },
     contained: {
+      padding: theme.spacing(2),
       backgroundColor: 'white',
       boxShadow: 'none',
-      padding: 0,
       borderRadius: 0,
       '&:hover': {
         backgroundColor: theme.palette.primary.main,