Update modal styling - more clean up

Recidiviz · Feb 28, 2024 · b9d5c0f · b9d5c0f
1 parent d21957c
commit b9d5c0f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 19 deletions.
diff --git a/publisher/src/components/MetricsConfiguration/Configuration.tsx b/publisher/src/components/MetricsConfiguration/Configuration.tsx
@@ -21,32 +21,28 @@ import { useIsFooterVisible } from "@justice-counts/common/hooks";
 import { SupervisionSubsystems } from "@justice-counts/common/types";
 import { observer } from "mobx-react-lite";
 import React, { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
 
 import { NotFound } from "../../pages/NotFound";
 import { useStore } from "../../stores";
-import { formatSystemName } from "../../utils";
 import { getActiveSystemMetricKey, useSettingsSearchParams } from "../Settings";
 import * as Styled from "./Configuration.styled";
 import MetricAvailability from "./MetricAvailability";
 import MetricDefinitions from "./MetricDefinitions";
 import RaceEthnicitiesModalForm from "./RaceEthnicitiesModalForm";
 
 function Configuration() {
-  const { agencyId } = useParams() as { agencyId: string };
   const [isFooterVisible, setIsFooterVisible] = useIsFooterVisible();
   const [settingsSearchParams, setSettingsSearchParams] =
     useSettingsSearchParams();
   const { system: systemSearchParam } = settingsSearchParams;
-  const { metricConfigStore, userStore } = useStore();
+  const { metricConfigStore } = useStore();
   const { metrics } = metricConfigStore;
   const [metricConfigPage, setMetricConfigPage] = useState<
     "availability" | "definitions"
   >("availability");
   const [isRaceEthnicityModalOpen, setIsRaceEthnicityModalOpen] =
     useState(false);
 
-  const currentAgency = userStore.getAgency(agencyId);
   const systemMetricKey = getActiveSystemMetricKey(settingsSearchParams);
 
   useEffect(() => {
@@ -106,13 +102,7 @@ function Configuration() {
           </Styled.MetricName>
           <Styled.Description>
             {metrics[systemMetricKey]?.description}
-            <span>
-              Sector:{" "}
-              {systemSearchParam &&
-                formatSystemName(systemSearchParam, {
-                  allUserSystems: currentAgency?.systems,
-                })}
-            </span>
+            <span>Sector: {systemSearchParam?.toLocaleLowerCase()}</span>
           </Styled.Description>
 
           <TabbedBar options={configurationOptions} />

diff --git a/publisher/src/components/MetricsConfiguration/ModalForm.styled.tsx b/publisher/src/components/MetricsConfiguration/ModalForm.styled.tsx
@@ -44,21 +44,23 @@ export const Wrapper = styled.div`
 
 export const Content = styled.div`
   width: 480px;
-  height: 640px;
-  max-height: 640px;
-  padding: 32px 0;
+  height: 750px;
+  max-height: 750px;
+  padding: 16px 0;
   background-color: ${palette.solid.white};
   position: relative;
   border-radius: 3px;
 `;
 
 export const ScrollableInnerWrapper = styled.div`
   width: 100%;
-  height: 100%;
+  height: 624px;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  padding: 0 40px 64px 40px;
+  padding: 24px 40px 64px 40px;
+  border-top: 1px solid ${palette.highlight.grey3};
+  border-bottom: 1px solid ${palette.highlight.grey3};
 `;
 
 export const CloseButton = styled.div`
@@ -76,7 +78,7 @@ export const Header = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 8px;
+  margin-bottom: 16px;
   padding: 0 40px;
 `;
 
@@ -124,7 +126,7 @@ export const BottomButtonsContainer = styled.div`
   position: absolute;
   bottom: 0;
   width: 100%;
-  padding: 32px;
+  padding: 16px 40px;
   display: flex;
   flex-direction: row;
   justify-content: end;