Partly finished feature 1451

src/components/Cards/CategoryCard/CategoryCardName/CategoryCardName.styled.js

@@ -49,6 +49,7 @@ export const CategoryCardImageContainer = styled(Box)`
 export const CategoryCardImage = styled.img`
   width: 18px;
   height: 18px;
+  filter: invert(58%) sepia(100%) saturate(431%) hue-rotate(355deg) brightness(104%) contrast(105%);
   margin-right: 9px;
   position: relative;
   top: 1px;

src/components/Cards/ProfileCard/BigProfileCard/BigProfileCard.js

@@ -110,9 +110,9 @@ const BigProfileCard = (props) => {
         </ButtonsContainer>
         <ProfileInfoContainer>
           {/* Profile Main Info  */}
-          <ProfileMainInfo profile={props.profile} isAdmin bigProfileCard />
+          <ProfileMainInfo profile={props.profile} bigProfileCard isAdmin />
           {/* Profile Contact */}
-          <ProfileContact profile={props.profile} isAdmin />
+          <ProfileContact profile={props.profile} bigProfileCard isAdmin />
         </ProfileInfoContainer>
         <CheckButton
           halfwidth={props.halfwidth}

src/components/Cards/ProfileCard/ProfileCard.js

@@ -201,7 +201,7 @@ const ProfileCard = (props) => {
                 )}
               </ButtonsContainer>
               <ProfileInfoContainer>
-                <ProfileInfoAndContactContainer isAdmin={props.isAdmin}>
+                <ProfileInfoAndContactContainer isAdmin={props.isAdmin} bigProfileCard={props.bigProfileCard}>
                   {profile?._blocked && !props.isAdmin && isMobile && (
                     <BlockedProfile aboveTitle isAdmin={props.isAdmin} />
                   )}
@@ -239,6 +239,7 @@ const ProfileCard = (props) => {
 ProfileCard.propTypes = {
   children: PropTypes.node,
   isAdmin: PropTypes.bool,
+  bigProfileCard: PropTypes.bool,
 };
 
 export default ProfileCard;

src/components/Cards/ProfileCard/ProfileCard.styled.js

@@ -344,9 +344,10 @@ export const ProfileInfoAndContactContainer = styled(Box)`
   flex-direction: column;
   margin-bottom: ${props => props.isAdmin && "36px"};
   @media (max-width: 600px) {
-    padding-bottom: 18px;
-    ${props => props.isAdmin && 'gap: 18px;'}
-    flex-direction: ${props => props.isAdmin ? "row" : "column"};
+    padding-bottom: ${props => props.isAdmin ? '0' : '18px'};
+    margin-bottom: ${props => props.isAdmin && '0'};
+    ${props => props.bigProfileCard && 'gap: 18px;'}
+    flex-direction: ${props => props.bigProfileCard ? "row" : "column"};
   }
 `;
 

src/components/Cards/ProfileCard/ProfileContact/ProfileContact.js

@@ -13,6 +13,7 @@ const ProfileContact = (props) => {
   return (
     <ProfileContactContainer
       container
+      bigProfileCard={props.bigProfileCard}
       isAdmin={props.isAdmin}
       direction={{ xs: "column", sm: "row" }}
       justifyContent={{ xs: "center", sm: "start" }}
@@ -22,6 +23,7 @@ const ProfileContact = (props) => {
         <Stack direction="row">
           <LocationIcon isMyProfile={props.isMyProfile} />
           <ContactItem
+            bigProfileCard={props.bigProfileCard}
             isAdmin={props.isAdmin}
             isMyProfile={props.isMyProfile}
             variant="subtitle2"
@@ -33,6 +35,7 @@ const ProfileContact = (props) => {
       <Stack direction="row">
         <MailIcon isMyProfile={props.isMyProfile} />
         <ContactItem
+          bigProfileCard={props.bigProfileCard}
           isAdmin={props.isAdmin}
           isMyProfile={props.isMyProfile}
           variant="subtitle2"
@@ -44,6 +47,7 @@ const ProfileContact = (props) => {
         <Stack direction="row">
           <GlobeIcon isMyProfile={props.isMyProfile} />
           <ContactItem
+            bigProfileCard={props.bigProfileCard}
             isAdmin={props.isAdmin}
             isMyProfile={props.isMyProfile}
             variant="subtitle2"
@@ -61,6 +65,7 @@ ProfileContact.propTypes = {
   isMyProfile: PropTypes.bool,
   children: PropTypes.node,
   isAdmin: PropTypes.bool,
+  bigProfileCard: PropTypes.bool,
 };
 
 export default ProfileContact;

src/components/Cards/ProfileCard/ProfileContact/ProfileContact.styled.js

@@ -20,10 +20,10 @@ export const ProfileContactContainer = styled(Grid)`
   }
   @media (max-width: 600px) {
     ${(props) => props.isAdmin && `overflow: hidden;`}
-    padding-top: ${(props) => props.isAdmin && "88px"};
+    padding-top: ${(props) => props.isAdmin && (props.bigProfileCard ? "88px" : "58px")};
     padding-bottom: ${(props) => (props.isAdmin ? "1rem" : "0")};
     gap: 5px;
-    width: ${props => props.isAdmin && 'calc(100vw - 198px)'};
+    width: ${props => props.bigProfileCard && 'calc(100vw - 198px)'};
   }
 `;
 export const LocationIcon = styled(Location)`
@@ -55,7 +55,7 @@ export const ContactItem = styled(Typography)`
     font-size: 14px;
     bottom: 4px;
     margin-right: 0;
-    ${props => props.isAdmin && css`
+    ${props => props.bigProfileCard && css`
       width: calc(100vw - 218px);
       overflow-wrap: break-word;
     `}

src/components/Cards/ProfileCard/ProfileMainInfo/ProfileMainInfo.js

@@ -35,7 +35,10 @@ const ProfileMainInfo = (props) => {
     }
   };
   return (
-    <ProfileMainInfoContainer isAdmin={props.isAdmin}>
+    <ProfileMainInfoContainer
+      bigProfileCard={props.bigProfileCard}
+      isAdmin={props.isAdmin}
+    >
       <AvatarImageContainer>
         <AvatarImage
           isAdmin={props.isAdmin}
@@ -51,6 +54,7 @@ const ProfileMainInfo = (props) => {
           <BlockedProfile hideIcon redText aboveTitle isAdmin />
         )}
         <ProfileName
+        bigProfileCard={props.bigProfileCard}
           isAdmin={props.isAdmin}
           isMyProfile={props.isMyProfile}
           isBlocked={props.isBlocked}

src/components/Cards/ProfileCard/ProfileMainInfo/ProfileMainInfo.styled.js

@@ -9,9 +9,18 @@ export const ProfileMainInfoContainer = styled(Grid)`
   align-items: start;
   flex-direction: row;
   @media (max-width: 600px) {
-    flex-direction: ${(props) => (props.isAdmin ? `column-reverse` : `row`)};
+    flex-direction: ${(props) =>
+      props.bigProfileCard ? `column-reverse` : `row`};
     gap: 18px;
     max-width: 108px;
+    ${(props) =>
+      props.isAdmin &&
+      !props.bigProfileCard &&
+      css`
+        align-items: center;
+        position: relative;
+        top: 36px;
+      `}
   }
 `;
 export const AvatarImageContainer = styled(Grid)`
@@ -20,6 +29,7 @@ export const AvatarImageContainer = styled(Grid)`
   align-items: center;
 `;
 export const AvatarImage = styled.img`
+  border: 1px solid black;
   min-height: ${(props) => (props.isAdmin ? `108px` : `144px`)};
   min-width: ${(props) => (props.isAdmin ? `108px` : `144px`)};
   width: ${(props) => (props.isAdmin ? `108px` : `144px`)};
@@ -66,15 +76,30 @@ export const ProfileName = styled(Typography)`
   cursor: ${(props) => props.isAdmin && `pointer`};
   @media (max-width: 600px) {
     font-size: 18px;
+    line-height: 24px;
     margin-bottom: 0;
-    ${props => props.isAdmin && css`
-      max-width: calc(100vw - 200px);
-      min-width: 0;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      display: inline;
-    `}
+    ${(props) =>
+      props.bigProfileCard &&
+      css`
+        max-width: calc(100vw - 200px);
+        min-width: 0;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      `}
+    ${(props) =>
+      props.isAdmin &&
+      !props.bigProfileCard &&
+      css`
+        max-width: calc(100vw - 200px);
+        min-width: 0;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
+        max-height: 48px;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      `}
   }
 `;
 export const ProfilePIBContainer = styled(Grid)`