fix/cv

ReseauEntourage · Sep 22, 2023 · cbea19f · cbea19f
1 parent 5a06136
commit cbea19f
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 31 deletions.
diff --git a/src/components/backoffice/cv/CVEditPage/CVEditPage.styles.tsx b/src/components/backoffice/cv/CVEditPage/CVEditPage.styles.tsx
@@ -5,4 +5,22 @@ export const StyledCVEditButtonsContainer = styled.div`
   flex-direction: row;
   align-items: center;
   column-gap: 20px;
+  row-gap: 20px;
+  flex-wrap: wrap;
+  &.mobile {
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-top: 20px;
+  }
+`;
+
+export const StyledCVEditStatusVersion = styled.div``;
+
+export const StyledCVNav = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
 `;
diff --git a/src/components/backoffice/cv/CVEditPage/CVEditPage.tsx b/src/components/backoffice/cv/CVEditPage/CVEditPage.tsx
@@ -6,7 +6,7 @@ import { Api } from 'src/api';
 import { CV, User } from 'src/api/types';
 import { openModal } from 'src/components/modals/Modal';
 import { ModalConfirm } from 'src/components/modals/Modal/ModalGeneric/ModalConfirm';
-import { Button, ButtonIcon, Grid } from 'src/components/utils';
+import { Button, ButtonIcon } from 'src/components/utils';
 import { ButtonPost } from 'src/components/utils/Button/ButtonPost';
 import { CV_STATUS, SOCKETS } from 'src/constants';
 import { GA_TAGS } from 'src/constants/tags';
@@ -15,12 +15,16 @@ import {
   COACH_USER_ROLES,
   USER_ROLES,
 } from 'src/constants/users';
-import { usePrevious } from 'src/hooks/utils';
+import { useIsDesktop, usePrevious } from 'src/hooks/utils';
 import { gaEvent } from 'src/lib/gtag';
 import { UserContext } from 'src/store/UserProvider';
 import { isRoleIncluded } from 'src/utils/Finding';
 import { ButtonDownload } from './ButtonDownload';
-import { StyledCVEditButtonsContainer } from './CVEditPage.styles';
+import {
+  StyledCVEditButtonsContainer,
+  StyledCVEditStatusVersion,
+  StyledCVNav,
+} from './CVEditPage.styles';
 import { CVFicheEdition } from './CVFicheEdition';
 import { CVModalPreview } from './CVModalPreview';
 import { NoCV } from './NoCV';
@@ -42,6 +46,8 @@ export const CVEditPage = ({ candidateId, cv, setCV }: CVEditPageProps) => {
   const [previewGenerating, setPreviewGenerating] = useState(false);
   const [pdfGenerating, setPdfGenerating] = useState(false);
 
+  const isDesktop = useIsDesktop();
+
   const { user } = useContext<{ user: User }>(UserContext);
 
   const prevCV = usePrevious(cv);
@@ -289,8 +295,8 @@ export const CVEditPage = ({ candidateId, cv, setCV }: CVEditPageProps) => {
   // affichage du CV
   return (
     <div>
-      <Grid between middle>
-        <Grid column gap="collapse">
+      <StyledCVNav className={isDesktop ? '' : 'mobile'}>
+        <StyledCVEditStatusVersion>
           <div>
             Statut&nbsp;:{' '}
             <span className={`uk-text-${cvStatus.style}`}>
@@ -303,8 +309,8 @@ export const CVEditPage = ({ candidateId, cv, setCV }: CVEditPageProps) => {
               {cvVersion}
             </div>
           )}
-        </Grid>
-        <StyledCVEditButtonsContainer>
+        </StyledCVEditStatusVersion>
+        <StyledCVEditButtonsContainer className={isDesktop ? '' : 'mobile'}>
           <ButtonDownload
             pdfGenerating={pdfGenerating}
             candidateId={cv.UserId}
@@ -344,7 +350,7 @@ export const CVEditPage = ({ candidateId, cv, setCV }: CVEditPageProps) => {
               text="Publier"
             />
           )}
-          {user.role === USER_ROLES.ADMIN && (
+          {user.role !== USER_ROLES.ADMIN && (
             <ButtonIcon
               name="question"
               href={process.env.TUTORIAL_CV}
@@ -355,7 +361,7 @@ export const CVEditPage = ({ candidateId, cv, setCV }: CVEditPageProps) => {
             />
           )}
         </StyledCVEditButtonsContainer>
-      </Grid>
+      </StyledCVNav>
       <CVFicheEdition
         email={cv.user?.candidat.email}
         phone={cv.user?.candidat.phone}

diff --git a/src/components/backoffice/cv/CVEditPage/CVFicheEdition/CVEdit/CVEdit.styles.ts b/src/components/backoffice/cv/CVEditPage/CVFicheEdition/CVEdit/CVEdit.styles.ts
@@ -1,25 +1,35 @@
 import styled from 'styled-components';
 
-export const StyledEditPicture = styled.div`
-  box-sizing: border-box;
-  width: 100%;
-  flex: auto;
-  background-size: contain;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
+export const StyledEditPictureContainer = styled.div`
+  height: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: black;
   position: relative;
-  transition: box-shadow 0.1s ease-in-out;
-  border-radius: 5px;
-  overflow: hidden;
-  color: #363636;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+  &.mobile {
+    height: 270px;
+  }
+`;
+
+export const StyledEditPicture = styled.div`
+  height: 400px;
+  width: 270px !important;
+  border-radius: 859px 909px 729px 909px;
+  background-position: 66% 39%;
+  background-size: cover;
+  &.mobile {
+    width: 190px !important;
+    height: 270px;
+  }
 `;
 
 export const StyledPictureMask = styled.div`
+  display: none;
   position: absolute;
-  left: 39%;
+  left: calc(50% - 135px);
   top: 0;
-  width: 200px;
+  width: 270px;
   height: 100%;
   box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.8);
   border-radius: 859px 909px 729px 909px;

diff --git a/src/components/backoffice/cv/CVEditPage/CVFicheEdition/CVEdit/CVEditPicture.tsx b/src/components/backoffice/cv/CVEditPage/CVFicheEdition/CVEdit/CVEditPicture.tsx
@@ -7,7 +7,7 @@ import { addPrefix } from 'src/utils';
 import {
   StyledEditPicture,
   StyledEditPictureButton,
-  StyledPictureMask,
+  StyledEditPictureContainer,
 } from './CVEdit.styles';
 
 interface CVEditPictureProps {
@@ -52,12 +52,12 @@ export const CVEditPicture = ({
       );
     });
   };
-
   return (
-    <StyledEditPicture
-      style={{ backgroundImage: `url(${addPrefix(url)})`, minHeight: '300px' }}
-    >
-      <StyledPictureMask className={!isDesktop ? 'mobile' : ''} />
+    <StyledEditPictureContainer className={!isDesktop ? 'mobile' : ''}>
+      <StyledEditPicture
+        className={!isDesktop ? 'mobile' : ''}
+        style={{ backgroundImage: `url(${addPrefix(url)})` }}
+      />
       {!disablePicture && (
         <StyledEditPictureButton>
           {imageUploading ? (
@@ -99,6 +99,6 @@ export const CVEditPicture = ({
           )}
         </StyledEditPictureButton>
       )}
-    </StyledEditPicture>
+    </StyledEditPictureContainer>
   );
 };
diff --git a/src/components/partials/LandingPagePartial.tsx b/src/components/partials/LandingPagePartial.tsx
@@ -5,7 +5,7 @@ export const LandingPagePartial = () => {
   return (
     <Background
       blend={{ mode: 'soft-light', colorHex: 'rgba(0,0,0,0.4)' }}
-      src="/static/img/Linked-Out-VA--052_extended.jpg"
+      src="/static/img/cover-linkedout.jpg"
       position="top-center"
     >
       <div