From 8123a3acaedf3c3d55f2a3eb6183c7886cebc246 Mon Sep 17 00:00:00 2001
From: Ps world <45814713+psworld@users.noreply.github.com>
Date: Wed, 24 Jan 2024 03:46:41 +0530
Subject: [PATCH] (refactor) O3-2709: Update placeholder camera icon used in
 registration form (#1601)

* (refactor): O3-2709 used Carbon Library camera icon for placeholder in patient registration

* Fix indentation

---------

Co-authored-by: Ps <ps.world.is.here@gmal.com>
Co-authored-by: Dennis Kigen <kigen.work@gmail.com>
---
 .../src/assets/placeholder.svg                | 17 ++++++++++-----
 .../capture-photo.component.tsx               | 10 ++++++++-
 .../camera-media-uploader/capture-photo.scss  | 21 +++++++++++++------
 .../camera-media-uploader/media-uploader.scss |  1 -
 4 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/packages/esm-patient-attachments-app/src/assets/placeholder.svg b/packages/esm-patient-attachments-app/src/assets/placeholder.svg
index e6cc8968b8..9edb195884 100644
--- a/packages/esm-patient-attachments-app/src/assets/placeholder.svg
+++ b/packages/esm-patient-attachments-app/src/assets/placeholder.svg
@@ -1,6 +1,13 @@
-<svg viewBox="595.32 297.964 80 80" width="80" height="80" xmlns="http://www.w3.org/2000/svg">
-  <g fill="none" fillRule="evenodd">
-    <path fill="#D8D8D8" d="M 595.32 297.964 L 675.32 297.964 L 675.32 377.964 L 595.32 377.964 L 595.32 297.964 Z" transform="matrix(1, 0, 0, 1, 7.105427357601002e-15, -1.4210854715202004e-14)"/>
-    <path d="M 637.322 341.638 L 635.604 339.935 C 634.815 339.152 634.42 338.761 633.966 338.614 C 633.566 338.485 633.136 338.485 632.736 338.614 C 632.282 338.761 631.887 339.152 631.098 339.935 L 627.099 343.963 M 637.322 341.638 L 637.663 341.3 C 638.469 340.5 638.872 340.101 639.334 339.955 C 639.741 339.827 640.178 339.832 640.581 339.969 C 641.04 340.126 641.434 340.535 642.221 341.352 L 643.057 342.201 M 637.322 341.638 L 641.277 345.663 M 641.277 345.663 C 640.927 345.701 640.478 345.701 639.857 345.701 L 630.257 345.701 C 629.137 345.701 628.577 345.701 628.149 345.483 C 627.773 345.291 627.467 344.985 627.275 344.609 C 627.183 344.428 627.129 344.223 627.099 343.963 M 641.277 345.663 C 641.558 345.633 641.774 345.58 641.965 345.483 C 642.341 345.291 642.647 344.985 642.839 344.609 C 643.057 344.181 643.057 343.621 643.057 342.501 L 643.057 338.701 M 634.057 329.701 L 630.257 329.701 C 629.137 329.701 628.577 329.701 628.149 329.919 C 627.773 330.11 627.467 330.416 627.275 330.793 C 627.057 331.22 627.057 331.78 627.057 332.901 L 627.057 342.501 C 627.057 343.147 627.057 343.607 627.099 343.963 M 641.057 334.701 L 641.057 331.701 M 641.057 331.701 L 641.057 328.701 M 641.057 331.701 L 644.057 331.701 M 641.057 331.701 L 638.057 331.701" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" transform="matrix(1, 0, 0, 1, 7.105427357601002e-15, -1.4210854715202004e-14)"/>
-  </g>
+<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs>
+      <style>
+      .cls-1{
+          fill:none; border:1;
+          }
+      </style>
+  </defs>
+  <title>camera</title>
+  <path d="M29,26H3a1,1,0,0,1-1-1V8A1,1,0,0,1,3,7H9.46l1.71-2.55A1,1,0,0,1,12,4h8a1,1,0,0,1,.83.45L22.54,7H29a1,1,0,0,1,1,1V25A1,1,0,0,1,29,26ZM4,24H28V9H22a1,1,0,0,1-.83-.45L19.46,6H12.54L10.83,8.55A1,1,0,0,1,10,9H4Z"/>
+  <path d="M16,22a6,6,0,1,1,6-6A6,6,0,0,1,16,22Zm0-10a4,4,0,1,0,4,4A4,4,0,0,0,16,12Z"/>
+  <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/>
 </svg>
\ No newline at end of file
diff --git a/packages/esm-patient-attachments-app/src/camera-media-uploader/capture-photo.component.tsx b/packages/esm-patient-attachments-app/src/camera-media-uploader/capture-photo.component.tsx
index f08eae3804..3de5a20328 100644
--- a/packages/esm-patient-attachments-app/src/camera-media-uploader/capture-photo.component.tsx
+++ b/packages/esm-patient-attachments-app/src/camera-media-uploader/capture-photo.component.tsx
@@ -29,10 +29,18 @@ const CapturePhoto: React.FC<CapturePhotoProps> = ({ initialState, onCapturePhot
     });
   }, [onCapturePhoto]);
 
+  const showPlaceholderIcon = !dataUri && !initialState;
+
   return (
     <div style={{ display: 'flex', alignItems: 'center' }}>
       <button type="button" onClick={showCam} className={styles.buttonCssReset}>
-        <img src={dataUri || initialState || placeholder} alt="Preview" style={{ width: '100%' }} />
+        <div className={showPlaceholderIcon ? styles.placeholderIconContainer : null}>
+          <img
+            src={dataUri || initialState || placeholder}
+            alt="Preview"
+            style={showPlaceholderIcon ? { width: '30%' } : { width: '100%' }}
+          />
+        </div>
       </button>
       <Button kind="ghost" onClick={showCam} style={{ flex: 1 }}>
         {initialState ? t('changeImage', 'Change image') : t('addImage', 'Add image +')}
diff --git a/packages/esm-patient-attachments-app/src/camera-media-uploader/capture-photo.scss b/packages/esm-patient-attachments-app/src/camera-media-uploader/capture-photo.scss
index c11b1227ea..8f2f41158a 100644
--- a/packages/esm-patient-attachments-app/src/camera-media-uploader/capture-photo.scss
+++ b/packages/esm-patient-attachments-app/src/camera-media-uploader/capture-photo.scss
@@ -1,8 +1,17 @@
 .buttonCssReset {
-    max-width: 64px;
-    padding: 0;
-    margin: 0;
-    border: none;
-    background: none;
-    cursor: pointer;
+	max-width: 64px;
+	padding: 0;
+	margin: 0;
+	border: none;
+	background: none;
+	cursor: pointer;
+}
+
+.placeholderIconContainer {
+	width: 64px;
+	height: 64px;
+	background-color: #D8D8D8;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
diff --git a/packages/esm-patient-attachments-app/src/camera-media-uploader/media-uploader.scss b/packages/esm-patient-attachments-app/src/camera-media-uploader/media-uploader.scss
index eab8bec137..8fe299e158 100644
--- a/packages/esm-patient-attachments-app/src/camera-media-uploader/media-uploader.scss
+++ b/packages/esm-patient-attachments-app/src/camera-media-uploader/media-uploader.scss
@@ -24,5 +24,4 @@
     justify-content: center;
     align-items: center;
   }
-
 }