fix size of loading modal

Author: AnthonyMarin

src/components/relay-dashboard/paid-subscribers/SubscriberDetailModal/SubscriberDetailModal.styles.ts

@@ -1,7 +1,6 @@
 import styled from 'styled-components';
-import { Card, Typography, Button, Badge } from 'antd';
+import { Card, Typography, Button, Badge, Modal } from 'antd';
 import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from '@app/styles/themes/constants';
-import { BaseBadge } from '@app/components/common/BaseBadge/BaseBadge';
 const { Title, Text, Paragraph } = Typography;
 
 export const StyledModal = styled(Card)`
@@ -209,3 +208,15 @@ export const SubscriptionBadge = styled(Badge.Ribbon)<SubscriptionBadgeProps>`
   background: ${({ subscribed }) => (subscribed ? 'var(--ant-primary-color)' : 'var(--error-color)')};
   color: var(--text-main-color);
 `;
+
+export const StateModal = styled(Modal)`
+
+  .ant-modal-body {
+    height: 50vh;
+    flex-direction: column;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+`

src/components/relay-dashboard/paid-subscribers/SubscriberDetailModal/SubscriberDetailModal.tsx

@@ -24,27 +24,27 @@ export const SubscriberDetailModal: React.FC<SubscriberDetailModalProps> = ({ su
   // Loading state
   if (!subscriber && loading && !fetchFailed) {
     return (
-      <Modal open={isVisible} footer={null} onCancel={onClose} centered>
+      <S.StateModal open={isVisible} footer={null} onCancel={onClose} centered>
         <Spin tip="Loading..." />
-      </Modal>
+      </S.StateModal>
     );
   }
 
   // Error state
   if (!subscriber && !loading && fetchFailed) {
     return (
-      <Modal open={isVisible} footer={null} onCancel={onClose} centered>
+      <S.StateModal open={isVisible} footer={null} onCancel={onClose} centered>
         <Typography.Text type="danger">Failed to fetch subscriber profile. Please try again.</Typography.Text>
-      </Modal>
+      </S.StateModal>
     );
   }
 
   // Not found state
   if (!subscriber && !loading &&  !fetchFailed) {
     return (
-      <Modal open={isVisible} footer={null} onCancel={onClose} centered>
+      <S.StateModal open={isVisible} footer={null} onCancel={onClose} centered>
         <Typography.Text type="secondary">Couldn't find this subscriber profile.</Typography.Text>
-      </Modal>
+      </S.StateModal>
     );
   }
   if (!subscriber) {