Merge pull request #194 from MyEtherWallet/fix/close-button-position

fix: close button position

Author: kvhnuke

src/connectWindow/images/close.svg

@@ -1,4 +1,4 @@
-const icon =
-  'data:image/png;base64,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';
+import closeIcon from './close.svg';
+const icon = closeIcon;
 
 export default icon;

src/connectWindow/images/closeIconBlack.js

@@ -49,12 +49,31 @@ const cssStyles = `
       
      .close-mew-modal{
         position: absolute;
-        padding-top: 10px;
-        right: 10px !important;
-        top: 0;
-        width: 20px;
+        right: 16px !important;
+        top: 11px;
+        height: 22px;
+        width: 22px;
         cursor: pointer;
+        padding: 7px;
         z-index: 10;
+        border-radius: 50%;
+        transition: background-color 0.2s ease;
+        display: flex;
+        align-items: center;
+      }
+
+      .close-mew-modal:hover {
+        background-color: #ebebeb;
+      }
+
+      .close-mew-modal:active {
+        background-color: #bababa;
+      }
+
+      .close-mew-modal img {
+        opacity: 0.6;
+        height: 22px;
+        width: 22px;
       }
       
       .mew-qr-code {
@@ -310,10 +329,10 @@ const htmlDesign = (
 ) => {
   return `
     <div class="outer-container-mew-modal">
+      <div class="close-mew-modal" id="close-mew-modal" aria-label="close modal" data-close>
+          <img src="${iconImage}" />
+      </div>
       <div class="container-mew-modal">
-              <div class="close-mew-modal" id="close-mew-modal" aria-label="close modal" data-close>
-          <img src="${iconImage}" height="17" width="11"/>
-        </div>
       <div class="upper-text">
 
         <p class="mew-text-one">Connect to MEW&nbsp;wallet app</p>