Subscription styling

IFRCGo · Dec 4, 2024 · 41a98fe · 41a98fe
1 parent 9bb3e12
commit 41a98fe
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 50 deletions.
diff --git a/src/views/MySubscription/SubscriptionTableItem/index.tsx b/src/views/MySubscription/SubscriptionTableItem/index.tsx
@@ -1,5 +1,7 @@
 import {
+    Chip,
     Container,
+    NumberOutput,
     TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -40,77 +42,106 @@ function SubscriptionTableItem(props: Props) {
 
     return (
         <Container
-            key={id}
             className={styles.subscriptionDetail}
             heading={name}
             headingLevel={3}
+            withInternalPadding
+            headingDescription={(
+                <NumberOutput
+                    prefix="("
+                    value={alertCount}
+                    suffix=")"
+                />
+            )}
             actions={(
                 <>
-                    (
-                    {alertCount}
-                    )
+                    <Link
+                        to="subscriptionDetail"
+                        urlParams={{
+                            subscriptionId: id,
+                        }}
+                        variant="secondary"
+                    >
+                        {strings.subscriptionItemView}
+                    </Link>
                     {actions}
                 </>
             )}
-            footerContentClassName={styles.alertDetail}
-            footerContent={(
-                <>
+            childrenContainerClassName={styles.content}
+        >
+            <Chip
+                name={undefined}
+                variant="tertiary"
+                className={styles.filterItem}
+                label={(
                     <TextOutput
-                        className={styles.label}
                         label={strings.subscriptionCountry}
                         value={filterAlertCountry}
                         strongLabel
-                        withoutLabelColon
                     />
+                )}
+            />
+            <Chip
+                name={undefined}
+                variant="tertiary"
+                className={styles.filterItem}
+                label={(
                     <TextOutput
-                        className={styles.label}
                         label={strings.subscriptionAdmin1}
                         value={filterAlertAdmin1s.join(', ')}
                         strongLabel
-                        withoutLabelColon
                     />
+                )}
+            />
+            <Chip
+                name={undefined}
+                variant="tertiary"
+                className={styles.filterItem}
+                label={(
                     <TextOutput
-                        className={styles.label}
                         label={strings.subscriptionUrgency}
                         value={filterAlertUrgencies.join(', ')}
                         strongLabel
-                        withoutLabelColon
                     />
+                )}
+            />
+            <Chip
+                name={undefined}
+                variant="tertiary"
+                className={styles.filterItem}
+                label={(
                     <TextOutput
-                        className={styles.label}
                         label={strings.subscriptionCertainty}
                         value={filterAlertCertainties.join(', ')}
                         strongLabel
-                        withoutLabelColon
                     />
+                )}
+            />
+            <Chip
+                name={undefined}
+                variant="tertiary"
+                className={styles.filterItem}
+                label={(
                     <TextOutput
-                        className={styles.label}
                         label={strings.subscriptionSeverity}
                         value={filterAlertSeverities.join(', ')}
                         strongLabel
-                        withoutLabelColon
                     />
+                )}
+            />
+            <Chip
+                name={undefined}
+                variant="tertiary"
+                className={styles.filterItem}
+                label={(
                     <TextOutput
-                        className={styles.label}
                         label={strings.subscriptionCategory}
                         value={filterAlertCategories.join(', ')}
                         strongLabel
-                        withoutLabelColon
                     />
-                </>
-            )}
-            footerActions={(
-                <Link
-                    to="subscriptionDetail"
-                    urlParams={{
-                        subscriptionId: id,
-                    }}
-                    variant="secondary"
-                >
-                    {strings.subscriptionItemView}
-                </Link>
-            )}
-        />
+                )}
+            />
+        </Container>
     );
 }
 

diff --git a/src/views/MySubscription/SubscriptionTableItem/styles.module.css b/src/views/MySubscription/SubscriptionTableItem/styles.module.css
@@ -1,15 +1,14 @@
 .subscription-detail {
-    background-color: var(--go-ui-color-gray-20);
-    padding: var(--go-ui-spacing-md);
+    background-color: var(--go-ui-color-background);
+    border-radius: var(--go-ui-border-radius-lg);
 
-    .alertDetail {
+    .content {
         display: flex;
+        gap: var(--go-ui-spacing-xs);
         flex-wrap: wrap;
-        gap: var(--go-ui-spacing-xl);
-    }
 
-    .label {
-        display: flex;
-        flex-direction: column;
+        .filter-item {
+            font-size: var(--go-ui-font-size-xs);
+        }
     }
-}
+}
diff --git a/src/views/NewSubscriptionModal/i18n.json b/src/views/NewSubscriptionModal/i18n.json
@@ -19,10 +19,10 @@
         "filterRegionsPlaceholder": "All Regions",
         "newSubscriptionHeading": "New Subscription",
         "newSubscriptionTitle": "Title",
-        "newSubscriptionCreatedSucessfully": "Subscription created successfully.",
+        "newSubscriptionCreatedSuccessfully": "Subscription created successfully.",
         "newSubscriptionFailed": "Failed to create subscription",
-        "newSubscriptionLimitExceed": "You have reached the maximum limit of 10 subscriptions",
+        "newSubscriptionLimitExceeded": "You have reached the maximum limit of 10 subscriptions",
         "subscriptionUpdatedSuccessfully": "Subscription updated successfully.",
         "failedToUpdateSubscription": "Failed to update subscription."
     }
-}
+}
diff --git a/src/views/NewSubscriptionModal/index.tsx b/src/views/NewSubscriptionModal/index.tsx
@@ -308,9 +308,10 @@ function NewSubscriptionModal(props: Props) {
                 if (!response) {
                     return;
                 }
+
                 if (response.ok) {
                     alert.show(
-                        strings.newSubscriptionCreatedSucessfully,
+                        strings.newSubscriptionCreatedSuccessfully,
                         { variant: 'success' },
                     );
                     onCloseModal();
@@ -319,7 +320,7 @@ function NewSubscriptionModal(props: Props) {
                     }
                 } else {
                     alert.show(
-                        strings.newSubscriptionFailed,
+                        strings.newSubscriptionLimitExceeded,
                         { variant: 'danger' },
                     );
                 }
@@ -421,9 +422,7 @@ function NewSubscriptionModal(props: Props) {
                         },
                     }).then(() => {
                         if (onSuccess) {
-                            (
-                                onSuccess()
-                            );
+                            onSuccess();
                         }
                     });
                 } else {