From 3113f73dd371a427befe674b748de0a377b16614 Mon Sep 17 00:00:00 2001
From: puranban <puranban77@gmail.com>
Date: Tue, 14 May 2024 14:46:48 +0545
Subject: [PATCH] Fix button, map styling inconsistency

---
 app/components/IduMap/styles.css              | 81 +++++++++----------
 app/components/IduMap/useIduMap.tsx           |  4 +-
 app/views/DisasterWidget/index.tsx            |  2 +-
 app/views/Gidd/DataTable/index.tsx            |  1 +
 .../GoodPractices/AddGoodPractice/index.tsx   |  4 +-
 .../GoodPractices/AddGoodPractice/styles.css  |  2 +-
 app/views/GoodPractices/index.tsx             |  3 +-
 app/views/GoodPractices/styles.css            |  8 +-
 app/views/IduWidget/index.tsx                 |  2 +-
 app/views/IduWidget/styles.css                |  6 +-
 10 files changed, 59 insertions(+), 54 deletions(-)

diff --git a/app/components/IduMap/styles.css b/app/components/IduMap/styles.css
index 88ea65e2..f718f346 100644
--- a/app/components/IduMap/styles.css
+++ b/app/components/IduMap/styles.css
@@ -1,54 +1,53 @@
-.filters-container {
-    .displacement-legend {
-        display: flex;
-        flex-basis: 20%;
-        flex-direction: column;
-        gap: var(--tui-spacing-extra-small);
+.container {
+    flex-basis: 100%;
+    .filters-container {
 
-        .legend-element-list {
+        .displacement-legend {
             display: flex;
-            flex-grow: 1;
-            gap: var(--tui-spacing-small);
-            height: 3rem;
-        }
-    }
-    .number-legend {
-        display: flex;
-        flex-basis: 40%;
-        flex-direction: column;
-        gap: var(--tui-spacing-extra-small);
+            flex-basis: 20%;
+            flex-direction: column;
+            gap: var(--tui-spacing-extra-small);
 
-        .legend-element-list {
-            display: flex;
-            flex-grow: 1;
-            gap: var(--tui-spacing-small);
-            height: 3rem;
+            .legend-element-list {
+                display: flex;
+                flex-grow: 1;
+                gap: var(--tui-spacing-small);
+                height: 3rem;
+            }
         }
-        @media (max-width: 1000px) {
+        .number-legend {
+            display: flex;
+            flex-basis: 40%;
+            flex-direction: column;
+            gap: var(--tui-spacing-extra-small);
+
             .legend-element-list {
-                gap: var(--tui-spacing-extra-extra-small);
+                display: flex;
+                flex-grow: 1;
+                gap: var(--tui-spacing-small);
+                height: 3rem;
+            }
+            @media (max-width: 1000px) {
+                .legend-element-list {
+                    gap: var(--tui-spacing-extra-extra-small);
+                }
             }
         }
-    }
 
-    .time-range-container {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        gap: var(--tui-spacing-medium);
+        .time-range-container {
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            gap: var(--tui-spacing-medium);
 
-        .time-range-input {
-            width: 100%;
+            .time-range-input {
+                width: 100%;
+            }
         }
-    }
-    @media (max-width: 1000px) {
-        .time-range-container {
-            padding-right: var(--tui-spacing-medium);
+        @media (max-width: 1000px) {
+            .time-range-container {
+                padding-right: var(--tui-spacing-medium);
+            }
         }
     }
 }
-
-.disaster-button {
-    background-color: var(--color-background-dark);
-    height: 2.5rem;
-}
diff --git a/app/components/IduMap/useIduMap.tsx b/app/components/IduMap/useIduMap.tsx
index 54fcba2d..f114e140 100644
--- a/app/components/IduMap/useIduMap.tsx
+++ b/app/components/IduMap/useIduMap.tsx
@@ -141,7 +141,7 @@ function useIduQuery(
 
     const idus = React.useMemo(() => (
         iso3
-            ? iduData?.idu.filter((item) => item.iso3 === iso3)
+            ? iduData?.idu?.filter((item) => item.iso3 === iso3)
             : iduData?.idu
     ), [iso3, iduData]);
 
@@ -204,6 +204,7 @@ function useIduQuery(
 
     const widget = (
         <Container
+            className={styles.container}
             filtersClassName={styles.filtersContainer}
             filters={(
                 <>
@@ -282,7 +283,6 @@ function useIduQuery(
                     variant="primary"
                     compact
                     href={giddLink}
-                    className={styles.disasterButton}
                     target="_parent"
                     icons={(
                         <IoExitOutline />
diff --git a/app/views/DisasterWidget/index.tsx b/app/views/DisasterWidget/index.tsx
index f05a1fd4..1bb9f6f4 100644
--- a/app/views/DisasterWidget/index.tsx
+++ b/app/views/DisasterWidget/index.tsx
@@ -226,7 +226,7 @@ function DisasterWidget(props: Props) {
                     </ButtonLikeLink>
                     <PopupButton
                         className={styles.exportButton}
-                        label="Download data"
+                        label="Download dataset"
                         name="download"
                         variant="primary"
                         persistent={false}
diff --git a/app/views/Gidd/DataTable/index.tsx b/app/views/Gidd/DataTable/index.tsx
index 3c952269..b78df3e2 100644
--- a/app/views/Gidd/DataTable/index.tsx
+++ b/app/views/Gidd/DataTable/index.tsx
@@ -235,6 +235,7 @@ function DataTable(props: Props) {
                     keySelector={displacementItemKeySelector}
                     data={displacementsResponse?.giddPublicDisplacements?.results}
                     columns={columns}
+                    resizableColumn
                 />
             </SortContext.Provider>
         </div>
diff --git a/app/views/GoodPractices/AddGoodPractice/index.tsx b/app/views/GoodPractices/AddGoodPractice/index.tsx
index b63cbba9..4fbfe6e1 100644
--- a/app/views/GoodPractices/AddGoodPractice/index.tsx
+++ b/app/views/GoodPractices/AddGoodPractice/index.tsx
@@ -304,6 +304,7 @@ function AddGoodPractice(props: Props) {
             onSubmit={handleSubmit}
         >
             <Modal
+                className={styles.modal}
                 onClose={onModalClose}
                 headingClassName={styles.headingContainer}
                 heading={(
@@ -320,12 +321,11 @@ function AddGoodPractice(props: Props) {
                     </div>
                 )}
                 footerClassName={styles.footer}
-                className={styles.modal}
                 footer={(
                     <Button
                         name={undefined}
                         type="submit"
-                        variant="accent"
+                        variant="primary"
                         onClick={handleSubmit}
                         disabled={pristine || createNewGoodPracticeLoading || !agreeTerms}
                         compact
diff --git a/app/views/GoodPractices/AddGoodPractice/styles.css b/app/views/GoodPractices/AddGoodPractice/styles.css
index 1a95f432..93b735af 100644
--- a/app/views/GoodPractices/AddGoodPractice/styles.css
+++ b/app/views/GoodPractices/AddGoodPractice/styles.css
@@ -1,7 +1,7 @@
 .modal {
     display: flex;
     flex-direction: column;
-    height: 86vh!important;
+    height: 76vh!important;
 
     .heading-container {
         font-weight: unset;
diff --git a/app/views/GoodPractices/index.tsx b/app/views/GoodPractices/index.tsx
index 45ebf6c2..1212211b 100644
--- a/app/views/GoodPractices/index.tsx
+++ b/app/views/GoodPractices/index.tsx
@@ -842,6 +842,7 @@ function GoodPractices(props: Props) {
                         />
                         <HTMLOutput value={goodPracticeDescription} />
                         <Button
+                            className={styles.findGoodPracticeButton}
                             onClick={handleJumpToGoodPractices}
                             name={undefined}
                         >
@@ -948,7 +949,7 @@ function GoodPractices(props: Props) {
                                 <Button
                                     name={undefined}
                                     onClick={showNewGoodPracticeModal}
-                                    className={styles.newGoodPractice}
+                                    variant="primary"
                                 >
                                     {strings.submitNewGoodPracticeLabel}
                                 </Button>
diff --git a/app/views/GoodPractices/styles.css b/app/views/GoodPractices/styles.css
index bb96b750..64aec5af 100644
--- a/app/views/GoodPractices/styles.css
+++ b/app/views/GoodPractices/styles.css
@@ -32,6 +32,10 @@
                 width: 100%;
                 max-width: var(--width-page-max);
                 gap: var(--tui-spacing-large);
+
+                .find-good-practice-button {
+                    align-self: flex-start;
+                }
             }
 
             .language-selection {
@@ -100,10 +104,6 @@
                     background-color: var(--tui-color-background);
                     padding: var(--tui-spacing-medium);
                     gap: var(--tui-spacing-medium);
-
-                    .new-good-practice {
-                        display: flex;
-                    }
                 }
             }
 
diff --git a/app/views/IduWidget/index.tsx b/app/views/IduWidget/index.tsx
index aefafd63..49d87909 100644
--- a/app/views/IduWidget/index.tsx
+++ b/app/views/IduWidget/index.tsx
@@ -165,7 +165,7 @@ function IduWidget(props: IduWidgetProps) {
                                 </Button>
                             )}
                         </div>
-                        <div>
+                        <div className={styles.mapDescription}>
                             Hover over and click on the coloured bubbles to see near real-time
                             snapshots of situations of internal displacement.
                         </div>
diff --git a/app/views/IduWidget/styles.css b/app/views/IduWidget/styles.css
index e1803a0d..f8ec7ce9 100644
--- a/app/views/IduWidget/styles.css
+++ b/app/views/IduWidget/styles.css
@@ -41,5 +41,9 @@
             flex-wrap: wrap;
             gap: var(--tui-spacing-large);
         }
+
+        .map-description {
+            flex-basis: 100%;
+        }
     }
-}
\ No newline at end of file
+}