From 582d82868d47952cacbf3b14a50f401a371f4c80 Mon Sep 17 00:00:00 2001
From: jas0ncn <me@ijason.cc>
Date: Mon, 24 Sep 2018 22:40:36 +0800
Subject: [PATCH] Improve: optimize proxies page style

---
 src/containers/App.scss                                |  4 ----
 .../Proxies/{ => components}/Proxy/index.tsx           |  4 +---
 .../Proxies/{ => components}/Proxy/style.scss          | 10 +++++-----
 src/containers/Proxies/components/index.ts             |  1 +
 src/containers/Proxies/index.tsx                       |  2 +-
 src/containers/Proxies/style.scss                      |  1 +
 6 files changed, 9 insertions(+), 13 deletions(-)
 rename src/containers/Proxies/{ => components}/Proxy/index.tsx (91%)
 rename src/containers/Proxies/{ => components}/Proxy/style.scss (78%)
 create mode 100644 src/containers/Proxies/components/index.ts

diff --git a/src/containers/App.scss b/src/containers/App.scss
index 21ec1f1..7a9c625 100644
--- a/src/containers/App.scss
+++ b/src/containers/App.scss
@@ -1,5 +1 @@
 @import '~@styles/common';
-
-.page-container {
-    width: 545px;
-}
diff --git a/src/containers/Proxies/Proxy/index.tsx b/src/containers/Proxies/components/Proxy/index.tsx
similarity index 91%
rename from src/containers/Proxies/Proxy/index.tsx
rename to src/containers/Proxies/components/Proxy/index.tsx
index 8b374fb..92ad7a4 100644
--- a/src/containers/Proxies/Proxy/index.tsx
+++ b/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
diff --git a/src/containers/Proxies/Proxy/style.scss b/src/containers/Proxies/components/Proxy/style.scss
similarity index 78%
rename from src/containers/Proxies/Proxy/style.scss
rename to src/containers/Proxies/components/Proxy/style.scss
index c6db32c..750f781 100644
--- a/src/containers/Proxies/Proxy/style.scss
+++ b/src/containers/Proxies/components/Proxy/style.scss
@@ -4,23 +4,23 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    height: 80px;
-    width: 80px;
+    justify-content: center;
+    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;
diff --git a/src/containers/Proxies/components/index.ts b/src/containers/Proxies/components/index.ts
new file mode 100644
index 0000000..693bc69
--- /dev/null
+++ b/src/containers/Proxies/components/index.ts
@@ -0,0 +1 @@
+export * from './Proxy'
diff --git a/src/containers/Proxies/index.tsx b/src/containers/Proxies/index.tsx
index 1b8412b..97ccf3e 100644
--- a/src/containers/Proxies/index.tsx
+++ b/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<{}, {}> {
diff --git a/src/containers/Proxies/style.scss b/src/containers/Proxies/style.scss
index 73c3649..c53e635 100644
--- a/src/containers/Proxies/style.scss
+++ b/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;