From 28cb0681f2f8f0687bac30f308a1e10b452386e9 Mon Sep 17 00:00:00 2001
From: Rakov Roman <roman.rakov@instatsport.com>
Date: Tue, 31 May 2022 14:44:59 +0300
Subject: [PATCH] fix(#2451): fixed close button layout in choose sport popup

---
 .../components/SelectSportPopup/styled.tsx    | 33 ++++++++++++++++---
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/features/SportsFilter/components/SelectSportPopup/styled.tsx b/src/features/SportsFilter/components/SelectSportPopup/styled.tsx
index afc23c84..cb457ace 100644
--- a/src/features/SportsFilter/components/SelectSportPopup/styled.tsx
+++ b/src/features/SportsFilter/components/SelectSportPopup/styled.tsx
@@ -6,7 +6,7 @@ import { client } from 'config/clients'
 import { isMobileDevice } from 'config/userAgent'
 
 import { Logo } from 'features/Logo'
-import { ModalWindow } from 'features/Modal/styled'
+import { ModalWindow, ModalCloseButton } from 'features/Modal/styled'
 import { Modal as BaseModal } from 'features/Modal'
 import { customScrollbar } from 'features/Common'
 
@@ -148,8 +148,6 @@ export const ScSportsWrapper = styled.div`
 `
 
 export const ScModal = styled(BaseModal)`
-  background-color: rgba(0, 0, 0, 0.7);
-
   ${ModalWindow} {
     position: absolute;
     top: 200px;
@@ -161,18 +159,38 @@ export const ScModal = styled(BaseModal)`
     padding: 0;
     overflow-y: auto;
 
+    ${ModalCloseButton} {
+      font-size: 0;
+      padding: 17px 19px;
+
+      :hover {
+        background-color: rgba(255, 255, 255, 0.22);
+      }
+    }
+
     ${customScrollbar}
 
     ${isMobileDevice
     ? css`
-        position: static;
+        position: relative;
+        left: auto;
+        top: auto;
         min-width: 280px;
         max-height: 250px;
         height: auto;
-        top: -140px;
+
+        ${ModalCloseButton} {
+          padding: 16px 14px 15px 15px;
+        }   
     `
     : ''};
   }
+  
+  ${isMobileDevice
+    ? css`
+        background-color: rgba(0, 0, 0, 0.7);
+    `
+    : ''};  
 `
 export const ScHeaderTitle = styled.span`
   font-weight: 700;
@@ -253,4 +271,9 @@ export const ScSport = styled.div<SportProps>`
 
 export const ScSportName = styled.span`
   padding-left: 30px;
+
+  ${isMobileDevice
+    ? css`
+      padding: 0;
+    ` : ''};
 `