fix(#2317): fix many style mistakes and change tournaments sort

src/components/SportIcon/SportIcon.tsx

@@ -7,8 +7,6 @@ import { Icon } from 'features/Icon'
 
 const IconWrap = styled.div`
   display: flex;
-  height: 10px;
-  min-width: 10px;
   color: white;
   align-items: center;
 `
@@ -59,7 +57,7 @@ export const SportIcon = ({
       <Icon
         refIcon={IconSport}
         color={fill || sportIcons[sportType].color}
-        // size={size || 10}
+        size={size}
       />
     </IconWrap>
   )

src/features/Background/styled.tsx

@@ -19,7 +19,7 @@ const Container = styled.div`
 
 export const ImageBackground = styled(Container)`
   ${client.styles.background}
-  background-size: 12px;
+  background-size: 6px;
 `
 
 export const GradientBackground = styled(Container)`

src/features/FavoritesMobilePopup/styled.tsx

@@ -10,7 +10,7 @@ import { Icon } from 'features/Menu/styled'
 export const FavoritesPopup = styled(ModalContainer)`
   background-color: black;
   background-image: url(/images/Checker.png);
-  background-size: 12px;
+  background-size: 13px;
 `
 
 export const MainLogo = styled(Logo)`

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

@@ -26,7 +26,7 @@ export const Wrapper = styled.div`
   ${isMobileDevice
     ? css`
       /* padding-top: 4px; */
-      /* min-height: 84px; */
+      min-height: 84px;
       justify-content: space-between;
 
       @media (max-width: 450px){
@@ -114,7 +114,7 @@ export const WeekDaysWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  /* margin-top: 0.567rem; */
+  margin-top: 0.567rem;
   ${isMobileDevice
     ? css`
      padding: 0 5px;
@@ -165,7 +165,8 @@ export const WeekName = styled.span`
   line-height: 1.5rem;
   ${isMobileDevice
     ? css`
-      font-size: 14px;
+      font-weight: 600;
+      font-size: 10px;
       line-height: 13px;
       padding-top: 6px;
     `
@@ -210,7 +211,6 @@ export const Arrow = styled.span<ArrowProps>`
   border-bottom: 0.15rem solid #fff;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
 
   ${({ direction }) => (
     direction === 'left'
@@ -220,11 +220,11 @@ export const Arrow = styled.span<ArrowProps>`
   
     ${isMobileDevice
     ? css`
-      padding: 5px;
+      padding: 4px;
-      border-left: 0.3rem solid #fff;
+      border-left: 0.4rem solid rgba(255, 255, 255, 0.5);
-      border-left: 0.3rem solid #fff;
+      border-bottom: 0.4rem solid rgba(255, 255, 255, 0.5);
-      width: 10px;
+      width: 8px;
-      height: 10px;
+      height: 8px;
     `
     : ''};
 `

src/features/HeaderMobile/index.tsx

@@ -54,7 +54,7 @@ export const HeaderMobile = () => {
         />
         <ScoreSwitch />
       </ScSportsWrapper>
-      <ScModal isOpen={isOpen} withCloseButton close={onModalClose}>
+      <ScModal isOpen={isOpen} withCloseButton close={onModalClose} closeSize={9}>
         <ScHeaderGroup>
           <ScHeaderTitle>
             <T9n t='choose_sport' />

src/features/HeaderMobile/styled.tsx

@@ -32,9 +32,9 @@ export const defaultHeaderStyles = (
   }
   return client.name === 'facr' ? client.styles.homePageHeader : css`
   background: linear-gradient(
-    187deg,
+    236deg,
     ${color} -4.49%,
-    #000000 68.29%),
+    #000000 98.29%),
     #000000;
   z-index: 10;
 `
@@ -162,7 +162,7 @@ export const ScModal = styled(BaseModal)`
     ${isMobileDevice
     ? css`
         height: auto;
-        top: -15vh;
+        top: -140px;
     `
     : ''};
   }
@@ -205,7 +205,7 @@ export const ScHeaderGroup = styled.div`
 export const ScBody = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 0 15px 15px 15px;
+  padding: 0 15px 23px 15px;
 `
 
 type SportProps = {

src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx

@@ -175,7 +175,7 @@ export const Info = styled.div`
         left: 45%; */
         width: 60%;
         height: 100%;
-        padding: 9px;
+        padding: 9px  9px 9px 19px;
       `
     : ''};
 `
@@ -218,6 +218,7 @@ export const FavoriteSign = styled.span<FavoriteSignProps>`
   ${isMobileDevice
     ? css`
         display: flex;
+        transform: translateY(25%);
         justify-content: center;
         align-items: center;
         width: 8px;

src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx

@@ -14,6 +14,7 @@ export const StyledLink = styled(Link)`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
@@ -29,10 +30,6 @@ export const StyledLink = styled(Link)`
   :hover {
     background-color: #555555;
   }
-
-  @media ${devices.mobile} {
-    justify-content: center;
-  }
 `
 
 export const Title = styled.span`
@@ -69,6 +66,7 @@ export const LiveSign = styled(MatchDate)`
   font-size: 0.32rem;
   display: flex;
   align-items: center;
+  margin-left: 5px;
 
   ${isMobileDevice
     ? css`

src/features/MatchSwitches/styled.tsx

@@ -12,7 +12,7 @@ export const Switch = styled.div`
     ? css`
       justify-content: flex-end;
       width: 100%;
-      height: 100%;
+      /* height: 100%; */
       text-transform: uppercase;
     `
     : ''};
@@ -29,7 +29,7 @@ export const Title = styled(T9n)`
     ? css`
       font-size: 10px;
       line-height: 22px;
-      letter-spacing: -0.408px;
+      letter-spacing: 0.15rem;
       text-transform: uppercase;
       font-weight: 700;
     `
@@ -64,7 +64,8 @@ export const Icon = styled.div<IconProps>`
     ${isMobileDevice
     ? css`
         width: 36px;
-        height: 18px;
+        height: 22px;
+        background-size: cover;
         margin-left: 1.5rem;
     `
     : ''}

src/features/Menu/styled.tsx

@@ -50,7 +50,6 @@ export const Icon = styled.div<IconProps>`
   opacity: 0.8;
   ${isMobileDevice
     ? css`
-      width: 13px;
       height: 13px;
       background-size: contain;
       /* margin: 0 4px; */

src/features/Modal/index.tsx

@@ -17,6 +17,7 @@ type Props = {
   children: ReactNode,
   className?: string,
   close?: () => void,
+  closeSize?: number,
   isOpen: boolean,
   withCloseButton?: boolean,
 }
@@ -25,6 +26,7 @@ export const Modal = ({
   children,
   className,
   close = defaultCloseHandler,
+  closeSize,
   isOpen,
   withCloseButton = true,
 }: Props) => {
@@ -40,7 +42,7 @@ export const Modal = ({
           <ModalWindow>
             {withCloseButton && (
               <ModalCloseButton onClick={close}>
-                <Close size={8} />
+                <Close size={closeSize || 8} />
               </ModalCloseButton>
             )}
             {children}

src/features/Modal/styled.tsx

@@ -48,4 +48,11 @@ export const ModalCloseButton = styled.button.attrs({
   cursor: pointer;
   color: rgba(255, 255, 255, 1);
   background-color: transparent;
+
+  ${isMobileDevice
+    ? css`
+      padding: 15px 14px 15px 15px;
+      
+    `
+    : ''};
 `

src/features/SportsFilter/styled.tsx

@@ -15,6 +15,7 @@ export const ScSportsFilter = styled.div`
 
   ${isMobileDevice
     ? css`
+        letter-spacing: 0.15rem;
         font-size: 10px;
       `
     : ''};

src/features/TournamentList/components/Tournament/styled.tsx

@@ -24,7 +24,6 @@ export const CardWrapperOuter = styled.li.attrs({
 export const CardWrapper = styled.div<{ open: boolean }>`
   display: flex;
   align-items: center;
-  border-radius: 2px;
 
   background-color: ${({ open }) => (open ? '#294FC3' : '#3f3f3f')};
   cursor: pointer;
@@ -54,8 +53,8 @@ export const CountMatches = styled.span<{ color?: string }>`
   line-height: 16px;
   color: ${({ color }) => color};
   width: 20px;
-  text-align: center;
+  text-align: end;
-  margin-left: 20px;
+  margin: 0 9px 0 20px;
 `
 
 export const ScFirstInfo = styled.div`

src/features/TournamentList/hooks.tsx

@@ -18,8 +18,10 @@ export const useTournaments = (matches: Array<Match>) => {
     return sport === sportName
   }
 
-  const tournaments = matches.reduce((acc: Array<TournamentListProps> | [], match: Match) => {
+  const tournamentSort: Array<number> = []
-    if (matches.length === 0) return []
+
+  const tournaments = matches.reduce((acc: TournamentListProps, match: Match) => {
+    if (matches.length === 0) return {}
     if (!acc[match.tournament.id] && compareSport(match, selectedSport)) {
       const tournament = {
         ...match.tournament,
@@ -34,6 +36,7 @@ export const useTournaments = (matches: Array<Match>) => {
         },
         tournamentMatches: [match],
       }
+      tournamentSort.push(match.tournament.id)
     } else if (compareSport(match, selectedSport)) {
       acc[match.tournament.id] = {
         ...acc[match.tournament.id],
@@ -47,9 +50,10 @@ export const useTournaments = (matches: Array<Match>) => {
       }
     }
     return acc
-  }, [])
+  }, {})
 
   return {
+    tournamentSort,
     tournaments,
   }
 }

src/features/TournamentList/index.tsx

@@ -10,24 +10,25 @@ type TournamentTypeProps = {
 }
 
 export type TournamentListProps = {
-  tournament: TournamentType & {
+  [key: number]:{tournament: TournamentType & {
     countryId: number,
     live: boolean,
     sportType: number,
   },
   tournamentMatches: Array<Match>,
+  },
 }
 
 export const TournamentList = ({ matches }: TournamentTypeProps) => {
-  const { tournaments } = useTournaments(matches)
+  const { tournaments, tournamentSort } = useTournaments(matches)
 
   return (
     <>
-      {tournaments?.map(({ tournament, tournamentMatches }: TournamentListProps) => (
+      {tournamentSort?.map((id) => (
         <Tournament
-          key={tournament.id}
+          key={id}
-          tournament={tournament}
+          tournament={tournaments[id].tournament}
-          tournamentMatches={tournamentMatches}
+          tournamentMatches={tournaments[id].tournamentMatches}
         />
       ))}
     </>

src/libs/objects/Hockey.tsx

@@ -1,6 +1,8 @@
 export const Hockey = () => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
+    width='10'
+    height='10'
     fill='true'
     viewBox='0 0 40 40'
   >