Use image to display close button.

trendmicro-frontend · May 31, 2018 · b458908 · b458908
1 parent ea13c09
commit b458908
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/src/Modal.jsx b/src/Modal.jsx
@@ -64,9 +64,7 @@ class Modal extends PureComponent {
                 type="button"
                 className={styles.close}
                 onClick={this.handleClose}
-            >
-                &times;
-            </button>
+            />
         );
     }
     renderModalContent({ showCloseButton, size, className, children, ...props }) {

diff --git a/src/close.svg b/src/close.svg
diff --git a/src/index.styl b/src/index.styl
@@ -96,15 +96,18 @@
         margin: 0;
         line-height: 20px;
         cursor: pointer;
-        background: transparent;
+        background: transparent url('./close.svg');
         border: 0;
         -webkit-appearance: none;
-        font-size: 30px;
-        font-weight: normal;
-        color: #999999;
         text-shadow: none;
         opacity: 1;
         outline: none;
+        width: 16px;
+        height: 16px;
+        opacity: .5;
+        &:hover, &:focus {
+            opacity: 1;
+        }
     }
 
     .modal-header {