diff --git a/src/features/JoinMatchPageRFEF/styled.tsx b/src/features/JoinMatchPageRFEF/styled.tsx index 6dbad745..d77cc15d 100644 --- a/src/features/JoinMatchPageRFEF/styled.tsx +++ b/src/features/JoinMatchPageRFEF/styled.tsx @@ -16,14 +16,15 @@ export const Wrapper = styled.div` ` export const HeaderWrapper = styled.div` - /* background-color: #13151B; */ background-color: rgba(19, 21, 27, 0.7); padding: 20px 0; padding-left: 20%; width: 100%; + @media ${devices.laptop} { padding-left: 5%; } + ${isMobileDevice ? css` display: none; @@ -42,12 +43,15 @@ export const BlockWrapper = styled.div` align-items: center; padding-left: 20%; width: 100%; + @media ${devices.laptop} { padding-left: 5%; } + @media ${devices.mobile} { padding-left: 5.4rem; } + ${isMobileDevice ? css` padding: 5.4rem; @@ -68,17 +72,14 @@ export const SportImgWrapper = styled.div` width: 512px; height: 80%; margin-right: 5%; + ${isMobileDevice ? css` display: none; - /* @media screen and (orientation: landscape){ - display: block; - height: 100%; - width: 70%; - } */ ` : ''}; ` + export const Container = styled.div` ${isMobileDevice ? css` @@ -147,7 +148,6 @@ export const PriceWrapper = styled.div` font-size: 14px; ` : ''}; - ` export const Price = styled(T9n)` @@ -184,7 +184,6 @@ export const TitleDescWrapper = styled.div` margin-bottom: 20px; ` : ''}; - ` export const NormalText = styled(T9n)` @@ -202,19 +201,6 @@ export const BoldText = styled(T9n)` margin-right: 5px; ` -// export const TitleNormal = styled.span` -// font-weight: 400; -// ` - -// export const TitleColored = styled.span` -// font-weight: 700; -// color: #FF655F; -// ` - -// export const TitleBold = styled.span` -// font-weight: 700; -// ` - export const Button = styled.button` width: 260px; height: 50px; @@ -234,119 +220,21 @@ export const Button = styled.button` : ''}; ` -// export const DateInfoWrapper = styled.div` -// display: flex; -// align-items: center; -// font-size: 15px; -// font-weight: 600; -// ${isMobileDevice -// ? css` -// justify-content: space-between; -// font-size: 2.3rem; -// ` -// : ''}; -// ` - -// export const DateInfo = styled.div` -// text-transform: uppercase; -// background-color: rgba(0,0,0,0.4); -// padding: 8px 25px; -// color: #B9B9B9; -// margin-right: 25px; -// border-radius: 5px; -// ${isMobileDevice -// ? css` -// padding: 0.7em 2.5rem; -// ` -// : ''}; -// ` - -// export const WatchLive = styled.div` -// display: flex; -// align-items: center; -// ` - -// export const WatchLiveText = styled.div` -// color: #EB5757; -// letter-spacing: .2rem; -// ` - -// export const WatchLiveCircle = styled.div` -// width: 20px; -// height: 20px; -// border-radius: 50%; -// background-color: #CC0000; -// margin-right: 5px; -// ${isMobileDevice -// ? css` -// width: 15px; -// height: 15px; -// ` -// : ''}; -// ` - -// export const TeamsNameWrapper = styled.div` -// margin: 35px 0 40px; -// font-size: 20px; -// font-weight: 500; -// ${isMobileDevice -// ? css` -// margin: 10px 0; -// font-size: 2.4rem; -// ` -// : ''}; -// ` - -// export const MainInfoTitle = styled.div` -// font-weight: 600; -// font-size: 2rem; -// ${isMobileDevice -// ? css` -// font-size: 3.8rem; -// margin-bottom: 15px; -// ` -// : ''}; -// ` - -// export const MainInfoButton = styled(ButtonSolid)` -// width: 260px; -// height: 50px; -// font-size: 20px; -// ${isMobileDevice -// ? css` -// width: 100%; -// border-radius: 10px; -// font-size: 17px; -// margin-bottom: 30px; -// ` -// : ''}; -// ` - -// export const MainInfoText = styled.div` -// max-width: 400px; -// margin: 40px 0; -// font-size: 17px; -// line-height: 150%; -// ${isMobileDevice -// ? css` -// font-size: 2.2rem; -// margin: 15px 0 25px; -// ` -// : ''}; -// ` - export const Footer = styled.div` font-size: 14px; background-color: black; padding: 16px 0; padding-left: 20%; width: 100%; + @media ${devices.laptop} { padding-left: 5%; } + @media ${devices.mobile} { padding-left: 35px; } + ${isMobileDevice ? css` display: flex; @@ -392,5 +280,3 @@ export const SportImgMobileDevice = styled(SportImgWrapper)` ` : ''}; ` - -// export const EmptySpan = styled.span``