From e9ad21591023b63f758897a4456dfdd23984c28e Mon Sep 17 00:00:00 2001 From: Cory Pride Date: Mon, 8 Apr 2024 00:27:44 -0500 Subject: [PATCH 01/76] made major changes to the settings page components and all that is connected --- publisher/.idea/.gitignore | 5 + .../.idea/codeStyles/codeStyleConfig.xml | 5 + publisher/.idea/modules.xml | 8 ++ publisher/.idea/publisher.iml | 12 ++ publisher/.idea/vcs.xml | 6 + .../components/Reports/ReportSummaryPanel.tsx | 15 ++- .../Settings/AccountSettings.styles.tsx | 34 +++-- .../components/Settings/AccountSettings.tsx | 63 +++++----- .../Settings/AgencySettings.styles.tsx | 105 +++++++++++----- .../Settings/AgencySettingsBasicInfo.tsx | 51 ++++---- .../Settings/AgencySettingsDescription.tsx | 11 +- .../Settings/AgencySettingsJurisdictions.tsx | 29 ++--- .../Settings/AgencySettingsSupervisions.tsx | 33 +++-- .../components/Settings/AgencySettingsURL.tsx | 12 +- .../components/Settings/Settings.styles.tsx | 117 ++++++++++-------- .../src/components/Settings/TabContent.tsx | 34 +++++ publisher/src/pages/Settings.tsx | 55 ++++++-- 17 files changed, 384 insertions(+), 211 deletions(-) create mode 100644 publisher/.idea/.gitignore create mode 100644 publisher/.idea/codeStyles/codeStyleConfig.xml create mode 100644 publisher/.idea/modules.xml create mode 100644 publisher/.idea/publisher.iml create mode 100644 publisher/.idea/vcs.xml create mode 100644 publisher/src/components/Settings/TabContent.tsx diff --git a/publisher/.idea/.gitignore b/publisher/.idea/.gitignore new file mode 100644 index 000000000..b58b603fe --- /dev/null +++ b/publisher/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/publisher/.idea/codeStyles/codeStyleConfig.xml b/publisher/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 000000000..a55e7a179 --- /dev/null +++ b/publisher/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/publisher/.idea/modules.xml b/publisher/.idea/modules.xml new file mode 100644 index 000000000..cbcaa9050 --- /dev/null +++ b/publisher/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/publisher/.idea/publisher.iml b/publisher/.idea/publisher.iml new file mode 100644 index 000000000..24643cc37 --- /dev/null +++ b/publisher/.idea/publisher.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/publisher/.idea/vcs.xml b/publisher/.idea/vcs.xml new file mode 100644 index 000000000..6c0b86358 --- /dev/null +++ b/publisher/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/publisher/src/components/Reports/ReportSummaryPanel.tsx b/publisher/src/components/Reports/ReportSummaryPanel.tsx index b63323ada..755101b44 100644 --- 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 index 408456dec..35f8908ea 100644 --- a/publisher/src/components/Settings/AccountSettings.styles.tsx +++ b/publisher/src/components/Settings/AccountSettings.styles.tsx @@ -35,33 +35,47 @@ export const AccountSettingsTitle = styled.h1` ${typography.sizeCSS.title}; margin-top: 4px; padding-bottom: 14px; - - &::before { - content: "Account"; - } + background-color: darkred; @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; + border-bottom: 1px solid #ececec; div { - width: 100%; - margin-bottom: 16px; + flex-direction: column; + margin: 0; + a { + color: ${palette.highlight.grey9}; + } + } + + input { + padding-left: 0; + border: none; + background-color: inherit; + ${typography.body}; + color: ${palette.highlight.grey9}; + } + + label { + ${typography.body}; + color: black; + left: 0; } @media only screen and (max-width: ${MIN_DESKTOP_WIDTH}px) { flex-direction: column; gap: 0; + margin-left: 0px; } `; diff --git a/publisher/src/components/Settings/AccountSettings.tsx b/publisher/src/components/Settings/AccountSettings.tsx index b3a30ad7c..e6538e6ff 100644 --- a/publisher/src/components/Settings/AccountSettings.tsx +++ b/publisher/src/components/Settings/AccountSettings.tsx @@ -22,7 +22,6 @@ import React, { useRef } from "react"; import { useStore } from "../../stores"; import { AccountSettingsInputsWrapper, - AccountSettingsTitle, AccountSettingsWrapper, } from "./AccountSettings.styles"; @@ -44,34 +43,42 @@ export const AccountSettings = () => { return ( - - - { - setName((prev) => e.target.value.trimStart() || prev); - debouncedSave( - e.target.value.trimStart() || userStore?.name, - undefined - ); - }} - /> - { - setEmail((prev) => e.target.value.trimStart() || prev); - debouncedSave( - undefined, - e.target.value.trimStart() || userStore?.email - ); - }} - /> +
+ { + setName((prev) => e.target.value.trimStart() || prev); + debouncedSave( + e.target.value.trimStart() || userStore?.name, + undefined + ); + }} + /> + + Edit + +
+
+ { + setEmail((prev) => e.target.value.trimStart() || prev); + debouncedSave( + undefined, + e.target.value.trimStart() || userStore?.email + ); + }} + /> + + Edit + +
); diff --git a/publisher/src/components/Settings/AgencySettings.styles.tsx b/publisher/src/components/Settings/AgencySettings.styles.tsx index 3ecd734c3..0cbe1cbe9 100644 --- a/publisher/src/components/Settings/AgencySettings.styles.tsx +++ b/publisher/src/components/Settings/AgencySettings.styles.tsx @@ -31,13 +31,48 @@ import { SETTINGS_MENU_WITH_PADDINGS_WIDTH } from "./Settings.styles"; const AGENCY_SETTINGS_CONTAINER_WIDTH = 644; const STICKY_RESPONSIVE_HEADER_WITH_PADDING_HEIGHT = 48; +// my code here + +export const AgencySettingsSectionRow = styled.div<{ capitalize?: boolean }>` + height: 100%; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + flex-direction: row; + line-height: 32px; + + //@media goes here + @media only screen and (max-width: ${MIN_DESKTOP_WIDTH}px) { + flex-direction: column; + } + + div { + display: flex; + flex-direction: column; + color: ${palette.highlight.grey9}; + + span { + color: black; + } + + // Todo: ask about the need for the capitalize(BasicInfoRow), + // because the figma doesn't show a difference in label + // text and data. Also ask about the message that appears + // at the end of the section "*If any of the above looks incorrect, contact the Justice Counts team + // at justice-counts-support@csg.org." + // Todo: ask Michael how to add the edit padding or or margins + // and how to add the underline functionality on tab buttons + // TODO: ask the def of superagencies + } +`; + +// end of my code + export const AgencySettingsWrapper = styled.div` height: 100%; overflow-y: auto; display: flex; flex-direction: column; - align-items: center; - margin-right: ${SETTINGS_MENU_WITH_PADDINGS_WIDTH - 24}px; justify-content: center; padding-bottom: 50px; z-index: 1; @@ -81,10 +116,6 @@ export const AgencySettingsTitle = styled.div` font-weight: 500; margin-bottom: 24px; - &::before { - content: "Agency Settings"; - } - @media only screen and (max-width: ${MIN_TABLET_WIDTH}px) { ${typography.sizeCSS.medium}; width: 100%; @@ -93,10 +124,6 @@ export const AgencySettingsTitle = styled.div` padding: 24px 0; background-color: ${palette.solid.white}; z-index: 2; - - &::before { - content: "Settings > Agency Settings"; - } } `; @@ -106,14 +133,14 @@ export const AgencySettingsBlock = styled.div<{ position: relative; display: flex; flex-direction: column; - - border: ${({ withBorder }) => withBorder && "1px solid #DCDDDF"}; width: 100%; - padding: ${({ withBorder }) => (withBorder ? "32px" : "32px 0")}; + //logic here + padding-bottom: ${({ withBorder }) => (withBorder ? "24px" : "none")}; + border-bottom: ${({ withBorder }) => + withBorder ? "1px solid #ECECEC" : "none"}; @media only screen and (max-width: ${MIN_DESKTOP_WIDTH}px) { width: 100%; - padding: ${({ withBorder }) => (withBorder ? "32px" : "8px 0")}; } `; @@ -121,27 +148,23 @@ export const AgencySettingsBlockTitle = styled.div<{ isEditModeActive?: boolean; configured?: boolean; }>` - ${typography.sizeCSS.large}; + ${typography.body}; margin-bottom: ${({ isEditModeActive }) => isEditModeActive ? "8px" : "16px"}; display: flex; - justify-content: space-between; align-items: center; + //TODO: is the logic on this bottom margin neccs according + //to the figma - ${({ configured }) => - configured === false && - ` - &::after { - ${typography.sizeCSS.small} - content: "Action Required"; - color: ${palette.solid.red}; - } - `} + span { + color: #dd1212; + } `; export const AgencySettingsBlockDescription = styled.div` - ${typography.sizeCSS.normal}; + ${typography.body}; margin-bottom: 16px; + color: ${palette.highlight.grey9}; `; export const AgencySettingsBlockSubDescription = styled( @@ -153,10 +176,14 @@ export const AgencySettingsBlockSubDescription = styled( margin-top: ${({ hasTopMargin }) => (hasTopMargin ? "24px" : "0")}; `; +// TODO: Ask shall I get rid of this block description as it is not +// on the figma + export const AgencyInfoBlockDescription = styled.div<{ hasTopMargin?: boolean; }>` ${typography.sizeCSS.normal}; + color: ${palette.highlight.grey9}; margin-bottom: 16px; margin-top: ${({ hasTopMargin }) => hasTopMargin && "24px"}; `; @@ -166,8 +193,7 @@ export const AgencyInfoLink = styled.a` `; export const AgencySettingsInfoRow = styled.div<{ hasHover?: boolean }>` - ${typography.sizeCSS.medium}; - padding: 0 8px; + ${typography.body}; height: 54px; min-height: 54px; border-bottom: 1px solid #dcdddf; @@ -201,9 +227,8 @@ export const AgencyInfoTextAreaWordCounter = styled.div<{ isRed: boolean }>` export const EditButtonContainer = styled.div<{ hasTopMargin?: boolean }>` display: flex; flex-direction: row; - justify-content: end; - align-items: center; - margin-top: 16px; + + //TODO: ask about how to apply button styling here @media only screen and (max-width: ${MIN_DESKTOP_WIDTH}px) { justify-content: start; @@ -237,12 +262,17 @@ export const BasicInfoBlockDescription = styled(AgencySettingsBlockDescription)` `; export const BasicInfoRow = styled.div<{ capitalize?: boolean }>` - ${typography.sizeCSS.large}; + ${typography.body}; line-height: 32px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; + color: ${palette.highlight.grey9}; + + span { + color: black; + } ${({ capitalize }) => capitalize && `text-transform: capitalize;`} span { @@ -442,8 +472,14 @@ export const EditTeamMemberMenuItem = styled.div` // Supervisions export const SupervisionSystemRow = styled(AgencySettingsInfoRow)` + ${typography.body}; justify-content: start; gap: 12px; + color: ${palette.highlight.grey9}; + border: none; + + // TODO: ask Michael how to implement the 'included' functionality + // map only displays label and value ex: value='PAROLE' label='Parole' `; // Jurisdictions @@ -508,11 +544,12 @@ export const JurisdictionsSearchResult = styled.div<{ hasAction?: boolean }>` `; export const JurisdictionAreaType = styled.div` - ${typography.sizeCSS.normal}; + ${typography.body}; display: flex; align-items: center; gap: 16px; text-transform: capitalize; + color: ${palette.highlight.grey9}; `; export const JurisdictionsListArea = styled.div` @@ -525,6 +562,8 @@ export const JurisdictionsListArea = styled.div` export const JurisdictionsInfoRow = styled(AgencySettingsInfoRow)` text-transform: capitalize; + ${typography.body}; + border: none; `; export const JurisdictionCheckBlock = styled.div` diff --git a/publisher/src/components/Settings/AgencySettingsBasicInfo.tsx b/publisher/src/components/Settings/AgencySettingsBasicInfo.tsx index 97d920a43..286d1d877 100644 --- a/publisher/src/components/Settings/AgencySettingsBasicInfo.tsx +++ b/publisher/src/components/Settings/AgencySettingsBasicInfo.tsx @@ -22,6 +22,8 @@ import { formatSystemName } from "../../utils"; import { SYSTEM_CAPITALIZED, SYSTEMS_CAPITALIZED } from "../Global/constants"; import { AgencySettingsBlock, + AgencySettingsInfoRow, + AgencySettingsSectionRow, BasicInfoBlockDescription, BasicInfoRow, } from "./AgencySettings.styles"; @@ -32,33 +34,28 @@ export const AgencySettingsBasicInfo = () => { return ( - - Agency Name - {currentAgency?.name} - - - State - {currentAgency?.state} - - - - {currentAgencySystems && currentAgencySystems.length > 1 - ? SYSTEMS_CAPITALIZED - : SYSTEM_CAPITALIZED} - - {currentAgencySystems - ?.map((system) => - formatSystemName(system, { allUserSystems: currentAgencySystems }) - ) - .join(", ")} - - - *If any of the above looks incorrect, contact the Justice Counts team at{" "} - - justice-counts-support@csg.org - - . - + +
+ Agency Name + {currentAgency?.name} +
+
+ State + {currentAgency?.state} +
+
+ + {currentAgencySystems && currentAgencySystems.length > 1 + ? SYSTEMS_CAPITALIZED + : SYSTEM_CAPITALIZED} + + {currentAgencySystems + ?.map((system) => + formatSystemName(system, { allUserSystems: currentAgencySystems }) + ) + .join(", ")} +
+ ); }; diff --git a/publisher/src/components/Settings/AgencySettingsDescription.tsx b/publisher/src/components/Settings/AgencySettingsDescription.tsx index b3c249c2c..b43caffcf 100644 --- a/publisher/src/components/Settings/AgencySettingsDescription.tsx +++ b/publisher/src/components/Settings/AgencySettingsDescription.tsx @@ -124,19 +124,16 @@ const AgencySettingsDescription: React.FC<{ - Agency Information + Agency Description * - {purposeAndFunctionsSetting || "No description added."} + {purposeAndFunctionsSetting || + "Write a description of your agency to go on your public facing dashboard"} {allowEdit && (