style(#ott2858): style fix

fix(#ott2858): min fix style(#ott2858): style fixes style(#ott2858): style fix style(#ott2858): style fix style(#ott2858): buy match badge added fix(#ott2858): min fix style(#ott2858): fixed video tab scroll style(#ott2858): style fix style(#ott2858): final style fix
3 years ago · ed80094edb
parent c40987abb6
commit ed80094edb
10 changed files with 4762 additions and 38163 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/public/images/dollar-sign-grey.svg
+++ b/public/images/dollar-sign-grey.svg
@ -0,0 +1,3 @@
+<svg width="6" height="13" viewBox="0 0 6 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.80998 0.90332V2.65527H2.90764V0.90332H3.80998ZM3.69865 10.4717V12.042H2.80217V10.4717H3.69865ZM4.58342 8.5791C4.58342 8.35254 4.53654 8.15527 4.44279 7.9873C4.35295 7.81543 4.20451 7.66113 3.99748 7.52441C3.79045 7.38379 3.51311 7.25293 3.16545 7.13184C2.66545 6.95605 2.22795 6.75879 1.85295 6.54004C1.48186 6.31738 1.19279 6.04395 0.985762 5.71973C0.782637 5.3916 0.681075 4.9834 0.681075 4.49512C0.681075 4.01465 0.79045 3.59863 1.0092 3.24707C1.23186 2.89551 1.54045 2.62402 1.93498 2.43262C2.32951 2.24121 2.79045 2.14551 3.31779 2.14551C3.72404 2.14551 4.08928 2.20605 4.4135 2.32715C4.74162 2.44824 5.02092 2.62598 5.25139 2.86035C5.48186 3.09473 5.65764 3.38379 5.77873 3.72754C5.90373 4.06738 5.96623 4.45801 5.96623 4.89941H4.55998C4.55998 4.64941 4.53068 4.42676 4.47209 4.23145C4.4174 4.03223 4.33537 3.86426 4.226 3.72754C4.11662 3.58691 3.98381 3.47949 3.82756 3.40527C3.67522 3.33105 3.50139 3.29395 3.30607 3.29395C3.02873 3.29395 2.80022 3.34668 2.62053 3.45215C2.44084 3.55371 2.30803 3.69434 2.22209 3.87402C2.14006 4.05371 2.09904 4.25879 2.09904 4.48926C2.09904 4.71191 2.14201 4.90723 2.22795 5.0752C2.31389 5.24316 2.46037 5.39551 2.6674 5.53223C2.87834 5.66504 3.1674 5.7998 3.53459 5.93652C4.0385 6.11621 4.47404 6.31738 4.84123 6.54004C5.21232 6.75879 5.49748 7.03027 5.6967 7.35449C5.89982 7.6748 6.00139 8.0791 6.00139 8.56738C6.00139 9.07129 5.8842 9.49902 5.64982 9.85059C5.41936 10.2021 5.09514 10.4697 4.67717 10.6533C4.26311 10.833 3.78068 10.9229 3.2299 10.9229C2.88225 10.9229 2.53654 10.8779 2.19279 10.7881C1.85295 10.6943 1.54436 10.542 1.26701 10.3311C0.989669 10.1201 0.768965 9.84082 0.604903 9.49316C0.44084 9.1416 0.358809 8.71191 0.358809 8.2041H1.77678C1.77678 8.50879 1.81779 8.7627 1.89982 8.96582C1.98186 9.16895 2.09318 9.3291 2.23381 9.44629C2.37443 9.56348 2.53068 9.64746 2.70256 9.69824C2.87834 9.74902 3.05412 9.77441 3.2299 9.77441C3.52287 9.77441 3.76897 9.72559 3.96818 9.62793C4.17131 9.52637 4.32365 9.38574 4.42522 9.20605C4.53068 9.02246 4.58342 8.81348 4.58342 8.5791Z" fill="white" fill-opacity="0.7"/>
+</svg>
--- a/src/features/Common/Tabs/index.tsx
+++ b/src/features/Common/Tabs/index.tsx
@ -23,6 +23,9 @@ export const Tab = styled.button.attrs(({ selected }: TabProps) => ({
  line-height: 0.85rem;
  letter-spacing: -0.1px;
  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  justify-content: center;
  cursor: pointer;

  ${({ selected, theme }) => (
--- a/src/features/Common/customScrollbar/index.tsx
+++ b/src/features/Common/customScrollbar/index.tsx
@ -24,7 +24,7 @@ export const customScrollbar = css`
  ::-webkit-scrollbar-corner  {
    background: transparent;
  }
-
+  
  // firefox поддерживает только эти 2 параметра
  scrollbar-color: #3F3F3F transparent;
  scrollbar-width: thin;
--- a/src/features/MatchCard/CardFrontside/index.tsx
+++ b/src/features/MatchCard/CardFrontside/index.tsx
@ -33,6 +33,7 @@ import {
  TeamLogos,
  TeamLogo,
  BuyMatchBadge,
+  BuyMatchBadgeCustom,
  FavoriteSign,
  NameSignWrapper,
  HoverFrame,
@ -106,9 +107,14 @@ export const CardFrontside = ({
    >
      <CardWrapper isMatchPage={isMatchPage}>
        <HoverFrame />
-        <PreviewWrapper isGradientPreview={isLffClient} color={getCardColor(tournament.id)}>
+        <PreviewWrapper
+          isGradientPreview={isLffClient}
+          color={getCardColor(tournament.id)}
+          isMatchPage={isMatchPage}
+        >
          {!isLffClient && previewImage && (
            <Preview
+              isMatchPage={isMatchPage}
              title={tournamentName}
              src={previewImage}
            />
@ -133,14 +139,15 @@ export const CardFrontside = ({
                />
              </TeamLogos>
            )}
-          {access === MatchAccess.CanBuyMatch && <BuyMatchBadge />}
-          <MatchTimeInfo>
-            <MatchDate isHomePage={isHomePage}>
+          {access === MatchAccess.CanBuyMatch && <BuyMatchBadge isMatchPage={isMatchPage} />}
+          <MatchTimeInfo isMatchPage={isMatchPage}>
+            {access === MatchAccess.CanBuyMatch && isMatchPage && <BuyMatchBadgeCustom />}
+            <MatchDate isHomePage={isHomePage} isMatchPage={isMatchPage}>
              {isHomePage || isMatchPage ? null : prepareDate}
              <Time>{prepareTime}</Time>
            </MatchDate>
            {live && (
-              <LiveSign>
+              <LiveSign isMatchPage={isMatchPage}>
                <T9n t='live' />
              </LiveSign>
            )}
@ -148,14 +155,14 @@ export const CardFrontside = ({
        </PreviewWrapper>
        <Info isMatchPage={isMatchPage}>
          <Teams isMatchPage={isMatchPage}>
-            <Team>
+            <Team isMatchPage={isMatchPage}>
              <NameSignWrapper>
                <TeamName nameObj={team1} />
                {team1InFavorites && <FavoriteSign />}
              </NameSignWrapper>
              {showScore && <Score>{team1.score}</Score>}
            </Team>
-            <Team>
+            <Team isMatchPage={isMatchPage}>
              <NameSignWrapper>
                <TeamName nameObj={team2} />
                {team2InFavorites && <FavoriteSign />}
--- a/src/features/MatchCard/styled.tsx
+++ b/src/features/MatchCard/styled.tsx
@ -39,8 +39,8 @@ export const CardWrapper = styled.div<CardProps>`
  left: 0;
  bottom: 0;
  right: 0;
-  padding-bottom: ${({ isMatchPage }) => (isMatchPage ? '0' : '0.75rem')};
-  border-radius: 2px;
+  padding: ${({ isMatchPage }) => (isMatchPage ? '0.5rem 0.625rem 1.8rem' : '0 0 0.75rem')};
+  border-radius: 3px;
  background-color: #3F3F3F;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
@ -56,6 +56,8 @@ export const CardWrapper = styled.div<CardProps>`

 export const HoverFrame = styled.div`
  position: absolute;
+  top: 0;
+  left: 0;
  min-width: 100%;
  min-height: 100%;
  border-radius: 2px;
@ -71,6 +73,7 @@ export const HoverFrame = styled.div`
 type TPreviewWrapper = {
  color?: string,
  isGradientPreview?: boolean,
+  isMatchPage?: boolean,
 }

 export const PreviewWrapper = styled.div<TPreviewWrapper>`
@ -81,6 +84,17 @@ export const PreviewWrapper = styled.div<TPreviewWrapper>`
  ${({ color, isGradientPreview }) => isGradientPreview
    && css`
    background: ${color};`}
+  
+  ${({ isMatchPage }) => (
+    isMatchPage
+      ? css`
+        position: absolute;
+        bottom: 8px;
+        height: auto;
+        width: calc(100% - 1.25rem);
+      `
+      : ''
+  )}

  ${isMobileDevice
    ? css`
@ -90,25 +104,39 @@ export const PreviewWrapper = styled.div<TPreviewWrapper>`
    : ''};
 `

-export const Preview = styled.img`
+export const Preview = styled.img<CardProps>`
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
+  display: ${({ isMatchPage }) => (isMatchPage ? 'none' : 'block')};
 `

-export const MatchTimeInfo = styled.div`
+export const MatchTimeInfo = styled.div<CardProps>`
  width: 100%;
  position: absolute;
  top: 0.519rem;
  padding: 0 0.519rem;
  display: flex;
  flex-direction: row;
+
+  ${({ isMatchPage }) => (
+    isMatchPage
+      ? css`
+        position: initial;
+        padding: 0;
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+        align-items: center;
+      `
+      : ''
+  )}
 `

 type MatchDateProps = {
  isHomePage?: boolean,
+  isMatchPage?: boolean,
 }

 export const MatchDate = styled.div<MatchDateProps>`
@ -133,8 +161,8 @@ export const MatchDate = styled.div<MatchDateProps>`
  }
  ${isMobileDevice
    ? css`
-     height: 15px;
-     font-size: 8px;
+      height: 15px;
+      font-size: 8px;
    `
    : ''};
 `
@ -142,6 +170,15 @@ export const MatchDate = styled.div<MatchDateProps>`
 export const LiveSign = styled(MatchDate)`
  background-color: #CC0000;
  margin-left: auto;
+
+  ${({ isMatchPage }) => (
+    isMatchPage
+      ? css`
+        margin-right: 10px;
+        margin-left: 0;
+      `
+      : ''
+  )}
 `

 export const Time = styled.span`
@ -151,7 +188,7 @@ export const Time = styled.span`
 export const Info = styled.div<CardProps>`
  display: flex;
  flex-direction: column;
-  padding: ${({ isMatchPage }) => (isMatchPage ? '1.2rem 0.472rem 1.2rem 0.519rem' : '0.85rem 0.472rem 0 0.519rem')};
+  padding: ${({ isMatchPage }) => (isMatchPage ? '0 5px 5px 0' : '0.85rem 0.472rem 0 0.519rem')};
  color: #fff;

  ${isMobileDevice
@ -202,7 +239,7 @@ export const Teams = styled.div<CardProps>`
    : ''};
 `

-export const Team = styled.span`
+export const Team = styled.span<CardProps>`
  display: flex;
  justify-content: space-between;
  align-items: center;
@ -211,6 +248,14 @@ export const Team = styled.span`
  line-height: 1.14rem;
  color: #fff;

+  ${({ isMatchPage }) => (
+    isMatchPage
+      ? css`
+        line-height: 28px;
+      `
+      : ''
+  )}
+
  ${isMobileDevice
    ? css`
      font-size: 14px;
@ -232,10 +277,10 @@ export const TeamName = styled(Name)`
 export const Score = styled.div``

 export const TeamLogos = styled.div<CardProps>`
-  display: flex;
+  display: ${({ isMatchPage }) => (isMatchPage ? 'none' : 'flex')};
  align-items: center;
  justify-content: center;
-  margin: ${({ isMatchPage }) => (isMatchPage ? '1.5rem auto 1rem auto' : '0.71rem auto 0 auto')};
+  margin: ${({ isMatchPage }) => (isMatchPage ? '0' : '0.71rem auto 0 auto')};
  z-index: 1;
 `

@ -254,14 +299,13 @@ export const TeamLogo = styled(ProfileLogo)`
    : ''};
 `

-export const BuyMatchBadge = styled.span`
+export const BuyMatchBadge = styled.span<CardProps>`
  position: absolute;
  left: 0.472rem;
  bottom: 0.519rem;
  width: 1.18rem;
  height: 1.18rem;
  cursor: pointer;
-
  background-image: url(/images/dollar-sign.svg);
  background-position: center;
  background-repeat: no-repeat;
@ -270,6 +314,7 @@ export const BuyMatchBadge = styled.span`
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0.08rem 0.283rem rgba(0, 0, 0, 0.5);
+  display: ${({ isMatchPage }) => (isMatchPage ? 'none' : 'block')};

  ${isMobileDevice
    ? css`
@ -279,3 +324,14 @@ export const BuyMatchBadge = styled.span`
    `
    : ''};
 `
+
+export const BuyMatchBadgeCustom = styled(BuyMatchBadge)`
+  background-color: rgba(255, 255, 255, 0.19);
+  background-image: url(/images/dollar-sign-grey.svg);
+  background-size: auto;
+  min-width: 18px;
+  min-height: 18px;
+  position: initial;
+  box-shadow: none;
+  margin-left: auto;
+`
--- a/src/features/MatchSidePlaylists/components/TabVideo/index.tsx
+++ b/src/features/MatchSidePlaylists/components/TabVideo/index.tsx
@ -2,6 +2,8 @@ import {
  Fragment,
  useMemo,
  useState,
+  useRef,
+  useEffect,
 } from 'react'

 import { format } from 'date-fns'
@ -61,6 +63,20 @@ export const TabVideo = ({

    return !someProfileMatch
  }, [tournamentData, profileId, profileDate])
+
+  const ref = useRef<HTMLDivElement | null>(null)
+  const [overflow, setOverflow] = useState(false)
+
+  useEffect(() => {
+    const {
+      clientHeight = 0,
+      scrollHeight = 0,
+    } = ref.current || {}
+    const hasScroll = scrollHeight > clientHeight
+
+    setOverflow(hasScroll)
+  }, [ref, selectedDate])
+
  return (
    <Fragment>
      <VideoDate
@ -70,7 +86,7 @@ export const TabVideo = ({
        profileDate={profileDate}
        onDateClick={setSelectedDate}
      />
-      <MatchesWrapper>
+      <MatchesWrapper ref={ref} hasScroll={overflow}>
        {
          map(sortBy(matches, ({ live }) => !live), (match) => (
            <MatchCard
--- a/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx
+++ b/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx
@ -2,13 +2,15 @@ import styled, { css } from 'styled-components/macro'
 import { customScrollbar } from 'features/Common'
 import { isMobileDevice } from '../../../../config/userAgent'

-export const MatchesWrapper = styled.div`
+export const MatchesWrapper = styled.div<{hasScroll?: boolean}>`
  overflow-y: auto;
  max-height: calc(100vh - 170px);
-  padding-right: 5px;
+  padding-right: ${({ hasScroll }) => (hasScroll ? '10px' : '')};

  > * {
-    margin-bottom: 15px;
+    :not(:last-child) {
+      margin-bottom: 10px;
+    }  
  }

  ${customScrollbar}
--- a/src/features/MatchSidePlaylists/styled.tsx
+++ b/src/features/MatchSidePlaylists/styled.tsx
@ -6,6 +6,8 @@ import { isMobileDevice } from 'config/userAgent'
 import { customScrollbar } from 'features/Common'

 export const Wrapper = styled.div`
+  padding-right: 14px;
+
  ${isMobileDevice
    ? css`
      overflow-y: auto;
@ -18,7 +20,6 @@ export const Wrapper = styled.div`

 export const TabsWrapper = styled.div`
  padding-left: 14px;
-  padding-right: 18px;

  ${isMobileDevice
    ? css`
@ -38,9 +39,11 @@ export const Container = styled.div<TContainer>`
  padding: ${({ hasScroll }) => (hasScroll ? '0 10px 0 14px' : '0 18px 0 14px')};
  max-height: calc(100vh - 130px);
  overflow-y: ${({ forVideoTab }) => (forVideoTab ? 'hidden' : 'auto')};
+  padding-right: ${({ forVideoTab }) => (forVideoTab ? '0' : '')};

  ${customScrollbar}

+
  @media ${devices.tablet} {
    margin-top: 15px;
  }
--- a/src/features/StreamPlayer/components/Controls/index.tsx
+++ b/src/features/StreamPlayer/components/Controls/index.tsx
@ -1,3 +1,4 @@
+/* eslint-disable react/no-unused-prop-types */
 import { Fragment, useMemo } from 'react'

 import { DebouncedFunc } from 'lodash'