style(2939): change header for tournaments

src/config/clients/insports.tsx

@@ -30,8 +30,8 @@ export const insports: ClientConfig = {
       top: 0;
     `,
     mobileHeaderLogo: css`
-      width: 120px;
-      height: 30px;
+      width: 77px;
+      height: 24px;
     `,
     userAccountLogo: css`
       width: 6.37rem;

src/features/Common/Button/styled.tsx

@@ -19,6 +19,7 @@ const baseButtonStyles = css`
       height: 27px; 
       min-height: 27px; 
       font-size: 16px;
+      width: auto;
     `
     : ''};  
 

src/features/HeaderMobile/styled.tsx

@@ -57,7 +57,7 @@ export const HeaderStyled = styled.header<HeaderProps>`
   height: ${({ height = 8.5 }) => height}rem;
   ${isMobileDevice
     ? css`
-      height: 124px
+      height: 124px;
     `
     : ''};
 
@@ -66,7 +66,8 @@ export const HeaderStyled = styled.header<HeaderProps>`
   ${isMobileDevice
     ? css`
       padding: 8px;
-    `
+      margin-bottom: 50px;
+      `
     : ''}
 `
 

src/features/PageLayout/styled.tsx

@@ -21,11 +21,12 @@ export const Content = styled.div`
   ${customScrollbar}
   ${isMobileDevice
     ? css`
-      margin-top: 50px;
       padding-bottom: 23px;
       height: calc(100vh - 174px);
     `
     : ''};
+
+  
 `
 
 export const BodyBackdrop = styled.div`

src/features/ProfileCard/index.tsx

@@ -26,6 +26,7 @@ import {
   StyledLink,
   SсBtnWrapper,
   SсGetHighlightBtn,
+  DetailsWrapper,
 } from './styled'
 import { useProfileCard } from './hooks'
 
@@ -70,22 +71,24 @@ export const ProfileCard = ({ profile }: ProfileType) => {
         profileType={profileType}
         sportType={sportType}
       />
-      <Details>
-        <ProfileName>{name}</ProfileName>
-        <InfoItems>
-          <InfoFlag src={`https://instatscout.com/images/flags/48/${profile.additionalInfo.id}.png`} />
-          {tournamentId
-            ? (
-              <StyledLink
-                id={tournamentId}
-                profileType={ProfileTypes.TOURNAMENTS}
-                sportType={sportType}
-              >
-                <InfoName nameObj={profile.additionalInfo} />
-              </StyledLink>
-            )
-            : <InfoName nameObj={profile.additionalInfo} />}
-        </InfoItems>
+      <DetailsWrapper>
+        <Details>
+          <ProfileName>{name}</ProfileName>
+          <InfoItems>
+            <InfoFlag src={`https://instatscout.com/images/flags/48/${profile.additionalInfo.id}.png`} />
+            {tournamentId
+              ? (
+                <StyledLink
+                  id={tournamentId}
+                  profileType={ProfileTypes.TOURNAMENTS}
+                  sportType={sportType}
+                >
+                  <InfoName nameObj={profile.additionalInfo} />
+                </StyledLink>
+              )
+              : <InfoName nameObj={profile.additionalInfo} />}
+          </InfoItems>
+        </Details>
         <SсBtnWrapper>
           <FavoriteButton isFavorite={isFavorite} onClick={toggleFavorites}>
             <StarIcon isFavorite={isFavorite} />
@@ -107,7 +110,7 @@ export const ProfileCard = ({ profile }: ProfileType) => {
             </Link>
           )}
         </SсBtnWrapper>
-      </Details>
+      </DetailsWrapper>
     </Wrapper>
   )
 }

src/features/ProfileCard/styled.tsx

@@ -18,10 +18,12 @@ export const Wrapper = styled.div`
   ${isMobileDevice
     ? css`
       @media (max-width: 650px),(orientation: landscape){
-        left: 50%;
-        transform: translateX(-50%);
+        align-items: start;
         height: auto;
-        bottom: 0;
+        margin: 45px 0 20px 0;
+        left: 0;
+        width: 100%;
+        padding: 0 0 0 12px;
       }
     `
     : ''};
@@ -39,9 +41,10 @@ export const ProfileName = styled.h1`
     ? css`
       @media (max-width: 650px),(orientation: landscape){
         font-size: 14px;
-        line-height: 19px;
+        line-height: 10px;
         white-space: nowrap;
         margin-bottom: 0;
+        width: 100%;
       }
     `
     : ''};
@@ -61,8 +64,8 @@ export const Logo = styled(ProfileLogo)`
   ${isMobileDevice
     ? css`
       @media (max-width: 650px),(orientation: landscape){
-        width: 81px;
-        height: 81px;
+        width: 40px;
+        height: 40px;
       }
     `
     : ''};
@@ -71,6 +74,25 @@ export const Logo = styled(ProfileLogo)`
 export const Details = styled.div`
   display: flex;
   flex-direction: column;
+  
+  ${isMobileDevice
+    ? css`
+        padding-top: 8px;
+        width: 100%;
+    `
+    : ''};
+`
+
+export const DetailsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  
+  ${isMobileDevice
+    ? css`
+        width: 100%;
+        flex-direction: row;
+    `
+    : ''};
 `
 
 type FavoriteButtonProps = {
@@ -103,11 +125,11 @@ export const FavoriteButton = styled.button<FavoriteButtonProps>`
 ${isMobileDevice
     ? css`
       @media (max-width: 650px),(orientation: landscape){
-        width: 100px;
+        padding: 0 0.9rem 0 0.9rem;
+        border: 0.8px solid #FFFFFF;
+        border-radius: 8px;
         min-height: 17px;
         font-size: 10px;
-        border-radius: 7px;
-        border: 0.7px solid #fff;
       }
     `
     : ''};
@@ -115,10 +137,15 @@ ${isMobileDevice
 
 export const InfoItems = styled.div`
   display: flex;
+  flex-direction: column;
   align-items: center;
   margin-bottom: 1.04rem;
+  flex-direction: row;
   ${isMobileDevice
     ? css`
+      width: 100%;
+      margin-bottom: 0;
+        
       @media (orientation: landscape){
         margin-bottom: 5px;
       }
@@ -154,6 +181,7 @@ export const InfoName = styled(Name)`
         font-size: 10px;
         line-height: 19px;
         white-space: nowrap;
+        width: 100%;
       }
     `
     : ''};
@@ -176,7 +204,9 @@ export const SсBtnWrapper = styled.div`
   ${isMobileDevice
     ? css`
       flex-direction: column;
-    `
+      padding-top: 8px;
+      width: 50%;
+      `
     : ''};
 `
 
@@ -188,20 +218,17 @@ export const SсGetHighlightBtn = styled(ButtonSolid)`
   font-weight: 600;
   font-size: 0.75rem;
   text-transform: uppercase;
-  width: fit-content;
   height: 1.95rem;
   border-radius: 13px;
   margin-left: 5px;
 
   ${isMobileDevice
     ? css`
-      width: 100%;
       min-height: 17px;
       font-size: 10px;
       border-radius: 7px;
       margin: 0;
       border: 0.7px solid #fff;
-      font-size: 10px;
       line-height: 24px;
     `
     : ''};