fix padding

src/components/Sidebar/SubscriptionStatus/index.tsx

@@ -1,17 +1,37 @@
 import { MemberSubscriptionStatus } from './member';
 import { AdminSubscriptionStatus as AdminSubscriptionStatus } from './admin';
 import { GalleryContext } from 'pages/gallery';
-import React, { useContext } from 'react';
-import { hasNonAdminFamilyMembers, isFamilyAdmin } from 'utils/billing';
+import React, { useContext, useMemo } from 'react';
+import {
+    hasNonAdminFamilyMembers,
+    isFamilyAdmin,
+    isOnFreePlan,
+    isSubscriptionActive,
+    isSubscriptionCancelled,
+} from 'utils/billing';
 import Box from '@mui/material/Box';
+import { UserDetails } from 'types/user';
 
-export default function SubscriptionStatus({ userDetails }) {
+export default function SubscriptionStatus({
+    userDetails,
+}: {
+    userDetails: UserDetails;
+}) {
     const { showPlanSelectorModal } = useContext(GalleryContext);
 
     if (!userDetails) {
         return <></>;
     }
-    return (
+
+    const hasAMessage = useMemo(
+        () =>
+            !isSubscriptionActive(userDetails.subscription) ||
+            isOnFreePlan(userDetails.subscription) ||
+            isSubscriptionCancelled(userDetails.subscription),
+        [userDetails]
+    );
+
+    return hasAMessage ? (
         <Box px={1}>
             {!hasNonAdminFamilyMembers(userDetails.familyData) ||
             isFamilyAdmin(userDetails.familyData) ? (
@@ -23,5 +43,7 @@ export default function SubscriptionStatus({ userDetails }) {
                 <MemberSubscriptionStatus userDetails={userDetails} />
             )}
         </Box>
+    ) : (
+        <></>
     );
 }

src/utils/strings/englishConstants.tsx

@@ -272,10 +272,8 @@ const englishConstants = {
 
     FREE_SUBSCRIPTION_INFO: (expiryTime) => (
         <>
-            <p>
-                You are on the <strong>free</strong> plan that expires on{' '}
-                {dateString(expiryTime)}
-            </p>
+            You are on the <strong>free</strong> plan that expires on{' '}
+            {dateString(expiryTime)}
         </>
     ),
 
@@ -286,15 +284,11 @@ const englishConstants = {
         </>
     ),
     RENEWAL_ACTIVE_SUBSCRIPTION_INFO: (expiryTime) => (
-        <p>Your subscription will renew on {dateString(expiryTime)}</p>
+        <>Your subscription will renew on {dateString(expiryTime)}</>
     ),
 
     RENEWAL_CANCELLED_SUBSCRIPTION_INFO: (expiryTime) => (
-        <>
-            <p>
-                Your subscription will be cancelled on {dateString(expiryTime)}
-            </p>
-        </>
+        <>Your subscription will be cancelled on {dateString(expiryTime)}</>
     ),
 
     USAGE_INFO: (usage, quota) => (