Ott 1283 user account page responsive (#458)

* style(#1283): personal block section styles

* style(#1283): stylelint fixes

* style(#1283): cards subs payment history sections styles

* style(#1283): min fixes

Co-authored-by: Farber Denis <denis.farber@instatsport.com>

src/features/AddCardForm/components/ElementContainer/index.tsx

@@ -20,7 +20,7 @@ const Label = styled.label<LabelProps>`
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
   border-radius: 2px;
   border: 1px solid transparent;
-
+  /* stylelint-disable-next-line */
   font-family: Montserrat;
   font-style: normal;
   font-weight: normal;

src/features/AddCardForm/styled.tsx

@@ -73,6 +73,9 @@ export const SectionTitle = styled.span`
     ? css`
       margin-bottom: 25px;
       font-size: 10px;
+      @media (orientation: landscape){
+        margin-bottom: 10px;
+      }
     `
     : ''};
 

src/features/BuyMatchPopup/components/SelectedCard/index.tsx

@@ -36,10 +36,8 @@ const CardInfo = styled.span`
 
 const ChangeCardButton = styled(ButtonOutline)`
   border: none;
-  padding: 0;
   width: auto;
   height: auto;
-
   padding: 0 10px;
   margin-left: 10px;
   line-height: 20px;

src/features/Common/Input/styled.tsx

@@ -71,6 +71,7 @@ export const LabelTitle = styled.p<TitleProps>`
       display: block;
       padding-left: 10px;
       font-size: 12px;
+      min-width: 76px;
     `
     : ''};
 `
@@ -111,6 +112,7 @@ const inputStyles = css<InputProps>`
   ${isMobileDevice
     ? css`
       font-size: 12px;
+      margin-left: 15px;
     `
     : ''};
   
@@ -160,6 +162,14 @@ export const Column = styled.div<ColumnProps>`
     width: 100%;
     position: relative;
   }
+
+  ${isMobileDevice
+    ? css`
+      @media (orientation: landscape){
+        max-width: 100%;
+      }
+    `
+    : ''}  
 `
 
 type ErrorProps = {

src/features/Common/NewInput/styled.tsx

@@ -48,6 +48,7 @@ const resetStyles = css`
   :-webkit-autofill:focus,
   :-webkit-autofill:active  {
     background-clip: text;
+    /* stylelint-disable-next-line */
     -webkit-background-clip: text;
     -webkit-text-fill-color: #fff;
     caret-color: #fff;
@@ -64,7 +65,6 @@ export const InputStyled = styled.input`
   color: ${({ theme }) => theme.colors.text100};
 
   ::placeholder {
-    color: rgba(255, 255, 255, 0.5);
     font-weight: normal;
     width: 100%;
     color: ${({ theme }) => theme.colors.text100};

src/features/Common/PasswordInput/index.tsx

@@ -25,6 +25,9 @@ const VisibilityButton = styled(BaseButton)`
       right: 5px;
       top: 50%;
       transform: translateY(-50%);
+      @media (orientation: landscape){
+        right: 10px;
+      }
     `
     : ''};
   @media ${devices.tablet} {

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

@@ -13,7 +13,6 @@ type Props = {
 export const Wrapper = styled.div<Props>`
   display: flex;
   flex-direction: column;
-  margin-top: 62px;
   padding-left: 35px;
   padding-right: 20px;
   margin-top: ${({ marginTop }) => `${marginTop ?? 62}px`};

src/features/MatchSidePlaylists/components/InterviewButton/index.tsx

@@ -11,8 +11,10 @@ type InterviewProps = {
 const InterviewTitle = styled(Title)<InterviewProps>`
   white-space: normal;
   text-align: start;
+  /* stylelint-disable-next-line */
   display: -webkit-box;
   -webkit-line-clamp: 3;
+  /* stylelint-disable-next-line */
   -webkit-box-orient: vertical;
   
    ${({ overlength }) => (

src/features/MultiSourcePlayer/components/Settings/styled.tsx

@@ -61,6 +61,7 @@ export const QualityItem = styled.li<QualityItemProps>`
   text-align: right;
   font-style: normal;
   font-weight: normal;
+  /* stylelint-disable-next-line */
   font-family: Montserrat;
   font-size: 10px;
   line-height: 12px;

src/features/UserAccount/components/LogoutButton/index.tsx

@@ -23,6 +23,9 @@ const Button = styled.button`
      bottom: -10px;
      font-size: 12px;
      height: 25px;
+     @media (orientation: landscape){
+       top: 60vh;
+     }
     `
     : ''};
   

src/features/UserAccount/components/PageBankCards/styled.tsx

@@ -11,6 +11,9 @@ export const Wrapper = styled.div`
   ${isMobileDevice
     ? css`
       width: 100%;
+      @media (orientation: landscape){
+        margin-top: 0;
+      }
     `
     : ''};
 `
@@ -70,4 +73,10 @@ export const InfoText = styled.div`
   font-size: 20px;
   line-height: 27px;
   margin-bottom: 40px;
+  ${isMobileDevice
+    ? css`
+      font-size: 16px;
+      text-align: center;
+    `
+    : ''};
 `

src/features/UserAccount/components/PagePaymentsHistory/styled.tsx

@@ -5,6 +5,13 @@ import { isMobileDevice } from 'config/userAgent'
 
 export const Wrapper = styled.div`
   margin-top: 26px;
+  ${isMobileDevice
+    ? css`
+      @media (orientation: landscape){
+        margin-top: 0;
+      }
+    `
+    : ''}
 `
 
 export const Table = styled.table``

src/features/UserAccount/components/PageSubscriptions/styled.tsx

@@ -68,6 +68,9 @@ export const Tab = styled.button<TabProps>`
         bottom: -15px;
         height: 2px;
       }
+      @media (orientation: landscape){
+        width: 50%;
+      }
     `
     : ''}
 `

src/features/UserAccount/components/PersonalInfoForm/styled.tsx

@@ -39,6 +39,10 @@ export const Form = styled.div`
   ${isMobileDevice
     ? css`
       width: 100%;
+      @media (orientation: landscape){
+        padding-top: 0;
+        height: auto;
+      }
     `
     : ''};
 `

src/features/UserAccount/styled.tsx

@@ -27,14 +27,15 @@ export const SolidButton = styled(ButtonSolid)`
     justify-content: center;
   }
 
-  @media ${devices.mobile} {
-    width: 100%;
-  }
   ${isMobileDevice
     ? css`
       height: 35px;
       display: flex;
       justify-content: center;
+      width: 100%;
+      @media (orientation: landscape){
+        width: auto;
+      }
     `
     : ''};
 `
@@ -90,6 +91,11 @@ export const ContentWrapper = styled.div`
   ${isMobileDevice
     ? css`
       margin-top: 10px;
+      @media (orientation: landscape){
+        margin-top: 0;
+        padding-left: 28px;
+        height: 100%;
+      }
     `
     : ''};
 `
@@ -119,6 +125,10 @@ export const Body = styled.div`
   ${isMobileDevice
     ? css`
       width: 100%;
+      @media (orientation: landscape){
+        flex-direction: row;
+        height: auto;
+      }
     `
     : ''};
 `
@@ -133,6 +143,9 @@ export const Aside = styled.aside`
   ${isMobileDevice
     ? css`
       height: auto;
+      @media (orientation: landscape){
+        min-width: 30%;
+      }
     `
     : ''};
 `
@@ -154,6 +167,15 @@ export const Navigations = styled.nav`
   @media ${devices.mobile} {
     width: 100%;
   }
+
+  ${isMobileDevice
+    ? css`
+      @media (orientation: landscape){
+        border-right: 1px solid rgba(255, 255, 255, 0.4);
+        height: 100%;
+      }
+    `
+    : ''};  
 `
 
 type StyledLinkProps = {
@@ -184,10 +206,18 @@ export const StyledLink = styled(NavLink).attrs(
     line-height: 5.3rem;
   }
 
-  @media ${devices.mobile} {
-    font-size: 14px;
-    line-height: 35px;
-  }
+  ${isMobileDevice
+    ? css`
+      @media (orientation: landscape){
+        font-size: 16px;
+        line-height: 35px;
+      }
+      @media (max-width: 750px){
+        font-size: 16px;
+        line-height: 35px;
+      }
+    `
+    : ''};
 `
 
 type InlineButtonProps = {