Fix subscription styling

src/App/routes/index.tsx

@@ -44,11 +44,11 @@ const homeLayout = customWrapRoute({
     },
 });
 
-const mySubscription = customWrapRoute({
+const mySubscriptions = customWrapRoute({
     parent: rootLayout,
     path: 'subscriptions',
     component: {
-        render: () => import('#views/MySubscription'),
+        render: () => import('#views/MySubscriptions'),
         props: {},
     },
     wrapperComponent: Auth,
@@ -62,7 +62,7 @@ const subscriptionDetail = customWrapRoute({
     parent: rootLayout,
     path: 'subscriptions/:subscriptionId',
     component: {
-        render: () => import('#views/MySubscription/SubscriptionDetail'),
+        render: () => import('#views/MySubscriptions/SubscriptionDetail'),
         props: {},
     },
     context: {
@@ -353,7 +353,7 @@ const wrappedRoutes = {
     login,
     recoverAccount,
     // resendValidationEmail,
-    mySubscription,
+    mySubscriptions,
     cookiePolicy,
     register,
     historicalAlerts,

src/components/Navbar/index.tsx

@@ -158,7 +158,7 @@ function Navbar(props: Props) {
                     </NavigationTab>
                     {isAuthenticated && (
                         <NavigationTab
-                            to="mySubscription"
+                            to="mySubscriptions"
                         >
                             {strings.headerMenuMySubscription}
                         </NavigationTab>

src/views/Home/styles.module.css

@@ -8,7 +8,7 @@
     .tab-section {
         display: flex;
         flex-direction: column;
-        gap:var(--go-ui-spacing-xl);
+        gap: var(--go-ui-spacing-xl);
         justify-content: center;
 
         .cards {
@@ -22,8 +22,9 @@
                 overflow: auto;
 
                 .cards-content {
-                    display:flex;
+                    display: flex;
                     align-items: center;
+                    justify-content: space-between;
 
                     .alert-image {
                         margin: 0 auto;
@@ -41,4 +42,4 @@
         flex-direction: column;
         gap: var(--go-ui-spacing-lg);
     }
-}
+}

src/views/MySubscription/ActiveTableActions/i18n.json → src/views/MySubscriptions/ActiveTableActions/i18n.json

@@ -3,6 +3,7 @@
     "strings": {
         "deleteSubscriptionActions": "Delete",
         "archiveSubscriptionActions": "Archive",
-        "editSubscriptionActions": "Edit"
+        "editSubscriptionActions": "Edit",
+        "confirmationMessage": "Are you sure want to delete the subscription?"
     }
 }

src/views/MySubscription/ActiveTableActions/index.tsx → src/views/MySubscriptions/ActiveTableActions/index.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import {
     DeleteBinSixLineIcon,
     EditTwoLineIcon,
@@ -12,7 +13,7 @@ import DropdownMenuItem from '#components/DropdownMenuItem';
 import i18n from './i18n.json';
 
 interface Props {
-    onSubscriptionRemove?: () => void;
+    onSubscriptionRemove: () => void;
     onArchiveClick?: () => void;
     onEditClick: () => void;
 }
@@ -26,11 +27,16 @@ function ActiveTableActions(props: Props) {
 
     const strings = useTranslation(i18n);
 
+    const handleDelete = useCallback(() => {
+        onSubscriptionRemove();
+    }, [onSubscriptionRemove]);
+
     return (
         <DropdownMenu
             icons={<MoreOptionsIcon />}
             variant="tertiary"
             withoutDropdownIcon
+            persistent
         >
             <DropdownMenuItem
                 type="button"
@@ -49,10 +55,12 @@ function ActiveTableActions(props: Props) {
                 {strings.editSubscriptionActions}
             </DropdownMenuItem>
             <DropdownMenuItem
-                type="button"
+                type="confirm-button"
                 name="delete"
-                onClick={onSubscriptionRemove}
+                onConfirm={handleDelete}
+                confirmMessage={strings.confirmationMessage}
                 icons={<DeleteBinSixLineIcon />}
+                persist
             >
                 {strings.deleteSubscriptionActions}
             </DropdownMenuItem>

src/views/MySubscriptions/ArchiveTableActions/i18n.json

@@ -0,0 +1,8 @@
+{
+    "namespace": "SubscriptionActions",
+    "strings": {
+        "unarchiveSubscriptionActions": "Unarchive",
+        "deleteSubscriptionActions": "Delete",
+        "confirmationMessage": "Are you sure want to delete the subscription?"
+    }
+}

src/views/MySubscription/ArchiveTableActions/index.tsx → src/views/MySubscriptions/ArchiveTableActions/index.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import {
     DeleteBinSixLineIcon,
     LayoutBottomLineIcon,
@@ -11,7 +12,7 @@ import DropdownMenuItem from '#components/DropdownMenuItem';
 import i18n from './i18n.json';
 
 interface Props {
-    onSubscriptionRemove?: () => void;
+    onSubscriptionRemove: () => void;
     onUnArchive?: () => void;
 }
 
@@ -23,6 +24,10 @@ function ArchiveTableActions(props: Props) {
 
     const strings = useTranslation(i18n);
 
+    const handleDelete = useCallback(() => {
+        onSubscriptionRemove();
+    }, [onSubscriptionRemove]);
+
     return (
         <DropdownMenu
             icons={<MoreOptionsIcon />}
@@ -38,10 +43,12 @@ function ArchiveTableActions(props: Props) {
                 {strings.unarchiveSubscriptionActions}
             </DropdownMenuItem>
             <DropdownMenuItem
-                type="button"
+                type="confirm-button"
                 name="delete"
-                onClick={onSubscriptionRemove}
+                onConfirm={handleDelete}
+                confirmMessage={strings.confirmationMessage}
                 icons={<DeleteBinSixLineIcon />}
+                persist
             >
                 {strings.deleteSubscriptionActions}
             </DropdownMenuItem>

src/views/MySubscription/SubscriptionDetail/AlertInfoItem/index.tsx → src/views/MySubscriptions/SubscriptionDetail/AlertInfoItem/index.tsx

@@ -26,6 +26,8 @@ function AlertInfoItem(props: Props) {
             className={styles.alertDetail}
             heading={alertTitle}
             headingLevel={4}
+            withInternalPadding
+            childrenContainerClassName={styles.content}
             actions={(
                 <Link
                     to="alertDetails"

src/views/MySubscriptions/SubscriptionDetail/AlertInfoItem/styles.module.css

@@ -0,0 +1,4 @@
+.alert-detail {
+    border-radius: var(--go-ui-border-radius-lg);
+    background-color: var(--go-ui-color-background);
+}

src/views/MySubscriptions/SubscriptionDetail/i18n.json

@@ -0,0 +1,17 @@
+{
+    "namespace": "subscriptionDetail",
+    "strings": {
+        "subscriptionDetailTitle": "Subscription Detail",
+        "subscriptionHeading": "Subscription",
+        "filterStartDateFrom": "Start date from",
+        "filterStartDateTo": "Start date To",
+        "filterEmptyMessage": "Alerts not available!",
+        "subscriptionCountry": "Country",
+        "subscriptionAdmin1": "Admin1",
+        "subscriptionUrgency": "Urgency",
+        "subscriptionCertainty": "Certainty",
+        "subscriptionSeverity": "Severity",
+        "subscriptionCategory": "Category",
+        "susbcriptionEmptyMessage": "No alerts to display!"
+    }
+}