(refactor) O3-2709: Update placeholder camera icon used in registrati…

…on form (#1601) * (refactor): O3-2709 used Carbon Library camera icon for placeholder in patient registration * Fix indentation --------- Co-authored-by: Ps <[email protected]> Co-authored-by: Dennis Kigen <[email protected]>
openmrs · Jan 23, 2024 · 8123a3a · 8123a3a
1 parent ebe2090
commit 8123a3a
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 13 deletions.
diff --git a/packages/esm-patient-attachments-app/src/assets/placeholder.svg b/packages/esm-patient-attachments-app/src/assets/placeholder.svg
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
@@ -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
@@ -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
@@ -24,5 +24,4 @@
     justify-content: center;
     align-items: center;
   }
-
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,5 +24,4 @@ @@
         justify-content: center;
         align-items: center;
       }
     }