feat: Styled cookie banner, added link to cookie settings (#318)

* feat: Styled cookie banner, added link to cookie settings * refactor: Added back missing newlines * feat: Added focus behavior * feat: Added visually hidden text for cookie button
allen-cell-animated · Sep 3, 2024 · 94cfb20 · 94cfb20
1 parent 33f499e
commit 94cfb20
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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 {
       <ContentContainer style={{ paddingBottom: "400px" }}>
         <ProjectList>{landingPageContent.map(renderProject)}</ProjectList>
       </ContentContainer>
+
+      <ContentContainer style={{ padding: "0 30px 40px 30px" }}>
+        <Divider />
+        <FlexColumnAlignCenter style={{ paddingTop: "20px" }}>
+          <CookieSettingsButton type="text" className="ot-sdk-show-settings">
+            Cookie settings
+            <VisuallyHidden>(opens popup menu)</VisuallyHidden>
+          </CookieSettingsButton>
+        </FlexColumnAlignCenter>
+      </ContentContainer>
     </div>
   );
 }