From a73c8dc712ba57dcfd31bbba0aa99ec635d48aa4 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Mon, 6 Jan 2025 13:19:51 -0300 Subject: [PATCH 01/55] Update chakra colors --- .../src/features/common/PickerCard.tsx | 2 +- .../features/common/nav/v2/MainSideNav.tsx | 14 +++-- clients/fidesui/src/FidesUITheme.tsx | 53 ++++++++++++------- 3 files changed, 40 insertions(+), 29 deletions(-) diff --git a/clients/admin-ui/src/features/common/PickerCard.tsx b/clients/admin-ui/src/features/common/PickerCard.tsx index 65bf633cbc..6b5015acf4 100644 --- a/clients/admin-ui/src/features/common/PickerCard.tsx +++ b/clients/admin-ui/src/features/common/PickerCard.tsx @@ -88,7 +88,7 @@ export const PickerCheckboxList = ({ {numSelected > 0 ? ( ( @@ -70,14 +68,14 @@ export const NavSideBarLink = ({ px={2} width="100%" justifyContent="start" - color={LINK_COLOR} + color={palette.FIDESUI_NEUTRAL_200} isActive={isActive} _hover={{ - backgroundColor: LINK_HOVER_BACKGROUND_COLOR, + backgroundColor: palette.FIDESUI_NEUTRAL_800, }} _active={{ - color: "white", - backgroundColor: LINK_ACTIVE_BACKGROUND_COLOR, + color: palette.FIDESUI_MINOS, + backgroundColor: palette.FIDESUI_SANDSTONE, }} _focus={{ outline: "none", diff --git a/clients/fidesui/src/FidesUITheme.tsx b/clients/fidesui/src/FidesUITheme.tsx index d6aced1a03..0d57826de9 100644 --- a/clients/fidesui/src/FidesUITheme.tsx +++ b/clients/fidesui/src/FidesUITheme.tsx @@ -1,20 +1,21 @@ import { extendTheme as extendChakraTheme } from "@chakra-ui/react"; import { Dict } from "@chakra-ui/utils"; +import palette from "fidesui/src/palette/palette.module.scss"; // eslint-disable-next-line import/prefer-default-export export const theme: Dict = extendChakraTheme({ colors: { primary: { - 50: "#E2E3E7", - 100: "#B8B9C4", - 200: "#888A9C", - 300: "#62668F", - 400: "#464B83", - 500: "#2B2E5C", - 600: "#272B53", - 700: "#20244B", - 800: "#111439", - 900: "#0D1031", + 50: palette.FIDESUI_BG_MINOS, + 100: palette.FIDESUI_BG_MINOS, + 200: palette.FIDESUI_BG_MINOS, + 300: palette.FIDESUI_MINOS, + 400: palette.FIDESUI_MINOS, + 500: palette.FIDESUI_MINOS, + 600: palette.FIDESUI_MINOS, + 700: palette.FIDESUI_MINOS, + 800: palette.FIDESUI_MINOS, + 900: palette.FIDESUI_MINOS, }, secondary: { 50: "#E4FBF2", @@ -29,20 +30,32 @@ export const theme: Dict = extendChakraTheme({ 900: "#0ACA60", }, complimentary: { - 50: "#F0EAFD", - 100: "#DACAFB", - 200: "#C1A7F9", - 300: "#A883F6", - 400: "#9569F4", - 500: "#824EF2", - 600: "#7A47F0", - 700: "#6F3DEE", - 800: "#6535EC", - 900: "#5225E8", + 50: palette.FIDESUI_BG_MINOS, + 100: palette.FIDESUI_BG_MINOS, + 200: palette.FIDESUI_BG_MINOS, + 300: palette.FIDESUI_MINOS, + 400: palette.FIDESUI_MINOS, + 500: palette.FIDESUI_MINOS, + 600: palette.FIDESUI_MINOS, + 700: palette.FIDESUI_MINOS, + 800: palette.FIDESUI_MINOS, + 900: palette.FIDESUI_MINOS, }, minos: { 500: "#2b2e35", }, + gray: { + 50: palette.FIDESUI_NEUTRAL_50, + 100: palette.FIDESUI_NEUTRAL_100, + 200: palette.FIDESUI_NEUTRAL_200, + 300: palette.FIDESUI_NEUTRAL_300, + 400: palette.FIDESUI_NEUTRAL_400, + 500: palette.FIDESUI_NEUTRAL_500, + 600: palette.FIDESUI_NEUTRAL_600, + 700: palette.FIDESUI_NEUTRAL_700, + 800: palette.FIDESUI_NEUTRAL_800, + 900: palette.FIDESUI_NEUTRAL_900, + }, }, fonts: { heading: `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`, From 600f4472a7cdea984cd515e22f2fcafaf182d0cf Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Tue, 7 Jan 2025 15:30:01 -0300 Subject: [PATCH 02/55] LA-226 Customize badge colors --- .../src/features/common/table/v2/cells.tsx | 1 - clients/fidesui/src/FidesUITheme.tsx | 31 ++++++++++++++++++- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/clients/admin-ui/src/features/common/table/v2/cells.tsx b/clients/admin-ui/src/features/common/table/v2/cells.tsx index b04076f2e9..29f48ddae1 100644 --- a/clients/admin-ui/src/features/common/table/v2/cells.tsx +++ b/clients/admin-ui/src/features/common/table/v2/cells.tsx @@ -63,7 +63,6 @@ const FidesBadge = ({ children, ...props }: BadgeProps) => ( fontWeight="400" fontSize="xs" lineHeight={4} - color="gray.600" px={2} py={1} boxShadow={ diff --git a/clients/fidesui/src/FidesUITheme.tsx b/clients/fidesui/src/FidesUITheme.tsx index 0d57826de9..c46073c619 100644 --- a/clients/fidesui/src/FidesUITheme.tsx +++ b/clients/fidesui/src/FidesUITheme.tsx @@ -1,8 +1,34 @@ -import { extendTheme as extendChakraTheme } from "@chakra-ui/react"; +import { + defineStyle, + defineStyleConfig, + extendTheme as extendChakraTheme, +} from "@chakra-ui/react"; import { Dict } from "@chakra-ui/utils"; import palette from "fidesui/src/palette/palette.module.scss"; // eslint-disable-next-line import/prefer-default-export + +const subtleBadge = defineStyle({ + bg: palette.FIDESUI_NEUTRAL_100, +}); +const taxonomyBadge = defineStyle({ + bg: "transparent", + border: `1px solid ${palette.FIDESUI_NEUTRAL_75}`, +}); + +const badgeTheme = defineStyleConfig({ + variants: { + // default badge for most use cases + subtle: subtleBadge, + // to be used in when displaying taxonomy labels (data categories, uses and subjects) + taxonomy: taxonomyBadge, + }, + baseStyle: { + borderRadius: "4px", + color: palette.FIDESUI_MINOS, + }, +}); + export const theme: Dict = extendChakraTheme({ colors: { primary: { @@ -68,6 +94,9 @@ export const theme: Dict = extendChakraTheme({ }, }, }, + components: { + Badge: badgeTheme, + }, }); // Wrap the Chakra extendTheme function in our own extendTheme function which From 08615ffd6bf190819630ec351579bb1b11a30069 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Tue, 7 Jan 2025 15:31:55 -0300 Subject: [PATCH 03/55] Update brand logo --- clients/admin-ui/public/logo-white.svg | 27 ++++++++--------- clients/admin-ui/public/logo.svg | 29 +++++++++---------- .../features/common/nav/v2/MainSideNav.tsx | 2 +- 3 files changed, 26 insertions(+), 32 deletions(-) diff --git a/clients/admin-ui/public/logo-white.svg b/clients/admin-ui/public/logo-white.svg index 3ce4dbae30..8e26f133ab 100644 --- a/clients/admin-ui/public/logo-white.svg +++ b/clients/admin-ui/public/logo-white.svg @@ -1,16 +1,13 @@ - - - - - - - - - - - - - - - + + + + + + + diff --git a/clients/admin-ui/public/logo.svg b/clients/admin-ui/public/logo.svg index 9b705e2bf7..ee2cd13cec 100644 --- a/clients/admin-ui/public/logo.svg +++ b/clients/admin-ui/public/logo.svg @@ -1,16 +1,13 @@ - - - - - - - - - - - - - - - - + + + + + + + + \ No newline at end of file diff --git a/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx b/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx index d6fba1ff1f..2c2d49c8f8 100644 --- a/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx +++ b/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx @@ -42,7 +42,7 @@ const NAV_WIDTH = "200px"; const FidesLogoHomeLink = () => ( - + ); From b7e1e108363fab128ecf3a1d6782d42c22c571f1 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Tue, 7 Jan 2025 15:44:25 -0300 Subject: [PATCH 04/55] Update logo --- clients/admin-ui/src/pages/404.tsx | 8 ++++---- clients/admin-ui/src/pages/login.tsx | 12 ++++++------ 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/clients/admin-ui/src/pages/404.tsx b/clients/admin-ui/src/pages/404.tsx index 2a2d104383..368f35da50 100644 --- a/clients/admin-ui/src/pages/404.tsx +++ b/clients/admin-ui/src/pages/404.tsx @@ -50,15 +50,15 @@ const Custom404 = () => { - + diff --git a/clients/admin-ui/src/pages/login.tsx b/clients/admin-ui/src/pages/login.tsx index 0a0eda5600..c7b95e62ec 100644 --- a/clients/admin-ui/src/pages/login.tsx +++ b/clients/admin-ui/src/pages/login.tsx @@ -234,9 +234,9 @@ const Login: NextPage = () => { @@ -265,9 +265,9 @@ const Login: NextPage = () => { From e4fdbe6caa1e90cd155ad8319c9c1386f4251329 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Wed, 8 Jan 2025 11:40:50 -0300 Subject: [PATCH 05/55] Update theme, homepage --- clients/admin-ui/src/home/HomeBanner.tsx | 31 ++--------- clients/admin-ui/src/home/HomeContent.tsx | 64 +++++------------------ clients/admin-ui/src/home/constants.ts | 12 +++-- clients/fidesui/src/FidesUITheme.tsx | 1 + 4 files changed, 23 insertions(+), 85 deletions(-) diff --git a/clients/admin-ui/src/home/HomeBanner.tsx b/clients/admin-ui/src/home/HomeBanner.tsx index 6344c89833..b772789801 100644 --- a/clients/admin-ui/src/home/HomeBanner.tsx +++ b/clients/admin-ui/src/home/HomeBanner.tsx @@ -1,4 +1,5 @@ import { Flex, Text } from "fidesui"; +import palette from "fidesui/src/palette/palette.module.scss"; import * as React from "react"; import { useFeatures } from "~/features/common/features"; @@ -6,24 +7,10 @@ import { useFeatures } from "~/features/common/features"; const HomeBanner = () => { const { systemsCount } = useFeatures(); const hasSystems = systemsCount > 0; - const bannerHeight = "300px"; - const bannerTextWidth = "600px"; return ( - - + + {hasSystems && ( <> @@ -58,18 +45,6 @@ const HomeBanner = () => { )} - {/* Render the background image, using a min-width here to ensure there is - enough left margin to avoid colliding with the banner text above */} - ); }; diff --git a/clients/admin-ui/src/home/HomeContent.tsx b/clients/admin-ui/src/home/HomeContent.tsx index 2ca041ecfc..4176708acb 100644 --- a/clients/admin-ui/src/home/HomeContent.tsx +++ b/clients/admin-ui/src/home/HomeContent.tsx @@ -1,4 +1,5 @@ -import { Flex, SimpleGrid, Text } from "fidesui"; +import { AntCard, AntTypography, Flex, SimpleGrid } from "fidesui"; +import palette from "fidesui/src/palette/palette.module.scss"; import NextLink from "next/link"; import * as React from "react"; import { useMemo } from "react"; @@ -31,59 +32,18 @@ const HomeContent = () => { {list .sort((a, b) => (a.sortOrder > b.sortOrder ? 1 : -1)) .map((item) => ( - - + - - {item.title} - - - {item.name} -   → - - - {item.description} - - + {item.name} + {item.description} + ))} diff --git a/clients/admin-ui/src/home/constants.ts b/clients/admin-ui/src/home/constants.ts index e3ccd49fcd..62a59c8bff 100644 --- a/clients/admin-ui/src/home/constants.ts +++ b/clients/admin-ui/src/home/constants.ts @@ -1,3 +1,5 @@ +import palette from "fidesui/src/palette/palette.module.scss"; + import { ADD_SYSTEMS_ROUTE, CONFIGURE_CONSENT_ROUTE, @@ -22,7 +24,7 @@ export enum ModuleCardKeys { export const MODULE_CARD_ITEMS: ModuleCardConfig[] = [ { - color: "blue", + color: palette.FIDESUI_SANDSTONE, description: "Explore the systems and data flow across your organization and create custom reports.", href: `${DATAMAP_ROUTE}`, @@ -35,7 +37,7 @@ export const MODULE_CARD_ITEMS: ModuleCardConfig[] = [ scopes: [ScopeRegistryEnum.DATAMAP_READ], }, { - color: "orange", + color: palette.FIDESUI_OLIVE, description: "Add third party applications and databases to your data map", href: `${ADD_SYSTEMS_ROUTE}`, key: ModuleCardKeys.ADD_SYSTEMS, @@ -45,7 +47,7 @@ export const MODULE_CARD_ITEMS: ModuleCardConfig[] = [ scopes: [ScopeRegistryEnum.SYSTEM_CREATE], }, { - color: "purple", + color: palette.FIDESUI_TERRACOTTA, description: "Review system information for all systems in your organization", href: `${SYSTEM_ROUTE}`, @@ -57,7 +59,7 @@ export const MODULE_CARD_ITEMS: ModuleCardConfig[] = [ requiresSystems: true, }, { - color: "pink", + color: palette.FIDESUI_MINOS, description: "Review, approve and process privacy requests across your systems on behalf of your users.", href: `${PRIVACY_REQUESTS_ROUTE}`, @@ -69,7 +71,7 @@ export const MODULE_CARD_ITEMS: ModuleCardConfig[] = [ requiresConnections: true, }, { - color: "green", + color: palette.FIDESUI_NECTAR, description: "Manage privacy notices and experiences for all domains in your organization", href: `${CONFIGURE_CONSENT_ROUTE}`, diff --git a/clients/fidesui/src/FidesUITheme.tsx b/clients/fidesui/src/FidesUITheme.tsx index c46073c619..6fbf74b44d 100644 --- a/clients/fidesui/src/FidesUITheme.tsx +++ b/clients/fidesui/src/FidesUITheme.tsx @@ -91,6 +91,7 @@ export const theme: Dict = extendChakraTheme({ global: { body: { bg: "gray.100", + color: palette.FIDESUI_MINOS, }, }, }, From 51ba0fbc24b7ddbafec454e738064e2e6bf82c96 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Wed, 8 Jan 2025 12:05:25 -0300 Subject: [PATCH 06/55] LA-226 Update colors --- .../src/features/common/PickerCard.tsx | 1 - .../common/table/v2/RowSelectionBar.tsx | 2 +- .../src/features/common/table/v2/cells.tsx | 6 +----- .../admin-ui/src/features/locations/modal.tsx | 1 - .../system/hooks/useSystemFormTabs.tsx | 5 ++++- clients/fidesui/src/FidesUITheme.tsx | 18 ++++++++++++++++++ 6 files changed, 24 insertions(+), 9 deletions(-) diff --git a/clients/admin-ui/src/features/common/PickerCard.tsx b/clients/admin-ui/src/features/common/PickerCard.tsx index 6b5015acf4..c6e4db4f00 100644 --- a/clients/admin-ui/src/features/common/PickerCard.tsx +++ b/clients/admin-ui/src/features/common/PickerCard.tsx @@ -89,7 +89,6 @@ export const PickerCheckboxList = ({ {numSelected > 0 ? ( diff --git a/clients/admin-ui/src/features/common/table/v2/RowSelectionBar.tsx b/clients/admin-ui/src/features/common/table/v2/RowSelectionBar.tsx index a844aa3ec4..5656f81a46 100644 --- a/clients/admin-ui/src/features/common/table/v2/RowSelectionBar.tsx +++ b/clients/admin-ui/src/features/common/table/v2/RowSelectionBar.tsx @@ -21,7 +21,7 @@ export const RowSelectionBar = ({ position="sticky" zIndex="10" top="36px" - backgroundColor="purple.100" + backgroundColor="neutral.100" height="36px" p={0} boxShadow="0px 4px 6px -1px rgba(0, 0, 0, 0.05)" diff --git a/clients/admin-ui/src/features/common/table/v2/cells.tsx b/clients/admin-ui/src/features/common/table/v2/cells.tsx index 29f48ddae1..16f7173021 100644 --- a/clients/admin-ui/src/features/common/table/v2/cells.tsx +++ b/clients/admin-ui/src/features/common/table/v2/cells.tsx @@ -299,11 +299,7 @@ export const IndeterminateCheckboxCell = ({ justifyContent="center" onClick={(e) => e.stopPropagation()} > - + ); diff --git a/clients/admin-ui/src/features/locations/modal.tsx b/clients/admin-ui/src/features/locations/modal.tsx index a6e2413615..4386055615 100644 --- a/clients/admin-ui/src/features/locations/modal.tsx +++ b/clients/admin-ui/src/features/locations/modal.tsx @@ -55,7 +55,6 @@ export const HeaderCheckboxRow = ({ Add an integration to start managing privacy requests and consent. Visit{" "} - + Integration Management {" "} to set up monitoring on databases. diff --git a/clients/fidesui/src/FidesUITheme.tsx b/clients/fidesui/src/FidesUITheme.tsx index 6fbf74b44d..c65e9e9010 100644 --- a/clients/fidesui/src/FidesUITheme.tsx +++ b/clients/fidesui/src/FidesUITheme.tsx @@ -11,6 +11,10 @@ import palette from "fidesui/src/palette/palette.module.scss"; const subtleBadge = defineStyle({ bg: palette.FIDESUI_NEUTRAL_100, }); +const solidBadge = defineStyle({ + bg: palette.FIDESUI_MINOS, + color: palette.FIDESUI_CORINTH, +}); const taxonomyBadge = defineStyle({ bg: "transparent", border: `1px solid ${palette.FIDESUI_NEUTRAL_75}`, @@ -22,6 +26,8 @@ const badgeTheme = defineStyleConfig({ subtle: subtleBadge, // to be used in when displaying taxonomy labels (data categories, uses and subjects) taxonomy: taxonomyBadge, + // for backwards compatibility with previous styles + solid: solidBadge, }, baseStyle: { borderRadius: "4px", @@ -70,6 +76,18 @@ export const theme: Dict = extendChakraTheme({ minos: { 500: "#2b2e35", }, + terracotta: { + 50: palette.FIDESUI_BG_TERRACOTTA, + 100: palette.FIDESUI_BG_TERRACOTTA, + 200: palette.FIDESUI_BG_TERRACOTTA, + 300: palette.FIDESUI_TERRACOTTA, + 400: palette.FIDESUI_TERRACOTTA, + 500: palette.FIDESUI_TERRACOTTA, + 600: palette.FIDESUI_TERRACOTTA, + 700: palette.FIDESUI_TERRACOTTA, + 800: palette.FIDESUI_TERRACOTTA, + 900: palette.FIDESUI_TERRACOTTA, + }, gray: { 50: palette.FIDESUI_NEUTRAL_50, 100: palette.FIDESUI_NEUTRAL_100, From 4f56926e076323944113a16c405e25eeafc54f21 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Wed, 8 Jan 2025 12:28:47 -0300 Subject: [PATCH 07/55] Update dnd badge colors --- .../tables/cells/ResultStatusBadgeCell.tsx | 12 +++--- clients/fidesui/src/FidesUITheme.tsx | 41 +++++++++++++++++-- 2 files changed, 44 insertions(+), 9 deletions(-) diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/ResultStatusBadgeCell.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/ResultStatusBadgeCell.tsx index afdd7ccd86..bb78de9015 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/ResultStatusBadgeCell.tsx +++ b/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/ResultStatusBadgeCell.tsx @@ -24,7 +24,9 @@ const ResultStatusBadgeCell = ({ changeTypeOverride?: ResourceChangeType; }) => { if (result.user_assigned_data_categories?.length) { - return Reviewed; + return ( + Reviewed + ); } const changeType = changeTypeOverride ?? findResourceChangeType(result); switch (changeType) { @@ -34,17 +36,15 @@ const ResultStatusBadgeCell = ({ ); case ResourceChangeType.MONITORED: return ( - Monitoring + Monitoring ); case ResourceChangeType.IN_PROGRESS: return ( - Classifying + Classifying ); default: return ( - - Pending review - + Pending review ); } }; diff --git a/clients/fidesui/src/FidesUITheme.tsx b/clients/fidesui/src/FidesUITheme.tsx index c65e9e9010..f959c1bb47 100644 --- a/clients/fidesui/src/FidesUITheme.tsx +++ b/clients/fidesui/src/FidesUITheme.tsx @@ -8,9 +8,11 @@ import palette from "fidesui/src/palette/palette.module.scss"; // eslint-disable-next-line import/prefer-default-export -const subtleBadge = defineStyle({ - bg: palette.FIDESUI_NEUTRAL_100, -}); +const subtleBadge = defineStyle((props) => ({ + bg: props.colorScheme + ? `${props.colorScheme}.100` + : palette.FIDESUI_NEUTRAL_100, +})); const solidBadge = defineStyle({ bg: palette.FIDESUI_MINOS, color: palette.FIDESUI_CORINTH, @@ -100,6 +102,39 @@ export const theme: Dict = extendChakraTheme({ 800: palette.FIDESUI_NEUTRAL_800, 900: palette.FIDESUI_NEUTRAL_900, }, + warn: { + 100: palette.FIDESUI_BG_WARNING, + 200: palette.FIDESUI_BG_WARNING, + 300: palette.FIDESUI_WARNING, + 400: palette.FIDESUI_WARNING, + 500: palette.FIDESUI_WARNING, + 600: palette.FIDESUI_WARNING, + 700: palette.FIDESUI_WARNING, + 800: palette.FIDESUI_WARNING, + 900: palette.FIDESUI_WARNING, + }, + success: { + 100: palette.FIDESUI_BG_SUCCESS, + 200: palette.FIDESUI_BG_SUCCESS, + 300: palette.FIDESUI_SUCCESS, + 400: palette.FIDESUI_SUCCESS, + 500: palette.FIDESUI_SUCCESS, + 600: palette.FIDESUI_SUCCESS, + 700: palette.FIDESUI_SUCCESS, + 800: palette.FIDESUI_SUCCESS, + 900: palette.FIDESUI_SUCCESS, + }, + info: { + 100: palette.FIDESUI_BG_INFO, + 200: palette.FIDESUI_BG_INFO, + 300: palette.FIDESUI_INFO, + 400: palette.FIDESUI_INFO, + 500: palette.FIDESUI_INFO, + 600: palette.FIDESUI_INFO, + 700: palette.FIDESUI_INFO, + 800: palette.FIDESUI_INFO, + 900: palette.FIDESUI_INFO, + }, }, fonts: { heading: `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`, From 4ca3c4f3a9fa9a7e688ca0a2bd08ee8b3d4add5d Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Wed, 8 Jan 2025 12:44:04 -0300 Subject: [PATCH 08/55] Update colors --- clients/admin-ui/public/images/SelectedDatabaseIcon.svg | 2 +- clients/admin-ui/src/features/common/PickerCard.tsx | 6 +----- .../common/system-data-flow/DataFlowSystemsModal.tsx | 2 +- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/clients/admin-ui/public/images/SelectedDatabaseIcon.svg b/clients/admin-ui/public/images/SelectedDatabaseIcon.svg index 3dd105c030..73660e7405 100644 --- a/clients/admin-ui/public/images/SelectedDatabaseIcon.svg +++ b/clients/admin-ui/public/images/SelectedDatabaseIcon.svg @@ -1,2 +1,2 @@ - + diff --git a/clients/admin-ui/src/features/common/PickerCard.tsx b/clients/admin-ui/src/features/common/PickerCard.tsx index c6e4db4f00..af535b5979 100644 --- a/clients/admin-ui/src/features/common/PickerCard.tsx +++ b/clients/admin-ui/src/features/common/PickerCard.tsx @@ -87,11 +87,7 @@ export const PickerCheckboxList = ({ {toggle ?? null} {numSelected > 0 ? ( - + {numSelected} selected ) : null} diff --git a/clients/admin-ui/src/features/common/system-data-flow/DataFlowSystemsModal.tsx b/clients/admin-ui/src/features/common/system-data-flow/DataFlowSystemsModal.tsx index d3029a24f0..aaae4c09c4 100644 --- a/clients/admin-ui/src/features/common/system-data-flow/DataFlowSystemsModal.tsx +++ b/clients/admin-ui/src/features/common/system-data-flow/DataFlowSystemsModal.tsx @@ -99,7 +99,7 @@ const DataFlowSystemsModal = ({ Configure {flowType.toLocaleLowerCase()} systems - + Assigned to {selectedDataFlows.length} systems From 809d3dc6513a5a94f89dac24dbe96e0567af5352 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Wed, 8 Jan 2025 12:46:36 -0300 Subject: [PATCH 09/55] fix title --- clients/admin-ui/src/pages/datamap/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/clients/admin-ui/src/pages/datamap/index.tsx b/clients/admin-ui/src/pages/datamap/index.tsx index 4c257253a2..0ba88008ab 100644 --- a/clients/admin-ui/src/pages/datamap/index.tsx +++ b/clients/admin-ui/src/pages/datamap/index.tsx @@ -23,7 +23,7 @@ const Home: NextPage = () => { padding: "24px 0 0 40px", }} > - + From 58a166de679ecfdc3023e0f3bbd11119e14b2d8b Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Thu, 9 Jan 2025 00:58:01 -0300 Subject: [PATCH 10/55] Adjust privacy center colors --- clients/fides-js/src/components/fides.css | 4 ++-- clients/fidesui/src/FidesUITheme.tsx | 2 ++ clients/privacy-center/components/Card.tsx | 4 ++-- clients/privacy-center/components/Layout.tsx | 2 +- .../components/consent/ConsentDescription.tsx | 2 +- .../components/consent/ConsentHeading.tsx | 2 +- .../privacy-center/components/consent/ConsentItem.tsx | 6 +++--- .../consent/notice-driven/ConsentItemAccordion.tsx | 8 ++++---- .../consent-request-modal/ConsentRequestForm.tsx | 6 +++--- .../privacy-request-modal/PrivacyRequestForm.tsx | 4 ++-- .../privacy-center/features/consent/GpcMessages.tsx | 6 +++--- clients/privacy-center/pages/index.tsx | 10 +++++----- 12 files changed, 29 insertions(+), 27 deletions(-) diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css index 3eb261516b..8bba47295d 100644 --- a/clients/fides-js/src/components/fides.css +++ b/clients/fides-js/src/components/fides.css @@ -3,7 +3,7 @@ */ :root { /* Colors */ - --fides-overlay-primary-color: #8243f2; + --fides-overlay-primary-color: #2b2e35; --fides-overlay-background-color: #f7fafc; --fides-overlay-embed-background-color: transparent; --fides-overlay-font-color: #4a5568; @@ -21,7 +21,7 @@ --fides-overlay-primary-button-background-color: var( --fides-overlay-primary-color ); - --fides-overlay-primary-button-background-hover-color: #9569f4; + --fides-overlay-primary-button-background-hover-color: #4f525b; --fides-overlay-primary-button-text-color: #ffffff; --fides-overlay-primary-button-border-color: transparent; --fides-overlay-secondary-button-background-color: var( diff --git a/clients/fidesui/src/FidesUITheme.tsx b/clients/fidesui/src/FidesUITheme.tsx index f959c1bb47..8337dd3ba9 100644 --- a/clients/fidesui/src/FidesUITheme.tsx +++ b/clients/fidesui/src/FidesUITheme.tsx @@ -92,6 +92,8 @@ export const theme: Dict = extendChakraTheme({ }, gray: { 50: palette.FIDESUI_NEUTRAL_50, + 75: palette.FIDESUI_NEUTRAL_75, + 100: palette.FIDESUI_NEUTRAL_100, 200: palette.FIDESUI_NEUTRAL_200, 300: palette.FIDESUI_NEUTRAL_300, diff --git a/clients/privacy-center/components/Card.tsx b/clients/privacy-center/components/Card.tsx index b941b3a240..9b05c79105 100644 --- a/clients/privacy-center/components/Card.tsx +++ b/clients/privacy-center/components/Card.tsx @@ -47,14 +47,14 @@ const Card = ({ title, iconPath, description, onClick }: CardProps) => ( > {title} - + {description} diff --git a/clients/privacy-center/components/Layout.tsx b/clients/privacy-center/components/Layout.tsx index e1e73a498b..46c903e58b 100644 --- a/clients/privacy-center/components/Layout.tsx +++ b/clients/privacy-center/components/Layout.tsx @@ -19,7 +19,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
{ diff --git a/clients/privacy-center/components/consent/ConsentHeading.tsx b/clients/privacy-center/components/consent/ConsentHeading.tsx index ac0e2cf9a0..1ef50501f5 100644 --- a/clients/privacy-center/components/consent/ConsentHeading.tsx +++ b/clients/privacy-center/components/consent/ConsentHeading.tsx @@ -22,7 +22,7 @@ const ConsentHeading = () => { return ( ( - + {name} @@ -59,7 +59,7 @@ const ConsentItem = ({ - + {description} {url ? ( diff --git a/clients/privacy-center/components/consent/notice-driven/ConsentItemAccordion.tsx b/clients/privacy-center/components/consent/notice-driven/ConsentItemAccordion.tsx index b381bbf376..1fee424f89 100644 --- a/clients/privacy-center/components/consent/notice-driven/ConsentItemAccordion.tsx +++ b/clients/privacy-center/components/consent/notice-driven/ConsentItemAccordion.tsx @@ -38,16 +38,16 @@ const ConsentItemAccordion = ({ - + @@ -85,7 +85,7 @@ const ConsentItemAccordion = ({ - + {config.consent?.button.description} {config.consent?.button.description_subtext?.map( (paragraph, index) => ( // eslint-disable-next-line react/no-array-index-key - + {paragraph} ), )} {isVerificationRequired ? ( - + We will send you a verification code. ) : null} diff --git a/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx b/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx index 096dd09773..9226843149 100644 --- a/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx +++ b/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx @@ -351,14 +351,14 @@ const PrivacyRequestForm = ({ {action.title} - + {action.description} {action.description_subtext?.map((paragraph, index) => ( // eslint-disable-next-line react/no-array-index-key - + {paragraph} ))} diff --git a/clients/privacy-center/features/consent/GpcMessages.tsx b/clients/privacy-center/features/consent/GpcMessages.tsx index ee6045df07..17a2292bf7 100644 --- a/clients/privacy-center/features/consent/GpcMessages.tsx +++ b/clients/privacy-center/features/consent/GpcMessages.tsx @@ -12,7 +12,7 @@ const BADGE_COLORS = { export const GpcBadge = ({ status }: { status: GpcStatus }) => status === GpcStatus.NONE ? null : ( - + Global Privacy Control @@ -23,7 +23,7 @@ export const GpcBadge = ({ status }: { status: GpcStatus }) => const InfoText: typeof Text = (props) => ( { border="1px solid" borderColor="blue.400" borderRadius="lg" - background="gray.100" + background="gray.75" padding={4} spacing={1} lineHeight={5} diff --git a/clients/privacy-center/pages/index.tsx b/clients/privacy-center/pages/index.tsx index e7c21b22fa..267dba1b72 100644 --- a/clients/privacy-center/pages/index.tsx +++ b/clients/privacy-center/pages/index.tsx @@ -171,7 +171,7 @@ const Home: NextPage = () => { { fontWeight="medium" maxWidth={624} textAlign="center" - color="gray.600" + color="gray.800" data-testid="description" > {config.description} @@ -196,7 +196,7 @@ const Home: NextPage = () => { fontWeight="medium" maxWidth={624} textAlign="center" - color="gray.600" + color="gray.800" data-testid={`description-${index}`} // eslint-disable-next-line react/no-array-index-key key={`description-${index}`} @@ -214,7 +214,7 @@ const Home: NextPage = () => { fontSize={["small", "medium"]} fontWeight="medium" maxWidth={624} - color="gray.600" + color="gray.800" data-testid={`addendum-${index}`} // eslint-disable-next-line react/no-array-index-key key={`addendum-${index}`} @@ -231,7 +231,7 @@ const Home: NextPage = () => { fontWeight="medium" textAlign="center" textDecoration="underline" - color="gray.600" + color="gray.800" href={config.privacy_policy_url!} isExternal > From 3e669720f0506152480247719beeef1e75fbc31f Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Thu, 9 Jan 2025 01:01:02 -0300 Subject: [PATCH 11/55] Update privacy center --- clients/fidesui/src/FidesUITheme.tsx | 1 - clients/privacy-center/public/consent.svg | 2 +- clients/privacy-center/public/delete.svg | 2 +- clients/privacy-center/public/download.svg | 2 +- clients/privacy-center/public/edit.svg | 2 +- 5 files changed, 4 insertions(+), 5 deletions(-) diff --git a/clients/fidesui/src/FidesUITheme.tsx b/clients/fidesui/src/FidesUITheme.tsx index 8337dd3ba9..44706f2bd0 100644 --- a/clients/fidesui/src/FidesUITheme.tsx +++ b/clients/fidesui/src/FidesUITheme.tsx @@ -93,7 +93,6 @@ export const theme: Dict = extendChakraTheme({ gray: { 50: palette.FIDESUI_NEUTRAL_50, 75: palette.FIDESUI_NEUTRAL_75, - 100: palette.FIDESUI_NEUTRAL_100, 200: palette.FIDESUI_NEUTRAL_200, 300: palette.FIDESUI_NEUTRAL_300, diff --git a/clients/privacy-center/public/consent.svg b/clients/privacy-center/public/consent.svg index 5707d7fd52..3236031759 100644 --- a/clients/privacy-center/public/consent.svg +++ b/clients/privacy-center/public/consent.svg @@ -1,3 +1,3 @@ - + diff --git a/clients/privacy-center/public/delete.svg b/clients/privacy-center/public/delete.svg index a89bd3261c..71d16eb584 100644 --- a/clients/privacy-center/public/delete.svg +++ b/clients/privacy-center/public/delete.svg @@ -1,3 +1,3 @@ - + diff --git a/clients/privacy-center/public/download.svg b/clients/privacy-center/public/download.svg index c15d4baaee..bb160b8edb 100644 --- a/clients/privacy-center/public/download.svg +++ b/clients/privacy-center/public/download.svg @@ -1,3 +1,3 @@ - + diff --git a/clients/privacy-center/public/edit.svg b/clients/privacy-center/public/edit.svg index 41202c1396..a97b74a2c1 100644 --- a/clients/privacy-center/public/edit.svg +++ b/clients/privacy-center/public/edit.svg @@ -1,3 +1,3 @@ - + From eec31feabf4b31e6ff96be4ea1f97a1fd37c9a2e Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Thu, 9 Jan 2025 01:20:56 -0300 Subject: [PATCH 12/55] Update colors --- .../admin-ui/src/features/common/dropdown/SelectDropdown.tsx | 2 +- .../system/dictionary-data-uses/DataUseCheckboxTable.tsx | 2 +- .../PrivacyDeclarationDictModalComponents.tsx | 4 ++-- .../features/system/dictionary-form/DictSuggestionInputs.tsx | 2 +- .../system/privacy-declarations/PrivacyDeclarationStep.tsx | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/clients/admin-ui/src/features/common/dropdown/SelectDropdown.tsx b/clients/admin-ui/src/features/common/dropdown/SelectDropdown.tsx index 62bc8b3b0d..853146074d 100644 --- a/clients/admin-ui/src/features/common/dropdown/SelectDropdown.tsx +++ b/clients/admin-ui/src/features/common/dropdown/SelectDropdown.tsx @@ -72,7 +72,7 @@ const SelectDropdown = ({ ([, option]) => option.value === selectedValue, )?.[0]; - const colorClass = selectedText ? "text-purple-500" : "text-gray-500"; + const colorClass = selectedText ? "text-primary-900" : "text-gray-500"; return (
diff --git a/clients/admin-ui/src/features/system/dictionary-data-uses/DataUseCheckboxTable.tsx b/clients/admin-ui/src/features/system/dictionary-data-uses/DataUseCheckboxTable.tsx index 1fcf60f58e..c5a656c8cd 100644 --- a/clients/admin-ui/src/features/system/dictionary-data-uses/DataUseCheckboxTable.tsx +++ b/clients/admin-ui/src/features/system/dictionary-data-uses/DataUseCheckboxTable.tsx @@ -95,7 +95,7 @@ const DataUseCheckboxTable = ({ size="lg" py={1} color="white" - backgroundColor="purple.500" + backgroundColor="terracotta.500" fontWeight="semibold" > {declarationTitle(du)} diff --git a/clients/admin-ui/src/features/system/dictionary-data-uses/PrivacyDeclarationDictModalComponents.tsx b/clients/admin-ui/src/features/system/dictionary-data-uses/PrivacyDeclarationDictModalComponents.tsx index c7aa2830e4..bf1264286a 100644 --- a/clients/admin-ui/src/features/system/dictionary-data-uses/PrivacyDeclarationDictModalComponents.tsx +++ b/clients/admin-ui/src/features/system/dictionary-data-uses/PrivacyDeclarationDictModalComponents.tsx @@ -57,10 +57,10 @@ const PrivacyDeclarationDictModalComponents = ({ backgroundColor="gray.50" border="1px" borderRadius={4} - borderColor="purple.400" + borderColor="terracotta.500" > - + Fides has automatically generated the following data uses. These data uses are commonly assigned to this system type. You can accept diff --git a/clients/admin-ui/src/features/system/dictionary-form/DictSuggestionInputs.tsx b/clients/admin-ui/src/features/system/dictionary-form/DictSuggestionInputs.tsx index d152cc48ec..c298f1949c 100644 --- a/clients/admin-ui/src/features/system/dictionary-form/DictSuggestionInputs.tsx +++ b/clients/admin-ui/src/features/system/dictionary-form/DictSuggestionInputs.tsx @@ -279,7 +279,7 @@ export const DictSuggestionNumberInput = ({ setFieldValue(field.name, v); }} w="100%" - colorScheme="purple" + colorScheme="terracotta" inputMode="numeric" data-testid={`input-${field.name}`} color={ diff --git a/clients/admin-ui/src/features/system/privacy-declarations/PrivacyDeclarationStep.tsx b/clients/admin-ui/src/features/system/privacy-declarations/PrivacyDeclarationStep.tsx index 0d105bbc3d..b5749d3bd5 100644 --- a/clients/admin-ui/src/features/system/privacy-declarations/PrivacyDeclarationStep.tsx +++ b/clients/admin-ui/src/features/system/privacy-declarations/PrivacyDeclarationStep.tsx @@ -44,7 +44,7 @@ const PrivacyDeclarationStep = ({ system }: Props) => { of personal information are collected for this purpose and for which categories of data subjects. To update the available categories and uses, please visit{" "} - + Manage taxonomy . From fefa31120edf20cb860b0d8e4fc283313fcc05d4 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Thu, 9 Jan 2025 02:01:21 -0300 Subject: [PATCH 13/55] Update colors --- clients/admin-ui/src/features/config-wizard/SystemOption.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/clients/admin-ui/src/features/config-wizard/SystemOption.tsx b/clients/admin-ui/src/features/config-wizard/SystemOption.tsx index 8e57c6aa6c..a2991448cc 100644 --- a/clients/admin-ui/src/features/config-wizard/SystemOption.tsx +++ b/clients/admin-ui/src/features/config-wizard/SystemOption.tsx @@ -45,11 +45,11 @@ const SystemOption = ({ > {icon} - + {label} - + {description} From ee45cfd98b2b957d5317d396740b928a52c67c67 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Thu, 9 Jan 2025 12:37:45 -0300 Subject: [PATCH 14/55] Update database icons --- .../admin-ui/public/images/DatabaseIcon.svg | 86 ++++++++++++++++++- .../public/images/SelectedDatabaseIcon.svg | 86 ++++++++++++++++++- 2 files changed, 168 insertions(+), 4 deletions(-) diff --git a/clients/admin-ui/public/images/DatabaseIcon.svg b/clients/admin-ui/public/images/DatabaseIcon.svg index 7fe06e8267..b9a9914d22 100644 --- a/clients/admin-ui/public/images/DatabaseIcon.svg +++ b/clients/admin-ui/public/images/DatabaseIcon.svg @@ -1,2 +1,84 @@ - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/clients/admin-ui/public/images/SelectedDatabaseIcon.svg b/clients/admin-ui/public/images/SelectedDatabaseIcon.svg index 73660e7405..51ffc6f57b 100644 --- a/clients/admin-ui/public/images/SelectedDatabaseIcon.svg +++ b/clients/admin-ui/public/images/SelectedDatabaseIcon.svg @@ -1,2 +1,84 @@ - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 6ed0eb3ae9249778077976335e78eea842965831 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Thu, 9 Jan 2025 12:40:11 -0300 Subject: [PATCH 15/55] Update colors --- .../admin-ui/src/features/system/hooks/useSystemFormTabs.tsx | 5 +---- .../system/privacy-declarations/PrivacyDeclarationStep.tsx | 2 +- clients/fidesui/src/FidesUITheme.tsx | 3 +++ 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/clients/admin-ui/src/features/system/hooks/useSystemFormTabs.tsx b/clients/admin-ui/src/features/system/hooks/useSystemFormTabs.tsx index 45ceac7310..043f791c1b 100644 --- a/clients/admin-ui/src/features/system/hooks/useSystemFormTabs.tsx +++ b/clients/admin-ui/src/features/system/hooks/useSystemFormTabs.tsx @@ -315,10 +315,7 @@ const useSystemFormTabs = ({ <> Add an integration to start managing privacy requests and consent. Visit{" "} - + Integration Management {" "} to set up monitoring on databases. diff --git a/clients/admin-ui/src/features/system/privacy-declarations/PrivacyDeclarationStep.tsx b/clients/admin-ui/src/features/system/privacy-declarations/PrivacyDeclarationStep.tsx index b5749d3bd5..8d91108066 100644 --- a/clients/admin-ui/src/features/system/privacy-declarations/PrivacyDeclarationStep.tsx +++ b/clients/admin-ui/src/features/system/privacy-declarations/PrivacyDeclarationStep.tsx @@ -44,7 +44,7 @@ const PrivacyDeclarationStep = ({ system }: Props) => { of personal information are collected for this purpose and for which categories of data subjects. To update the available categories and uses, please visit{" "} - + Manage taxonomy . diff --git a/clients/fidesui/src/FidesUITheme.tsx b/clients/fidesui/src/FidesUITheme.tsx index 44706f2bd0..fcc1f9120f 100644 --- a/clients/fidesui/src/FidesUITheme.tsx +++ b/clients/fidesui/src/FidesUITheme.tsx @@ -136,6 +136,9 @@ export const theme: Dict = extendChakraTheme({ 800: palette.FIDESUI_INFO, 900: palette.FIDESUI_INFO, }, + link: { + 900: palette.FIDESUI_LINK, + }, }, fonts: { heading: `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`, From 5b6d15e17add2d004bf0b8f0fa1cce2ee0d7aa46 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Thu, 9 Jan 2025 12:41:38 -0300 Subject: [PATCH 16/55] Update colors --- .../features/system/dictionary-data-uses/EmptyTableState.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/clients/admin-ui/src/features/system/dictionary-data-uses/EmptyTableState.tsx b/clients/admin-ui/src/features/system/dictionary-data-uses/EmptyTableState.tsx index 75b8761435..2c0b8a5f7a 100644 --- a/clients/admin-ui/src/features/system/dictionary-data-uses/EmptyTableState.tsx +++ b/clients/admin-ui/src/features/system/dictionary-data-uses/EmptyTableState.tsx @@ -34,7 +34,7 @@ const EmptyTableState = ({ title, description, handleAdd }: Props) => ( {title} - + {description} From 220513ffae3a8b847b828a0a4a1e3aaa1f437e78 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Fri, 10 Jan 2025 11:50:37 -0300 Subject: [PATCH 17/55] Adjust badge padding --- clients/admin-ui/src/features/common/table/v2/cells.tsx | 1 - clients/fidesui/src/FidesUITheme.tsx | 2 ++ 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/clients/admin-ui/src/features/common/table/v2/cells.tsx b/clients/admin-ui/src/features/common/table/v2/cells.tsx index 16f7173021..c8bcaf0760 100644 --- a/clients/admin-ui/src/features/common/table/v2/cells.tsx +++ b/clients/admin-ui/src/features/common/table/v2/cells.tsx @@ -63,7 +63,6 @@ const FidesBadge = ({ children, ...props }: BadgeProps) => ( fontWeight="400" fontSize="xs" lineHeight={4} - px={2} py={1} boxShadow={ props.variant === "outline" diff --git a/clients/fidesui/src/FidesUITheme.tsx b/clients/fidesui/src/FidesUITheme.tsx index fcc1f9120f..c8f38ecd52 100644 --- a/clients/fidesui/src/FidesUITheme.tsx +++ b/clients/fidesui/src/FidesUITheme.tsx @@ -34,6 +34,8 @@ const badgeTheme = defineStyleConfig({ baseStyle: { borderRadius: "4px", color: palette.FIDESUI_MINOS, + paddingInlineStart: "var(--chakra-space-1-5)", + paddingInlineEnd: "var(--chakra-space-1-5)", }, }); From 7d80f3c7a825df2892e4cb63b41e69443c903b89 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Mon, 13 Jan 2025 12:27:07 -0300 Subject: [PATCH 18/55] Update styling --- clients/admin-ui/src/features/common/table/v2/cells.tsx | 6 +----- clients/fidesui/src/FidesUITheme.tsx | 2 +- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/clients/admin-ui/src/features/common/table/v2/cells.tsx b/clients/admin-ui/src/features/common/table/v2/cells.tsx index c8bcaf0760..9110c91dc0 100644 --- a/clients/admin-ui/src/features/common/table/v2/cells.tsx +++ b/clients/admin-ui/src/features/common/table/v2/cells.tsx @@ -64,12 +64,8 @@ const FidesBadge = ({ children, ...props }: BadgeProps) => ( fontSize="xs" lineHeight={4} py={1} - boxShadow={ - props.variant === "outline" - ? "inset 0 0 0px 1px var(--chakra-colors-gray-100)" - : undefined - } {...props} + variant="taxonomy" > {children} diff --git a/clients/fidesui/src/FidesUITheme.tsx b/clients/fidesui/src/FidesUITheme.tsx index c8f38ecd52..c984fc8be8 100644 --- a/clients/fidesui/src/FidesUITheme.tsx +++ b/clients/fidesui/src/FidesUITheme.tsx @@ -19,7 +19,7 @@ const solidBadge = defineStyle({ }); const taxonomyBadge = defineStyle({ bg: "transparent", - border: `1px solid ${palette.FIDESUI_NEUTRAL_75}`, + border: `1px solid ${palette.FIDESUI_NEUTRAL_100}`, }); const badgeTheme = defineStyleConfig({ From 808a60fdc53620b4f53beba02db3453f1944bd3b Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Mon, 13 Jan 2025 12:47:41 -0300 Subject: [PATCH 19/55] Improve classification badge styling --- .../ClassificationCategoryBadge.tsx | 23 ++++++-------- .../tables/cells/EditCategoryCell.tsx | 31 +++++++++++-------- 2 files changed, 28 insertions(+), 26 deletions(-) diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/ClassificationCategoryBadge.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/ClassificationCategoryBadge.tsx index b485bceab2..0a86e29624 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/ClassificationCategoryBadge.tsx +++ b/clients/admin-ui/src/features/data-discovery-and-detection/ClassificationCategoryBadge.tsx @@ -1,6 +1,6 @@ -import { Flex, FlexProps } from "fidesui"; +import { Badge, BadgeProps } from "fidesui"; -interface ClassificationCategoryBadgeProps extends FlexProps { +interface ClassificationCategoryBadgeProps extends BadgeProps { classification?: string | JSX.Element; children: React.ReactNode; } @@ -11,22 +11,19 @@ const ClassificationCategoryBadge = ({ ...props }: ClassificationCategoryBadgeProps) => { return ( - {children} - + ); }; diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx index d380816c49..0f490bd81d 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx +++ b/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx @@ -5,6 +5,7 @@ import { CloseIcon, EditIcon, SmallAddIcon, + Text, Wrap, } from "fidesui"; import { useState } from "react"; @@ -21,7 +22,7 @@ const AddCategoryButton = (props: ButtonProps) => ( + Automated infrastructure scanning - } + + { dispatch(changeStep()); diff --git a/clients/admin-ui/src/features/config-wizard/DataFlowScannerOption.tsx b/clients/admin-ui/src/features/config-wizard/DataFlowScannerOption.tsx new file mode 100644 index 0000000000..730e778b06 --- /dev/null +++ b/clients/admin-ui/src/features/config-wizard/DataFlowScannerOption.tsx @@ -0,0 +1,78 @@ +import { AntTooltip as Tooltip, Box } from "fidesui"; +import palette from "fidesui/src/palette/palette.module.scss"; + +import { useAppSelector } from "~/app/hooks"; +import ConnectedCircle from "~/features/common/ConnectedCircle"; +import { useFeatures } from "~/features/common/features"; +import { DataFlowScannerLogo } from "~/features/common/Icon"; +import { selectDataFlowScannerStatus } from "~/features/plus/plus.slice"; +import { ClusterHealth } from "~/types/api"; + +import CalloutNavCard from "../common/CalloutNavCard"; + +/** + * Wrapper around CalloutNavCard which handles data flow scanner specific + * logic, such as cluster health + * @param param0 + * @returns + */ +const DataFlowScannerOption = ({ onClick }: { onClick: () => void }) => { + const { plus, dataFlowScanning } = useFeatures(); + const scannerStatus = useAppSelector(selectDataFlowScannerStatus); + + const clusterHealth = scannerStatus?.cluster_health ?? "unknown"; + const isClusterHealthy = clusterHealth === ClusterHealth.HEALTHY; + + // If Plus is not enabled, do not show this feature at all + if (!plus) { + return null; + } + + let tooltip = null; + if (!dataFlowScanning) { + tooltip = + "The data flow scanner is not enabled, please check your configuration."; + } else if (!isClusterHealthy) { + tooltip = `Your cluster appears not to be healthy. Its status is ${clusterHealth}.`; + } + + const disabled = !dataFlowScanning || !isClusterHealthy; + + return ( + + + + + {dataFlowScanning ? ( + + ) : null} + + ); +}; + +export default DataFlowScannerOption; diff --git a/clients/admin-ui/src/features/config-wizard/SystemOption.tsx b/clients/admin-ui/src/features/config-wizard/SystemOption.tsx deleted file mode 100644 index a2991448cc..0000000000 --- a/clients/admin-ui/src/features/config-wizard/SystemOption.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import { - AntButton as Button, - AntButtonProps as ButtonProps, - Box, - Text, -} from "fidesui"; - -import { useAppSelector } from "~/app/hooks"; -import ConnectedCircle from "~/features/common/ConnectedCircle"; -import { useFeatures } from "~/features/common/features"; -import { DataFlowScannerLogo } from "~/features/common/Icon"; -import { selectDataFlowScannerStatus } from "~/features/plus/plus.slice"; -import { ClusterHealth } from "~/types/api"; - -interface SystemOptionProps extends ButtonProps { - label: string; - description: string; - icon: React.ReactElement; - onClick: () => void; -} - -const SystemOption = ({ - label, - description, - icon, - onClick, - ...buttonProps -}: SystemOptionProps) => ( - -); - -/** - * Wrapper around SystemOption which handles data flow scanner specific - * logic, such as cluster health - * @param param0 - * @returns - */ -export const DataFlowScannerOption = ({ onClick }: { onClick: () => void }) => { - const { plus, dataFlowScanning } = useFeatures(); - const scannerStatus = useAppSelector(selectDataFlowScannerStatus); - - const clusterHealth = scannerStatus?.cluster_health ?? "unknown"; - const isClusterHealthy = clusterHealth === ClusterHealth.HEALTHY; - - // If Plus is not enabled, do not show this feature at all - if (!plus) { - return null; - } - - let tooltip = ""; - if (!dataFlowScanning) { - tooltip = - "The data flow scanner is not enabled, please check your configuration."; - } else if (!isClusterHealthy) { - tooltip = `Your cluster appears not to be healthy. Its status is ${clusterHealth}.`; - } - - const disabled = !dataFlowScanning || !isClusterHealthy; - - return ( - - } - onClick={onClick} - disabled={disabled} - title={disabled ? tooltip : undefined} - data-testid="data-flow-scan-btn" - /> - {dataFlowScanning ? ( - - ) : null} - - ); -}; - -export default SystemOption; From 214b26fa7272d2abf0695c9bf42f7375909ea749 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Fri, 17 Jan 2025 10:46:34 -0300 Subject: [PATCH 46/55] Update database icon color --- clients/admin-ui/public/images/DatabaseIcon.svg | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/clients/admin-ui/public/images/DatabaseIcon.svg b/clients/admin-ui/public/images/DatabaseIcon.svg index b9a9914d22..3a6b2e6038 100644 --- a/clients/admin-ui/public/images/DatabaseIcon.svg +++ b/clients/admin-ui/public/images/DatabaseIcon.svg @@ -4,11 +4,11 @@ xmlns:svg="http://www.w3.org/2000/svg"> - + - + From b68e6ccf621f8e3736844b6ae5f3be0328bbf7b9 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Fri, 17 Jan 2025 10:52:31 -0300 Subject: [PATCH 47/55] Update chakra light gray to neutral 50 --- clients/admin-ui/src/features/datamap/CytoscapeGraph.tsx | 3 ++- .../features/privacy-requests/events-and-logs/EventLog.tsx | 5 ++++- .../src/features/system/history/SystemHistoryTable.tsx | 3 ++- .../src/features/system/history/modal/SystemHistoryModal.tsx | 3 ++- .../privacy_request/dsr_package/dsr_report_builder.py | 2 +- 5 files changed, 11 insertions(+), 5 deletions(-) diff --git a/clients/admin-ui/src/features/datamap/CytoscapeGraph.tsx b/clients/admin-ui/src/features/datamap/CytoscapeGraph.tsx index 235e1915dd..ac70f184d5 100644 --- a/clients/admin-ui/src/features/datamap/CytoscapeGraph.tsx +++ b/clients/admin-ui/src/features/datamap/CytoscapeGraph.tsx @@ -1,6 +1,7 @@ import cytoscape from "cytoscape"; import klay from "cytoscape-klay"; import { Box } from "fidesui"; +import palette from "fidesui/src/palette/palette.module.scss"; import dynamic from "next/dynamic"; import React, { useContext, useEffect, useMemo, useState } from "react"; @@ -57,7 +58,7 @@ const useCytoscapeGraph = ({ data }: { data: SpatialData }) => { }), [], ); - const backgroundColor = "#f7fafc"; + const backgroundColor = palette.FIDESUI_NEUTRAL_50; const styleSheet: cytoscape.Stylesheet[] = useMemo( () => [ { diff --git a/clients/admin-ui/src/features/privacy-requests/events-and-logs/EventLog.tsx b/clients/admin-ui/src/features/privacy-requests/events-and-logs/EventLog.tsx index 1507732b34..ef79160de5 100644 --- a/clients/admin-ui/src/features/privacy-requests/events-and-logs/EventLog.tsx +++ b/clients/admin-ui/src/features/privacy-requests/events-and-logs/EventLog.tsx @@ -10,6 +10,7 @@ import { Thead, Tr, } from "fidesui"; +import palette from "fidesui/src/palette/palette.module.scss"; import { ExecutionLog, ExecutionLogStatus } from "privacy-requests/types"; import { ActionType } from "~/types/api"; @@ -40,7 +41,9 @@ const EventLog = ({ eventLogs, openErrorPanel }: EventDetailsProps) => { key={detail.updated_at} _hover={{ backgroundColor: - detail.status === ExecutionLogStatus.ERROR ? "#F7FAFC" : "unset", + detail.status === ExecutionLogStatus.ERROR + ? palette.FIDESUI_NEUTRAL_50 + : "unset", }} onClick={() => { if (detail.status === ExecutionLogStatus.ERROR) { diff --git a/clients/admin-ui/src/features/system/history/SystemHistoryTable.tsx b/clients/admin-ui/src/features/system/history/SystemHistoryTable.tsx index 58a84db865..c2f522901c 100644 --- a/clients/admin-ui/src/features/system/history/SystemHistoryTable.tsx +++ b/clients/admin-ui/src/features/system/history/SystemHistoryTable.tsx @@ -9,6 +9,7 @@ import { Thead, Tr, } from "fidesui"; +import palette from "fidesui/src/palette/palette.module.scss"; import React, { useState } from "react"; import { useAppSelector } from "~/app/hooks"; @@ -100,7 +101,7 @@ const SystemHistoryTable = ({ system }: Props) => { p="16px" fontSize="12px" border="1px solid #E2E8F0" - background="#F7FAFC" + background={palette.FIDESUI_NEUTRAL_50} > System created on {formattedDate} at {formattedTime} diff --git a/clients/admin-ui/src/features/system/history/modal/SystemHistoryModal.tsx b/clients/admin-ui/src/features/system/history/modal/SystemHistoryModal.tsx index bb6c8f0527..ac0c6a6463 100644 --- a/clients/admin-ui/src/features/system/history/modal/SystemHistoryModal.tsx +++ b/clients/admin-ui/src/features/system/history/modal/SystemHistoryModal.tsx @@ -10,6 +10,7 @@ import { ModalOverlay, Spacer, } from "fidesui"; +import palette from "fidesui/src/palette/palette.module.scss"; import { SystemHistoryResponse } from "~/types/api"; @@ -59,7 +60,7 @@ const SystemHistoryModal = ({ selectedHistory, isOpen, onClose }: Props) => ( Date: Fri, 17 Jan 2025 11:04:37 -0300 Subject: [PATCH 48/55] Change link colors --- clients/fidesui/src/FidesUITheme.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/clients/fidesui/src/FidesUITheme.tsx b/clients/fidesui/src/FidesUITheme.tsx index d3f743d2ba..c891e473ea 100644 --- a/clients/fidesui/src/FidesUITheme.tsx +++ b/clients/fidesui/src/FidesUITheme.tsx @@ -55,6 +55,11 @@ const inputTheme = defineStyleConfig({ }, }, }); +const linkTheme = defineStyleConfig({ + baseStyle: { + color: palette.FIDESUI_LINK, + }, +}); export const theme: Dict = extendChakraTheme({ colors: { @@ -235,6 +240,7 @@ export const theme: Dict = extendChakraTheme({ components: { Badge: badgeTheme, Input: inputTheme, + Link: linkTheme, }, }); From fe2e0b44ba6f15e3e07c81a9b9c21cd5d6d73048 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Fri, 17 Jan 2025 11:12:02 -0300 Subject: [PATCH 49/55] Update users page colors --- .../user-management/DeleteUserModal.tsx | 9 +++- .../user-management/RoleDescriptionDrawer.tsx | 4 +- .../user-management/UserManagementRow.tsx | 43 ++----------------- 3 files changed, 12 insertions(+), 44 deletions(-) diff --git a/clients/admin-ui/src/features/user-management/DeleteUserModal.tsx b/clients/admin-ui/src/features/user-management/DeleteUserModal.tsx index 33dd26da18..0c1c1e7714 100644 --- a/clients/admin-ui/src/features/user-management/DeleteUserModal.tsx +++ b/clients/admin-ui/src/features/user-management/DeleteUserModal.tsx @@ -94,7 +94,12 @@ const DeleteUserModal = ({ Delete User - + @@ -125,7 +130,7 @@ const DeleteUserModal = ({ -
+
diff --git a/clients/admin-ui/src/features/user-management/RoleDescriptionDrawer.tsx b/clients/admin-ui/src/features/user-management/RoleDescriptionDrawer.tsx index 77c6e8fc89..e6f77dc709 100644 --- a/clients/admin-ui/src/features/user-management/RoleDescriptionDrawer.tsx +++ b/clients/admin-ui/src/features/user-management/RoleDescriptionDrawer.tsx @@ -14,11 +14,11 @@ const RoleDescriptionDrawer = () => ( key={role.roleKey} padding={4} borderRadius="md" - backgroundColor="blue.50" + backgroundColor="gray.75" fontSize="14px" > {role.label} - {role.description} + {role.description} ))} diff --git a/clients/admin-ui/src/features/user-management/UserManagementRow.tsx b/clients/admin-ui/src/features/user-management/UserManagementRow.tsx index 3813a98c99..99c95e35bf 100644 --- a/clients/admin-ui/src/features/user-management/UserManagementRow.tsx +++ b/clients/admin-ui/src/features/user-management/UserManagementRow.tsx @@ -64,19 +64,7 @@ const UserManagementRow = ({ user }: UserManagementRowProps) => { {user.username}{" "} {user.disabled && ( - + Invite sent )} @@ -92,38 +80,13 @@ const UserManagementRow = ({ user }: UserManagementRowProps) => { {permissionsLabels.map((permission) => ( - + {permission} ))} - + {userSystems ? userSystems.length : 0} From 4b0b11670997ff4b733904878993b182fc7fee1b Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Fri, 17 Jan 2025 11:16:33 -0300 Subject: [PATCH 50/55] Adjust checkbox colors --- clients/fidesui/src/FidesUITheme.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/clients/fidesui/src/FidesUITheme.tsx b/clients/fidesui/src/FidesUITheme.tsx index c891e473ea..c6d7cee7a5 100644 --- a/clients/fidesui/src/FidesUITheme.tsx +++ b/clients/fidesui/src/FidesUITheme.tsx @@ -60,6 +60,11 @@ const linkTheme = defineStyleConfig({ color: palette.FIDESUI_LINK, }, }); +const checkboxTheme = defineStyleConfig({ + defaultProps: { + colorScheme: "primary", + }, +}); export const theme: Dict = extendChakraTheme({ colors: { @@ -241,6 +246,7 @@ export const theme: Dict = extendChakraTheme({ Badge: badgeTheme, Input: inputTheme, Link: linkTheme, + Checkbox: checkboxTheme, }, }); From 7a0c8d4cdbfa985d841ae321b02dab39d4f0fe3f Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Fri, 17 Jan 2025 11:20:55 -0300 Subject: [PATCH 51/55] Update status privacy notice badge --- .../admin-ui/src/features/privacy-notices/cells.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/clients/admin-ui/src/features/privacy-notices/cells.tsx b/clients/admin-ui/src/features/privacy-notices/cells.tsx index 6e46ef17d5..f34dd31e4b 100644 --- a/clients/admin-ui/src/features/privacy-notices/cells.tsx +++ b/clients/admin-ui/src/features/privacy-notices/cells.tsx @@ -65,19 +65,19 @@ type TagNames = "available" | "enabled" | "inactive"; const systemsApplicableTags: Record = { available: { - backgroundColor: "orange.100", - color: "orange.800", + backgroundColor: "warn.100", + color: "minos", tooltip: "This notice is associated with a system + data use and can be enabled", }, enabled: { - backgroundColor: "green.100", - color: "green.800", + backgroundColor: "success.100", + color: "minos", tooltip: "This notice is active and available for consumers", }, inactive: { backgroundColor: "gray.100", - color: "gray.800", + color: "minos", tooltip: "This privacy notice cannot be enabled because it either does not have a data use or the linked data use has not been assigned to a system", }, From e6c57707de7d32b6f8aeb6c70f925f21b0674de1 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Fri, 17 Jan 2025 11:33:27 -0300 Subject: [PATCH 52/55] Adjust add system logos --- .../src/features/common/CalloutNavCard.tsx | 4 +-- .../src/features/common/Icon/AWSLogo.tsx | 15 ++++++---- .../common/Icon/DataFlowScannerLogo.tsx | 15 ++++++---- .../src/features/common/Icon/ManualSetup.tsx | 21 +++++++++----- .../src/features/common/Icon/OktaLogo.tsx | 29 ++++++++++++------- .../src/features/config-wizard/AddSystem.tsx | 8 ++--- .../config-wizard/DataFlowScannerOption.tsx | 2 +- 7 files changed, 57 insertions(+), 37 deletions(-) diff --git a/clients/admin-ui/src/features/common/CalloutNavCard.tsx b/clients/admin-ui/src/features/common/CalloutNavCard.tsx index c0e569eb3a..0606585ca1 100644 --- a/clients/admin-ui/src/features/common/CalloutNavCard.tsx +++ b/clients/admin-ui/src/features/common/CalloutNavCard.tsx @@ -28,11 +28,11 @@ const CalloutNavCard = ({ }} data-testid={`tile-${title}`} > -
+
{icon} {title} diff --git a/clients/admin-ui/src/features/common/Icon/AWSLogo.tsx b/clients/admin-ui/src/features/common/Icon/AWSLogo.tsx index ee26419748..18600e2502 100644 --- a/clients/admin-ui/src/features/common/Icon/AWSLogo.tsx +++ b/clients/admin-ui/src/features/common/Icon/AWSLogo.tsx @@ -2,19 +2,22 @@ import { createIcon } from "fidesui"; const AWSLogo = createIcon({ displayName: "AWSLogo", - viewBox: "0 0 34 34", + viewBox: "0 0 24 22", path: ( - + ), diff --git a/clients/admin-ui/src/features/common/Icon/DataFlowScannerLogo.tsx b/clients/admin-ui/src/features/common/Icon/DataFlowScannerLogo.tsx index 8ba335503a..ee598e1fc2 100644 --- a/clients/admin-ui/src/features/common/Icon/DataFlowScannerLogo.tsx +++ b/clients/admin-ui/src/features/common/Icon/DataFlowScannerLogo.tsx @@ -2,19 +2,22 @@ import { createIcon } from "fidesui"; const DataFlowScannerLogo = createIcon({ displayName: "DataFlowScannerLogo", - viewBox: "0 0 34 34", + viewBox: "0 0 22 20", path: ( - + ), diff --git a/clients/admin-ui/src/features/common/Icon/ManualSetup.tsx b/clients/admin-ui/src/features/common/Icon/ManualSetup.tsx index 012819d000..8b0de1a20b 100644 --- a/clients/admin-ui/src/features/common/Icon/ManualSetup.tsx +++ b/clients/admin-ui/src/features/common/Icon/ManualSetup.tsx @@ -2,30 +2,35 @@ import { createIcon } from "fidesui"; const ManualSetup = createIcon({ displayName: "ManualSetup", - viewBox: "0 0 34 34", + viewBox: "0 0 24 21", path: ( - + ), diff --git a/clients/admin-ui/src/features/common/Icon/OktaLogo.tsx b/clients/admin-ui/src/features/common/Icon/OktaLogo.tsx index 19cf2dfcc4..f7e9a58966 100644 --- a/clients/admin-ui/src/features/common/Icon/OktaLogo.tsx +++ b/clients/admin-ui/src/features/common/Icon/OktaLogo.tsx @@ -2,29 +2,38 @@ import { createIcon } from "fidesui"; const OktaLogo = createIcon({ displayName: "OktaLogo", - viewBox: "0 0 34 34", + viewBox: "0 0 22 16", path: ( - - + - + diff --git a/clients/admin-ui/src/features/config-wizard/AddSystem.tsx b/clients/admin-ui/src/features/config-wizard/AddSystem.tsx index c7388bf166..9ee3bd43f5 100644 --- a/clients/admin-ui/src/features/config-wizard/AddSystem.tsx +++ b/clients/admin-ui/src/features/config-wizard/AddSystem.tsx @@ -84,7 +84,7 @@ const AddSystem = () => { } + icon={} description="Manually add a system for services not covered by automated scanners" data-testid="manual-btn" /> @@ -105,7 +105,7 @@ const AddSystem = () => { } + icon={} description="Choose vendors and automatically populate system details" data-testid="multiple-btn" /> @@ -129,7 +129,7 @@ const AddSystem = () => { title="Scan your infrastructure (AWS)" color={palette.FIDESUI_TERRACOTTA} description="Automatically discover new systems in your AWS infrastructure" - icon={} + icon={} data-testid="aws-btn" /> @@ -146,7 +146,7 @@ const AddSystem = () => { title="Scan your Sign On Provider (Okta)" color={palette.FIDESUI_MINOS} description="Automatically discover new systems in your Okta infrastructure" - icon={} + icon={} data-testid="okta-btn" /> diff --git a/clients/admin-ui/src/features/config-wizard/DataFlowScannerOption.tsx b/clients/admin-ui/src/features/config-wizard/DataFlowScannerOption.tsx index 730e778b06..4c7d7c5292 100644 --- a/clients/admin-ui/src/features/config-wizard/DataFlowScannerOption.tsx +++ b/clients/admin-ui/src/features/config-wizard/DataFlowScannerOption.tsx @@ -52,7 +52,7 @@ const DataFlowScannerOption = ({ onClick }: { onClick: () => void }) => { title="Data flow scan" color={palette.FIDESUI_NECTAR} description="Automatically discover new systems in your Kubernetes infrastructure" - icon={} + icon={} data-testid="data-flow-scan-btn" /> From d5f35d2a78e2b2f68e3b5cd542c027bc186e13a5 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Fri, 17 Jan 2025 11:58:34 -0300 Subject: [PATCH 53/55] Revert accidental change of config.json --- clients/privacy-center/config/config.json | 65 ++++++++++++++++++++++- 1 file changed, 64 insertions(+), 1 deletion(-) diff --git a/clients/privacy-center/config/config.json b/clients/privacy-center/config/config.json index d4fdc1dacc..392198c92d 100644 --- a/clients/privacy-center/config/config.json +++ b/clients/privacy-center/config/config.json @@ -33,5 +33,68 @@ "confirmButtonText": "Continue", "cancelButtonText": "Cancel" } - ] + ], + "includeConsent": true, + "consent": { + "button": { + "description": "Manage your consent preferences, including the option to select 'Do Not Sell or Share My Personal Information'.", + "description_subtext": [ + "In order to opt-out of certain consent preferences, we may need to identify your account via your email address. This is optional." + ], + "icon_path": "/consent.svg", + "identity_inputs": { + "email": "optional" + }, + "title": "Manage your consent", + "modalTitle": "Manage your consent", + "confirmButtonText": "Continue", + "cancelButtonText": "Cancel" + }, + "page": { + "consentOptions": [ + { + "fidesDataUseKey": "marketing.advertising", + "name": "Data Sales or Sharing", + "description": "We may use some of your personal information for behavioral advertising purposes, which may be interpreted as 'Data Sales' or 'Data Sharing' under regulations such as CCPA, CPRA, VCDPA, etc.", + "url": "https://example.com/privacy#data-sales", + "default": { + "value": true, + "globalPrivacyControl": false + }, + "highlight": false, + "cookieKeys": ["data_sales"], + "executable": false + }, + { + "fidesDataUseKey": "marketing.advertising.first_party", + "name": "Email Marketing", + "description": "We may use some of your personal information to contact you about our products & services.", + "url": "https://example.com/privacy#email-marketing", + "default": { + "value": true, + "globalPrivacyControl": false + }, + "highlight": false, + "cookieKeys": ["tracking"], + "executable": false + }, + { + "fidesDataUseKey": "functional", + "name": "Product Analytics", + "description": "We may use some of your personal information to collect analytics about how you use our products & services.", + "url": "https://example.com/privacy#analytics", + "default": true, + "highlight": false, + "cookieKeys": ["analytics"], + "executable": false + } + ], + "description": "Manage your consent preferences, including the option to select 'Do Not Sell or Share My Personal Information'.", + "description_subtext": [ + "When you use our services, you're trusting us with your information. We understand this is a big responsibility and work hard to protect your information and put you in control." + ], + "policy_key": "default_consent_policy", + "title": "Manage your consent" + } + } } From 078f452cdc54e85ccfc1e5a4f39f0f4e8208b0a8 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Fri, 17 Jan 2025 12:32:05 -0300 Subject: [PATCH 54/55] Move component styles to scss module. Add subtle shadow on hover. --- .../common/CalloutNavCard.module.scss | 20 +++++++++++++++++++ .../src/features/common/CalloutNavCard.tsx | 15 ++++---------- 2 files changed, 24 insertions(+), 11 deletions(-) create mode 100644 clients/admin-ui/src/features/common/CalloutNavCard.module.scss diff --git a/clients/admin-ui/src/features/common/CalloutNavCard.module.scss b/clients/admin-ui/src/features/common/CalloutNavCard.module.scss new file mode 100644 index 0000000000..f50302a420 --- /dev/null +++ b/clients/admin-ui/src/features/common/CalloutNavCard.module.scss @@ -0,0 +1,20 @@ +.container { + border-radius: 6px; + display: flex; + flex-grow: 1; + + transition: box-shadow 0.2s ease-in-out; + + &:hover { + box-shadow: + 0px 1px 2px 0px rgba(0, 0, 0, 0.06), + 0px 1px 3px 0px rgba(0, 0, 0, 0.1); + } +} + +.card { + flex-grow: 1; + border-radius: 0px 6px 6px 0px; + border-left: none; + background-color: var(--fidesui-corinth); +} diff --git a/clients/admin-ui/src/features/common/CalloutNavCard.tsx b/clients/admin-ui/src/features/common/CalloutNavCard.tsx index 0606585ca1..49eeb21678 100644 --- a/clients/admin-ui/src/features/common/CalloutNavCard.tsx +++ b/clients/admin-ui/src/features/common/CalloutNavCard.tsx @@ -1,5 +1,6 @@ import { AntCard as Card, AntTypography as Typography, Box } from "fidesui"; -import palette from "fidesui/src/palette/palette.module.scss"; + +import styles from "./CalloutNavCard.module.scss"; interface CalloutNavCardProps { color: string; @@ -17,17 +18,9 @@ const CalloutNavCard = ({ - +
{icon} Date: Fri, 17 Jan 2025 14:31:10 -0300 Subject: [PATCH 55/55] Fix cypress tests --- clients/admin-ui/src/features/config-wizard/AddSystem.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/clients/admin-ui/src/features/config-wizard/AddSystem.tsx b/clients/admin-ui/src/features/config-wizard/AddSystem.tsx index 9ee3bd43f5..580bc5b0ef 100644 --- a/clients/admin-ui/src/features/config-wizard/AddSystem.tsx +++ b/clients/admin-ui/src/features/config-wizard/AddSystem.tsx @@ -80,13 +80,13 @@ const AddSystem = () => { dispatch(setAddSystemsMethod(SystemMethods.MANUAL)); router.push(ADD_SYSTEMS_MANUAL_ROUTE); }} + data-testid="manual-btn" > } description="Manually add a system for services not covered by automated scanners" - data-testid="manual-btn" /> @@ -124,13 +124,13 @@ const AddSystem = () => { dispatch(setAddSystemsMethod(ValidTargets.AWS)); dispatch(changeStep()); }} + data-testid="aws-btn" > } - data-testid="aws-btn" />