Improve: optimize proxies page style

src/containers/App.scss

@@ -1,5 +1 @@
 @import '~@styles/common';
-
-.page-container {
-    width: 545px;
-}

src/containers/Proxies/components/Proxy/index.tsx

@@ -16,7 +16,7 @@ interface ProxyProps extends BaseComponentProps {
     name: string
 }
 
-const Proxy: React.SFC<ProxyProps> = props => {
+export const Proxy: React.SFC<ProxyProps> = props => {
     const { type, name, className } = props
     const icon = iconMapping[type]
     return (
@@ -26,5 +26,3 @@ const Proxy: React.SFC<ProxyProps> = props => {
         </div>
     )
 }
-
-export default Proxy

src/containers/Proxies/components/Proxy/style.scss

@@ -4,23 +4,23 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    height: 80px;
+    justify-content: center;
-    width: 80px;
+    height: 100px;
+    width: 100px;
     box-shadow: 0 0 20px rgba($color-primary-dark, 0.2);
     border-radius: 4px;
 }
 
 .proxy-icon {
-    margin-top: 12px;
     height: 40px;
     width: 40px;
 }
 
 .proxy-name {
     width: 80%;
-    margin-top: 6px;
+    margin-top: 8px;
     color: $color-primary-dark;
-    font-size: 10px;
+    font-size: 12px;
     text-overflow: ellipsis;
     overflow: hidden;
     text-align: center;

src/containers/Proxies/components/index.ts

@@ -0,0 +1 @@
+export * from './Proxy'

src/containers/Proxies/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Header, Icon } from '@components'
 import { ProxyType } from '@models'
 
-import Proxy from './Proxy'
+import { Proxy } from './components'
 import './style.scss'
 
 export class Proxies extends React.Component<{}, {}> {

src/containers/Proxies/style.scss

@@ -1,6 +1,7 @@
 @import '~@styles/variables';
 
 .proxies-list {
+    margin: 10px 0;
     display: flex;
     flex-wrap: wrap;
     list-style: none;