Merge branch 'feature/1451' of http://git.dilig.net/selenaaasi/trampa-frontend

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "4.0.3",
+  "version": "4.0.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

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/BlockedProfile/BlockedProfile.js

@@ -35,8 +35,9 @@ const BlockedProfile = (props) => {
         <BlockedIconContainer
           aboveTitle={props.aboveTitle}
           chatCard={props.chatCard}
+          
         >
-          <BlockedIcon />
+          <BlockedIcon redText={props.redText} />
         </BlockedIconContainer>
       )}
     </BlockedContainer>

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

@@ -43,6 +43,7 @@ export const BlockedIcon = styled(Block)`
     left: -2px;
   }
   & path {
-    stroke: white;
+    stroke: ${(props) =>
+      props.redText ? selectedTheme.colors.blockedColor : "white"};
   }
 `;

src/components/Cards/ProfileCard/ProfileCard.js

@@ -17,6 +17,7 @@ import {
   ProfileInfoAndContactContainer,
   UnblockButton,
   UnblockIcon,
+  BlockedProfileContainer,
 } from "./ProfileCard.styled";
 import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
 import { useRouteMatch } from "react-router-dom";
@@ -168,6 +169,11 @@ const ProfileCard = (props) => {
               isMyProfile={isMyProfile}
               blocked={!props.isAdmin && profile?._blocked}
             >
+              {profile?._blocked && isMobile && props.isAdmin && (
+                <BlockedProfileContainer>
+                  <BlockedProfile hideIcon redText aboveTitle isAdmin />
+                </BlockedProfileContainer>
+              )}
               <ButtonsContainer>
                 {profile?._blocked && !isMobile && <BlockedProfile />}
                 {props.isAdmin && (
@@ -205,7 +211,10 @@ 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} />
                   )}
@@ -243,6 +252,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

@@ -94,7 +94,6 @@ export const BlockLabelIcon = styled(Block)`
   }
 `;
 
-
 export const BlockButton = styled(Box)`
   width: 40px;
   height: 40px;
@@ -342,11 +341,12 @@ export const ProfileInfoContainer = styled(Grid)`
 export const ProfileInfoAndContactContainer = styled(Box)`
   display: flex;
   flex-direction: column;
-  margin-bottom: ${props => props.isAdmin && "36px"};
+  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")};
   }
 `;
 
@@ -356,3 +356,10 @@ export const ProfileInfoAndContactContainer = styled(Box)`
 //   justify-content: center;
 //   align-items: start;
 // `;
+export const BlockedProfileContainer = styled(Box)`
+  @media (max-width: 600px) {
+    position: absolute;
+    top: 16px;
+    left: 16px;
+  }
+`;

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}
@@ -46,11 +49,14 @@ const ProfileMainInfo = (props) => {
           )}
         />
       </AvatarImageContainer>
-      <ProfileMainInfoGrid>
-        {props.profile?._blocked && props.isAdmin && (
-          <BlockedProfile hideIcon redText aboveTitle isAdmin />
-        )}
+      <ProfileMainInfoGrid bigProfileCard={props.bigProfileCard}>
+        {props.profile?._blocked &&
+          props.isAdmin &&
+          (!isMobile || (isMobile && props.bigProfileCard)) && (
+            <BlockedProfile hideIcon redText aboveTitle isAdmin />
+          )}
         <ProfileName
+          bigProfileCard={props.bigProfileCard}
           isAdmin={props.isAdmin}
           isMyProfile={props.isMyProfile}
           isBlocked={props.isBlocked}
@@ -81,5 +87,11 @@ ProfileMainInfo.propTypes = {
   bigProfileCard: PropTypes.bool,
   isBlocked: PropTypes.bool,
 };
+ProfileMainInfo.defaultProps = {
+  isAdmin: false,
+  bigProfileCard: false,
+  isBlocked: false,
+  isMyProfile: false,
+};
 
 export default ProfileMainInfo;

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

@@ -9,9 +9,19 @@ 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;
+        max-width: none;
+      `}
   }
 `;
 export const AvatarImageContainer = styled(Grid)`
@@ -20,6 +30,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`)};
@@ -49,6 +60,9 @@ export const ProfileMainInfoGrid = styled(Grid)`
   margin-left: 16px;
   @media (max-width: 600px) {
     margin-left: 0;
+    ${props => props.bigProfileCard && css`
+      width: calc(100vw - 196px);
+    `}
   }
 `;
 export const ProfileName = styled(Typography)`
@@ -66,15 +80,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)`