update images

src/components/MemberSubscriptionManage.tsx

@@ -56,9 +56,10 @@ export function MemberSubscriptionManage({ open, userDetails, onClose }) {
                         {getFamilyPlanAdmin(userDetails.familyData)?.email}
                     </Typography>
                     <img
-                        height="267px"
                         width="256px"
-                        src="/images/family_plan_leave@3x.png"
+                        src="/images/family-plan.png"
+                        srcSet="/images/family-plan/2x.png 2x,
+                                /images/family-plan/3x.png 3x"
                     />
                     <Button
                         size="large"

src/components/Sidebar/SubscriptionCard/backgroundOverlay.tsx

@@ -3,7 +3,11 @@ import React from 'react';
 export function BackgroundOverlay() {
     return (
         <Overlay zIndex={-1}>
-            <img src="/images/subscription-card-background.png" />
+            <img
+                src="/images/subscription-card-background/1x.png"
+                srcSet="/images/subscription-card-background/2x.png 2x,
+                        /images/subscription-card-background/3x.png 3x"
+            />
         </Overlay>
     );
 }

src/components/Sidebar/SubscriptionCard/index.tsx

@@ -12,6 +12,9 @@ import {
 } from 'utils/billing';
 import { SubscriptionCardContent } from './contentOverlay';
 import { FlexWrapper } from 'components/Container';
+
+const SUBSCRIPTION_CARD_SIZE = 152;
+
 interface Iprops {
     userDetails: UserDetails;
     openMemberSubscriptionDialog: () => void;
@@ -28,7 +31,7 @@ export default function SubscriptionCard({
             <Skeleton
                 animation="wave"
                 variant="rectangular"
-                height={148}
+                height={SUBSCRIPTION_CARD_SIZE}
                 sx={{ borderRadius: '8px' }}
             />
         );
@@ -39,7 +42,10 @@ export default function SubscriptionCard({
         !isFamilyAdmin(userDetails.familyData);
 
     return (
-        <FlexWrapper flexDirection={'column'} position="relative" height={148}>
+        <FlexWrapper
+            flexDirection={'column'}
+            position="relative"
+            height={SUBSCRIPTION_CARD_SIZE}>
             <SubscriptionCardContent
                 hasNonAdminFamilyMembers={hasNonAdminFamilyMembers}
                 userDetails={userDetails}