diff --git a/public/App.css b/public/App.css index c21c6878..6c4fa420 100644 --- a/public/App.css +++ b/public/App.css @@ -11,3 +11,37 @@ body { .cell-viewer-app { width: 100vw; } + +#onetrust-consent-sdk { + & #onetrust-banner-sdk { + border-radius: 5px; + + & #onetrust-pc-btn-handler { + font-weight: 400; + padding: 12px 10px; + } + } + + /* Darken all text for increased contrast */ + & h1, + & h2, + & h3, + & h4, + & p, + & #onetrust-policy-text { + color: #323233 !important; + } + + /* Add margin to top of cookie banner popup's header for visual consistency */ + & #onetrust-pc-sdk { + & #ot-pc-title { + margin-top: 20px; + } + } + + & #accept-recommended-btn-handler, + & #onetrust-accept-btn-handler, + & .save-preference-btn-handler { + border-radius: 6px; + } +} diff --git a/src/aics-image-viewer/components/StyleProvider/index.tsx b/src/aics-image-viewer/components/StyleProvider/index.tsx index 092886ae..e689d132 100644 --- a/src/aics-image-viewer/components/StyleProvider/index.tsx +++ b/src/aics-image-viewer/components/StyleProvider/index.tsx @@ -422,6 +422,10 @@ export default function StyleProvider(props: PropsWithChildren<{}>): ReactElemen borderRadiusLG: 0, colorTextHeading: theme.colors.text.section, }, + Divider: { + colorSplit: theme.colors.layout.dividers, + marginLG: 0, + }, Layout: { siderBg: theme.colors.controlPanel.bg, }, diff --git a/website/components/LandingPage/index.tsx b/website/components/LandingPage/index.tsx index a1e20f98..8c4ea1ab 100644 --- a/website/components/LandingPage/index.tsx +++ b/website/components/LandingPage/index.tsx @@ -1,6 +1,6 @@ import { faUpRightFromSquare } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Button, Tooltip } from "antd"; +import { Button, Divider, Tooltip } from "antd"; import React, { ReactElement, useEffect, useState } from "react"; import { useNavigate } from "react-router"; import { useSearchParams } from "react-router-dom"; @@ -222,6 +222,14 @@ const InReviewFlag = styled(FlexRowAlignCenter)` } `; +const CookieSettingsButton = styled(Button)` + color: var(--color-text-body); + &:focus-visible > span, + &:hover > span { + text-decoration: underline; + } +`; + export default function LandingPage(): ReactElement { // Rendering const navigation = useNavigate(); @@ -396,6 +404,16 @@ export default function LandingPage(): ReactElement { {landingPageContent.map(renderProject)} + + + + + + Cookie settings + (opens popup menu) + + + ); }