Whats new popup design fixes (#10964)

* Remove padding on QR code image

* Allow the qr code to be below the description in the whats new popup

* Fix size and position of QR code in whats new notification

* Add right caret to action links in whats new popup

* Clean up placeImageBelowDescription logic

* Fix display of whats-new-popup image

* Improve spacing and sizing of whats new popup in both full screen and popup view

* refactor

shared/notifications/index.js

@@ -5,8 +5,9 @@ export const UI_NOTIFICATIONS = {
     date: '2021-03-17',
     image: {
       src: 'images/mobile-link-qr.svg',
-      height: '270px',
+      height: '230px',
-      width: '270px',
+      width: '230px',
+      placeImageBelowDescription: true,
     },
   },
   2: {

ui/components/app/whats-new-popup/index.scss

@@ -15,6 +15,7 @@
   }
 
   &__notification-image {
+    align-self: center;
     margin-bottom: 16px;
   }
 
@@ -49,3 +50,14 @@
     margin-bottom: 8px;
   }
 }
+
+.popover-wrap.whats-new-popup__popover {
+  @media screen and (min-width: 576px) {
+    max-height: 600px;
+    width: 500px;
+  }
+
+  @media screen and (max-width: 575px) {
+    max-height: 568px;
+  }
+}

ui/components/app/whats-new-popup/whats-new-popup.js

@@ -32,6 +32,15 @@ function getActionFunctionById(id) {
 const renderFirstNotification = (notification, idRefMap) => {
   const { id, date, title, description, image, actionText } = notification;
   const actionFunction = getActionFunctionById(id);
+  const imageComponent = image && (
+    <img
+      className="whats-new-popup__notification-image"
+      src={image.src}
+      height={image.height}
+      width={image.width}
+    />
+  );
+  const placeImageBelowDescription = image?.placeImageBelowDescription;
   return (
     <div
       className={classnames(
@@ -40,14 +49,7 @@ const renderFirstNotification = (notification, idRefMap) => {
       key={`whats-new-popop-notificatiion-${id}`}
       ref={idRefMap[id]}
     >
-      {image && (
+      {!placeImageBelowDescription && imageComponent}
-        <img
-          className="whats-new-popup__notification-image"
-          src={image.src}
-          height={image.height}
-          width={image.width}
-        />
-      )}
       <div className="whats-new-popup__notification-title">{title}</div>
       <div className="whats-new-popup__description-and-date">
         <div className="whats-new-popup__notification-description">
@@ -55,6 +57,7 @@ const renderFirstNotification = (notification, idRefMap) => {
         </div>
         <div className="whats-new-popup__notification-date">{date}</div>
       </div>
+      {placeImageBelowDescription && imageComponent}
       {actionText && (
         <Button
           type="secondary"
@@ -88,7 +91,7 @@ const renderSubsequentNotification = (notification, idRefMap) => {
       </div>
       {actionText && (
         <div className="whats-new-popup__link" onClick={actionFunction}>
-          {actionText}
+          {`${actionText} >`}
         </div>
       )}
     </div>
@@ -160,7 +163,6 @@ export default function WhatsNewPopup({ onClose }) {
         onClose();
       }}
       popoverRef={popoverRef}
-      mediumHeight
     >
       <div className="whats-new-popup__notifications">
         {notifications.map(({ id }, index) => {

ui/components/ui/popover/index.scss

@@ -18,10 +18,6 @@
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
     border-radius: 10px;
     background: white;
-
-    &--medium-height {
-      max-height: 600px;
-    }
   }
 
   &-header {

ui/components/ui/popover/popover.component.js

@@ -13,7 +13,6 @@ const Popover = ({
   onBack,
   onClose,
   className,
-  mediumHeight,
   contentClassName,
   showArrow,
   CustomBackground,
@@ -28,9 +27,7 @@ const Popover = ({
         <div className="popover-bg" onClick={onClose} />
       )}
       <section
-        className={classnames('popover-wrap', className, {
+        className={classnames('popover-wrap', className)}
-          'popover-wrap--medium-height': mediumHeight,
-        })}
         ref={popoverRef}
       >
         {showArrow ? <div className="popover-arrow" /> : null}
@@ -84,7 +81,6 @@ Popover.propTypes = {
   contentClassName: PropTypes.string,
   className: PropTypes.string,
   showArrow: PropTypes.bool,
-  mediumHeight: PropTypes.bool,
   popoverRef: PropTypes.shape({
     current: PropTypes.instanceOf(window.Element),
   }),