Merge pull request #346 from ReseauEntourage/feature/EN-7378-FO-New-d…

…esign-photo-miniature-de-partage [EN-7378] feat(CV): Photo preview is now profile picture
ReseauEntourage · Sep 19, 2024 · f0ff545 · f0ff545
2 parents 005b588 + 7c9caf0
commit f0ff545
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 312 deletions.
diff --git a/src/components/backoffice/cv/CVEditPage/CVFicheEdition/CVFicheEdition.tsx b/src/components/backoffice/cv/CVEditPage/CVFicheEdition/CVFicheEdition.tsx
@@ -1,8 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { CV } from 'src/api/types';
-import { Grid, Img } from 'src/components/utils';
+import { Grid } from 'src/components/utils';
 
-import { CV_STATUS } from 'src/constants';
 import { AdminZone } from 'src/constants/departements';
 import { useMount, usePrevious } from 'src/hooks/utils';
 import {
@@ -48,8 +47,6 @@ export const CVFicheEdition = ({
   address,
   userZone,
 }: CVFicheEditionProps) => {
-  const [previewUrl, setPreviewUrl] = useState<string>();
-
   const [imageUrl, setImageUrl] = useState<string>();
 
   const prevPreviewGenerating = usePrevious(previewGenerating);
@@ -58,7 +55,6 @@ export const CVFicheEdition = ({
     // Use hash to reload image if an update is done
     const previewHash = Date.now();
     const baseUrl = `${process.env.AWSS3_URL}${process.env.AWSS3_IMAGE_DIRECTORY}${cv.UserId}.${cv.status}`;
-    setPreviewUrl(`${baseUrl}.preview.jpg?${previewHash}`);
     setImageUrl(`${baseUrl}.jpg?${previewHash}`);
   }, [cv.UserId, cv.status]);
 
@@ -81,49 +77,6 @@ export const CVFicheEdition = ({
             onChange={onChange}
             disablePicture={disablePicture}
           />
-          {cv.urlImg && (
-            <div className="uk-card uk-card-default">
-              <div className="uk-card-body">
-                <h3 className="uk-card-title">
-                  Photo de <span className="uk-text-primary">partage</span>
-                </h3>
-              </div>
-              <div className="uk-card-media-bottom">
-                <div className="uk-inline uk-width-expand uk-height-medium uk-width-expand uk-cover-container">
-                  {previewUrl ? (
-                    <Img cover src={previewUrl} alt="Preview" />
-                  ) : (
-                    <div className="uk-height-medium uk-width-expand" />
-                  )}
-
-                  {(cv.status === CV_STATUS.Draft.value ||
-                    previewGenerating) && (
-                    <>
-                      <div
-                        className="uk-position-cover"
-                        style={{
-                          background: 'rgba(0, 0, 0, 0.8)',
-                        }}
-                      />
-                      <div className="uk-overlay uk-position-center uk-light">
-                        {previewGenerating ? (
-                          <div>
-                            Génération de la prévisualisation en cours&nbsp;
-                            <div
-                              className="uk-margin-small-left"
-                              data-uk-spinner="ratio: 0.6"
-                            />
-                          </div>
-                        ) : (
-                          <p>Veuillez sauvegarder ou publier le CV</p>
-                        )}
-                      </div>
-                    </>
-                  )}
-                </div>
-              </div>
-            </div>
-          )}
         </Grid>
 
         <Grid childWidths={['1-2@s']} row match>

diff --git a/src/components/cards/CandidatCard.styles.tsx b/src/components/cards/CandidatCard.styles.tsx
@@ -2,20 +2,43 @@ import styled from 'styled-components';
 import { COLORS } from 'src/constants/styles';
 
 export const CandidatCardStyled = styled.div`
-  height: 550px;
   display: flex;
   flex-direction: column;
+  height: 400px;
   background: ${COLORS.white};
   border-radius: 20px;
   overflow: hidden;
-  border: 3px solid #f3f3f3;
+  border: 3px solid ${COLORS.lightgray};
 `;
 
 export const CandidatCardPictureContainerStyled = styled.div`
-  flex: 1;
   position: relative;
   width: 100%;
   cursor: pointer;
+  height: 245px;
+  background: ${COLORS.lightgray};
+`;
+
+export const CandidatCardContentStyled = styled.div`
+  flex: auto;
+  padding: 20px;
+  font-size: 13px;
+  font-weight: 400;
+  color: ${COLORS.darkGrayFont};
+  align-items: space-between;
+  cursor: pointer;
+  h1 {
+    color: ${COLORS.black};
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  p {
+    margin: 0;
+  }
 `;
 
 export const CandidatCardPictureOverlay = styled.div`
@@ -34,59 +57,25 @@ export const CandidatCardPictureOverlay = styled.div`
   justify-content: flex-end;
   items-center: end;
   font-weight: 400;
-  font-size: 16px;
+  font-size: 14px;
   padding: 20px;
   box-sizing: border-box;
   gap: 10px;
   > p {
     margin: 0;
     &.name {
-      font-size: 28px;
-      font-weight: 600;
+      font-size: 25px;
+      font-weight: 500;
     }
   }
 `;
 
-export const CandidatCardContentStyled = styled.div`
-  padding: 20px;
-  font-size: 14px;
-  font-weight: 400;
-  color: ${COLORS.darkGrayFont};
-  cursor: pointer;
-  > h1 {
-    color: ${COLORS.black};
-    font-size: 18px;
-    font-weight: 700;
-    margin-bottom: 10px;
-  }
-  > p {
-    margin: 0;
-  }
-`;
-
 export const CandidateCardBusinessLinesStyled = styled.div`
-  margin-left: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   color: ${COLORS.primaryBlue};
   > * {
     margin-top: 10px;
   }
 `;
-
-export const CandidatCardFooterStyled = styled.div`
-  border-top: 1px solid #f3f3f3;
-  font-size: 14px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  > a {
-    text-decoration: underline;
-  }
-  padding: 10px 20px 10px 20px;
-  box-sizing: border-box;
-`;
-
-export const CandidatCardSharerStyled = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`;