feat: 🎸 ott-2696-desktopSportsMenu

src/features/HomePage/components/HeaderFilters/styled.tsx

@@ -33,7 +33,7 @@ type Props = {
 export const ScFilterItem = styled.div<Props>`
   text-transform: uppercase;
   font-weight: 700;
-  font-size: 14px;
+  font-size: 18px;
   color: rgba(255, 255, 255, 0.5);
   margin: 0 10px;
   cursor: pointer;

src/features/SportsFilter/components/SelectSport/index.tsx

@@ -1,7 +1,11 @@
 import { T9n } from 'features/T9n'
 import type { SportsType } from 'features/SportsFilter'
 
-import { ScSportsFilter, ScArrow } from './styled'
+import {
+  Arrows,
+  ScSportsFilter,
+  ScFilterTitle,
+} from './styled'
 
 type SportsFilterProps = {
   onModalOpen: () => void,
@@ -16,10 +20,12 @@ export const SelectSport = ({
   sport,
   sports,
 }: SportsFilterProps) => (
-  <ScSportsFilter onClick={onModalOpen} opacity={sport[0] === 'all_sports' ? 0.5 : 1}>
-    <T9n t={sports[sport[0] as keyof typeof sports]} />
+  <ScSportsFilter onClick={onModalOpen}>
+    <ScFilterTitle opacity={sport[0] === 'all_sports' ? 0.5 : 1}>
+      <T9n t={sports[sport[0] as keyof typeof sports]} />
+    </ScFilterTitle>
     &nbsp;
     {sport.length > 1 ? `+ ${sport.length - 1}` : ''}
-    <ScArrow refIcon='Arrow' color='#ffffff' direction={open ? 180 : 0} />
+    <Arrows active={open} />
   </ScSportsFilter>
 )

src/features/SportsFilter/components/SelectSport/styled.tsx

@@ -1,32 +1,66 @@
 import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
-import { Icon } from 'features/Icon'
 
-type PropsFilter = {
+type PropsFilterTitle = {
   opacity: number,
 }
-export const ScSportsFilter = styled.div<PropsFilter>`
+
+type PropsArrows = {
+  active?: boolean,
+}
+
+export const ScSportsFilter = styled.div`
   display: flex;
   color: #ffffff;
-  opacity: ${({ opacity }) => opacity};
-  font-size: 14px;
+  font-size: 1rem;
   text-transform: uppercase;
   font-weight: 700;
   cursor: pointer;
   align-items: center;
-  width: 20%;
+  justify-content: space-between;
+  min-width: 15.4%;
+  padding-left: 5px;
 
   ${isMobileDevice
     ? css`
-        width: 30%;
         letter-spacing: 0.15rem;
         font-size: 10px;
         white-space: nowrap;
+        padding-left: 0;
+        justify-content: center;
       `
     : ''};
 `
 
-export const ScArrow = styled(Icon)`
-  margin-left: 14px;
+export const ScFilterTitle = styled.div<PropsFilterTitle>`
+  opacity: ${({ opacity }) => opacity};
+`
+
+export const Arrows = styled.span<PropsArrows>`
+  width: 0.65rem;
+  height: 0.65rem;
+  border-left: 0.15rem solid #fff;
+  border-bottom: 0.15rem solid #fff;
+  margin-top: 0.4rem;
+
+  ${isMobileDevice
+    ? css`
+      width: 6px;
+      height: 6px;
+      margin-left: 14px;
+      margin-top: 3px;
+    `
+    : ''};
+
+  ${({ active }) => (
+    active
+      ? css`
+      transform: translate(-50%, -50%) rotate(135deg);
+    `
+      : css`
+      transform: translate(-50%, -50%) rotate(315deg);
+      opacity: 0.5
+    `
+  )}
 `

src/features/SportsFilter/components/SelectSportPopup/index.tsx

@@ -1,6 +1,8 @@
 import { T9n } from 'features/T9n'
 import type { SportsType } from 'features/SportsFilter'
 
+import { isMobileDevice } from 'config/userAgent'
+
 import { getSportLexic } from 'helpers/getSportLexic'
 
 import {
@@ -37,7 +39,7 @@ export const SelectSportPopup = ({
     <>
       <ScModal
         isOpen={isOpen}
-        withCloseButton
+        withCloseButton={isMobileDevice}
         close={onModalClose}
         closeSize={9}
       >

src/features/SportsFilter/components/SelectSportPopup/styled.tsx

@@ -150,9 +150,9 @@ export const ScSportsWrapper = styled.div`
 export const ScModal = styled(BaseModal)`
   ${ModalWindow} {
     position: absolute;
-    top: 200px;
-    left: 75px;
-    min-width: 200px;
+    top: 12.2rem;
+    left: 4.7rem;
+    min-width: 14.9%;
     max-height: 290px;
     background-color: #333333;
     border-radius: 0px;
@@ -174,12 +174,13 @@ export const ScModal = styled(BaseModal)`
         position: relative;
         left: auto;
         top: auto;
-        min-width: 280px;
-        max-height: 250px;
         height: auto;
+        min-width: 200px;
+        max-height: 250px;
 
         ${ModalCloseButton} {
           padding: 0;
+          margin: 10px 10px 0 0;
         }   
     `
     : ''};
@@ -193,10 +194,11 @@ export const ScModal = styled(BaseModal)`
 `
 export const ScHeaderTitle = styled.span`
   font-weight: 700;
-  font-size: 10px;
+  font-size: 1rem;
   line-height: 24px;
   color: #FFFFFF;
-  padding-left: 30px;
+  padding-left: 1.5rem;
+
   ${isMobileDevice
     ? css`
         padding: 0;
@@ -213,9 +215,10 @@ export const ScHeaderTitle = styled.span`
 export const ScHeaderGroup = styled.div`
   display: flex;
   flex-direction: row;
-  padding: 10px 0;
+  padding: 0.8rem 0;
   border-bottom: 1px solid #505050;
-  
+  margin-bottom: 10px;
+
   ${isMobileDevice
     ? css`
         padding: 10px;
@@ -229,6 +232,7 @@ export const ScHeaderGroup = styled.div`
     `
     : ''};
 `
+
 export const ScBody = styled.div`
   display: flex;
   flex-direction: column;
@@ -244,12 +248,13 @@ export const ScBody = styled.div`
 type SportProps = {
   active: boolean,
 }
+
 export const ScSport = styled.div<SportProps>`
   display: flex;
   text-transform: uppercase;
-  font-size: 10px;
   font-weight: 700;
-  height: 30px;
+  font-size: 1rem;
+  height: 2rem;
   width: 100%;
   opacity: ${({ active }) => (active ? 1 : 0.5)};
   /* margin-left: 30px; */
@@ -258,7 +263,9 @@ export const ScSport = styled.div<SportProps>`
 
   ${isMobileDevice
     ? css`
+      font-size: 10px;
       justify-content: center;
+      height: 30px;
     `
     : ''};
 
@@ -269,7 +276,7 @@ export const ScSport = styled.div<SportProps>`
 `
 
 export const ScSportName = styled.span`
-  padding-left: 30px;
+  padding-left: 1.5rem;
 
   ${isMobileDevice
     ? css`

src/features/UserFavorites/styled.tsx

@@ -13,7 +13,7 @@ export const UserSportFavWrapper = styled.aside`
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 1.456rem;
+  margin-top: 1rem;
   padding-bottom: 2.75rem;
   left: 0;
   top: 0;