fix: JIRA-759, 760, 765, 754, 756 cp-13.10.0

ui/components/app/shield-entry-modal/index.scss

@@ -4,6 +4,11 @@
   .shield-entry-modal__title {
     line-height: 1em;
     font-size: 2.25rem;
+
+    @include design-system.screen-sm-max {
+      font-size: 2rem;
+      margin-top: 16px;
+    }
   }
 
   .shield-entry-modal__content {
@@ -43,4 +48,13 @@
       width: 100%;
     }
   }
+
+  &-sheild-image {
+    width: 346px;
+    height: 252px;
+
+    @include design-system.screen-sm-max {
+      width: 322px;
+    }
+  }
 }

ui/components/app/shield-entry-modal/shield-entry-modal.tsx

@@ -47,12 +47,12 @@ import {
 } from '../../../../shared/constants/subscriptions';
 import {
   AlignItems,
+  BlockSize,
   Display,
   FlexDirection,
 } from '../../../helpers/constants/design-system';
 import { TRANSACTION_SHIELD_LINK } from '../../../helpers/constants/common';
 import { ThemeType } from '../../../../shared/constants/preferences';
-import ShieldIllustrationAnimation from './shield-illustration-animation';
 
 const ShieldEntryModal = ({
   skipEventSubmission = false,
@@ -197,6 +197,7 @@ const ShieldEntryModal = ({
           flexDirection={FlexDirection.Column}
           gap={3}
           paddingTop={4}
+          height={BlockSize.Full}
         >
           <Text
             fontFamily={FontFamily.Hero}
@@ -216,15 +217,11 @@ const ShieldEntryModal = ({
               ? t('shieldEntryModalSubtitleA', ['$10,000'])
               : t('shieldEntryModalSubtitleB', ['$10,000'])}
           </Text>
-          <Box className="grid place-items-center">
+          <Box className="shield-entry-modal-sheild-image flex-1 flex items-center justify-center">
             <img
-              src="/images/shield-entry-modal-bg.png"
+              src="/images/transaction-shield-modal.png"
               alt="Shield Entry Illustration"
-              className="col-start-1 row-start-1"
-            />
-            <ShieldIllustrationAnimation
-              containerClassName="shield-entry-modal-shield-illustration__container col-start-1 row-start-1"
-              canvasClassName="shield-entry-modal-shield-illustration__canvas"
+              className="mx-auto h-full w-full object-contain"
             />
           </Box>
         </ModalBody>

ui/css/utilities/colors.scss

@@ -24,4 +24,5 @@ Before adding a color here make sure that there isn't a design token available.
   --color-network-linea-mainnet-default: #121212;
   --color-network-linea-mainnet-inverse: #fcfcfc;
   --welcome-bg-light: #fff2eb;
+  --shield-membership-inactive-light: #dadce5;
 }

ui/pages/settings/index.scss

@@ -397,7 +397,9 @@
 
         &__modules {
           @include design-system.screen-sm-max {
-            display: block;
+            display: flex;
+            flex-flow: column;
+            overflow-y: auto;
           }
         }
       }
@@ -547,7 +549,8 @@
     }
 
     .settings-page__content__modules {
-      display: block;
+      display: flex;
+      flex-flow: column;
     }
   }
 }

ui/pages/settings/transaction-shield-tab/claims-form/claims-form.tsx

@@ -386,9 +386,8 @@ const ClaimsForm = ({ isView = false }: { isView?: boolean }) => {
 
   return (
     <Box
-      className="submit-claim-page flex flex-col"
+      className="submit-claim-page flex flex-col pt-4 px-4 pb-4"
       data-testid="submit-claim-page"
-      padding={4}
       gap={4}
     >
       {!isView && pendingClaims.length > 0 && (
@@ -430,16 +429,9 @@ const ClaimsForm = ({ isView = false }: { isView?: boolean }) => {
       </Text>
       {/* Personal details */}
       <Box>
-        <Text variant={TextVariant.HeadingSm}>
+        <Text variant={TextVariant.HeadingSm} className="mb-2">
           {t('shieldClaimPersonalDetails')}
         </Text>
-        <Text
-          variant={TextVariant.BodySm}
-          color={TextColor.TextAlternative}
-          className="mb-2"
-        >
-          {t('shieldClaimPersonalDetailsDescription')}
-        </Text>
         <Box
           borderColor={BoxBorderColor.BorderMuted}
           className="w-full h-[1px] border border-b-0"
@@ -495,17 +487,9 @@ const ClaimsForm = ({ isView = false }: { isView?: boolean }) => {
       />
       {/* Incident details */}
       <Box className="mt-4">
-        <Text variant={TextVariant.HeadingSm}>
+        <Text variant={TextVariant.HeadingSm} className="mb-2">
           {t('shieldClaimIncidentDetails')}
         </Text>
-        <Text
-          variant={TextVariant.BodySm}
-          color={TextColor.TextAlternative}
-          className="mb-2"
-        >
-          {t('shieldClaimIncidentDetailsDescription')}
-        </Text>
-
         <Box
           borderColor={BoxBorderColor.BorderMuted}
           className="w-full h-[1px] border border-b-0"

ui/pages/settings/transaction-shield-tab/index.scss

@@ -36,6 +36,10 @@
     &--inactive {
       background-color: var(--color-background-subsection);
 
+      &-light {
+        background-color: var(--shield-membership-inactive-light);
+      }
+
       .transaction-shield-page__membership-text {
         color: var(--color-text-default);
       }

ui/pages/settings/transaction-shield-tab/transaction-shield.tsx

@@ -12,6 +12,7 @@ import {
 } from '@metamask/subscription-controller';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { NameType } from '@metamask/name-controller';
+import { useSelector } from 'react-redux';
 import {
   BannerAlert,
   BannerAlertSeverity,
@@ -85,6 +86,7 @@ import {
   ShieldErrorStateViewEnum,
 } from '../../../../shared/constants/subscriptions';
 import { ThemeType } from '../../../../shared/constants/preferences';
+import { getTheme } from '../../../selectors';
 import CancelMembershipModal from './cancel-membership-modal';
 import { isCryptoPaymentMethod } from './types';
 
@@ -104,6 +106,8 @@ const TransactionShield = () => {
   }, [search]);
 
   const { formatCurrency } = useFormatters();
+  const theme = useSelector(getTheme);
+  const isLightTheme = theme === ThemeType.light;
 
   const {
     customerId,
@@ -645,7 +649,6 @@ const TransactionShield = () => {
       {membershipErrorBanner}
       <Box className="transaction-shield-page__container" marginBottom={4}>
         <Box
-          data-theme={ThemeType.dark}
           className={classnames(
             'transaction-shield-page__row transaction-shield-page__membership',
             {
@@ -655,6 +658,8 @@ const TransactionShield = () => {
                 isMembershipInactive && !showSkeletonLoader,
               'transaction-shield-page__membership--active':
                 !isMembershipInactive && !showSkeletonLoader,
+              'transaction-shield-page__membership--inactive-light':
+                isLightTheme && isMembershipInactive && !showSkeletonLoader,
             },
           )}
           {...rowsStyleProps}

ui/pages/shield-plan/index.scss

@@ -10,6 +10,15 @@
   .shield-plan-page__plan {
     border: 1px solid transparent;
     position: relative;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    column-gap: 16px;
+
+    @include design-system.screen-sm-max {
+      padding-top: 8px;
+      padding-bottom: 8px;
+      column-gap: 8px;
+    }
 
     .shield-plan-page__radio {
       display: flex;
@@ -32,6 +41,12 @@
       height: 20px;
       background-color: var(--color-primary-default);
     }
+
+    .shield-plan-page__plan-price {
+      @include design-system.screen-sm-max {
+        font-size: 16px;
+      }
+    }
   }
 
   .shield-plan-page__plan--selected {

ui/pages/shield-plan/shield-plan.tsx

@@ -342,9 +342,6 @@ const ShieldPlan = () => {
                   key={plan.id}
                   {...rowsStyleProps}
                   borderRadius={BorderRadius.LG}
-                  paddingTop={2}
-                  paddingBottom={2}
-                  gap={4}
                   className={classnames('shield-plan-page__plan', {
                     'shield-plan-page__plan--selected':
                       plan.id === selectedPlan,
@@ -358,7 +355,12 @@ const ShieldPlan = () => {
                     className="shield-plan-page__radio-label"
                   >
                     <Text variant={DSTextVariant.bodySm}>{plan.label}</Text>
-                    <Text variant={DSTextVariant.headingMd}>{plan.price}</Text>
+                    <Text
+                      variant={DSTextVariant.headingMd}
+                      className="shield-plan-page__plan-price"
+                    >
+                      {plan.price}
+                    </Text>
                   </Box>
                   {plan.id === RECURRING_INTERVALS.year && (
                     <Box