[Publisher] Agency Settings: Settings page + Account Tab (2/5) #1256 (#…

…1308) * made major changes to the settings page components and all that is connected * [Publisher][Design Update] Agency Settings: Settings page + Account Tab (2/5) * ran yarn lint --fix * manually removed extra space in code on AgencySettings.styles.tsx * removed unused code from AgencySettingsEmailNotifications and AgencySetting.styles * Removed all files that are in the .gitignore * removed TODO notes from AccountSettings.tsx and added suggested styling to GlobalStyles.tsx * removed unused code, replaced custom colors with colors from the palette, fixed some margin and spacing issues in the Settings.styles, AgencySettings.styles, and AccountSettings.styles files * removed custom color and used color from palette and adjusted spacing for email reminder input on AgencySettingsEmailNotifications * created custom components in AgencySettings.Styles to replace divs and spans in the AgencySettingsBasicInfo file * removed div and added styling to custom component in AgencySettings.styles * created a AgencySettingActionRequiredIndicator component and applied logic to show display component next to the section labels of AgencySettingsDescription and AgencySettingsUrl * removed duplicate input component and used an existing one from the common repo and adjusted spacing on severalelements in the AgencySettings sections. * Added flags to Input.tsx and new styles to Input.styled.tsx * Removed duplicate button componenet * used the checkboxOptions component to replace an input checkbox in AgencySettingEmailNotifications * removed unnecessary styling inheritance and made a meaningful name for CheckboxSpacingWrapper in the AgencySettings.styles, added capitialization to the values in the Sectors sectionin the AgencySettingsBasicInfo file * simplified logic on AgencySettingsActionRequiredIndicator in the AgencySettingDescription and AgencySettingsURL pages * changed a variable name * added settigsViewOptions object in prep for using common tabbed bar component * added TabbedBar component to Settings page * removed unused logic on Input.tsx * removed unused logic on Input.tsx * added close-icon-lg.svg to the assets folder * refactored const SettigsViewOptions to use the tabOptions enum in the Settings pg * removed log statement and removed const declaration from tabOptions in Settings page * moved tabOptions enum outside of the Settings function * modified label on settingViewOptions to remove underscore from Team_Members * cleaned up logic statement in AgencySettingsSupervisions * added logic to DescriptionSection in the AgencySettingsEmailNotifications * modified subpopulations modal by left-aligning options * removed const systemsToDisplayInReadMode from AgencySettingSupervisons because we no longer need the filtering that the const provided * renamed the SettingsTitle component -- SettingsTitleContainer and split the font styling between two new components, SettingsTitle and SettingsSubTitle * updated the 'Learn More' link on the Settings page to point to the set-up-metrics page * replaced styling to the NewInput component in Input.styled.tsx * removed unused code in Input component * updated tabOptions enum on Settings page * changed variable name on Settings page * updated initial value of the const currentSettingsView on the Settings page and updated GuideKey to point to AgencySetting * changed logic for the AgencySettingActionRequiredIndicator to depend on purposeAndFunctionsSetting variable
Recidiviz · May 6, 2024 · aff8617 · aff8617
1 parent 0d90bdb
commit aff8617
Show file tree

Hide file tree

Showing 18 changed files with 517 additions and 347 deletions.
diff --git a/.gitignore b/.gitignore
@@ -155,3 +155,6 @@ yalc.lock
 
 # ESLint Cache
 .eslintcache
+
+#Webstorm config settings
+.idea
diff --git a/common/assets/close-icon-lg.svg b/common/assets/close-icon-lg.svg
diff --git a/publisher/src/components/Global/GlobalStyles.tsx b/publisher/src/components/Global/GlobalStyles.tsx
@@ -15,8 +15,14 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
+import { typography } from "@justice-counts/common/components/GlobalStyles";
 import styled from "styled-components/macro";
 
-export const GlobalTitle = styled.div``;
+export const GlobalTitle = styled.div`
+  ${typography.sizeCSS.title};
+`;
 
-export const GlobalDescription = styled.div``;
+export const GlobalDescription = styled.div`
+  ${typography.paragraph};
+  margin-bottom: 24px;
+`;
diff --git a/publisher/src/components/Reports/ReportSummaryPanel.tsx b/publisher/src/components/Reports/ReportSummaryPanel.tsx
@@ -38,7 +38,6 @@ import {
 import { MetricSummarySectionTitle, Title } from "../Forms";
 import { REPORT_CAPITALIZED } from "../Global/constants";
 import { TeamMemberNameWithBadge } from "../primitives";
-import { SubMenuListItem } from "../Settings";
 import HelperText from "./HelperText";
 import { useCheckMetricForErrors } from "./hooks";
 import {
@@ -114,10 +113,22 @@ export const ReportSummarySection = styled.a`
   }
 `;
 
-export const MetricDisplayName = styled(SubMenuListItem)`
+export const MetricDisplayName = styled.div<{ activeSection?: boolean }>`
+  ${typography.sizeCSS.normal}
+  width: fit-content;
+  color: ${({ activeSection }) =>
+    activeSection ? palette.solid.darkgrey : palette.highlight.grey8};
+  max-width: 238px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   border-bottom: 2px solid
     ${({ activeSection }) =>
       activeSection ? palette.solid.blue : `transparent`};
+  &:hover {
+    cursor: pointer;
+    color: ${palette.solid.darkgrey};
+  }
 `;
 
 export const ReportStatusIcon = styled.div<{

diff --git a/publisher/src/components/Settings/AccountSettings.styles.tsx b/publisher/src/components/Settings/AccountSettings.styles.tsx
@@ -24,6 +24,7 @@ import {
 import styled from "styled-components/macro";
 
 export const AccountSettingsWrapper = styled.div`
+  flex-direction: row;
   @media only screen and (max-width: ${MIN_TABLET_WIDTH}px) {
     display: flex;
     flex-direction: column;
@@ -35,33 +36,74 @@ export const AccountSettingsTitle = styled.h1`
   ${typography.sizeCSS.title};
   margin-top: 4px;
   padding-bottom: 14px;
-
-  &::before {
-    content: "Account";
-  }
+  background-color: ${palette.solid.red};
 
   @media only screen and (max-width: ${MIN_TABLET_WIDTH}px) {
     ${typography.sizeCSS.medium};
     margin: 0;
     padding: 0 0 24px 0;
-
-    &::before {
-      content: "Settings > Your Account";
-    }
   }
 `;
 
 export const AccountSettingsInputsWrapper = styled.div`
   display: flex;
+  flex-direction: row;
   gap: 10px;
+  padding-bottom: 24px;
+  padding-top: 24px;
+  border-bottom: 1px solid ${palette.solid.lightgrey4};
 
-  div {
-    width: 100%;
-    margin-bottom: 16px;
+  input {
+    padding-left: 0;
+    border: none;
+    background-color: initial;
+    ${typography.body};
+    color: ${palette.highlight.grey9};
+  }
+
+  label {
+    ${typography.body};
+    color: ${palette.solid.black};
+  }
+
+  span {
+    a {
+      text-decoration: none;
+    }
   }
 
   @media only screen and (max-width: ${MIN_DESKTOP_WIDTH}px) {
     flex-direction: column;
     gap: 0;
+    margin-left: 0px;
+  }
+`;
+
+export const AccountSettingsInputsCol = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  gap: 0;
+  div {
+    flex-direction: column;
+    align-items: start;
+
+    label {
+      flex-direction: row;
+    }
+
+    input {
+      flex-direction: row;
+    }
+  }
+
+  a {
+    color: ${palette.solid.blue};
+  }
+
+  @media only screen and (max-width: ${MIN_DESKTOP_WIDTH}px) {
+    flex-direction: row;
+    gap: 0;
+    margin-left: 0px;
   }
 `;
diff --git a/publisher/src/components/Settings/AccountSettings.tsx b/publisher/src/components/Settings/AccountSettings.tsx
@@ -15,14 +15,14 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import { Input } from "@justice-counts/common/components/Input";
+import { NewInput } from "@justice-counts/common/components/Input";
 import { debounce as _debounce } from "lodash";
 import React, { useRef } from "react";
 
 import { useStore } from "../../stores";
 import {
+  AccountSettingsInputsCol,
   AccountSettingsInputsWrapper,
-  AccountSettingsTitle,
   AccountSettingsWrapper,
 } from "./AccountSettings.styles";
 
@@ -44,34 +44,42 @@ export const AccountSettings = () => {
 
   return (
     <AccountSettingsWrapper>
-      <AccountSettingsTitle />
-
       <AccountSettingsInputsWrapper>
-        <Input
-          style={{ marginBottom: "0" }}
-          persistLabel
-          label="Full Name"
-          value={name}
-          onChange={(e) => {
-            setName((prev) => e.target.value.trimStart() || prev);
-            debouncedSave(
-              e.target.value.trimStart() || userStore?.name,
-              undefined
-            );
-          }}
-        />
-        <Input
-          persistLabel
-          label="Email"
-          value={email}
-          onChange={(e) => {
-            setEmail((prev) => e.target.value.trimStart() || prev);
-            debouncedSave(
-              undefined,
-              e.target.value.trimStart() || userStore?.email
-            );
-          }}
-        />
+        <AccountSettingsInputsCol>
+          <NewInput
+            style={{ marginBottom: "0" }}
+            persistLabel
+            label=" Name"
+            value={name}
+            onChange={(e) => {
+              setName((prev) => e.target.value.trimStart() || prev);
+              debouncedSave(
+                e.target.value.trimStart() || userStore?.name,
+                undefined
+              );
+            }}
+          />
+          <span>
+            <a href="./namemodal">Edit</a>
+          </span>
+        </AccountSettingsInputsCol>
+        <AccountSettingsInputsCol>
+          <NewInput
+            persistLabel
+            label="Email"
+            value={email}
+            onChange={(e) => {
+              setEmail((prev) => e.target.value.trimStart() || prev);
+              debouncedSave(
+                undefined,
+                e.target.value.trimStart() || userStore?.email
+              );
+            }}
+          />
+          <span>
+            <a href="./emailmodal">Edit</a>
+          </span>
+        </AccountSettingsInputsCol>
       </AccountSettingsInputsWrapper>
     </AccountSettingsWrapper>
   );