Merge pull request #851 from adobecom/MWPW-160119

MWPW-160119: Optimize Verb Widget Performance
adobecom · Oct 11, 2024 · 625eaa0 · 625eaa0
2 parents 47f3587 + 02cf671
commit 625eaa0
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 13 deletions.
diff --git a/acrobat/blocks/verb-widget/icons.js b/acrobat/blocks/verb-widget/icons.js
diff --git a/acrobat/blocks/verb-widget/verb-widget.css b/acrobat/blocks/verb-widget/verb-widget.css
@@ -21,11 +21,24 @@
 }
 
 .verb-icon {
-  height: 56px;
-  min-width: 56px;
-  background-image: url('../../img/icons/widget-icon.png');
   background-size: cover;
   display: inline-flex;
+  width: 56px;
+}
+
+.verb-image {
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  max-width: 345px;
+}
+
+.verb-image svg {
+  display: block;
+  width: 100%;
+
 }
 
 .verb-big-icon {
@@ -45,7 +58,6 @@
 .security-icon {
   width: 42px;
   height: 42px;
-  background-image: url('../../img/icons/widget-sec.png');
   background-size: contain;
   background-repeat: no-repeat;
   display: inline-block;
@@ -137,11 +149,7 @@
   border: none;
 }
 
-.verb-cta::before {
-  content: '';
-  background-image: url('/acrobat/img/icons/upload-icon.svg');
-  background-repeat: no-repeat;
-  background-size: 32px 28px;
+.verb-cta .upload-icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -283,8 +291,8 @@
   }
 
   .verb-icon {
-    height: 40px;
-    min-width: 40px;
+    height: auto;
+    width: 40px;
   }
 
   .verb-title {