From 628ccf84993363e902e888b029f51dac7c933245 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 22 Nov 2018 16:20:02 +0200
Subject: [PATCH] Popup border calculated more accurately

---
 src/common/Popup/Popup.js    | 23 ++++++++++++-----------
 src/common/Popup/styles.less | 14 +++++++++-----
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/common/Popup/Popup.js b/src/common/Popup/Popup.js
index c596fb8c8..703cd5470 100644
--- a/src/common/Popup/Popup.js
+++ b/src/common/Popup/Popup.js
@@ -24,9 +24,9 @@ class Popup extends Component {
     }
 
     componentDidMount() {
-        // window.addEventListener('blur', this.close);
-        // window.addEventListener('resize', this.close);
-        // window.addEventListener('keyup', this.onKeyUp);
+        window.addEventListener('blur', this.close);
+        window.addEventListener('resize', this.close);
+        window.addEventListener('keyup', this.onKeyUp);
     }
 
     componentWillUnmount() {
@@ -105,24 +105,25 @@ class Popup extends Component {
         }
 
         if (!!this.props.borderColor) {
-            this.borderTopRef.current.style.backgroundColor = this.props.borderColor;
-            this.borderRightRef.current.style.backgroundColor = this.props.borderColor;
-            this.borderBottomRef.current.style.backgroundColor = this.props.borderColor;
-            this.borderLeftRef.current.style.backgroundColor = this.props.borderColor;
+            this.borderTopRef.current.style.borderTopColor = this.props.borderColor;
+            this.borderRightRef.current.style.borderRightColor = this.props.borderColor;
+            this.borderBottomRef.current.style.borderBottomColor = this.props.borderColor;
+            this.borderLeftRef.current.style.borderLeftColor = this.props.borderColor;
             this.labelRef.current.style.border = `1px solid ${this.props.borderColor}`;
+            const borderWidth = 1 / window.devicePixelRatio;
             if (menuDirections.top) {
                 this.labelRef.current.style.borderTop = 'none';
                 if (menuDirections.left) {
-                    this.borderBottomRef.current.style.right = `${labelRect.width - 1}px`;
+                    this.borderBottomRef.current.style.right = `${labelRect.width - borderWidth}px`;
                 } else {
-                    this.borderBottomRef.current.style.left = `${labelRect.width - 1}px`;
+                    this.borderBottomRef.current.style.left = `${labelRect.width - borderWidth}px`;
                 }
             } else {
                 this.labelRef.current.style.borderBottom = 'none';
                 if (menuDirections.left) {
-                    this.borderTopRef.current.style.right = `${labelRect.width - 1}px`;
+                    this.borderTopRef.current.style.right = `${labelRect.width - borderWidth}px`;
                 } else {
-                    this.borderTopRef.current.style.left = `${labelRect.width - 1}px`;
+                    this.borderTopRef.current.style.left = `${labelRect.width - borderWidth}px`;
                 }
             }
         }
diff --git a/src/common/Popup/styles.less b/src/common/Popup/styles.less
index 68264558f..8feedfef8 100644
--- a/src/common/Popup/styles.less
+++ b/src/common/Popup/styles.less
@@ -8,34 +8,38 @@
 
     .border {
         position: absolute;
-        background-color: transparent;
+        border: 0 solid transparent;
 
         &-top {
             left: 0;
             top: 0;
             right: 0;
-            height: 1px;
+            height: 0;
+            border-top-width: 1px;
         }
 
         &-bottom {
             left: 0;
             bottom: 0;
             right: 0;
-            height: 1px;
+            height: 0;
+            border-bottom-width: 1px;
         }
 
         &-left {
             top: 0;
             bottom: 0;
             left: 0;
-            width: 1px;
+            width: 0;
+            border-left-width: 1px;
         }
 
         &-right {
             top: 0;
             bottom: 0;
             right: 0;
-            width: 1px;
+            width: 0;
+            border-right-width: 1px;
         }
     }
 }
\ No newline at end of file