Finished feature 1451

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/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

@@ -19,6 +19,7 @@ import {
   ProfileInfoAndContactContainer,
   UnblockButton,
   UnblockIcon,
+  BlockedProfileContainer,
 } from "./ProfileCard.styled";
 import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
 import { useRouteMatch } from "react-router-dom";
@@ -170,6 +171,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 && (
@@ -201,7 +207,10 @@ const ProfileCard = (props) => {
                 )}
               </ButtonsContainer>
               <ProfileInfoContainer>
-                <ProfileInfoAndContactContainer isAdmin={props.isAdmin} bigProfileCard={props.bigProfileCard}>
+                <ProfileInfoAndContactContainer
+                  isAdmin={props.isAdmin}
+                  bigProfileCard={props.bigProfileCard}
+                >
                   {profile?._blocked && !props.isAdmin && isMobile && (
                     <BlockedProfile aboveTitle isAdmin={props.isAdmin} />
                   )}

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,12 +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: ${props => props.isAdmin ? '0' : '18px'};
-    margin-bottom: ${props => props.isAdmin && '0'};
-    ${props => props.bigProfileCard && 'gap: 18px;'}
-    flex-direction: ${props => props.bigProfileCard ? "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")};
   }
 `;
 
@@ -357,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/ProfileMainInfo/ProfileMainInfo.js

@@ -49,12 +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}
+          bigProfileCard={props.bigProfileCard}
           isAdmin={props.isAdmin}
           isMyProfile={props.isMyProfile}
           isBlocked={props.isBlocked}
@@ -85,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

@@ -20,6 +20,7 @@ export const ProfileMainInfoContainer = styled(Grid)`
         align-items: center;
         position: relative;
         top: 36px;
+        max-width: none;
       `}
   }
 `;
@@ -29,7 +30,7 @@ export const AvatarImageContainer = styled(Grid)`
   align-items: center;
 `;
 export const AvatarImage = styled.img`
-  border: 1px solid black;
+  /* border: 1px solid black; */
   min-height: ${(props) => (props.isAdmin ? `108px` : `144px`)};
   min-width: ${(props) => (props.isAdmin ? `108px` : `144px`)};
   width: ${(props) => (props.isAdmin ? `108px` : `144px`)};
@@ -59,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)`