diff --git a/src/components/SportIcon/SportIcon.tsx b/src/components/SportIcon/SportIcon.tsx index df09af2b..d573e8c3 100644 --- a/src/components/SportIcon/SportIcon.tsx +++ b/src/components/SportIcon/SportIcon.tsx @@ -59,7 +59,7 @@ export const SportIcon = ({ styles={{ alignItems: 'center', display: 'flex', - height: '100%', + // height: '100%', // пока не удалять justifyContent: 'center', }} /> diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx index f74f0a51..8108fcbf 100644 --- a/src/features/MatchCard/styled.tsx +++ b/src/features/MatchCard/styled.tsx @@ -44,6 +44,7 @@ export const CardWrapper = styled.div` background-color: #3F3F3F; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); cursor: pointer; + ${isMobileDevice ? css` width: 100%; @@ -66,6 +67,7 @@ export const HoverFrame = styled.div` border: 2px solid #fff } ` + type TPreviewWrapper = { color?: string, isGradientPreview?: boolean, @@ -79,6 +81,7 @@ export const PreviewWrapper = styled.div` ${({ color, isGradientPreview }) => isGradientPreview && css` background: ${color};`} + ${isMobileDevice ? css` width: 50%; @@ -150,9 +153,7 @@ export const Info = styled.div` flex-direction: column; padding: ${({ isMatchPage }) => (isMatchPage ? '1.2rem 0.472rem 1.2rem 0.519rem' : '0.85rem 0.472rem 0 0.519rem')}; color: #fff; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; + ${isMobileDevice ? css` position: absolute; @@ -176,6 +177,7 @@ export const FavoriteSign = styled.span` margin-top: 0.08rem; margin-left: ${({ marginLeft = 9 }) => marginLeft}px; background: url('/images/sportFavStar.png') no-repeat center / 100% 100%; + ${isMobileDevice ? css` width: 10px; @@ -192,6 +194,7 @@ const nameStyles = css` export const Teams = styled.div` margin-bottom: ${({ isMatchPage }) => (isMatchPage ? '0' : '0.567rem')}; + ${isMobileDevice ? css` margin-bottom: 15px; @@ -207,6 +210,7 @@ export const Team = styled.span` font-size: 0.85rem; line-height: 1.14rem; color: #fff; + ${isMobileDevice ? css` font-size: 14px; @@ -241,8 +245,8 @@ export const TeamLogo = styled(ProfileLogo)` :last-child { margin-left: 0.8rem; - } + ${isMobileDevice ? css` width: 30%; diff --git a/src/features/TournamentSubtitle/styled.tsx b/src/features/TournamentSubtitle/styled.tsx index e443598c..253034f9 100644 --- a/src/features/TournamentSubtitle/styled.tsx +++ b/src/features/TournamentSubtitle/styled.tsx @@ -1,4 +1,4 @@ -import styled, { css } from 'styled-components' +import styled, { css } from 'styled-components/macro' import { isMobileDevice } from 'config/userAgent' @@ -6,7 +6,6 @@ import { ProfileLink } from 'features/ProfileLink' export const Wrapper = styled.div` display: flex; - align-items: center; ` export const CountryFlag = styled.img` @@ -30,6 +29,7 @@ export const NameSignWrapper = styled.div` max-width: 90%; align-items: center; ` + type StyledLinkProps = { isLeftSide?: boolean, isMatchPage?: boolean, @@ -38,7 +38,6 @@ type StyledLinkProps = { export const StyledLink = styled(ProfileLink)` color: rgba(255, 255, 255, 0.7); font-size: 0.567rem; - line-height: 0.95rem; margin-left: ${({ isLeftSide }) => (isLeftSide ? '0px' : '0.567rem')}; &:hover {