chore: minor visual alignments

globalfund · Mar 21, 2023 · 91fb51b · 91fb51b
1 parent 2b2b6b0
commit 91fb51b
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 59 deletions.
diff --git a/src/app/components/Charts/Investments/Disbursements/components/tooltip/index.tsx b/src/app/components/Charts/Investments/Disbursements/components/tooltip/index.tsx
@@ -24,7 +24,7 @@ export function TreemapTooltip(props: TreemapTooltipProps) {
       css={`
         color: ${appColors.TREEMAP.TOOLTIP_COLOR};
         min-width: 350px;
-        background: ${appColors.TREEMAP.BACKGROUND_COLOR};
+        background: ${appColors.TREEMAP.TOOLTIP_BACKGROUND_COLOR};
 
         @media (max-width: 767px) {
           min-width: 0;

diff --git a/src/app/modules/country-detail-module/index.tsx b/src/app/modules/country-detail-module/index.tsx
@@ -49,7 +49,7 @@ export default function CountryDetail() {
   const vizWrapperRef = React.useRef(null);
   const datasetMenuItems = useDatasetMenuItems();
   const [search, setSearch] = React.useState("");
-  const [breadCrumbList, setBreadCrumList] = useRecoilState(breadCrumbItems);
+  const [breadCrumbList, setBreadCrumbList] = useRecoilState(breadCrumbItems);
   const { components } = queryString.parse(location.search);
   const isMobile = useMediaQuery("(max-width: 767px)");
   const params = useParams<{
@@ -145,7 +145,7 @@ export default function CountryDetail() {
   } else if (widthThreshold < 0) {
     pushValue = 0;
   } else {
-    pushValue = 500 - widthThreshold;
+    pushValue = 450 - widthThreshold;
   }
 
   const isSmallScreen = useMediaQuery("(max-width: 960px)");
@@ -158,28 +158,28 @@ export default function CountryDetail() {
 
   const breadcrumbID = React.useMemo(() => v4(), []);
 
-  React.useEffect(() => {
-    if (breadCrumbList.length < 1) {
-      setBreadCrumList([
+  useUpdateEffect(() => {
+    if (breadCrumbList.length === 0) {
+      setBreadCrumbList([
         { name: "Datasets", path: "/", id: v4() },
-
         {
           name: locationInfoData.locationName,
           path: location.pathname,
           id: v4(),
         },
       ]);
-    } else {
-      if (!breadCrumbList.find((item) => item.id === breadcrumbID))
-        setBreadCrumList([
-          ...breadCrumbList,
-
-          {
-            name: components || locationInfoData.locationName,
-            path: location.pathname,
-            id: breadcrumbID,
-          },
-        ]);
+    } else if (
+      !breadCrumbList.find((item) => item.id === breadcrumbID) &&
+      components
+    ) {
+      setBreadCrumbList([
+        ...breadCrumbList,
+        {
+          name: components.toString(),
+          path: location.pathname,
+          id: breadcrumbID,
+        },
+      ]);
     }
   }, [locationInfoData]);
 

diff --git a/src/app/modules/documents-module/index.tsx b/src/app/modules/documents-module/index.tsx
@@ -1,26 +1,25 @@
 /* third-party */
-import React, { useEffect } from "react";
+import React from "react";
 import { v4 } from "uuid";
-
 import get from "lodash/get";
-import { appColors } from "app/theme";
+import { useRecoilState } from "recoil";
+import { breadCrumbItems } from "app/state/recoil/atoms";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import TablePagination from "@material-ui/core/TablePagination";
 import { useTitle, useDebounce, useUpdateEffect } from "react-use";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 /* project */
+import { appColors } from "app/theme";
 import { PageHeader } from "app/components/PageHeader";
 import { ToolBoxPanel } from "app/components/ToolBoxPanel";
 import { PageLoader } from "app/modules/common/page-loader";
 import { DocumentsSubModule } from "app/modules/common/documents";
+import BreadCrumbs from "app/components/Charts/common/breadcrumbs";
 import { PageTopSpacer } from "app/modules/common/page-top-spacer";
 import { useDatasetMenuItems } from "app/hooks/useDatasetMenuItems";
 import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
 import { ExpandableTableRowProps } from "app/components/Table/Expandable/data";
 import { pathnameToFilterGroups } from "app/components/ToolBoxPanel/components/filters/data";
-import { breadCrumbItems } from "app/state/recoil/atoms";
-import { useRecoilState } from "recoil";
-import BreadCrumbs from "app/components/Charts/common/breadcrumbs";
 
 export default function DocumentsModule() {
   useTitle("The Data Explorer - Documents");
@@ -29,7 +28,7 @@ export default function DocumentsModule() {
   const [search, setSearch] = React.useState("");
   const isMobile = useMediaQuery("(max-width: 767px)");
   const [openToolboxPanel, setOpenToolboxPanel] = React.useState(!isMobile);
-  const [_, setBreadCrumList] = useRecoilState(breadCrumbItems);
+  const [_, setBreadCrumbList] = useRecoilState(breadCrumbItems);
 
   // api call & data
   const fetchData = useStoreActions((store) => store.Documents.fetch);
@@ -96,7 +95,7 @@ export default function DocumentsModule() {
   } else if (widthThreshold < 0) {
     pushValue = 0;
   } else {
-    pushValue = 500 - widthThreshold;
+    pushValue = 450 - widthThreshold;
   }
 
   const isSmallScreen = useMediaQuery("(max-width: 960px)");
@@ -106,8 +105,8 @@ export default function DocumentsModule() {
     return 0;
   }
 
-  useEffect(() => {
-    setBreadCrumList([
+  React.useEffect(() => {
+    setBreadCrumbList([
       { name: "Datasets", path: "/", id: v4() },
       {
         name: "Documents",

diff --git a/src/app/modules/grant-detail-module/index.tsx b/src/app/modules/grant-detail-module/index.tsx
@@ -47,7 +47,7 @@ export default function GrantDetail() {
   const [openToolboxPanel, setOpenToolboxPanel] = React.useState(
     !isMobile && params.vizType !== "overview"
   );
-  const [breadCrumbList, setBreadCrumList] = useRecoilState(breadCrumbItems);
+  const [breadCrumbList, setBreadCrumbList] = useRecoilState(breadCrumbItems);
 
   // api call & data
   const fetchGrantInfoData = useStoreActions(
@@ -128,7 +128,7 @@ export default function GrantDetail() {
   } else if (widthThreshold < 0) {
     pushValue = 0;
   } else {
-    pushValue = 500 - widthThreshold;
+    pushValue = 450 - widthThreshold;
   }
 
   function isToolboxOvervlayVisible() {
@@ -138,10 +138,10 @@ export default function GrantDetail() {
   }
   const breadCrumbId = React.useMemo(() => v4(), []);
 
-  React.useEffect(() => {
+  useUpdateEffect(() => {
     if (grantInfoData) {
       if (breadCrumbList.length === 0) {
-        setBreadCrumList([
+        setBreadCrumbList([
           {
             name: "Datasets",
             path: "/",
@@ -156,7 +156,7 @@ export default function GrantDetail() {
         ]);
       } else {
         if (!breadCrumbList.find((list) => list.id === breadCrumbId)) {
-          setBreadCrumList([
+          setBreadCrumbList([
             {
               name: "Datasets",
               path: "/",

diff --git a/src/app/modules/grants-module/index.tsx b/src/app/modules/grants-module/index.tsx
@@ -16,6 +16,7 @@ import {
   useUpdateEffect,
 } from "react-use";
 /* project */
+import { appColors } from "app/theme";
 import { PageHeader } from "app/components/PageHeader";
 import { ToolBoxPanel } from "app/components/ToolBoxPanel";
 import { PageLoader } from "app/modules/common/page-loader";
@@ -29,7 +30,6 @@ import { GrantsList } from "app/modules/grants-module/components/List";
 import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
 import { useGetAllAvailableGrants } from "app/hooks/useGetAllAvailableGrants";
 import { pathnameToFilterGroups } from "app/components/ToolBoxPanel/components/filters/data";
-import { appColors } from "app/theme";
 
 interface GrantsModuleProps {
   code?: string;
@@ -41,7 +41,7 @@ interface GrantsModuleProps {
 export default function GrantsModule(props: GrantsModuleProps) {
   const location = useLocation();
   const cmsData = useCMSData({ returnData: true });
-  const [_, setBreadCrumList] = useRecoilState(breadCrumbItems);
+  const [_, setBreadCrumbList] = useRecoilState(breadCrumbItems);
 
   useTitle(
     `${get(cmsData, "modulesGrants.titleStart", "")}${
@@ -111,7 +111,7 @@ export default function GrantsModule(props: GrantsModuleProps) {
   };
 
   React.useEffect(() => {
-    setBreadCrumList([
+    setBreadCrumbList([
       { name: "Datasets", path: "/", id: v4() },
       {
         name: "Grant Implementation: Grants",
@@ -161,7 +161,7 @@ export default function GrantsModule(props: GrantsModuleProps) {
     } else if (widthThreshold < 0) {
       pushValue = 0;
     } else {
-      pushValue = 500 - widthThreshold;
+      pushValue = 450 - widthThreshold;
     }
   }
 

diff --git a/src/app/modules/partner-detail-module/index.tsx b/src/app/modules/partner-detail-module/index.tsx
@@ -44,7 +44,7 @@ export default function PartnerDetail() {
   const datasetMenuItems = useDatasetMenuItems();
   const isMobile = useMediaQuery("(max-width: 767px)");
   const [openToolboxPanel, setOpenToolboxPanel] = React.useState(!isMobile);
-  const [breadCrumbList, setBreadCrumList] = useRecoilState(breadCrumbItems);
+  const [breadCrumbList, setBreadCrumbList] = useRecoilState(breadCrumbItems);
 
   const params = useParams<{
     code: string;
@@ -87,7 +87,7 @@ export default function PartnerDetail() {
   } else if (widthThreshold < 0) {
     pushValue = 0;
   } else {
-    pushValue = 500 - widthThreshold;
+    pushValue = 450 - widthThreshold;
   }
 
   const isSmallScreen = useMediaQuery("(max-width: 960px)");
@@ -97,9 +97,9 @@ export default function PartnerDetail() {
     return 0;
   }
 
-  React.useEffect(() => {
+  useUpdateEffect(() => {
     if (!breadCrumbList.find((item) => item.path === location.pathname)) {
-      setBreadCrumList([
+      setBreadCrumbList([
         { name: "Datasets", path: "/", id: v4() },
         {
           name: partnerInfoData.partnerName,

diff --git a/src/app/modules/results-module/index.tsx b/src/app/modules/results-module/index.tsx
@@ -1,5 +1,5 @@
 /* third-party */
-import React, { useEffect } from "react";
+import React from "react";
 import { v4 } from "uuid";
 import get from "lodash/get";
 import { appColors } from "app/theme";
@@ -28,7 +28,7 @@ export default function ResultsModule() {
   const [search, setSearch] = React.useState("");
   const isMobile = useMediaQuery("(max-width: 767px)");
   const [openToolboxPanel, setOpenToolboxPanel] = React.useState(!isMobile);
-  const [_, setBreadCrumList] = useRecoilState(breadCrumbItems);
+  const [_, setBreadCrumbList] = useRecoilState(breadCrumbItems);
 
   const selectedYear = useStoreState(
     (state) => state.ToolBoxPanelResultsYearState.value
@@ -49,6 +49,14 @@ export default function ResultsModule() {
   React.useEffect(() => {
     document.body.style.background = appColors.COMMON.PAGE_BACKGROUND_COLOR_1;
     fetchYearOptionsData({});
+    setBreadCrumbList([
+      { name: "Datasets", path: "/", id: v4() },
+      {
+        name: "Annual results",
+        path: location.pathname,
+        id: v4(),
+      },
+    ]);
   }, []);
 
   React.useEffect(() => {
@@ -109,7 +117,7 @@ export default function ResultsModule() {
   } else if (widthThreshold < 0) {
     pushValue = 0;
   } else {
-    pushValue = 500 - widthThreshold;
+    pushValue = 450 - widthThreshold;
   }
 
   const isSmallScreen = useMediaQuery("(max-width: 960px)");
@@ -119,17 +127,6 @@ export default function ResultsModule() {
     return 0;
   }
 
-  useEffect(() => {
-    setBreadCrumList([
-      { name: "Datasets", path: "/", id: v4() },
-      {
-        name: "Annual results",
-        path: location.pathname,
-        id: v4(),
-      },
-    ]);
-  }, []);
-
   return (
     <div
       css={`

diff --git a/src/app/modules/viz-module/index.tsx b/src/app/modules/viz-module/index.tsx
@@ -44,7 +44,7 @@ export default function VizModule() {
   const isMobile = useMediaQuery("(max-width: 767px)");
   const params = useParams<{ vizType: string; subType?: string }>();
   const [openToolboxPanel, setOpenToolboxPanel] = React.useState(!isMobile);
-  const [_, setBreadCrumList] = useRecoilState(breadCrumbItems);
+  const [_, setBreadCrumbList] = useRecoilState(breadCrumbItems);
   const [subTypeCopy, setSubTypeCopy] = React.useState(params.subType);
 
   React.useEffect(() => {
@@ -67,7 +67,7 @@ export default function VizModule() {
   } else if (widthThreshold < 0) {
     pushValue = 0;
   } else {
-    pushValue = 500 - widthThreshold;
+    pushValue = 450 - widthThreshold;
   }
 
   const isSmallScreen = useMediaQuery("(max-width: 960px)");
@@ -102,7 +102,7 @@ export default function VizModule() {
   };
 
   React.useEffect(() => {
-    setBreadCrumList((list) => {
+    setBreadCrumbList((list) => {
       if (list[list.length - 1]?.vizSelected) {
         return [
           { name: "Datasets", path: "/", id: v4() },
@@ -136,7 +136,7 @@ export default function VizModule() {
 
   React.useEffect(() => {
     if (params.subType !== subTypeCopy) {
-      setBreadCrumList([
+      setBreadCrumbList([
         { name: "Datasets", path: "/", id: v4() },
         {
           name: vizTypePretext(vizType),