Merge pull request #768 from adobecom/mwpw-155784-acom-widget-ui

Updates to acom widget UI

acrobat/blocks/acom-widget/acom-widget.css

@@ -9,10 +9,6 @@
   color: initial;
 }
 
-.acom-center.dragging {
-  border: 3px #7396ff solid;
-}
-
 .acom-legal {
   margin-top: 30px;
   font-size: 14px;
@@ -28,7 +24,6 @@
   min-width: 56px;
   background-image: url('../../img/icons/widget-icon.png');
   background-size: cover;
-  margin-bottom: 24px;
   display: inline-flex;
 }
 
@@ -85,23 +80,26 @@
 }
 
 .acom-wrapper {
-  max-width: 1349px;
+  width: 75%;
+  max-width: 75%;
   margin-left: auto;
   margin-right: auto;
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   justify-content: center;
   border-radius: 20px;
-  border-style: dashed;
-  border-color: #d5d5d5;
-  border-width: 3px;
+  border: 3px dashed #d5d5d5;
   position: relative;
   background-color: #fff;
-  padding: 25px;
   min-height: 560px;
 }
 
+.acom-wrapper.dragging {
+  background-color: #ecf5ff;
+  border: 3px #0265dc solid;
+}
+
 .acom-row {
   display: flex;
   justify-content: space-between;
@@ -128,7 +126,23 @@
   color: white;
   white-space: nowrap;
   font-weight: 700;
-  display: inline-flex;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30%;
+}
+
+.acom-cta::before {
+  content: '';
+  background-image: url('/acrobat/img/icons/upload-icon.svg');
+  background-repeat: no-repeat;
+  background-size: 32px 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  width: 32px;
+  height: 28px;
 }
 
 .acom-cta:hover {
@@ -157,10 +171,27 @@
   margin-bottom: 16px;
 }
 
+.acom-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.acom-title {
+  font-size: 30px;
+  font-weight: bold;
+  color: black;
+  margin-left: 15px;
+}
+
 @media screen and (min-width: 768px) {
   .acom-container {
-    padding-left: 133px;
-    padding-right: 133px;
+    align-items: center;
+    display: flex;
+    flex: 1 1 55%;
+    flex-direction: row;
+    padding: 48px 0 48px 48px;
   }
 
 }

acrobat/blocks/acom-widget/acom-widget.js

@@ -129,6 +129,10 @@ const dropFiles = (ev, verb, errorState) => {
   }
 };
 
+const setDraggingClass = (widget, shouldToggle) => {
+  shouldToggle ? widget.classList.add('dragging') : widget.classList.remove('dragging');
+}
+
 export default async function init(element) {
   const children = element.querySelectorAll(':scope > div');
   const VERB = element.classList[1];
@@ -143,11 +147,14 @@ export default async function init(element) {
   const widgetRow = createTag('div', { class: 'acom-row' });
   const widgetLeft = createTag('div', { class: 'acom-col' });
   const widgetRight = createTag('div', { class: 'acom-col' });
+  const widgetHeader = createTag('div', { class: 'acom-header' });
   const widgetIcon = createTag('div', { class: 'acom-icon' });
+  const widgetTitle =  createTag('div', { class: 'acom-title' }, 'Acrobat');
   const widgetCopy = createTag('p', { class: 'acom-copy' }, 'Drag and drop a PDF to use the Acrobat PDF form filler.');
   const widgetButton = createTag('label', { for: 'file-upload', class: 'acom-cta' }, 'Select a file');
   const button = createTag('input', { type: 'file', id: 'file-upload', class: 'hide' });
   const errorState = createTag('div', { class: 'hide' });
+  const widgetImage = createTag('img', { class: 'acom-image', src: children[1].querySelector('img')?.src });
 
   const legal = createTag('p', { class: 'acom-legal' }, 'Your file will be securely handled by Adobe servers and deleted unless you sign in to save it. By using this service, you agree to the Adobe Terms of Use and Privacy Policy.');
   const iconSecurity = createTag('div', { class: 'security-icon' });
@@ -156,8 +163,10 @@ export default async function init(element) {
 
   widget.append(widgetContainer);
   widgetContainer.append(widgetRow);
+  widgetRight.append(widgetImage);
   widgetRow.append(widgetLeft, widgetRight);
-  widgetLeft.append(widgetIcon, widgetHeading, widgetCopy, errorState, widgetButton, button);
+  widgetHeader.append(widgetIcon, widgetTitle);
+  widgetLeft.append(widgetHeader, widgetHeading, widgetCopy, errorState, widgetButton, button);
 
   element.append(widget, footer);
 
@@ -170,10 +179,15 @@ export default async function init(element) {
 
   widget.addEventListener('dragover', (e) => {
     e.preventDefault();
-    // make a function that does the CSS for drag state
+    setDraggingClass(widget, true);
+  });
+
+  widget.addEventListener('dragleave', (file) => {
+    setDraggingClass(widget, false);
   });
 
   widget.addEventListener('drop', (e) => {
     dropFiles(e, VERB, errorState);
+    setDraggingClass(widget, false);
   });
 }