fix: styling for national society initiative card view

IFRCGo · Dec 21, 2023 · 66acfda · 66acfda
1 parent 1ba50c8
commit 66acfda
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 44 deletions.
diff --git a/...iews/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/index.tsx b/...iews/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/index.tsx
@@ -28,56 +28,58 @@ function InitiativeCard(props: Props) {
             className={_cs(styles.initiativeCard, className)}
             childrenContainerClassName={styles.figures}
             headingLevel={4}
-            withInternalPadding
             withHeaderBorder
             // TODO: Verify Fund Name and and Fund Type
             headerDescription={(
                 <TextOutput
                     label={strings.initiativeFundNameTitle}
                     value={initiative.fund_type}
                     valueType="text"
-                    strongLabel
+                    strongValue
                 />
             )}
+            footerContent={(
+                <div className={styles.footerContent}>
+                    <div className={styles.separator} />
+                    <TextOutput
+                        label={strings.initiativeAllocationTitle}
+                        value={initiative.allocation}
+                        valueType="number"
+                        strongValue
+                    />
+                    <TextOutput
+                        label={strings.initiativeFundingPeriodTitle}
+                        value={`${initiative.funding_period} ${strings.initiativeMonthsSuffix}`}
+                        valueType="text"
+                        strongValue
+                    />
+                </div>
+            )}
         >
-            <div className={styles.figure}>
-                <TextOutput
-                    label={strings.initiativeYearApprovedTitle}
-                    value={initiative.year}
-                    valueType="text"
-                    strongValue
-                />
-                <TextOutput
-                    label={strings.initiativeTitle}
-                    value={initiative.title}
-                    valueType="text"
-                    strongValue
-                />
-                <TextOutput
-                    label={strings.initiativeFundingTypeTitle}
-                    value={initiative.fund_type}
-                    valueType="text"
-                    strongValue
-                />
-                <TextOutput
-                    label={strings.initiativeCategoriesTitle}
-                    value={categories}
-                    strongValue
-                />
-                <div className={styles.separator} />
-                <TextOutput
-                    label={strings.initiativeAllocationTitle}
-                    value={initiative.allocation}
-                    valueType="number"
-                    strongValue
-                />
-                <TextOutput
-                    label={strings.initiativeFundingPeriodTitle}
-                    value={`${initiative.funding_period} ${strings.initiativeMonthsSuffix}`}
-                    valueType="text"
-                    strongValue
-                />
-            </div>
+            <TextOutput
+                label={strings.initiativeYearApprovedTitle}
+                value={initiative.year}
+                valueType="text"
+                strongValue
+            />
+            <TextOutput
+                label={strings.initiativeTitle}
+                value={initiative.title}
+                valueType="text"
+                strongValue
+            />
+            <TextOutput
+                label={strings.initiativeFundingTypeTitle}
+                value={initiative.fund_type}
+                valueType="text"
+                strongValue
+            />
+            <TextOutput
+                label={strings.initiativeCategoriesTitle}
+                value={categories}
+                valueType="text"
+                strongValue
+            />
         </Container>
     );
 }

diff --git a/...ntryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/styles.module.css b/...ntryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/styles.module.css
@@ -5,14 +5,17 @@
 
     .figures {
         display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-xs);
+
+    }
+    .footer-content {
         flex-grow: 1;
-        gap: var(--go-ui-spacing-lg);
 
         .separator {
             flex-shrink: 0;
-            margin: var(--go-ui-spacing-md) 0;
-            background-color: var(--go-ui-color-separator);
-            height: var(--go-ui-width-separator-sm);
+            margin-bottom: var(--go-ui-spacing-sm);
+            border-bottom: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator)
         }
     }
 }