diff --git a/CHANGELOG.MD b/CHANGELOG.MD index 4f3a18ef3..459c164c4 100644 --- a/CHANGELOG.MD +++ b/CHANGELOG.MD @@ -1,23 +1,35 @@ +## June 24, 2024 + +- **Feature** Add a new survey block to the engagement page [🎟️ DESENG-633](https://citz-gdx.atlassian.net/browse/DESENG-633) + - Added a survey block to the new engagement page matching the designs from UX + - The survey block displays side-by-side with the second widget of the engagement + - The survey block is not displayed if there is no survey and no second widget + - Customized the rich text editor/display to render links and h2 elements using the correct components + - Transitioned many new design system components to rely on Material theming for colors and typography, + allowing for areas with dark backgrounds to have light text and vice versa + - Moved useLoaderData() calls to within smaller components to reduce prop drilling, improve readability, + make it easier to test components in isolation, and make it easier to create skeletons for loading states + ## June 19, 2024 -- **Feature** Add a new tabbed content view to the new engagement page [🎟️ DESENG-632](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-632) +- **Feature** Add a new tabbed content view to the new engagement page [🎟️ DESENG-632](https://citz-gdx.atlassian.net/browse/DESENG-632) - Added a new tabbed content view to the new engagement page - Tabs are pulled from the engagement's summary and custom content sections (to be revisited when redoing authoring flow) ## June 18, 2024 -- **Feature** Add language picker UI [🎟️ DESENG-623](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-623) +- **Feature** Add language picker UI [🎟️ DESENG-623](https://citz-gdx.atlassian.net/browse/DESENG-623) ## June 17, 2024 -- **Feature** Add engagement description to the engagement page [🎟️ DESENG-631](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-631) +- **Feature** Add engagement description to the engagement page [🎟️ DESENG-631](https://citz-gdx.atlassian.net/browse/DESENG-631) - Display engagement description on the new engagement page - Display first widget of the engagement beside the description - Limit text editor to remove disruptive formatting options ## June 11, 2024 -- **Feature** Add new header to "new look" engagement page [🎟️ DESENG-630](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-630) +- **Feature** Add new header to "new look" engagement page [🎟️ DESENG-630](https://citz-gdx.atlassian.net/browse/DESENG-630) - Added a new hero image to the new engagement page - Added a header overlaying the hero image - The header uses the sponsor name, CTA message, and CTA URL from DESENG-629, as well as the engagement title, dates, and status @@ -28,18 +40,18 @@ ## June 10, 2024 -- **Feature** Add new fields for use in "new look" design [🎟️ DESENG-629](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-629) +- **Feature** Add new fields for use in "new look" design [🎟️ DESENG-629](https://citz-gdx.atlassian.net/browse/DESENG-629) - Added the fields `sponsor_name`, `cta_message`, and `cta_url` to the engagement model - Added Sponsor Name, Call To Action, and CTA URL to the engagement form - Added basic validation for the new fields ## June 6, 2024 -- **Feature** Add a new engagement view page [🎟️ DESENG-636](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-636) +- **Feature** Add a new engagement view page [🎟️ DESENG-636](https://citz-gdx.atlassian.net/browse/DESENG-636) - Added a new page to view engagements using the new look for MET - The page is available at `/gdx/new-look/[name]/[language]` - The page is a work in progress and will be updated in the future -- **Feature** Use createBrowserRouter insead of \ in the App component [🎟️ DESENG-627](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-627) +- **Feature** Use createBrowserRouter insead of \ in the App component [🎟️ DESENG-627](https://citz-gdx.atlassian.net/browse/DESENG-627) - Updated the App component to use the more flexible createBrowserRouter function instead of the component - This enables the use of [data router](https://reactrouter.com/en/6.23.0/routers/picking-a-router) functionality and other advanced features in the future, most notably the Blocker component - Added the AutoBreadcrumbs component to the common components library, which will be used to generate breadcrumbs based on the current route @@ -50,39 +62,39 @@ ## June 3, 2024 -- **Bugfix** Patch button styles (follow-up to [🎟️ DESENG-583](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-583)) +- **Bugfix** Patch button styles (follow-up to [🎟️ DESENG-583](https://citz-gdx.atlassian.net/browse/DESENG-583)) - Fixed button styles to match the design system - Removed state management overhead from the Link component ## May 30, 2024 -- **Feature** Remove web components [🎟️ DESENG-616](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-616) +- **Feature** Remove web components [🎟️ DESENG-616](https://citz-gdx.atlassian.net/browse/DESENG-616) - Removed web components and all code that references it -- **Feature** Remove EAO process widget [🎟️ DESENG-626](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-626) +- **Feature** Remove EAO process widget [🎟️ DESENG-626](https://citz-gdx.atlassian.net/browse/DESENG-626) - Removed EAO process widget - Added migration file to remove EAO process widget attached to any existing engagement ## May 29, 2024 -- **Bugfix** Null in the public URL [🎟️ DESENG-625](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-625) +- **Bugfix** Null in the public URL [🎟️ DESENG-625](https://citz-gdx.atlassian.net/browse/DESENG-625) - Removed language from URLs other than engagement/survey links - Fixed the issue of null appearing in public URLs -- **Feature** MET split out tenant specific variables from locale files [🎟️ DESENG-612](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-612) +- **Feature** MET split out tenant specific variables from locale files [🎟️ DESENG-612](https://citz-gdx.atlassian.net/browse/DESENG-612) - Replaced tenant based values with data from tenant detail API ## May 27, 2024 -- **Feature** MET translation file keys used on pages needing translation [🎟️ DESENG-611](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-611) +- **Feature** MET translation file keys used on pages needing translation [🎟️ DESENG-611](https://citz-gdx.atlassian.net/browse/DESENG-611) - Removed Tenant based translations from langauge files - Set TODO statements to replace tenant related values from backend - Splitting translations based on language files and added a common translation file for items common across all languages -- **Bugfix** Global Focus State (UXD) [🎟️ DESENG-583](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-583) +- **Bugfix** Global Focus State (UXD) [🎟️ DESENG-583](https://citz-gdx.atlassian.net/browse/DESENG-583) - Worked on components to match the design system and support new colors - Implemented focus states across public pages and components ## May 23, 2024 -- **Feature** Finish tenant management UX [🎟️ DESENG-605](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-605), [🎟️ DESENG-606](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-606) +- **Feature** Finish tenant management UX [🎟️ DESENG-605](https://citz-gdx.atlassian.net/browse/DESENG-605), [🎟️ DESENG-606](https://citz-gdx.atlassian.net/browse/DESENG-606) - Added a new tenant detail page - Added a form for filling out tenant details - Added a new tenant creation page @@ -93,90 +105,90 @@ - Reworked modal components to match the design system - Reworked image upload component to match the design system - Added new form components that align with the design system -- **Bugfix** Security issue with email verification [🎟️ DESENG-618](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-618) +- **Bugfix** Security issue with email verification [🎟️ DESENG-618](https://citz-gdx.atlassian.net/browse/DESENG-618) - Removed verification token from the response object - Updated the test to reflect the change -- **Bugfix** Add try catch block around snowplow call [🎟️ DESENG-621](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-621) +- **Bugfix** Add try catch block around snowplow call [🎟️ DESENG-621](https://citz-gdx.atlassian.net/browse/DESENG-621) - Added a try catch block to all snowplow calls ## May 22, 2024 -- **Feature** Add languages side nav link [🎟️ DESENG-622](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-622) +- **Feature** Add languages side nav link [🎟️ DESENG-622](https://citz-gdx.atlassian.net/browse/DESENG-622) ## May 21, 2024 -- **Task** Clean up met-cron [🎟️ DESENG-602](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-602) +- **Task** Clean up met-cron [🎟️ DESENG-602](https://citz-gdx.atlassian.net/browse/DESENG-602) ## May 16, 2024 -- **Bugfix** Replace Material Icons with Font Awesome [🎟️ DESENG-608](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-608) +- **Bugfix** Replace Material Icons with Font Awesome [🎟️ DESENG-608](https://citz-gdx.atlassian.net/browse/DESENG-608) - Replaced Material Icons with Font Awesome for all icons for which we had a mapping - Noted a few icons for which we did not have a mapping and those have been added to the ticket ## May 14, 2024 -- **Bugfix** Add language code to email links [🎟️ DESENG-579](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-579) +- **Bugfix** Add language code to email links [🎟️ DESENG-579](https://citz-gdx.atlassian.net/browse/DESENG-579) - Added a language code to email template links so that they point to a valid page again - The system tries to determine the language from the user's browser, but if it can't, it defaults to English - A future, larger refactor could allow us to remember the user's language preference and always use that ## May 13, 2024 -- **Bugfix** Date shown on rejection email preview is incorrect [🎟️ DESENG-597](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-597) +- **Bugfix** Date shown on rejection email preview is incorrect [🎟️ DESENG-597](https://citz-gdx.atlassian.net/browse/DESENG-597) - Fixed the date formatting issue and using the end_date in the email preview - Updated unit tests -- **Feature** Create role for metadata management [🎟️ DESENG-603](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-603) +- **Feature** Create role for metadata management [🎟️ DESENG-603](https://citz-gdx.atlassian.net/browse/DESENG-603) - Implemented a new role named "manage_metadata" within the Admin group to restrci access for metadata management - Updated the frontend to restrict access to the "metadata management" link in the menu for users without the newly added role - Backend changes to incorporate the new role for access control purposes, ensuring only authorized users can perform metadata management actions ## May 10, 2024 -- **Bugfix** Language picker should only appear on engagements with more than one language [🎟️ DESENG-575](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-575) +- **Bugfix** Language picker should only appear on engagements with more than one language [🎟️ DESENG-575](https://citz-gdx.atlassian.net/browse/DESENG-575) - Allow for the web app to see if there are available translations by language - Disable language switching itself for now until design decisions are made ## May 9, 2024 -- **Feature** [Engagement Filtering UXD] - Public | No Results Message [🎟️ DESENG-586](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-586) +- **Feature** [Engagement Filtering UXD] - Public | No Results Message [🎟️ DESENG-586](https://citz-gdx.atlassian.net/browse/DESENG-586) - Added a new no results page to display to users when their search term(s) and / or filter(s) returns no engagement results on landing page. - Contact information is developed but hidden currently as this was the approach requested in the ticket till the contact information is decided. -- **Feature** Added the initial version of the tenant listing page [🎟️ DESENG-592](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-592) +- **Feature** Added the initial version of the tenant listing page [🎟️ DESENG-592](https://citz-gdx.atlassian.net/browse/DESENG-592) - The page lists all tenants in the system - Functionality to view or create individual tenants is still under construction - Began work on adding new components from the MET component library, with high reusability in mind ## May 8, 2024 -- **Feature** Add font awesome to MET web [🎟️ DESENG-543](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-543) +- **Feature** Add font awesome to MET web [🎟️ DESENG-543](https://citz-gdx.atlassian.net/browse/DESENG-543) - Added font awesome to MET web. - Created .npmrc file to set the registry for fontawesome - Updated github actions to pull fontawesome auth token from github secrets ## May 7, 2024 -- **Feature** Ensure users can belong to more than one tenant [🎟️ DESENG-478](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-478) +- **Feature** Ensure users can belong to more than one tenant [🎟️ DESENG-478](https://citz-gdx.atlassian.net/browse/DESENG-478) - Tested users can belong to more than one tenant. - Overide the default tenant filter for staff_user table to check with user_group_membership table. ## May 6, 2024 -- **Feature** Auto-populate question descriptions [🎟️ DESENG-596](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-596) +- **Feature** Auto-populate question descriptions [🎟️ DESENG-596](https://citz-gdx.atlassian.net/browse/DESENG-596) - Upgrading the version of met-formio to version 1.0.15-rc1. This version has the changes to have a default description for the form components. The changes were pushed to met-formio by the PR: https://github.com/bcgov/met-formio/pull/25. ## May 2, 2024 -- **Feature** Added a new landing page for tenant management [🎟️ DESENG-591](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-591) +- **Feature** Added a new landing page for tenant management [🎟️ DESENG-591](https://citz-gdx.atlassian.net/browse/DESENG-591) - The page will be updated to list and manage tenants in upcoming tickets. ## April 30, 2024 -- **Task** Dagster ETL error [DESENG-599](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-599) +- **Task** Dagster ETL error [DESENG-599](https://citz-gdx.atlassian.net/browse/DESENG-599) - Upgrading the version of python to 3.12 for dagster user code - Upgrading the dependencies to support the version of python. - Fixing a bug on survey etl service. -- **Feature** Add Super Admin role [🎟️ DESENG-557](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-557) +- **Feature** Add Super Admin role [🎟️ DESENG-557](https://citz-gdx.atlassian.net/browse/DESENG-557) - Added a new role, `SUPER_ADMIN`, to MET. - The `SUPER_ADMIN` role has the highest level of access in the MET application. - The `SUPER_ADMIN` role can perform all actions in MET, including actions in other tenants. @@ -189,16 +201,16 @@ ## April 29, 2024 -- **Task** Upgrade python to 3.12 [DESENG-466](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-466) +- **Task** Upgrade python to 3.12 [DESENG-466](https://citz-gdx.atlassian.net/browse/DESENG-466) - Upgrading the version of python to 3.12 - Upgrading the dependencies to support the version of python. - Modify code as needed if the newer version does not support the former. ## April 22, 2024 -- **Task** Openshift - Update the buildconfig for the MET-cron job runner [🎟️ DESENG-559](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-559) +- **Task** Openshift - Update the buildconfig for the MET-cron job runner [🎟️ DESENG-559](https://citz-gdx.atlassian.net/browse/DESENG-559) - Versioning now uses the openshift.io namespace -- **Task** In-app role management [DESENG-574](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-574) +- **Task** In-app role management [DESENG-574](https://citz-gdx.atlassian.net/browse/DESENG-574) - Introduced new database models to manage user roles and user-to-role mappings in the Met database. - Revamped the authentication validation process to rely on roles retrieved directly from the database, rather than relying solely on token-based roles. @@ -209,57 +221,57 @@ ## April 11, 2024 -- **Task** Multi-language - Create engagement content translation tables & API routes [DESENG-544](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-544) +- **Task** Multi-language - Create engagement content translation tables & API routes [DESENG-544](https://citz-gdx.atlassian.net/browse/DESENG-544) - Created a new table for engagement content translations - Created API routes and services for engagement content translations - Created Unit tests for engagement content translations ## April 10, 2024 -- **Task** Remove default taxa from GDX tenant [DESENG-578](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-578) +- **Task** Remove default taxa from GDX tenant [DESENG-578](https://citz-gdx.atlassian.net/browse/DESENG-578) - Removed the pre-populated taxon entries from the GDX tenant. - With the power of the editor interface, tenants are now expected to create their own taxon entries. -- **Task** Update contributing guide for developers [DESENG-475](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-475) +- **Task** Update contributing guide for developers [DESENG-475](https://citz-gdx.atlassian.net/browse/DESENG-475) ## April 09, 2024 -- **Bugfix**: Stop Axios from trying to be a smarty pants and sending data in a format Flask doesn't understand [🎟️ DESENG-580](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-580) +- **Bugfix**: Stop Axios from trying to be a smarty pants and sending data in a format Flask doesn't understand [🎟️ DESENG-580](https://citz-gdx.atlassian.net/browse/DESENG-580) - This was preventing the filtering feature from working - Directly serialize any metadata filters before the request to avoid Axios's new nested object serialization - Deserialize it again on the Flask side -- **Task**: MET Web - Some URLs not taking users to correct locations/timing out [DESENG-542](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-542) +- **Task**: MET Web - Some URLs not taking users to correct locations/timing out [DESENG-542](https://citz-gdx.atlassian.net/browse/DESENG-542) - Created authentication provider to know the logged-in state before the App component is rendered. - Optimized tenant identification from the url. - Optimized path segments identification. -- **Task**: CSS Selector specificity [🎟️ DESENG-577](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-577) +- **Task**: CSS Selector specificity [🎟️ DESENG-577](https://citz-gdx.atlassian.net/browse/DESENG-577) - Replace the `!important` flag with more specific CSS selectors, specifically within dropdowns, to ensure that the correct styles are applied, and that states we have not yet designed for (e.g, complex focus states) are still styled appropriately and in an accessible manner. - Soon, we will be doing a more in-depth revamp of dropdowns in the app to make them more accessible and user-friendly. This helps work towards that goal. -- **Bugfix**: MET Web - No save feedback unless main content tab is selected [🎟️ DESENG-541](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-541) +- **Bugfix**: MET Web - No save feedback unless main content tab is selected [🎟️ DESENG-541](https://citz-gdx.atlassian.net/browse/DESENG-541) - Implemented notifications for successful saves across all engagement tabs. - Resolved issue with saving engagement summary content during engagement creation. - Updated tooltip on engagement content to use MetTooltip for consistency. ## April 08, 2024 -- **Bugfix**: Submission of rejected comments [🎟️ DESENG-527](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-527) +- **Bugfix**: Submission of rejected comments [🎟️ DESENG-527](https://citz-gdx.atlassian.net/browse/DESENG-527) - Fixed issue where resubmitted comments would not reappear in the queue for approval. - Added unit tests to ensure the issue does not reoccur. -- **Task**: MET - Clean up outstanding dependabot PRs [DESENG-535](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-535) +- **Task**: MET - Clean up outstanding dependabot PRs [DESENG-535](https://citz-gdx.atlassian.net/browse/DESENG-535) - Bump axios from 0.26.1 to 0.28.0 in met-web. Dependabot suggested this upgrade, but it required a few minor code changes. - Updated the type definition of the 'error' parameter to include a generic type '{ message?: string }' to handle the AxiosError response properly. ## April 05, 2024 -- **Task**: Allow for any gov.bc.ca email to receive emails in MET's dev & test environments [DESENG-533](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-533) +- **Task**: Allow for any gov.bc.ca email to receive emails in MET's dev & test environments [DESENG-533](https://citz-gdx.atlassian.net/browse/DESENG-533) - Enabled dev open shift to use GC_NOTIFY api key of test which allows all email. - Added new env var `SEND_EMAIL_INTERNAL_ONLY` to allow for internal emails such as govt emails only. ## April 04, 2024 -- **Feature** Engagement filtering - Add filtering by taxon [🎟️DESENG-445](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-445) +- **Feature** Engagement filtering - Add filtering by taxon [🎟️DESENG-445](https://citz-gdx.atlassian.net/browse/DESENG-445) - Added properties to metadata taxa to allow them to be marked as filterable. - Added a new file `filter_types.py` where additional filters can be added as subquery factory functions. - Added a new endpoint to the API to retrieve filterable taxa. @@ -273,68 +285,68 @@ - Updated the public-facing engagement list to allow filtering by metadata taxa. This makes use of the new API endpoint to retrieve filterable taxa. - Added a new filter "drawer" to the listing page to hold these and any future filter types. - (Out of scope, but related to UX work for this ticket) Fixed a display issue with the public engagements page where engagements would not take up the full width of their grid cell. -- **Task**: Keycloak Unit Tests for New CSS API Integration [DESENG-508](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-508) +- **Task**: Keycloak Unit Tests for New CSS API Integration [DESENG-508](https://citz-gdx.atlassian.net/browse/DESENG-508) - Updated Keycloak Unit Tests for New CSS API Integration. ## April 02, 2024 -- **Task**: DEV clean up [DESENG-503](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-503) +- **Task**: DEV clean up [DESENG-503](https://citz-gdx.atlassian.net/browse/DESENG-503) - Updated deployment configurations to add new configs. ## March 28, 2024 -- **Bug Fix**: Feedback fixes [DESENG-524](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-524) +- **Bug Fix**: Feedback fixes [DESENG-524](https://citz-gdx.atlassian.net/browse/DESENG-524) - Fixed feedback path not updating issue. - Fixed feedback table grid styles. ## March 27, 2024 -- **Bug Fix**: MET - Engagement tab does not revert the filtered out data [DESENG-525](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-525) +- **Bug Fix**: MET - Engagement tab does not revert the filtered out data [DESENG-525](https://citz-gdx.atlassian.net/browse/DESENG-525) - Resetting search filter values invoke the list to reload -- **Task**: Add missing unit tests for analytics api [DESENG-482](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-482) +- **Task**: Add missing unit tests for analytics api [DESENG-482](https://citz-gdx.atlassian.net/browse/DESENG-482) - Added unit tests for analytics API models and API end points ## March 26, 2024 -- **Bug Fix**: Various bugs in the survey tab [DESENG-520](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-523) +- **Bug Fix**: Various bugs in the survey tab [DESENG-520](https://citz-gdx.atlassian.net/browse/DESENG-523) - Update survey components and services to fix the bugs. - Removed is_template and is_hidden values from autosaving to avoid the debounce function consuming it older values -- **Task**: Add a custom dynamic page to engagement [DESENG-501](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-501) +- **Task**: Add a custom dynamic page to engagement [DESENG-501](https://citz-gdx.atlassian.net/browse/DESENG-501) - Integrated new summary and custom content tabs into the engagement form, providing users with structured sections for managing different types of content, enhancing overall organization and user experience. - Implemented functionality to allow users to add custom tabs with a variety of provided icons, along with options to edit or delete tabs as needed, granting users greater flexibility and control over their engagement content layout. - Streamlined data management by transitioning content and rich content from engagement tables to dedicated content tables, while also implementing logic to automatically generate default summary and custom content upon engagement creation or tab addition, ensuring consistent content structure and user experience. ## March 21, 2024 -- **Task**: MET Web - Replace hover & background colours [DESENG-520](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-520) +- **Task**: MET Web - Replace hover & background colours [DESENG-520](https://citz-gdx.atlassian.net/browse/DESENG-520) - Update Table and Menu Dropdown hover colors - Update engagement tiles hover color. - Updated all white backgrounds to use css variable. ## March 19, 2024 -- **Task**: Add poll results to results tab [DESENG-513](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-513) +- **Task**: Add poll results to results tab [DESENG-513](https://citz-gdx.atlassian.net/browse/DESENG-513) - Added poll results to results tab. - Added poll results API. - Added Unit tests. -- **Task**: Change static english text to be able to support string translations [DESENG-467](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-467) +- **Task**: Change static english text to be able to support string translations [DESENG-467](https://citz-gdx.atlassian.net/browse/DESENG-467) - Implemented a language selector in the public header. - Incorporated logic to dynamically adjust the unauthenticated route based on the selected language and load the appropriate translation file. - Enhanced all public pages to fetch static text from the translation file. ## March 15, 2024 -- **Task**: Multi-language - Create event, subcribe_item, poll, timeline widget translation tables & API routes [DESENG-515](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-515) +- **Task**: Multi-language - Create event, subcribe_item, poll, timeline widget translation tables & API routes [DESENG-515](https://citz-gdx.atlassian.net/browse/DESENG-515) - Added Poll answer translation API. - Added Timeline Event translation API. - Added Subscribe Item translation API. - Added Event item translation API - Added Unit tests. -- **Task** Add "Results" page to engagements [DESENG-512](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-512) +- **Task** Add "Results" page to engagements [DESENG-512](https://citz-gdx.atlassian.net/browse/DESENG-512) ## March 08, 2024 -- **Task**: Multi-language - Create engagement translation table & API routes [DESENG-510](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-510) +- **Task**: Multi-language - Create engagement translation table & API routes [DESENG-510](https://citz-gdx.atlassian.net/browse/DESENG-510) - Added Engagement translation model. - Added Engagement translation API. - Added Unit tests. @@ -347,80 +359,80 @@ metadata management to rely on normal authorization check functions. - **Task**: Clean up metadata management code and tests. - **Task**: Add endpoint for updating metadata by taxon in bulk -- **Feature**: Add editor for metadata taxa (admin only). [🎟️DESENG-443](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-443) +- **Feature**: Add editor for metadata taxa (admin only). [🎟️DESENG-443](https://citz-gdx.atlassian.net/browse/DESENG-443) - **Feature**: Add editor for metadata entries (available to anyone who can - edit an engagement). [🎟️DESENG-443](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-443) + edit an engagement). [🎟️DESENG-443](https://citz-gdx.atlassian.net/browse/DESENG-443) ## March 06, 2024 -- **Task**Multi-language - Create simple widget translation tables & API routes [DESENG-514](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-514) +- **Task**Multi-language - Create simple widget translation tables & API routes [DESENG-514](https://citz-gdx.atlassian.net/browse/DESENG-514) - Added Widget translation model. - Added Widget translation API. - Added Unit tests. -- **Task**Multi-language - Create survey translation table & API routes [DESENG-511](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-511) +- **Task**Multi-language - Create survey translation table & API routes [DESENG-511](https://citz-gdx.atlassian.net/browse/DESENG-511) - Added Survey Translation model. - Added Survey Translation API. - Added Survey Translation tests. ## March 04, 2024 -- **Task**Engagement "save" enhancements [DESENG-507](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-507) +- **Task**Engagement "save" enhancements [DESENG-507](https://citz-gdx.atlassian.net/browse/DESENG-507) - The existing "Save" button in the floating bar has been split into two distinct actions: "Save and Continue" and "Save and Exit". - Tabs are greyed out, and widgets are disabled until the engagement is successfully saved. A helpful tool-tip has been added to inform users that the engagement needs to be saved before accessing certain features. - Independent save buttons previously present in tabs, such as "Additional Details", "Settings" have been removed. Now, the floating save bar is universally employed when editing an engagement. -- **Task**Multi-language - Create language table & API [DESENG-509](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-509) +- **Task**Multi-language - Create language table & API [DESENG-509](https://citz-gdx.atlassian.net/browse/DESENG-509) - Added Language model. - Added Language API. - Added Unit tests. ## February 27, 2024 -- **Bug Fix**Comments cannot be approved while reviewing [DESENG-496](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-496) +- **Bug Fix**Comments cannot be approved while reviewing [DESENG-496](https://citz-gdx.atlassian.net/browse/DESENG-496) - Fixed by adding a missing decorator for transactional methods. -- **Task**Enhance analytics api for Improved Readability and Maintainability [DESENG-492](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-492) +- **Task**Enhance analytics api for Improved Readability and Maintainability [DESENG-492](https://citz-gdx.atlassian.net/browse/DESENG-492) - Refactor analytics-api config to harmonize its structure and conventions with met-api. - Ensure the sample.env file maintains consistent formatting. - Adjusted the component_id column size in the comment table of the met-api to resolve an error encountered during user submissions. ## February 26, 2024 -- **Task**Models for dynamic engagement pages [DESENG-500](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-500) +- **Task**Models for dynamic engagement pages [DESENG-500](https://citz-gdx.atlassian.net/browse/DESENG-500) - Implemented endpoints for dynamic engagement pages, including summary and custom sections. - Default behavior ensures that each engagement has a dynamic summary page. - Introduced logic to migrate existing content and rich content for engagements to the summary table. -- **Task**Add font awesome libraries [DESENG-490](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-490) +- **Task**Add font awesome libraries [DESENG-490](https://citz-gdx.atlassian.net/browse/DESENG-490) - Added related libraries to the frontend package.json. -- **Task**Adding missing unit test [DESENG-483](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-483) +- **Task**Adding missing unit test [DESENG-483](https://citz-gdx.atlassian.net/browse/DESENG-483) - Added missing unit test for components. ## February 20, 2024 -- **Task**Upgrade the version of flask [DESENG-502](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-502) +- **Task**Upgrade the version of flask [DESENG-502](https://citz-gdx.atlassian.net/browse/DESENG-502) - Performed a Flask version upgrade to version 2.2.5. ## February 16, 2024 -- **Task**Make a floating save/preview bar when editing engagements [DESENG-498](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-498) +- **Task**Make a floating save/preview bar when editing engagements [DESENG-498](https://citz-gdx.atlassian.net/browse/DESENG-498) - Implemented a floating behavior for the save/preview buttons during engagement editing. This feature persists across all tabs but exclusively saves data for the Engagement Content tab. ## February 15, 2024 -- **Task**Restore role assignment functionality to MET with the CSS API [DESENG-473](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-473) +- **Task**Restore role assignment functionality to MET with the CSS API [DESENG-473](https://citz-gdx.atlassian.net/browse/DESENG-473) - Utilize the CSS API for efficient management of composite roles. This involves the assignment, reassignment, or removal of users from the composite roles of TEAM_MEMBER, REVIEWER, IT_ADMIN, or IT_VIEWER. ## February 09, 2024 -- **Task**Consolidate and re-write old migration files [DESENG-452](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-452) +- **Task**Consolidate and re-write old migration files [DESENG-452](https://citz-gdx.atlassian.net/browse/DESENG-452) - Deleted old migration files - Created [ec0128056a33_table_until_feb_09_2024.py](met-api/migrations/versions/ec0128056a33_table_until_feb_09_2024.py) with all tables until feb 09 2024 - Created [37176ea4708d_data_until_feb_09_2024.py](met-api/migrations/versions/37176ea4708d_data_until_feb_09_2024.py) with all initial data until feb 09 2024 ## February 08, 2024 -- **Task**Cache CORS preflight responses with the browser for a given period of time [DESENG-484](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-484) +- **Task**Cache CORS preflight responses with the browser for a given period of time [DESENG-484](https://citz-gdx.atlassian.net/browse/DESENG-484) - Introduces a new configuration variable to specify the maximum age for Cross-Origin Resource Sharing (CORS) - Modified the CORS preflight method to utilize this newly introduced variable. -- **Task**Consolidate and re-write old migration files [DESENG-452](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-452) +- **Task**Consolidate and re-write old migration files [DESENG-452](https://citz-gdx.atlassian.net/browse/DESENG-452) - Change some foreign key field to nullbale false in model files - Change `rejected_reason_other` to nullable true in `submission` model - Generated new migration file based on the pending model changes which confirmed to be valid @@ -428,66 +440,66 @@ ## February 06, 2024 -- **Task**Convert keycloak groups to composite roles for permission levels [DESENG-447](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-447) +- **Task**Convert keycloak groups to composite roles for permission levels [DESENG-447](https://citz-gdx.atlassian.net/browse/DESENG-447) - Commented out unit test related to Keycloak groups - Changed reference of Keycloak `groups` to `roles` - Commented out code related to Keycloak groups ## February 06, 2024 -- **Task** Streamline CRON jobs [DESENG-493](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-493) +- **Task** Streamline CRON jobs [DESENG-493](https://citz-gdx.atlassian.net/browse/DESENG-493) - Aligned the CRON configuration and sample environment files with the structure used in the Met API. - Eliminated the reliance on engagement metadata within CRON jobs. - Implemented necessary code adjustments to seamlessly integrate with the updated CRON configuration. ## February 05, 2024 -- **Task** Change "Superuser" to "Administrator" [DESENG-476](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-476) +- **Task** Change "Superuser" to "Administrator" [DESENG-476](https://citz-gdx.atlassian.net/browse/DESENG-476) ## February 02, 2024 -- **Task** Updated Timeline widget icons so that the circles are more consistent. [🎟️DESENG-488](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-488) +- **Task** Updated Timeline widget icons so that the circles are more consistent. [🎟️DESENG-488](https://citz-gdx.atlassian.net/browse/DESENG-488) ## February 01, 2024 -- **Task** Change name from "Engagement Core" to "Engagement Content". [🎟️DESENG-489](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-489) +- **Task** Change name from "Engagement Core" to "Engagement Content". [🎟️DESENG-489](https://citz-gdx.atlassian.net/browse/DESENG-489) ## January 29, 2024 -- **Task** Updated Babel Traverse library. [🎟️DESENG-474](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-474) +- **Task** Updated Babel Traverse library. [🎟️DESENG-474](https://citz-gdx.atlassian.net/browse/DESENG-474) - Run `npm audit fix` to update the vulnerable Babel traverse library. ## January 26, 2024 -- **Task** Poll Widget: Front-end. [🎟️DESENG-464](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-464) +- **Task** Poll Widget: Front-end. [🎟️DESENG-464](https://citz-gdx.atlassian.net/browse/DESENG-464) - Created UI for Poll Widget. - Updated Poll widget API and unit tests. ## January 25, 2024 -- **Task** Resolve issue preventing met-web from deploying on the Dev OpenShift environment. [🎟️DESENG-469](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-469) +- **Task** Resolve issue preventing met-web from deploying on the Dev OpenShift environment. [🎟️DESENG-469](https://citz-gdx.atlassian.net/browse/DESENG-469) - Remove Epic Engage-related links and update Keycloak link. - Remove additional authentication method. ## January 24, 2024 -- **Task** Update default project type to GDX for all deployments by default. [🎟️DESENG-472](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-472) +- **Task** Update default project type to GDX for all deployments by default. [🎟️DESENG-472](https://citz-gdx.atlassian.net/browse/DESENG-472) - Set the default project type to GDX on all continuous deployment (CD) files. - Removed the option to deploy to EAO. ## January 22, 2024 -- **Task** Poll Widget: Back-end [🎟️DESENG-463](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-463) +- **Task** Poll Widget: Back-end [🎟️DESENG-463](https://citz-gdx.atlassian.net/browse/DESENG-463) - Created Database models for Widget Poll, Poll Answers, Poll Response. - Created API to manage Widget Poll, Poll Answers, Poll Response. - Created Unit tests to test the code. -- **Task** Add missing unit tests for met api [🎟️DESENG-481](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-481) +- **Task** Add missing unit tests for met api [🎟️DESENG-481](https://citz-gdx.atlassian.net/browse/DESENG-481) - Added missing unit tests for met api - Added unit tests for error handling for met api ## January 19, 2024 -- **Feature**: Add metadata management to the API [🎟️DESENG-442](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-442) +- **Feature**: Add metadata management to the API [🎟️DESENG-442](https://citz-gdx.atlassian.net/browse/DESENG-442) - Add new models, services, and endpoints for metadata and metadata taxonomy - Add test coverage for new endpoints - Begin documenting new endpoints using Flask-RESTX @@ -499,18 +511,18 @@ ## January 15, 2024 -- **Task** Audit for missing unit tests [🎟️DESENG-436](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-436) +- **Task** Audit for missing unit tests [🎟️DESENG-436](https://citz-gdx.atlassian.net/browse/DESENG-436) - Corrected tests to execute smoothly in the local environment using development variables. - Established continuous integration configuration to automatically run tests upon each commit. - Ensured that the tests pass successfully in our GitHub test environment. -- **Task** Audit for missing unit tests [🎟️DESENG-449](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-449) +- **Task** Audit for missing unit tests [🎟️DESENG-449](https://citz-gdx.atlassian.net/browse/DESENG-449) - Identified and corrected failing unit test for api and web -- **Bug Fix**: Fixing Form.io error when reordering Radio Button options [🎟️DESENG-446](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-446) +- **Bug Fix**: Fixing Form.io error when reordering Radio Button options [🎟️DESENG-446](https://citz-gdx.atlassian.net/browse/DESENG-446) ## January 10, 2024 -- **Task** Custom Consent per Engagement [🎟️DESENG-456](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-456) -- **Task** Engagement Edit Screen Reorder/Redesign [🎟️DESENG-448](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-448) +- **Task** Custom Consent per Engagement [🎟️DESENG-456](https://citz-gdx.atlassian.net/browse/DESENG-456) +- **Task** Engagement Edit Screen Reorder/Redesign [🎟️DESENG-448](https://citz-gdx.atlassian.net/browse/DESENG-448) - Added new tab Addional Details and moved metadata inside that - Moved public url section inside Settings tab - Changed Engagement Details to Engagement Core @@ -518,29 +530,29 @@ ## January 9, 2024 -- **Task** Improvements from Epic [🎟️DESENG-468](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-468) +- **Task** Improvements from Epic [🎟️DESENG-468](https://citz-gdx.atlassian.net/browse/DESENG-468) - Improvements to Survey Result Tracking analytics - New Rejection Email Template for Closed Engagements - Export Format for Proponent updated to be in excel format - Formio Version Update - Enable Survey Editing for Open Engagements -- **Bug Fix**: Fixing timezone issue while publishing using met cron [🎟️DESENG-437](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-437) +- **Bug Fix**: Fixing timezone issue while publishing using met cron [🎟️DESENG-437](https://citz-gdx.atlassian.net/browse/DESENG-437) ## December 28, 2023 -- **Feature**: Added the timeline widget. [🎟️DESENG-439](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-439) +- **Feature**: Added the timeline widget. [🎟️DESENG-439](https://citz-gdx.atlassian.net/browse/DESENG-439) ## December 11, 2023 -- **Task** Merge `gdx-sso`, `gdx-dev`, `gdx-main` into `main` [🎟️DESENG-442](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-442) +- **Task** Merge `gdx-sso`, `gdx-dev`, `gdx-main` into `main` [🎟️DESENG-442](https://citz-gdx.atlassian.net/browse/DESENG-442) ## December 5, 2023 -- **Task** Remove unused project metadata [🎟️DESENG-441](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-441) +- **Task** Remove unused project metadata [🎟️DESENG-441](https://citz-gdx.atlassian.net/browse/DESENG-441) ## December 4, 2023 -- **Feature**: .env var audit and cleanup [🎟️DESENG-414](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-414) (work finished) +- **Feature**: .env var audit and cleanup [🎟️DESENG-414](https://citz-gdx.atlassian.net/browse/DESENG-414) (work finished) - Full rewrite of met_api/config.py - Sample .env files updated to capture all current settings - Changed many configs to use a nested dict structure @@ -553,19 +565,19 @@ ## November 29, 2023 -- **Feature**: Superusers can publish engagements without attached surveys [🎟️DESENG-438](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-438) +- **Feature**: Superusers can publish engagements without attached surveys [🎟️DESENG-438](https://citz-gdx.atlassian.net/browse/DESENG-438) ## November 21, 2023 -- **Feature**: Started logging source url path with feedback submission. Viewable in dashboard. [🎟️DESENG-415](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-415) +- **Feature**: Started logging source url path with feedback submission. Viewable in dashboard. [🎟️DESENG-415](https://citz-gdx.atlassian.net/browse/DESENG-415) ## November 11, 2023 -- **Bug Fix**: Removed a duplicate service class [🎟️DESENG-429](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-429) +- **Bug Fix**: Removed a duplicate service class [🎟️DESENG-429](https://citz-gdx.atlassian.net/browse/DESENG-429) ## November 6, 2023 -- **Feature**: Switch MET to use Keycloak SSO service [🎟️DESENG-408](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-408) +- **Feature**: Switch MET to use Keycloak SSO service [🎟️DESENG-408](https://citz-gdx.atlassian.net/browse/DESENG-408) - Switch all role-based checks on the API to use a single callback function (`current_app.config['JWT_ROLE_CALLBACK']`) - Added a configurable path `JWT_ROLE_CLAIM` to indicate where your SSO instance places role information in the JWT token. If your access token looks like: `{ ..., "realm_access": { "roles": [ "role1", "role2"]}}` you would set `JWT_ROLE_CLAIM=realm_access.roles` @@ -573,15 +585,15 @@ - Remove local Keycloak instances and configuration - Default to the "standard" realm for Keycloak - Use tenancy information from DB rather than Keycloak -- **Feature**: .env var audit and cleanup [🎟️DESENG-414](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-414) +- **Feature**: .env var audit and cleanup [🎟️DESENG-414](https://citz-gdx.atlassian.net/browse/DESENG-414) ## October 26, 2023 -- **Bug Fix**: Upgraded BC-Sans font to the newest version [🎟️DESENG-413](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-413) +- **Bug Fix**: Upgraded BC-Sans font to the newest version [🎟️DESENG-413](https://citz-gdx.atlassian.net/browse/DESENG-413) ## October 19, 2023 -- **Feature**: Update sample .env files [🎟️DESENG-414](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-414) +- **Feature**: Update sample .env files [🎟️DESENG-414](https://citz-gdx.atlassian.net/browse/DESENG-414) - Sample .env files have been updated to reflect the current state of the project. - Keycloak URLs and resources now point to the BC Government's SSO service when using `sample.env` as a baseline - The `met_api` module has been updated slightly to consume Pathfinder SSO's API schema. diff --git a/met-web/src/components/common/Indicators/StatusChip.tsx b/met-web/src/components/common/Indicators/StatusChip.tsx index e4e3e5543..5a0a697f8 100644 --- a/met-web/src/components/common/Indicators/StatusChip.tsx +++ b/met-web/src/components/common/Indicators/StatusChip.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Chip as MuiChip } from '@mui/material'; +import { Chip as MuiChip, Skeleton } from '@mui/material'; import { colors } from '..'; import { SubmissionStatus } from 'constants/engagementStatus'; @@ -75,3 +75,7 @@ export const EngagementStatusChip: React.FC = ({ label: customLabel, /> ); }; + +export const StatusChipSkeleton = () => ( + +); diff --git a/met-web/src/components/common/Input/Button.tsx b/met-web/src/components/common/Input/Button.tsx index 2206575f7..bf940acba 100644 --- a/met-web/src/components/common/Input/Button.tsx +++ b/met-web/src/components/common/Input/Button.tsx @@ -1,5 +1,11 @@ import React, { useState } from 'react'; -import { Button as MuiButton, ButtonProps as MuiButtonProps, Stack, IconButton as MuiIconButton } from '@mui/material'; +import { + Button as MuiButton, + ButtonProps as MuiButtonProps, + Stack, + IconButton as MuiIconButton, + useTheme, +} from '@mui/material'; import { globalFocusShadow, colors, elevations } from '../../common'; import { isDarkColor } from 'utils'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; @@ -42,12 +48,25 @@ export const PrimaryButton: React.FC = ({ loading, ...buttonProps }) => { + const theme = useTheme(); + const isDarkMode = theme.palette.mode === 'dark'; const height: string = sizeMap[size]; + if (color === 'default' && isDarkMode) { + color = '#ffffff'; + } const customColor = colors.button[color as keyof typeof colors.button]?.shade ?? color; const bgColor = customColor; const darkBgColor = `color-mix(in srgb, ${bgColor}, black 20%)`; // Use inverted text color for dark backgrounds - const textColors = isDarkColor(bgColor, 0.4) ? colors.type.inverted : colors.type.regular; + const textColor = () => { + if (isDarkMode && color === '#ffffff') { + return colors.surface.blue[90]; + } + if (isDarkColor(bgColor, 0.4)) { + return colors.type.inverted.primary; + } + return colors.type.regular.primary; + }; return ( = ({ boxShadow: elevations.default, height: height, background: bgColor, - color: textColors.primary, + color: textColor(), '&:focus': { backgroundColor: darkBgColor, boxShadow: elevations.hover, diff --git a/met-web/src/components/common/Input/RichTextArea.tsx b/met-web/src/components/common/Input/RichTextArea.tsx new file mode 100644 index 000000000..93f71f3b5 --- /dev/null +++ b/met-web/src/components/common/Input/RichTextArea.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { ContentBlock, ContentState, Editor, EditorProps } from 'react-draft-wysiwyg'; +import { Link } from '../Navigation'; +import { Header2 } from '../Typography'; + +const LinkRenderer = ({ + children, + contentState, + entityKey, +}: { + children: React.ReactNode; + contentState: ContentState; + entityKey: string; +}) => { + const { url } = contentState.getEntity(entityKey).getData(); + return {children}; +}; + +const Header2Renderer = ({ children }: { children: React.ReactNode }) => { + return ( + + {children} + + ); +}; + +export const RichTextArea = ({ customDecorators, ...props }: EditorProps) => { + return ( + void, + contentState: ContentState, + ) => { + contentBlock.findEntityRanges((character) => { + const entityKey = character.getEntity(); + return entityKey !== null && contentState.getEntity(entityKey).getType() === 'LINK'; + }, callback); + }, + component: LinkRenderer, + }, + { + // Find all blocks with h2 style and render them using the Header2 component + strategy: (contentBlock: ContentBlock, callback: (start: number, end: number) => void) => { + if (!contentBlock) return; + if (contentBlock.getType() === 'header-two') { + callback(contentBlock.getDepth(), contentBlock.getDepth() + contentBlock.getLength()); + } + }, + component: Header2Renderer, + }, + ...(customDecorators || []), + ]} + {...props} + /> + ); +}; diff --git a/met-web/src/components/common/Input/TextInput.tsx b/met-web/src/components/common/Input/TextInput.tsx index cc5fbeb0c..e0a0b62e6 100644 --- a/met-web/src/components/common/Input/TextInput.tsx +++ b/met-web/src/components/common/Input/TextInput.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { Button as MuiButton, Input, InputProps, Box, TextField as MuiTextField } from '@mui/material'; +import { Button as MuiButton, Input, InputProps, Box, TextField as MuiTextField, useTheme } from '@mui/material'; import { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField'; import { colors, globalFocusVisible } from '..'; import { FormField, FormFieldProps } from './FormField'; @@ -195,6 +195,7 @@ interface CustomTextFieldProps extends Omit { } export const CustomTextField: React.FC = ({ sx, ...props }) => { + const theme = useTheme(); return ( = ({ sx, ...props } }, '&:hover .MuiOutlinedInput-notchedOutline': { borderWidth: '2px', // 2px black outline on hover - borderColor: 'black', + borderColor: theme.palette.text.primary, }, '&.Mui-focused .MuiOutlinedInput-notchedOutline': { borderWidth: '0px', // No outline when focused diff --git a/met-web/src/components/common/Navigation/Link.tsx b/met-web/src/components/common/Navigation/Link.tsx index 4a477bd9e..64b4bfad9 100644 --- a/met-web/src/components/common/Navigation/Link.tsx +++ b/met-web/src/components/common/Navigation/Link.tsx @@ -29,7 +29,7 @@ export const Link: React.FC = ({ regular: '1.5', large: '1.625', }[size]; - const textColor = color ?? colors.surface.blue[90]; + const textColor = color ?? undefined; return ( { diff --git a/met-web/src/components/common/Typography/Body.tsx b/met-web/src/components/common/Typography/Body.tsx index 025864703..99a5195bb 100644 --- a/met-web/src/components/common/Typography/Body.tsx +++ b/met-web/src/components/common/Typography/Body.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { Typography, TypographyProps } from '@mui/material'; -import { colors } from '../../common'; export const BodyText = ({ bold, @@ -40,7 +39,6 @@ export const BodyText = ({ fontSize, lineHeight, fontWeight: fontWeight(), - color: colors.type.regular.primary, ...props.sx, }} > @@ -63,7 +61,6 @@ export const EyebrowText = ({ fontSize: '24px', lineHeight: 'normal', fontWeight: 300, - color: colors.surface.gray[90], ...props.sx, }} > diff --git a/met-web/src/components/common/Typography/Headers.tsx b/met-web/src/components/common/Typography/Headers.tsx index 629435e9f..0bd963171 100644 --- a/met-web/src/components/common/Typography/Headers.tsx +++ b/met-web/src/components/common/Typography/Headers.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Typography, TypographyProps } from '@mui/material'; -const fontWeight = (weight: string) => { +const fontWeight = (weight?: string | number) => { switch (weight) { case 'bold': return 700; @@ -10,13 +10,13 @@ const fontWeight = (weight: string) => { case 'thin': return 200; default: - return 700; + return weight; } }; export const Header1 = ({ children, - weight = 'bold', + weight, ...props }: { children: React.ReactNode; @@ -44,7 +44,7 @@ export const Header1 = ({ export const Header2 = ({ children, decorated = false, - weight = 'bold', + weight, ...props }: { children: React.ReactNode; @@ -61,7 +61,6 @@ export const Header2 = ({ marginBottom: '1.5rem', marginTop: '0.5rem', fontWeight: fontWeight(weight), - color: '#292929', ...(decorated && { '&::before': { backgroundColor: '#FCBA19', diff --git a/met-web/src/components/common/index.tsx b/met-web/src/components/common/index.tsx index 1ad0aa3b2..49718c747 100644 --- a/met-web/src/components/common/index.tsx +++ b/met-web/src/components/common/index.tsx @@ -17,130 +17,12 @@ import { SxProps, styled } from '@mui/system'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPen } from '@fortawesome/pro-regular-svg-icons/faPen'; import { faCircleXmark } from '@fortawesome/pro-regular-svg-icons/faCircleXmark'; -import { Palette } from 'styles/Theme'; +import { Palette, colors } from 'styles/Theme'; import LoadingButton from '@mui/lab/LoadingButton'; import { MET_Header_Font_Family, MET_Font_Weight, MET_Header_Font_Weight } from '../../styles/constants'; import { When } from 'react-if'; import ReactPlayer from 'react-player'; - -export const colors = { - type: { - regular: { - primary: '#292929', - secondary: '#464341', - link: '#1A5A96', - disabled: '#A19F9D', - }, - inverted: { - primary: '#FFFFFF', - secondary: '#EDEBE9', - link: '#D8EBFF', - disabled: '#A19F9D', - }, - }, - button: { - default: { - shade: '#12508F', - icon: '#12508F', - tint: '#FFF8E8', - }, - success: { - shade: '#42814A', - icon: '#42814A', - tint: '#F6FFF8', - }, - warning: { - shade: '#FCBA19', - icon: '#C08C07', - tint: '#FFECBE', - }, - danger: { - shade: '#CE3E39', - icon: '#CE3E39', - tint: '#F4E1E2', - }, - error: { - shade: '#CE3E39', - icon: '#CE3E39', - tint: '#F4E1E2', - }, - }, - focus: { - regular: { - outer: '#2E5DD7', - inner: '#FFFFFF', - }, - }, - surface: { - gray: { - 10: '#FAF9F8', - 20: '#F3F2F1', - 30: '#EDEBE9', - 40: '#E1DFDD', - 50: '#D2D0CE', - 60: '#C8C6C4', - 70: '#A19F9D', - 80: '#7A7876', - 90: '#3B3A39', - 100: '#323130', - 110: '#201F1E', - }, - blue: { - 10: '#F1F8FF', - 20: '#D8EBFF', - 30: '#C0DFFF', - 40: '#A7D2FF', - 50: '#8EC6FF', - 60: '#76BAFF', - 70: '#4E97E0', - 80: '#2B71B8', - 90: '#12508F', - 100: '#053662', - bc: '#053662', - }, - gold: { - 10: '#FFF8E8', - 20: '#FFECBE', - 30: '#FFE095', - 40: '#FFD46C', - 50: '#FFC843', - 60: '#FCBA19', - bc: '#FCBA19', - 70: '#D39706', - 80: '#AA7900', - 90: '#825C00', - 100: '#593F00', - }, - white: '#FFFFFF', - }, - notification: { - default: { - shade: '#12508F', - icon: '#12508F', - tint: '#FFF8E8', - }, - success: { - shade: '#42814A', - icon: '#42814A', - tint: '#F6FFF8', - }, - warning: { - shade: '#FCBA19', - icon: '#C08C07', - tint: '#FFECBE', - }, - danger: { - shade: '#CE3E39', - icon: '#CE3E39', - tint: '#F4E1E2', - }, - error: { - shade: '#CE3E39', - icon: '#CE3E39', - tint: '#F4E1E2', - }, - }, -}; +export { colors }; export const elevations = { // For use with CSS box-shadow property @@ -312,8 +194,9 @@ export const MetToggleButton = ({ value, children, ...rest }: MetToggleButtonPro ); -const StyledPaper = styled(MuiPaper)(() => ({ - border: '1px solid #cdcdcd', +const StyledPaper = styled(MuiPaper)(({ theme }) => ({ + border: '1px solid', + borderColor: theme.palette.mode === 'dark' ? colors.surface.gray[100] : colors.surface.gray[60], borderRadius: '5px', boxShadow: 'rgb(0 0 0 / 6%) 0px 2px 2px -1px, rgb(0 0 0 / 6%) 0px 1px 1px 0px, rgb(0 0 0 / 6%) 0px 1px 3px 0px', })); @@ -656,7 +539,7 @@ export const MetDisclaimer = ({ sx={{ borderLeft: 8, borderColor: '#003366', - backgroundColor: '#F2F2F2', + backgroundColor: '#aaaaaa22', }} > { const { content, contentSummary } = useLoaderData() as { @@ -136,7 +136,7 @@ export const EngagementContentTabs = () => { - }> + }> {([content, contentSummary]: [ content: EngagementContent[], @@ -148,7 +148,7 @@ export const EngagementContentTabs = () => { {content[index].title} {summary.map((content, index) => ( - { - const { widgets } = useLoaderData() as { widgets: Widget[] }; +export const EngagementDescription = () => { + const { engagement, widgets } = useLoaderData() as { widgets: Widget[]; engagement: Engagement }; return (
- + - - - - All engagements - + + + + + All engagements + + - - - - Engagement Description - - - - - - - }> - - {(resolvedWidgets: Widget[]) => { - const widget = resolvedWidgets?.[0]; - return widget && ; - }} - - + + Engagement Description + + }> + + {(engagement: Engagement) => ( + + + + )} + + + + + }> + + + {(resolvedWidgets: Widget[]) => { + const widget = resolvedWidgets?.[0]; + return widget && ; + }} + + + + - +
); }; diff --git a/met-web/src/components/engagement/new/view/EngagementHero.tsx b/met-web/src/components/engagement/new/view/EngagementHero.tsx index d74cf5607..95a4a9759 100644 --- a/met-web/src/components/engagement/new/view/EngagementHero.tsx +++ b/met-web/src/components/engagement/new/view/EngagementHero.tsx @@ -1,38 +1,52 @@ import { BodyText, EyebrowText, Header1 } from 'components/common/Typography'; -import React from 'react'; +import React, { Suspense } from 'react'; import { Button } from 'components/common/Input'; import { Engagement } from 'models/engagement'; -import { Box, Grid } from '@mui/material'; +import { Box, Grid, Skeleton } from '@mui/material'; import { colors } from 'components/common'; import { EngagementStatusChip } from 'components/common/Indicators'; import dayjs from 'dayjs'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faChevronRight } from '@fortawesome/pro-regular-svg-icons'; +import { Await, useLoaderData } from 'react-router-dom'; +import { StatusChipSkeleton } from 'components/common/Indicators/StatusChip'; -export const EngagementHero = ({ engagement }: { engagement: Engagement }) => { +export const EngagementHero = () => { const dateFormat = 'MMM DD, YYYY'; const semanticDateFormat = 'YYYY-MM-DD'; - const startDate = dayjs(engagement.start_date); - const endDate = dayjs(engagement.end_date); + const { engagement } = useLoaderData() as { engagement: Promise }; + const startDate = engagement.then((engagement) => dayjs(engagement.start_date)); + const endDate = engagement.then((engagement) => dayjs(engagement.end_date)); + const engagementInfo = Promise.all([engagement, startDate, endDate]); return (
- + + } + > + + {(engagement: Engagement) => ( + + )} + + { padding: { xs: '43px 16px 75px 16px', md: '88px 48px 88px 5vw', lg: '88px 48px 88px 156px' }, boxShadow: '0px 20px 11px 0px rgba(0, 0, 0, 0.00), 0px 12px 10px 0px rgba(0, 0, 0, 0.01), 0px 7px 9px 0px rgba(0, 0, 0, 0.05), 0px 3px 6px 0px rgba(0, 0, 0, 0.09), 0px 1px 3px 0px rgba(0, 0, 0, 0.10)', + alignSelf: { xs: 'flex-start', md: 'center' }, + alignContent: 'center', }} > - {engagement.sponsor_name} - - - - - - - {' '} - to{' '} - - - - - - {engagement.name} - - + + {([engagement, startDate, endDate]: [Engagement, dayjs.Dayjs, dayjs.Dayjs]) => ( + <> + {engagement.sponsor_name} + + {engagement.name} + + + + + + + + {' '} + to{' '} + + + + + + + )} + +
); diff --git a/met-web/src/components/engagement/new/view/EngagementSurveyBlock.tsx b/met-web/src/components/engagement/new/view/EngagementSurveyBlock.tsx new file mode 100644 index 000000000..17139d44c --- /dev/null +++ b/met-web/src/components/engagement/new/view/EngagementSurveyBlock.tsx @@ -0,0 +1,183 @@ +import React, { Suspense } from 'react'; +import { Button } from 'components/common/Input'; +import { Box, Grid, Skeleton, ThemeProvider } from '@mui/material'; +import { colors } from 'components/common'; +import { Await, useLoaderData, useParams } from 'react-router-dom'; +import { Engagement } from 'models/engagement'; +import { SubmissionStatus } from 'constants/engagementStatus'; +import { getStatusFromStatusId } from 'components/common/Indicators/StatusChip'; +import { RichTextArea } from 'components/common/Input/RichTextArea'; +import { getEditorStateFromRaw } from 'components/common/RichTextEditor/utils'; +import { Widget } from 'models/widget'; +import { WidgetSwitch } from 'components/engagement/view/widgets/WidgetSwitch'; +import { BaseTheme, DarkTheme } from 'styles/Theme'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faChevronRight } from '@fortawesome/pro-regular-svg-icons'; +import { Switch, Case } from 'react-if'; +import { useAppSelector, useAppTranslation } from 'hooks'; +import EmailModal from 'components/engagement/view/EmailModal'; + +const gridContainerStyles = { + width: '100%', + margin: 0, + background: colors.surface.blue[90], + color: colors.surface.white, + borderRadius: '0px 24px 0px 0px' /* upper right corner */, + padding: { + xs: '43px 16px 24px 16px', + md: '32px 5vw 40px 5vw', + lg: '32px 156px 40px 156px', + }, + flexDirection: { xs: 'column', md: 'row' }, +}; + +export const EngagementSurveyBlock = () => { + const { engagement, widgets } = useLoaderData() as { engagement: Promise; widgets: Promise }; + const surveyBlockContents = Promise.all([engagement, widgets]); + const isLoggedIn = useAppSelector((state) => state.user.authentication.authenticated); + const { t: translate } = useAppTranslation(); + const { language } = useParams(); + + const [currentPanel, setCurrentPanel] = React.useState('email'); + const [isEmailModalOpen, setIsEmailModalOpen] = React.useState(false); + const handleOpenEmailModal = () => { + setCurrentPanel('email'); + setIsEmailModalOpen(true); + try { + window.snowplow('trackPageView', 'Verify Email Modal'); + } catch (error) { + console.log('Verify email modal snowplow error:', error); + } + }; + const handleCloseEmailModal = () => { + setCurrentPanel('email'); + setIsEmailModalOpen(false); + }; + + return ( + + + + + + + + + + } + > + + {([engagement, widgets]: [engagement: Engagement, widgets: Widget[]]) => { + const engagementStatus = engagement.submission_status; + const surveyStatus = getStatusFromStatusId(engagementStatus); + const statusBlock = engagement.status_block.find( + (block) => block.survey_status === surveyStatus, + ); + const widget = widgets?.[1]; + // No point in rendering if there is no status block or 2nd widget + if (!statusBlock?.block_text && !widget) return null; + return ( + + + + + handleCloseEmailModal()} + /> + + + + + + + + + + + + + + + {widget && } + + + + ); + }} + + + + ); +}; diff --git a/met-web/src/components/engagement/new/view/index.tsx b/met-web/src/components/engagement/new/view/index.tsx index 19830a64e..f1246d9b7 100644 --- a/met-web/src/components/engagement/new/view/index.tsx +++ b/met-web/src/components/engagement/new/view/index.tsx @@ -1,39 +1,16 @@ -import React, { Suspense } from 'react'; -import { Await, useLoaderData } from 'react-router-dom'; -import { Engagement } from 'models/engagement'; -import { Skeleton } from '@mui/material'; +import React from 'react'; import { EngagementHero } from './EngagementHero'; import { EngagementDescription } from './EngagementDescription'; import { EngagementContentTabs } from './EngagementContentTabs'; +import { EngagementSurveyBlock } from './EngagementSurveyBlock'; export const ViewEngagement = () => { - const { engagement } = useLoaderData() as { engagement: Engagement }; return (
- - } - > - - {(resolvedEngagement: Engagement) => } - - - }> - - {(resolvedEngagement: Engagement) => } - - + + +
); }; diff --git a/met-web/src/components/engagement/view/EmailModal.tsx b/met-web/src/components/engagement/view/EmailModal.tsx index 9da8eb6c3..c6c4e7512 100644 --- a/met-web/src/components/engagement/view/EmailModal.tsx +++ b/met-web/src/components/engagement/view/EmailModal.tsx @@ -16,11 +16,12 @@ import { EmailVerificationType } from 'models/emailVerification'; import { INTERNAL_EMAIL_DOMAIN } from 'constants/emailVerification'; import { LanguageState } from 'reduxSlices/languageSlice'; -const EmailModal = ({ defaultPanel, open, handleClose }: EmailModalProps) => { +const EmailModal = ({ defaultPanel, open, handleClose, engagement }: EmailModalProps) => { const dispatch = useAppDispatch(); const [formIndex, setFormIndex] = useState(defaultPanel); const [email, setEmail] = useState(''); - const { savedEngagement } = useContext(ActionContext); + const { savedEngagement: engagementFromContext } = useContext(ActionContext); + const savedEngagement = engagement || engagementFromContext; const [isSaving, setSaving] = useState(false); const language: LanguageState = useAppSelector((state) => state.language); diff --git a/met-web/src/components/engagement/view/types.ts b/met-web/src/components/engagement/view/types.ts index 0c1fb55c2..bc945477e 100644 --- a/met-web/src/components/engagement/view/types.ts +++ b/met-web/src/components/engagement/view/types.ts @@ -1,3 +1,4 @@ +import { Engagement } from 'models/engagement'; import React from 'react'; export interface BannerProps { @@ -17,6 +18,7 @@ export interface EmailModalProps { handleClose: () => void; updateEmail?: (email: string) => void; updateModal?: (open: boolean) => void; + engagement?: Engagement; } export interface EmailPanelProps { diff --git a/met-web/src/components/engagement/view/widgets/Timeline/TimelineWidgetView.tsx b/met-web/src/components/engagement/view/widgets/Timeline/TimelineWidgetView.tsx index 0d18c9b51..c83d58f13 100644 --- a/met-web/src/components/engagement/view/widgets/Timeline/TimelineWidgetView.tsx +++ b/met-web/src/components/engagement/view/widgets/Timeline/TimelineWidgetView.tsx @@ -72,6 +72,7 @@ const TimelineWidgetView = ({ widget }: TimelineWidgetProps) => { height: 23, width: 23, backgroundColor: 'var(--bcds-surface-background-white)', + color: 'transparent', }; const renderIcon = (status: EventStatus) => { diff --git a/met-web/src/styles/Theme.ts b/met-web/src/styles/Theme.ts index 63e08dc92..79b593af2 100644 --- a/met-web/src/styles/Theme.ts +++ b/met-web/src/styles/Theme.ts @@ -1,52 +1,174 @@ -import { createTheme } from '@mui/material'; +import { PaletteMode, createTheme } from '@mui/material'; +export const colors = { + type: { + regular: { + primary: '#292929', + secondary: '#464341', + link: '#1A5A96', + disabled: '#A19F9D', + }, + inverted: { + primary: '#FFFFFF', + secondary: '#EDEBE9', + link: '#D8EBFF', + disabled: '#A19F9D', + }, + }, + button: { + default: { + shade: '#12508F', + icon: '#12508F', + tint: '#FFF8E8', + }, + success: { + shade: '#42814A', + icon: '#42814A', + tint: '#F6FFF8', + }, + warning: { + shade: '#FCBA19', + icon: '#C08C07', + tint: '#FFECBE', + }, + danger: { + shade: '#CE3E39', + icon: '#CE3E39', + tint: '#F4E1E2', + }, + error: { + shade: '#CE3E39', + icon: '#CE3E39', + tint: '#F4E1E2', + }, + }, + focus: { + regular: { + outer: '#2E5DD7', + inner: '#FFFFFF', + }, + }, + surface: { + gray: { + 10: '#FAF9F8', + 20: '#F3F2F1', + 30: '#EDEBE9', + 40: '#E1DFDD', + 50: '#D2D0CE', + 60: '#C8C6C4', + 70: '#A19F9D', + 80: '#7A7876', + 90: '#3B3A39', + 100: '#323130', + 110: '#201F1E', + }, + blue: { + 10: '#F1F8FF', + 20: '#D8EBFF', + 30: '#C0DFFF', + 40: '#A7D2FF', + 50: '#8EC6FF', + 60: '#76BAFF', + 70: '#4E97E0', + 80: '#2B71B8', + 90: '#12508F', + 100: '#053662', + bc: '#053662', + }, + gold: { + 10: '#FFF8E8', + 20: '#FFECBE', + 30: '#FFE095', + 40: '#FFD46C', + 50: '#FFC843', + 60: '#FCBA19', + bc: '#FCBA19', + 70: '#D39706', + 80: '#AA7900', + 90: '#825C00', + 100: '#593F00', + }, + white: '#FFFFFF', + }, + notification: { + default: { + shade: '#12508F', + icon: '#12508F', + tint: '#FFF8E8', + }, + success: { + shade: '#42814A', + icon: '#42814A', + tint: '#F6FFF8', + }, + warning: { + shade: '#FCBA19', + icon: '#C08C07', + tint: '#FFECBE', + }, + danger: { + shade: '#CE3E39', + icon: '#CE3E39', + tint: '#F4E1E2', + }, + error: { + shade: '#CE3E39', + icon: '#CE3E39', + tint: '#F4E1E2', + }, + }, +}; export const Palette = { primary: { - main: '#003366', - light: '#385989', - dark: '#000C3B', + main: colors.surface.blue[100], + light: colors.surface.blue[90], + dark: colors.surface.blue[100], }, secondary: { - main: '#FFC107', - dark: '#FFAB00', - light: '#FFE082', + main: colors.surface.gold.bc, + light: colors.surface.gold[50], + dark: colors.surface.gold[70], + }, + background: { + default: colors.surface.white, + paper: colors.surface.white, }, hover: { - light: 'var(--bcds-surface-primary-hover)', + light: colors.surface.blue[90], }, text: { - primary: '#494949', + primary: colors.type.regular.primary, }, action: { - active: '#1A5A96', + active: colors.type.regular.link, }, info: { - main: '#707070', + main: colors.surface.gray[90], }, internalHeader: { - backgroundColor: 'var(--bcds-surface-background-white)', - color: '#292929', + backgroundColor: colors.surface.white, + color: colors.type.regular.primary, }, publicHeader: { - backgroundColor: 'var(--bcds-surface-background-white)', - color: '#292929', + backgroundColor: colors.surface.white, + color: colors.type.regular.primary, }, dashboard: { upcoming: { - bg: '#FCB92F26', - border: '#FCB92F', + bg: colors.notification.warning.tint, + border: colors.notification.warning.shade, }, open: { - bg: '#C8DF8C4D', - border: '#839537', + bg: colors.notification.success.tint, + border: colors.notification.success.shade, }, closed: { - bg: '#F15A2C1A', - border: '#F15A2C', + bg: colors.notification.danger.tint, + border: colors.notification.danger.shade, }, }, icons: { - surveyReady: '#77EB52', + surveyReady: colors.notification.success.shade, }, }; @@ -73,6 +195,13 @@ export const BaseTheme = createTheme({ }, }, components: { + MuiPaper: { + styleOverrides: { + root: { + backgroundColor: Palette.background.paper, + }, + }, + }, MuiButton: { styleOverrides: { root: { @@ -110,15 +239,23 @@ export const BaseTheme = createTheme({ }, }, }, + MuiSkeleton: { + defaultProps: { + animation: 'wave', + }, + }, }, typography: { fontFamily: "'BCSans', 'Noto Sans', Verdana, Arial, sans-serif", fontSize: 16, + allVariants: { + color: Palette.text.primary, + }, h1: { - fontWeight: 500, + fontWeight: 700, }, h2: { - fontWeight: 500, + fontWeight: 700, }, h3: { fontWeight: 500, @@ -148,18 +285,117 @@ export const BaseTheme = createTheme({ }, }); -export const PublicTheme = createTheme(BaseTheme, { - palette: { - primary: { - main: '#CFD8DC', - dark: '#455A64', - light: '#ECF2F5', +export const DarkPalette = { + mode: 'dark' as PaletteMode, + primary: { + main: colors.surface.white, + light: colors.surface.blue[10], + dark: colors.surface.blue[20], + }, + secondary: { + main: colors.surface.gold.bc, + light: colors.surface.gold[50], + dark: colors.surface.gold[70], + }, + background: { + default: colors.surface.blue[90], + paper: colors.surface.gray[110], + }, + hover: { + light: colors.surface.blue[10], + }, + text: { + primary: colors.type.inverted.primary, + }, + action: { + active: colors.type.inverted.link, + }, + info: { + main: colors.surface.gray[20], + }, +}; + +export const DarkTheme = createTheme({ + palette: DarkPalette, + components: { + MuiPaper: { + styleOverrides: { + root: { + backgroundColor: colors.surface.gray[110], + }, + }, }, - text: { - primary: Palette.text.primary, + MuiButton: { + styleOverrides: { + root: { + height: '40px', + }, + }, + defaultProps: { + disableRipple: true, + }, }, - action: { - active: Palette.action.active, + MuiTextField: { + defaultProps: { + size: 'small', + }, + }, + MuiLink: { + defaultProps: { + color: DarkPalette.action.active, + }, + }, + MuiFormLabel: { + defaultProps: { + focused: false, + }, + }, + MuiStepLabel: { + styleOverrides: { + label: { + color: '#494949 !important', + opacity: '100% !important', + }, + labelContainer: { + color: '#494949 !important', + opacity: '100% !important', + }, + }, + }, + MuiSkeleton: { + defaultProps: { + animation: 'wave', + }, + styleOverrides: { + root: { + backgroundColor: colors.surface.blue[90], + }, + wave: { + backgroundColor: colors.surface.blue[80], + }, + }, + }, + }, + typography: { + fontFamily: "'BCSans', 'Noto Sans', Verdana, Arial, sans-serif", + fontSize: 16, + allVariants: { + color: colors.type.inverted.primary, + }, + h2: { + fontWeight: 300, + }, + subtitle2: { + fontWeight: 500, + fontSize: '1.15rem', + }, + body1: { + fontSize: '16px', + }, + button: { + fontWeight: 400, + fontSize: '1.125rem', + textTransform: 'none', }, }, });