From bc0531c7372e76a32c07fe8faef6baeb6954de0d Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Thu, 5 Mar 2020 09:34:45 +0800
Subject: [PATCH] fix button style of skin viewer

---
 resources/assets/src/components/Viewer.scss |  6 ++++++
 resources/assets/src/components/Viewer.tsx  | 10 +++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/resources/assets/src/components/Viewer.scss b/resources/assets/src/components/Viewer.scss
index 93327b26..4ffbaeb6 100644
--- a/resources/assets/src/components/Viewer.scss
+++ b/resources/assets/src/components/Viewer.scss
@@ -18,3 +18,9 @@
     cursor: pointer;
   }
 }
+
+.btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/resources/assets/src/components/Viewer.tsx b/resources/assets/src/components/Viewer.tsx
index ee06fad3..6ffb2840 100644
--- a/resources/assets/src/components/Viewer.tsx
+++ b/resources/assets/src/components/Viewer.tsx
@@ -216,29 +216,29 @@ const Viewer: React.FC<Props> = props => {
       <div className="card-footer">
         <div className="mt-2 mb-3 d-flex">
           <div
-            className="btn-color bg-white display-inline-block rounded-pill mr-2 mb-1 elevation-2"
+            className="btn-color bg-white rounded-pill mr-2 elevation-2"
             title={t('colors.white')}
             onClick={setWhite}
           />
           <div
-            className="btn-color bg-black display-inline-block rounded-pill mr-2 mb-1 elevation-2"
+            className="btn-color bg-black rounded-pill mr-2 elevation-2"
             title={t('colors.black')}
             onClick={setBlack}
           />
           <div
-            className="btn-color bg-gray display-inline-block rounded-pill mr-2 mb-1 elevation-2"
+            className="btn-color bg-gray rounded-pill mr-2 elevation-2"
             title={t('colors.gray')}
             onClick={setGray}
           />
           <div
-            className="btn-color bg-green display-inline-block rounded-pill mr-2 mb-1 elevation-2 text-center"
+            className={`btn-color bg-green rounded-pill mr-2 elevation-2 ${styles.btn}`}
             title={t('colors.prev')}
             onClick={setPrevPicture}
           >
             <i className="fas fa-arrow-left"></i>
           </div>
           <div
-            className="btn-color bg-green display-inline-block rounded-pill mr-2 mb-1 elevation-2 text-center"
+            className={`btn-color bg-green rounded-pill mr-2 elevation-2 ${styles.btn}`}
             title={t('colors.next')}
             onClick={setNextPicture}
           >