Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
mxosman opened this issue Mar 21, 2024 · 0 comments
Closed

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

mxosman opened this issue Mar 21, 2024 · 0 comments
Assignees
@corypride
Labels
Team: Justice Counts

Comments

@mxosman
Copy link
Contributor

mxosman commented Mar 21, 2024

Update the design and behavior of the Settings page and Account tab.

Figma Node: https://www.figma.com/file/dvX3yg7FMGJSWFaqHWrWgQ/Justice-Counts-Publisher?type=design&node-id=9418-2988&mode=design&t=KmbQnoeXFSvW3EgR-4

Files to update:

  • publisher/src/components/Global/GlobalStyles.tsx (new file)
  • publisher/src/pages/Settings.tsx
  • publisher/src/components/Settings/Settings.styles.tsx
  • Potentially:
    • publisher/src/components/Settings/AccountSettings.styles.tsx
    • publisher/src/components/Settings/AgencySettings.styles.tsx

Our Settings page currently is broken into 4 sections - Your Account, Agency Settings, Team Management, and Uploaded Files. With this design update, Your Account, Agency Settings, Team Management will become one Settings page with two tabs (“Account” & “Team Members” - w/ the first tab being the default selected tab).

Phase 1: Refactor & Clean Up

  • In Menu.tsx, remove Your Account, Agency Settings, and Team Management as options from profileDropdownMetadata and in their place should be one option to the “Settings” page that routes to “./settings” (just like the dropdown in Figma)
  • Refactor the Settings.tsx component. Instead of having this component operate as a router to other settings pages, let’s refactor it entirely and keep the <AccountSettings />, <AgencySettings />, and <AgencySettingsTeamManagement /> components, but remove:
    • settingsMenuPaths variable and ListOfMetricsForNavigation type (which is not used at all)
    • all routing logic
    • SettingsMenu component (and file)
  • Remove all styles in Settings.styles.tsx to start from a clean slate
  • Create a new file (publisher/src/components/Global/GlobalStyles.tsx), create and export the following styled components:
    • GlobalTitle - should use the typography.sizeCSS.title for font with spacing on the bottom like the Figma as default - but allow for overriding the bottom spacing
    • GlobalDescription - should use the typography.paragraph for font with spacing on the bottom like the Figma as default - but allow for overriding the bottom spacing

Phase 2: Update styling for Settings page and Account Tab

  • Add custom styling in Settings.styles.tsx for the main Settings page and <AccountSettings />, <AgencySettings />, and <AgencySettingsTeamManagement /> components to match the Figma (totally OK to add styling in each of those component’s .styles.tsx files or use Settings.styles.tsx as a global set of styles for these components).
    • Note: there’s a <TabbedBar /> component you can use for the Account/Team Members tabs
  • Remove unused styling for each component in their respective .styles.tsx files

Things to note:
Superagencies will have a section for “Email Notifications” - this should go after the agency name, description, url section
Supervision agencies with subsectors will have a section called “Supervision Populations” – this should go after the “Email Notifications” (if applicable)/agency name, desc., url, and before the Jurisdictions section
@mxosman mxosman changed the title [Publisher][Design Update] Agency Settings: Settings page + Account Tab [Publisher][Design Update] Agency Settings: Settings page + Account Tab (2/5) Mar 26, 2024
This was referenced Mar 28, 2024
Merged
Merged
This was referenced Apr 15, 2024
Closed
Merged
corypride added a commit that referenced this issue May 6, 2024
@corypride
[Publisher] Agency Settings: Settings page + Account Tab (2/5) #1256 (#…
aff8617 
…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
@mxosman mxosman closed this as completed May 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@corypride corypride

Labels
Team: Justice Counts
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Publisher] Agency Settings: Settings page + Account Tab (2/5) #1256 Recidiviz/justice-counts
2 participants
@mxosman @corypride