Merge pull request #852 from streamlit/cookie-banner-enhancements

Cookie banner enhancements

components/navigation/footer.js

@@ -2,7 +2,7 @@ import Link from "next/link";
 
 import styles from "./footer.module.css";
 
-const Footer = () => {
+const Footer = ({ setIsTelemetryModalVisible }) => {
   return (
     <footer className={styles.Container}>
       <section className={styles.InnerContainer}>
@@ -302,9 +302,17 @@ const Footer = () => {
             </i>
           </a>
         </section>
-        <p className={styles.Copyright}>
-          Copyright &copy; {new Date().getFullYear()}, Streamlit Inc.
-        </p>
+        <div className={styles.Copyright}>
+          <span>
+            Copyright &copy; {new Date().getFullYear()}, Streamlit Inc.
+          </span>
+          <button
+            className="hover:opacity-80 ml-2"
+            onClick={() => setIsTelemetryModalVisible(true)}
+          >
+            Cookie policy
+          </button>
+        </div>
       </section>
     </footer>
   );

components/utilities/breadCrumbs.js

@@ -65,7 +65,7 @@ const BreadCrumbs = ({ slug, menu }) => {
   }
 
   // Then, we add a couple pages that don't need breadcrumbs, such as /menu, /index, etc.
-  filesToExclude.push("index", "gdpr-banner", "menu");
+  filesToExclude.push("index", "gdpr-banner", "menu", "cookie-settings");
 
   // Now, we throw the error if any page that's not on the filesToExclude array is missing in menu.md
   if (path.length === 0 && !filesToExclude.includes(slug[0])) {

components/utilities/cookieSettingsModal.js

@@ -0,0 +1,73 @@
+import classNames from "classnames";
+import { MDXRemote } from "next-mdx-remote";
+
+import styles from "./cookieSettingsModal.module.css";
+
+export default function CookieSettingsModal({
+  setIsTelemetryModalVisible,
+  declineTelemetryAndCloseBanner,
+  allowTelemetryAndCloseBanner,
+  content,
+}) {
+  return (
+    <div className="fixed w-full h-full z-40 bg-gray-90 bg-opacity-90 top-0 flex items-center justify-center">
+      <div
+        className={classNames(
+          styles.Container,
+          "relative",
+          "bg-white rounded-xl",
+          "p-8 md:p-12",
+          "w-full max-w-4xl",
+          "overscroll-none overflow-y-auto",
+          "max-h-screen"
+        )}
+      >
+        <button
+          className="absolute right-4 top-4 md:right-11 md:top-11 fill-gray-70"
+          onClick={() => setIsTelemetryModalVisible(false)}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 -960 960 960"
+            className="mt-2 w-8 h-8 hover:bg-gray-30 rounded"
+          >
+            <path d="m253.897-229.795-24.102-24.102L455.897-480 229.795-706.103l24.102-24.102L480-504.103l226.103-226.102 24.102 24.102L504.103-480l226.102 226.103-24.102 24.102L480-455.897 253.897-229.795Z" />
+          </svg>
+        </button>
+        <MDXRemote {...content} />
+        <button
+          className={classNames(
+            "mt-4 md:mt-8",
+            "py-2 px-3",
+            "text-gray-90",
+            "border-gray-90 border",
+            "rounded",
+            "hover:bg-gray-90",
+            "hover:text-white",
+            "active:bg-gray-90",
+            "active:text-white"
+          )}
+          onClick={declineTelemetryAndCloseBanner}
+        >
+          Reject all
+        </button>
+        <button
+          className={classNames(
+            "mt-4 md:mt-8 ml-4",
+            "py-2 px-3",
+            "text-gray-90",
+            "border-gray-90 border",
+            "rounded",
+            "hover:bg-gray-90",
+            "hover:text-white",
+            "active:bg-gray-90",
+            "active:text-white"
+          )}
+          onClick={allowTelemetryAndCloseBanner}
+        >
+          Accept all
+        </button>
+      </div>
+    </div>
+  );
+}

components/utilities/cookieSettingsModal.module.css

@@ -0,0 +1,167 @@
+.Container > div {
+  @apply text-gray-90 grid grid-cols-1 gap-4 text-base leading-loose;
+}
+
+.Container h1,
+.Container h2,
+.Container h3,
+.Container h4,
+.Container h5,
+.Container h6 {
+  @apply scroll-mt-0 md:scroll-mt-32;
+}
+
+.Container h2,
+.Container h3,
+.Container h4,
+.Container h5 {
+  @apply mt-4 text-lg font-bold text-gray-90;
+}
+
+.Container h2 {
+  @apply text-xl;
+}
+
+.Container h3 {
+  @apply text-2xl;
+}
+
+.Container h2:first-child,
+.Container h3:first-child,
+.Container h4:first-child,
+.Container h5:first-child {
+  @apply mt-0;
+}
+
+.Container p {
+  @apply text-gray-90;
+}
+
+.Container a {
+  @apply underline;
+}
+
+.Container a:hover {
+  @apply opacity-80;
+}
+
+.Container ol {
+  @apply list-decimal pl-8 grid grid-cols-1 gap-4;
+}
+
+.Container section ol {
+  @apply list-none pl-0 gap-0 mb-5;
+}
+
+.Container ul {
+  @apply list-disc pl-8 grid grid-cols-1 gap-4;
+}
+
+.Container li {
+  @apply pl-2;
+}
+
+.Container blockquote {
+  @apply p-6 md:p-8 lg:p-16
+    -mx-6 md:-mx-8 lg:-mx-16
+    my-0 md:my-4 lg:my-12
+    grid grid-cols-1 gap-4
+    bg-lightBlue-10
+    text-gray-80
+    rounded-lg;
+}
+
+.PrivacyContainer blockquote ~ h4 {
+  @apply mt-12 md:mt-8 lg:mt-0 text-gray-90;
+}
+
+.PrivacyContainer blockquote h2 {
+  @apply hidden;
+}
+
+.Container blockquote h2 {
+  @apply text-gray-90 text-3xl;
+}
+
+.Container hr {
+  @apply border-gray-40 border-t-0 border-l-0 border-r-0 border-b my-8;
+}
+
+.Container address {
+  @apply whitespace-pre-line pl-4 border-l-2 border-gray-30 mt-4;
+}
+
+.Container pre {
+  @apply bg-gray-10 p-4 rounded-md overflow-x-auto text-gray-90;
+}
+
+.Container pre code {
+  @apply text-lg;
+}
+
+.Container figure {
+  @apply flex flex-col items-start;
+}
+
+.Container figure img {
+  @apply h-24 ml-2 mb-2;
+}
+
+.Container figure figcaption {
+  @apply text-sm text-gray-70;
+}
+
+/* For table in Privacy notice */
+.Container table {
+  @apply table-fixed my-8 w-full;
+}
+
+.Container table thead tr th {
+  @apply px-4 py-3 text-left bg-gray-20 bg-opacity-50 border border-gray-30 text-gray-90 font-semibold text-lg leading-normal align-top;
+}
+
+.Container table tbody tr td {
+  @apply px-4 py-3 border border-gray-30 text-gray-90 text-lg leading-normal align-top;
+}
+
+.DeploymentTerms ul,
+.DeploymentTerms ol {
+  @apply list-none;
+}
+
+/* Specific classes for colors */
+.Container:global(.red) a {
+  @apply text-red-70;
+}
+
+.Container:global(.orange) a {
+  @apply text-orange-70;
+}
+
+.Container:global(.yellow) a {
+  @apply text-yellow-90;
+}
+
+.Container:global(.green) a {
+  @apply text-green-70;
+}
+
+.Container:global(.acqua) a {
+  @apply text-acqua-70;
+}
+
+.Container:global(.lightBlue) a {
+  @apply text-lightBlue-70;
+}
+
+.Container:global(.darkBlue) a {
+  @apply text-darkBlue-70;
+}
+
+.Container:global(.indigo) a {
+  @apply text-indigo-70;
+}
+
+.Container:global(.gray) a {
+  @apply text-gray-70;
+}