style(#2239): change height and color for modal

src/features/TournamentsPopup/styled.tsx

@@ -12,12 +12,12 @@ import { HeaderTitle } from 'features/PreferencesPopup/styled'
 export const ScModalContainer = styled(BaseModal)`
   background-color: rgba(0, 0, 0, 0.7);
   padding: 0 60px;
-  
+
   ${ModalWindow} {
     width: 679px;
-    height: 734px;
+    max-height: 95vh;
     padding: 0;
-    background-color: #333333;
+    background-color: #1E2127;
     border-radius: 5px;
     overflow-y: auto;
 
@@ -25,22 +25,17 @@ export const ScModalContainer = styled(BaseModal)`
 
     @media (max-width: 1370px) {
       max-width: 679px;
-      height: auto;
     }
 
-
     ${isMobileDevice
     ? css`
-      @media (max-width: 650px){
+         @media(max-width:650px) {
-        width: 95vw;
+           width: 95vw;
-        height: auto;
+         }
-        top: -7vh;
+         @media(orientation:landscape) {
-      }
+           min-width:95vw;
-
+         }
-      @media (orientation: landscape){
+       `
-        min-width: 95vw;
-      }
-    `
     : ''};
   }
 `
@@ -64,11 +59,11 @@ export const ScBody = styled.div`
 `
 
 export const ScHeaderTitle = styled(HeaderTitle)`
-  margin: 15px;
+  display: flex;
+  margin: 10px;
 
   ${isMobileDevice
     ? css`
-        display: flex;
         align-self: center;
       `
     : ''};
@@ -77,20 +72,34 @@ export const ScHeaderTitle = styled(HeaderTitle)`
 export const ScTournamentList = styled.div`
   width: 100%;
   margin-bottom: 20px;
+
+  ${isMobileDevice
+    ? css`
+        display: flex;
+        flex-direction: column;
+        align-self: center;
+      `
+    : ''};
 `
 
 export const ScList = styled.div`
   max-width: 212px;
   margin-top: 20px;
+
+  ${isMobileDevice
+    ? css`
+        display: flex;
+        flex-direction: column;
+        align-self: center;
+      `
+    : ''};
 `
 
 export const StyledLink = styled(ProfileLink)`
-  margin: 5px;
-
   display: flex;
   align-items: flex-start;
   color: white;
-  padding: 10px;
+  padding: 5px 10px;
 
   :hover {
     background-color: #2d323d;