diff --git a/CHANGELOG.md b/CHANGELOG.md index df848dd294..ead22a814a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,8 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o ## [Unreleased](https://github.com/ethyca/fides/compare/2.53.0...main) +### Changed +- Updated UI colors to new brand. Update logo, homepage cards. [#5668](https://github.com/ethyca/fides/pull/5668) diff --git a/clients/admin-ui/cypress/components/MainSideNav.cy.tsx b/clients/admin-ui/cypress/components/MainSideNav.cy.tsx index aad7c13b42..b351f5c995 100644 --- a/clients/admin-ui/cypress/components/MainSideNav.cy.tsx +++ b/clients/admin-ui/cypress/components/MainSideNav.cy.tsx @@ -7,7 +7,7 @@ import { NavConfigGroup, } from "~/features/common/nav/v2/nav-config"; -const ACTIVE_BACKGROUND_COLOR = "rgb(119, 69, 240)"; +const ACTIVE_BACKGROUND_COLOR = "rgb(206, 202, 194)"; const INACTIVE_BACKGROUND_COLOR = "rgba(0, 0, 0, 0)"; const selectLinkColor = (title: string) => diff --git a/clients/admin-ui/cypress/e2e/nav-bar.cy.ts b/clients/admin-ui/cypress/e2e/nav-bar.cy.ts index cb200ca52e..fe58e40274 100644 --- a/clients/admin-ui/cypress/e2e/nav-bar.cy.ts +++ b/clients/admin-ui/cypress/e2e/nav-bar.cy.ts @@ -42,7 +42,7 @@ describe("Nav Bar", () => { }); it("styles the active navigation link based on the current route", () => { - const ACTIVE_COLOR = "rgb(119, 69, 240)"; + const ACTIVE_COLOR = "rgb(206, 202, 194)"; // Start on the Home page cy.visit("/"); diff --git a/clients/admin-ui/public/images/DatabaseIcon.svg b/clients/admin-ui/public/images/DatabaseIcon.svg index 7fe06e8267..3a6b2e6038 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 3dd105c030..51ffc6f57b 100644 --- a/clients/admin-ui/public/images/SelectedDatabaseIcon.svg +++ b/clients/admin-ui/public/images/SelectedDatabaseIcon.svg @@ -1,2 +1,84 @@ - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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/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 new file mode 100644 index 0000000000..49eeb21678 --- /dev/null +++ b/clients/admin-ui/src/features/common/CalloutNavCard.tsx @@ -0,0 +1,39 @@ +import { AntCard as Card, AntTypography as Typography, Box } from "fidesui"; + +import styles from "./CalloutNavCard.module.scss"; + +interface CalloutNavCardProps { + color: string; + title: string; + description: string; + icon?: React.ReactElement; +} + +const CalloutNavCard = ({ + color, + description, + title, + icon, +}: CalloutNavCardProps) => ( + + +
+ {icon} + + {title} + +
+ + {description} + + + +); +export default CalloutNavCard; diff --git a/clients/admin-ui/src/features/common/DaysLeftTag.tsx b/clients/admin-ui/src/features/common/DaysLeftTag.tsx index 4e9a056f57..a5beab0bfc 100644 --- a/clients/admin-ui/src/features/common/DaysLeftTag.tsx +++ b/clients/admin-ui/src/features/common/DaysLeftTag.tsx @@ -24,15 +24,15 @@ const DaysLeftTag = ({ daysLeft, includeText, status }: DaysLeftTagProps) => { switch (true) { case daysLeft >= 10: - backgroundColor = "green.500"; + backgroundColor = "success.500"; break; case daysLeft < 10 && daysLeft > 4: - backgroundColor = "orange.500"; + backgroundColor = "warn.500"; break; case daysLeft < 5: - backgroundColor = "red.400"; + backgroundColor = "error.500"; break; default: 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/common/InfoBox.tsx b/clients/admin-ui/src/features/common/InfoBox.tsx index 6d1e35925c..6cf899cedc 100644 --- a/clients/admin-ui/src/features/common/InfoBox.tsx +++ b/clients/admin-ui/src/features/common/InfoBox.tsx @@ -19,7 +19,6 @@ const InfoBox = ({ )} - + {title} diff --git a/clients/admin-ui/src/features/common/PickerCard.tsx b/clients/admin-ui/src/features/common/PickerCard.tsx index 65bf633cbc..af535b5979 100644 --- a/clients/admin-ui/src/features/common/PickerCard.tsx +++ b/clients/admin-ui/src/features/common/PickerCard.tsx @@ -87,12 +87,7 @@ export const PickerCheckboxList = ({ {toggle ?? null} {numSelected > 0 ? ( - + {numSelected} selected ) : null} diff --git a/clients/admin-ui/src/features/common/RequestStatusBadge.tsx b/clients/admin-ui/src/features/common/RequestStatusBadge.tsx index 00b7687430..1e56e65b2d 100644 --- a/clients/admin-ui/src/features/common/RequestStatusBadge.tsx +++ b/clients/admin-ui/src/features/common/RequestStatusBadge.tsx @@ -6,47 +6,47 @@ export const statusPropMap: { [key in PrivacyRequestStatus]: BadgeProps & { label?: string }; } = { approved: { - bg: "yellow.500", + bg: "success.100", label: "Approved", }, complete: { - bg: "green.500", + bg: "success.100", label: "Completed", }, awaiting_email_send: { - bg: "gray.400", + bg: "olive.100", label: "Awaiting Email Send", }, denied: { - bg: "red.500", + bg: "error.100", label: "Denied", }, canceled: { - bg: "red.600", + bg: "white.100", label: "Canceled", }, error: { - bg: "red.800", + bg: "error.100", label: "Error", }, in_processing: { - bg: "orange.500", + bg: "nectar.100", label: "In Progress", }, paused: { - bg: "gray.400", + bg: "sandstone.100", label: "Paused", }, pending: { - bg: "blue.400", + bg: "alert.100", label: "New", }, identity_unverified: { - bg: "red.400", + bg: "error.100", label: "Unverified", }, requires_input: { - bg: "yellow.400", + bg: "warn.100", label: "Requires Input", }, }; @@ -57,11 +57,10 @@ interface RequestBadgeProps { const RequestStatusBadge = ({ status }: RequestBadgeProps) => ( diff --git a/clients/admin-ui/src/features/common/Tag.tsx b/clients/admin-ui/src/features/common/Tag.tsx deleted file mode 100644 index 18eb34633f..0000000000 --- a/clients/admin-ui/src/features/common/Tag.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Tag as BaseTag } from "fidesui"; -import { ReactNode } from "react"; - -const Tag = ({ children }: { children: ReactNode }) => ( - - {children} - -); - -export default Tag; diff --git a/clients/admin-ui/src/features/common/TaxonomiesPicker.tsx b/clients/admin-ui/src/features/common/TaxonomiesPicker.tsx index 290fccbaf2..52842dcd2b 100644 --- a/clients/admin-ui/src/features/common/TaxonomiesPicker.tsx +++ b/clients/admin-ui/src/features/common/TaxonomiesPicker.tsx @@ -42,6 +42,7 @@ const TaxonomiesPicker = ({ data-testid={`classification-${category}`} px={1.5} key={category} + variant="taxonomy" > {getDataCategoryDisplayName(category)} } onClick={() => setIsAdding(true)} - className=" max-h-[20px] max-w-[20px] rounded-sm border-none bg-gray-100 hover:!bg-gray-200" data-testid="add-category-btn" aria-label="Add category" + style={{ + height: "22px", + width: "22px", + }} /> {isAdding && ( 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/common/form/inputs.tsx b/clients/admin-ui/src/features/common/form/inputs.tsx index 4ffc5a22fa..87a3dbec96 100644 --- a/clients/admin-ui/src/features/common/form/inputs.tsx +++ b/clients/admin-ui/src/features/common/form/inputs.tsx @@ -441,7 +441,7 @@ export const CustomRadioGroup = ({ onChange={handleChange} value={selected?.value} data-testid={`input-${field.name}`} - colorScheme="secondary" + colorScheme="primary" > {options.map((o) => ( 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 60a27062f7..2c2d49c8f8 100644 --- a/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx +++ b/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx @@ -21,6 +21,7 @@ import { UserIcon, VStack, } from "fidesui"; +import palette from "fidesui/src/palette/palette.module.scss"; import NextLink from "next/link"; import { useRouter } from "next/router"; @@ -35,16 +36,13 @@ import { useNav } from "./hooks"; import { ActiveNav, NavGroup, NavGroupChild } from "./nav-config"; import { INDEX_ROUTE } from "./routes"; -const LINK_HOVER_BACKGROUND_COLOR = "#28303F"; -const LINK_ACTIVE_BACKGROUND_COLOR = "#7745F0"; -const LINK_COLOR = "#CBD5E0"; -const NAV_BACKGROUND_COLOR = "#191D27"; +const NAV_BACKGROUND_COLOR = palette.FIDESUI_MINOS; const NAV_WIDTH = "200px"; const FidesLogoHomeLink = () => ( - Fides Logo + Fides Logo ); @@ -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/admin-ui/src/features/common/system-data-flow/DataFlowSystemsModal.tsx b/clients/admin-ui/src/features/common/system-data-flow/DataFlowSystemsModal.tsx index d3029a24f0..40e4b7f948 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 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 b04076f2e9..5f35191a60 100644 --- a/clients/admin-ui/src/features/common/table/v2/cells.tsx +++ b/clients/admin-ui/src/features/common/table/v2/cells.tsx @@ -58,23 +58,7 @@ export const DefaultCell = ({ }; const FidesBadge = ({ children, ...props }: BadgeProps) => ( - - {children} - + {children} ); export const RelativeTimestampCell = ({ @@ -300,11 +284,7 @@ export const IndeterminateCheckboxCell = ({ justifyContent="center" onClick={(e) => e.stopPropagation()} > - + ); diff --git a/clients/admin-ui/src/features/config-wizard/AddSystem.tsx b/clients/admin-ui/src/features/config-wizard/AddSystem.tsx index 5441dce585..580bc5b0ef 100644 --- a/clients/admin-ui/src/features/config-wizard/AddSystem.tsx +++ b/clients/admin-ui/src/features/config-wizard/AddSystem.tsx @@ -1,4 +1,5 @@ import { Box, Heading, SimpleGrid, Stack, Text, useDisclosure } from "fidesui"; +import palette from "fidesui/src/palette/palette.module.scss"; import { useRouter } from "next/router"; import { useAppDispatch } from "~/app/hooks"; @@ -15,8 +16,9 @@ import { } from "~/features/common/nav/v2/routes"; import { ValidTargets } from "~/types/api"; +import CalloutNavCard from "../common/CalloutNavCard"; import { changeStep, setAddSystemsMethod } from "./config-wizard.slice"; -import SystemOption, { DataFlowScannerOption } from "./SystemOption"; +import DataFlowScannerOption from "./DataFlowScannerOption"; import { SystemMethods } from "./types"; const SectionTitle = ({ children }: { children: string }) => ( @@ -70,20 +72,27 @@ const AddSystem = () => { Manually add systems - } - description="Manually add a system for services not covered by automated scanners" + + 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..4c7d7c5292 --- /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 8e57c6aa6c..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; diff --git a/clients/admin-ui/src/features/consent-settings/FrameworkStatus.tsx b/clients/admin-ui/src/features/consent-settings/FrameworkStatus.tsx index aedd0e4f09..e9d35d11f1 100644 --- a/clients/admin-ui/src/features/consent-settings/FrameworkStatus.tsx +++ b/clients/admin-ui/src/features/consent-settings/FrameworkStatus.tsx @@ -19,15 +19,11 @@ const FrameworkStatus = ({ {name} status{" "} {enabled ? ( - + Enabled ) : ( - + Disabled )} 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 0d672020cc..7d7c93b293 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,17 @@ const ClassificationCategoryBadge = ({ ...props }: ClassificationCategoryBadgeProps) => { return ( - {children} - + ); }; diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/action-center/DisabledMonitorsPage.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/action-center/DisabledMonitorsPage.tsx index cb80d6c6ba..d194a76a4e 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/action-center/DisabledMonitorsPage.tsx +++ b/clients/admin-ui/src/features/data-discovery-and-detection/action-center/DisabledMonitorsPage.tsx @@ -14,7 +14,7 @@ export const DisabledMonitorsPage = ({ {isConfigLoading ? ( - + ) : ( ( 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} 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..1023e05558 100644 --- a/clients/admin-ui/src/home/HomeContent.tsx +++ b/clients/admin-ui/src/home/HomeContent.tsx @@ -1,9 +1,10 @@ -import { Flex, SimpleGrid, Text } from "fidesui"; +import { Flex, SimpleGrid } from "fidesui"; import NextLink from "next/link"; import * as React from "react"; import { useMemo } from "react"; import { useAppSelector } from "~/app/hooks"; +import CalloutNavCard from "~/features/common/CalloutNavCard"; import { useFeatures } from "~/features/common/features"; import { selectThisUsersScopes } from "~/features/user-management"; @@ -31,59 +32,12 @@ const HomeContent = () => { {list .sort((a, b) => (a.sortOrder > b.sortOrder ? 1 : -1)) .map((item) => ( - - - - {item.title} - - - {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/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 = () => { FidesUI logo - FidesUI logo + Fides logo 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", }} > - + 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 = () => { FidesUI logo @@ -265,9 +265,9 @@ const Login: NextPage = () => { FidesUI logo diff --git a/clients/admin-ui/src/pages/user-management/profile/[id].tsx b/clients/admin-ui/src/pages/user-management/profile/[id].tsx index a57eda907f..0ed7ea3d3f 100644 --- a/clients/admin-ui/src/pages/user-management/profile/[id].tsx +++ b/clients/admin-ui/src/pages/user-management/profile/[id].tsx @@ -51,7 +51,7 @@ const Profile = () => { {isLoadingUser && ( - + )} {!isLoadingUser && !existingUser && ( diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css index 79e1d866df..1841d53a3f 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 d6aced1a03..c6d7cee7a5 100644 --- a/clients/fidesui/src/FidesUITheme.tsx +++ b/clients/fidesui/src/FidesUITheme.tsx @@ -1,47 +1,233 @@ -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((props) => ({ + bg: props.colorScheme + ? `${props.colorScheme}.100` + : 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_100}`, +}); + +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, + // for backwards compatibility with previous styles + solid: solidBadge, + }, + baseStyle: { + borderRadius: "4px", + color: palette.FIDESUI_MINOS, + paddingInlineStart: "var(--chakra-space-1-5)", + paddingInlineEnd: "var(--chakra-space-1-5)", + textTransform: "none", + fontWeight: "normal", + }, +}); + +const inputTheme = defineStyleConfig({ + variants: { + outline: { + field: { + // Remove blue highlight on focused inputs + _focusVisible: { + outline: 0, + boxShadow: "none", + borderColor: "initial", + }, + }, + }, + }, +}); +const linkTheme = defineStyleConfig({ + baseStyle: { + color: palette.FIDESUI_LINK, + }, +}); +const checkboxTheme = defineStyleConfig({ + defaultProps: { + colorScheme: "primary", + }, +}); + 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", - }, - secondary: { - 50: "#E4FBF2", - 100: "#BCF5DD", - 200: "#8FEFC7", - 300: "#62E9B1", - 400: "#41E4A0", - 500: "#1FDF8F", - 600: "#1BDB87", - 700: "#17D77C", - 800: "#12D272", - 900: "#0ACA60", + 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, }, complimentary: { - 50: "#F0EAFD", - 100: "#DACAFB", - 200: "#C1A7F9", - 300: "#A883F6", - 400: "#9569F4", - 500: "#824EF2", - 600: "#7A47F0", - 700: "#6F3DEE", - 800: "#6535EC", - 900: "#5225E8", - }, - minos: { - 500: "#2b2e35", + 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, + }, + 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, + }, + sandstone: { + 50: palette.FIDESUI_BG_SANDSTONE, + 100: palette.FIDESUI_BG_SANDSTONE, + 200: palette.FIDESUI_BG_SANDSTONE, + 300: palette.FIDESUI_SANDSTONE, + 400: palette.FIDESUI_SANDSTONE, + 500: palette.FIDESUI_SANDSTONE, + 600: palette.FIDESUI_SANDSTONE, + 700: palette.FIDESUI_SANDSTONE, + 800: palette.FIDESUI_SANDSTONE, + 900: palette.FIDESUI_SANDSTONE, + }, + olive: { + 50: palette.FIDESUI_BG_OLIVE, + 100: palette.FIDESUI_BG_OLIVE, + 200: palette.FIDESUI_BG_OLIVE, + 300: palette.FIDESUI_OLIVE, + 400: palette.FIDESUI_OLIVE, + 500: palette.FIDESUI_OLIVE, + 600: palette.FIDESUI_OLIVE, + 700: palette.FIDESUI_OLIVE, + 800: palette.FIDESUI_OLIVE, + 900: palette.FIDESUI_OLIVE, + }, + marble: { + 50: palette.FIDESUI_BG_MARBLE, + 100: palette.FIDESUI_BG_MARBLE, + 200: palette.FIDESUI_BG_MARBLE, + 300: palette.FIDESUI_MARBLE, + 400: palette.FIDESUI_MARBLE, + 500: palette.FIDESUI_MARBLE, + 600: palette.FIDESUI_MARBLE, + 700: palette.FIDESUI_MARBLE, + 800: palette.FIDESUI_MARBLE, + 900: palette.FIDESUI_MARBLE, + }, + nectar: { + 50: palette.FIDESUI_BG_NECTAR, + 100: palette.FIDESUI_BG_NECTAR, + 200: palette.FIDESUI_BG_NECTAR, + 300: palette.FIDESUI_NECTAR, + 400: palette.FIDESUI_NECTAR, + 500: palette.FIDESUI_NECTAR, + 600: palette.FIDESUI_NECTAR, + 700: palette.FIDESUI_NECTAR, + 800: palette.FIDESUI_NECTAR, + 900: palette.FIDESUI_NECTAR, + }, + 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, + 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, + }, + 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, + }, + 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, + }, + alert: { + 100: palette.FIDESUI_BG_ALERT, + 200: palette.FIDESUI_BG_ALERT, + 300: palette.FIDESUI_ALERT, + 400: palette.FIDESUI_ALERT, + 500: palette.FIDESUI_ALERT, + 600: palette.FIDESUI_ALERT, + 700: palette.FIDESUI_ALERT, + 800: palette.FIDESUI_ALERT, + 900: palette.FIDESUI_ALERT, + }, + 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, + }, + error: { + 100: palette.FIDESUI_BG_ERROR, + 200: palette.FIDESUI_BG_ERROR, + 300: palette.FIDESUI_ERROR, + 400: palette.FIDESUI_ERROR, + 500: palette.FIDESUI_ERROR, + 600: palette.FIDESUI_ERROR, + 700: palette.FIDESUI_ERROR, + 800: palette.FIDESUI_ERROR, + 900: palette.FIDESUI_ERROR, + }, + "success-text": { + 900: palette.FIDESUI_SUCCESS_TEXT, + }, + "error-text": { + 900: palette.FIDESUI_ERROR_TEXT, + }, + link: { + 900: palette.FIDESUI_LINK, }, }, fonts: { @@ -52,9 +238,16 @@ export const theme: Dict = extendChakraTheme({ global: { body: { bg: "gray.100", + color: palette.FIDESUI_MINOS, }, }, }, + components: { + Badge: badgeTheme, + Input: inputTheme, + Link: linkTheme, + Checkbox: checkboxTheme, + }, }); // Wrap the Chakra extendTheme function in our own extendTheme function which diff --git a/clients/privacy-center/components/BrandLink.tsx b/clients/privacy-center/components/BrandLink.tsx index d614c0afd6..44e14ea66e 100644 --- a/clients/privacy-center/components/BrandLink.tsx +++ b/clients/privacy-center/components/BrandLink.tsx @@ -27,7 +27,7 @@ const BrandLink = ({ > Powered by{" "} ( > {description} {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 > 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 @@ - + diff --git a/src/fides/api/service/privacy_request/dsr_package/dsr_report_builder.py b/src/fides/api/service/privacy_request/dsr_package/dsr_report_builder.py index 1fcf12f5ff..00848259a2 100644 --- a/src/fides/api/service/privacy_request/dsr_package/dsr_report_builder.py +++ b/src/fides/api/service/privacy_request/dsr_package/dsr_report_builder.py @@ -16,7 +16,7 @@ DSR_DIRECTORY = Path(__file__).parent.resolve() TEXT_COLOR = "#4A5568" -HEADER_COLOR = "#F7FAFC" +HEADER_COLOR = "#FAFAFA" BORDER_COLOR = "#E2E8F0"