Add AdWords into a new user's "untrustedMetadata" (front-end part only)

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@clerk/clerk-js": "^5.40.0",
     "@clerk/clerk-react": "^5.19.0",
+    "@clerk/themes": "^2.2.22",
     "@fireproof/cloud": "^0.19.118",
     "@tailwindcss/container-queries": "^0.1.1",
     "highlight.js": "^11.10.0",

src/components/ExtraArrowCTA.tsx

@@ -0,0 +1,44 @@
+import React from "react"
+
+export function ExtraArrowCTA() {
+  return (<div className="hidden md:block"> <svg className="absolute scale-[0.7] sm:scale-100 right-[-68px] bottom-[60px] sm:right-[-60px] sm:bottom-[95px] text-fp-a-02 pointer-events-none" width="187" height="186" viewBox="0 0 187 186" fill="none" xmlns="http://www.w3.org/2000/svg" > <path className="animate-stroke-dash-500" d="M44.0833 175.38C119.188 155.145 160.007 78.4817 142.027 1.9999" stroke="currentColor" strokeWidth="4" strokeDasharray="500" strokeDashoffset="-500" strokeLinecap="round" strokeLinejoin="round"
+    vectorEffect="non-scaling-stroke"
+  />
+    <path
+      className="animate-stroke-dash-500"
+      d="M59.8737 159.466L44.0832 175.38L67.7991 178.707"
+      stroke="currentColor"
+      strokeWidth="4"
+      strokeDasharray="500"
+      strokeDashoffset="-500"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      vectorEffect="non-scaling-stroke"
+    />
+  </svg>
+    <div className="absolute scale-[0.85] sm:scale-100 right-[-75px] bottom-[210px] sm:right-[-86px] sm:bottom-[285px]">
+      <p className="animate-show absolute max-w-[120px] top-[16px] left-[18px] text-center text-[14px] font-bold text-fp-a-02 leading-[1.3] tracking-[-0.04em] rotate-[-11deg]">
+        Sign in to see your data live!
+      </p>
+      <svg
+        className="text-fp-a-02"
+        width="161"
+        height="67"
+        viewBox="0 0 161 67"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          className="animate-stroke-dash-2000"
+          stroke="currentColor"
+          strokeWidth="1"
+          strokeDasharray="2000"
+          strokeDashoffset="-2000"
+          vectorEffect="non-scaling-stroke"
+          d="M73.7212 1C36.2218 13 4.22102 24.001 1.2211 44.501C-3.29427 75.3568 62.2205 69.2017 118.221 50.0015C169.722 32.3441 167.379 13.6053 146.721 7.50098C124.721 1 97.2212 4.00098 62.2205 13.0015"
+        />
+      </svg>
+    </div>
+  </div>
+  )
+}

src/components/FireproofWordmark.tsx

@@ -0,0 +1,55 @@
+import React from "react"
+
+type Props = {
+    isDarkMode: boolean
+}
+
+export function FireproofWordmark({ isDarkMode }: Props) {
+  return (
+
+    <svg
+      className="max-w-36 sm:max-w-max"
+      width="135"
+      height="51"
+      viewBox="0 0 191 51"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill={isDarkMode ? "white" : "black"}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M64.8818 44.0241V34.281H74.4006V30.8976H64.8818V26.0134C64.8818 25.7081 64.8818 25.352 65.1482 25.0976C65.3904 24.8177 65.6326 24.8432 65.8991 24.8432H77.9368V21.4598H63.9372C63.2106 21.4598 62.3628 21.5361 61.6362 22.2738C60.9822 22.9098 60.8369 23.7239 60.8369 24.4362V44.0241H64.8818ZM79.8261 44.0241H83.4108V26.9292H79.8261V44.0241ZM83.4108 24.4616V21.4598H79.8261V24.4616H83.4108ZM86.3899 44.0241H89.9988V34.3828C89.9988 33.0854 90.1442 31.9152 90.8224 31.0248C91.6701 29.9818 92.9296 29.8292 93.8742 29.8292H95.4001V26.9292H92.9538C91.6943 26.9292 89.5871 27.0309 88.0854 28.4301C86.7048 29.6766 86.3899 31.5082 86.3899 33.3907V44.0241ZM111.87 44.0241V41.1241H103.926C102.618 41.1241 101.116 40.9206 100.656 39.089C100.535 38.5802 100.438 37.4863 100.438 36.7486H109.884C110.538 36.7486 111.144 36.6214 111.628 36.0872C112.306 35.3749 112.403 34.3828 112.403 33.5179C112.403 31.3555 112.016 29.2187 110.102 27.9722C108.6 26.98 106.639 26.8783 104.725 26.8783C103.199 26.8783 100.438 26.8783 98.6457 28.4809C96.8776 30.109 96.708 32.4494 96.708 35.6547C96.708 37.8934 96.8049 40.2592 97.8948 41.8618C99.227 43.8715 101.189 44.0241 102.86 44.0241H111.87ZM100.438 33.8486C100.462 32.7038 100.438 31.788 101.165 30.8976C102.158 29.7529 103.635 29.7783 104.58 29.7783C105.597 29.7783 106.76 29.8292 107.656 30.5415C108.164 30.974 108.697 31.788 108.697 32.831C108.697 33.2889 108.6 33.8486 107.898 33.8486H100.438ZM118.555 44.0241H123.085C124.756 44.0241 127.275 43.8969 128.801 41.582C129.963 39.8267 130.084 37.3846 130.084 35.1205C130.084 33.2635 130.036 30.6178 128.365 28.8117C126.815 27.1072 124.635 26.9292 123.593 26.9292H117.901C117.296 26.9292 116.496 27.0055 115.891 27.4888C115.479 27.8195 114.971 28.4555 114.971 29.5748V49.519H118.555V44.0241ZM118.555 41.1241V30.6433C118.555 30.4652 118.604 30.2617 118.797 30.0582C118.919 29.9818 119.137 29.8292 119.282 29.8292H122.818C124.417 29.8292 125.482 30.6687 125.943 31.788C126.136 32.2205 126.379 33.1363 126.379 35.4512C126.379 37.9951 126.039 39.0381 125.7 39.5469C125.313 40.2337 124.417 41.1241 122.624 41.1241H118.555ZM132.652 44.0241H136.236V34.3828C136.236 33.0854 136.406 31.9152 137.06 31.0248C137.932 29.9818 139.191 29.8292 140.136 29.8292H141.638V26.9292H139.216C137.956 26.9292 135.849 27.0309 134.347 28.4301C132.967 29.6766 132.652 31.5082 132.652 33.3907V44.0241ZM151.011 26.7511C149.074 26.7511 146.215 26.802 144.447 28.5573C142.582 30.3889 142.364 33.6196 142.364 35.553C142.364 37.2828 142.51 40.5136 144.447 42.3706C146.215 44.1005 149.074 44.2277 151.011 44.2277C152.876 44.2277 155.831 44.1005 157.575 42.3706C158.786 41.2004 159.682 39.0381 159.682 35.4258C159.682 33.6196 159.464 30.3889 157.575 28.5573C155.807 26.802 152.949 26.7511 151.011 26.7511ZM146.07 35.5275C146.07 34.4082 146.07 32.2205 147.087 30.9994C148.105 29.7783 149.849 29.6511 151.011 29.6511C152.295 29.6511 153.869 29.7783 154.911 30.9994C156.049 32.3222 155.952 34.2556 155.952 35.5275C155.952 37.003 155.952 38.6311 154.887 39.903C153.797 41.1495 152.368 41.3276 151.011 41.3276C149.728 41.3276 148.153 41.1495 147.112 39.903C146.094 38.682 146.07 36.9267 146.07 35.5275ZM170.461 26.7511C168.523 26.7511 165.665 26.802 163.872 28.5573C162.007 30.3889 161.79 33.6196 161.79 35.553C161.79 37.2828 161.959 40.5136 163.872 42.3706C165.665 44.1005 168.523 44.2277 170.461 44.2277C172.326 44.2277 175.281 44.1005 177.024 42.3706C178.211 41.2004 179.107 39.0381 179.107 35.4258C179.107 33.6196 178.889 30.3889 177.024 28.5573C175.232 26.802 172.398 26.7511 170.461 26.7511ZM165.52 35.5275C165.52 34.4082 165.52 32.2205 166.513 30.9994C167.53 29.7783 169.298 29.6511 170.461 29.6511C171.744 29.6511 173.319 29.7783 174.36 30.9994C175.499 32.3222 175.402 34.2556 175.402 35.5275C175.402 37.003 175.402 38.6311 174.312 39.903C173.246 41.1495 171.793 41.3276 170.461 41.3276C169.153 41.3276 167.603 41.1495 166.561 39.903C165.544 38.682 165.52 36.9267 165.52 35.5275ZM186.543 44.0241V29.8292H191V26.9292H186.543C186.519 25.5555 187.003 24.8432 187.464 24.5125C188.118 24.08 189.159 24.0037 191 24.0037V21.2308C189.159 21.18 186.18 21.3326 184.654 22.6554C183.273 23.8511 182.983 25.8353 182.959 26.98H180.682V29.8292H182.959V44.0241H186.543Z"
+      />
+      <path
+        fill="currentColor"
+        className="text-fp-a-02"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M29.4063 12.7461H14.6912L7.35742 25.4675H22.0488L29.4063 12.7461Z"
+      />
+      <path
+        fill="currentColor"
+        className="text-fp-a-03"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.6914 12.7471H21.8591H29.4065C29.4065 7.31203 26.4397 2.54149 22.0489 0.00195312L14.6914 12.7471Z"
+      />
+      <path
+        fill="currentColor"
+        className="text-fp-a-01"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M22.0489 25.4663H7.35754C7.33381 25.4663 7.33381 25.4663 7.33381 25.4663L0 38.2115H14.6914L22.0489 25.4663ZM29.4064 38.2115H44.0978C44.0978 32.7764 41.1548 28.0058 36.764 25.4663H36.7402L29.4064 38.2115Z"
+      />
+      <path
+        fill="currentColor"
+        className="text-fp-a-00"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.6914 38.2124H0L7.35754 50.9338H22.0489C17.6581 48.3943 14.6914 43.6475 14.6914 38.2124ZM44.0978 38.2124H29.4064L22.0489 50.9338H36.7402L44.0978 38.2124Z"
+      />
+    </svg>
+  )
+
+}

src/contexts/DarkModeContext.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useState, useEffect } from "react";
 
-const DarkModeContext = createContext();
+export const DarkModeContext = createContext({ isDarkMode: false, toggleDarkMode: function(){} });
 
 function getDarkMode() {
   const storedDarkMode = localStorage.getItem("darkMode");
@@ -23,7 +23,7 @@ export const DarkModeProvider = ({ children }) => {
 
   useEffect(() => {
     document.documentElement.classList.toggle("dark", isDarkMode);
-    localStorage.setItem("darkMode", isDarkMode.toString());
+    // localStorage.setItem("darkMode", isDarkMode.toString());
   }, [isDarkMode]);
 
   return (

src/pages/databases/show.tsx

@@ -148,11 +148,11 @@ function TableView({ name }: { name: string }) {
   }, []);
 
   return (
-    <div className="@container p-card bg-fp-bg-01 rounded-fp-l text-fp-p">
+    <div className="p-card bg-fp-bg-01 rounded-fp-l text-fp-p">
       {/* Quickstart */}
       {connection && <Quickstart remoteName={remoteName} />}
 
-      <div className="flex justify-end items-start mb-4 gap-4 @[575px]:flex-nowrap flex-wrap">
+      <div className="flex justify-end items-start mb-4 gap-4 min-[575px]:flex-nowrap flex-wrap">
         <nav className="max-[500px] h-[38px] flex-grow flex items-center flex-wrap">
           <Link
             to={`/fp/databases/${name}`}
@@ -208,7 +208,7 @@ function TableView({ name }: { name: string }) {
           )}
 
           {/* Mobile Actions Dropdown */}
-          <div className="relative block @[575px]:hidden" ref={actionsRef}>
+          <div className="relative block min-[575px]:hidden" ref={actionsRef}>
             <Button
                 variation="primary"
                 style="min-w-[108px] pl-[24px]"
@@ -266,7 +266,7 @@ function TableView({ name }: { name: string }) {
           </div>
 
           {/* Desktop Actions */}
-          <div className="hidden @[575px]:flex gap-2">
+          <div className="hidden min-[575px]:flex gap-2">
             <Button
                 variation="destructive"
                 onClick={handleDeleteDatabase}
@@ -303,7 +303,7 @@ function TableView({ name }: { name: string }) {
       </div>
 
       {docs.length === 0 ? (
-        <div className="m-2 mb-[60px] mt-14 text-center text-20 opacity-60 text-balance @[575px]:mt-20">
+        <div className="m-2 mb-[60px] mt-14 text-center text-20 opacity-60 text-balance min-[575px]:mt-20">
           No documents found. <Link to={`/fp/databases/${name}/docs/new`} className="border-b border-fp-s">Create&nbsp;a&nbsp;new&nbsp;document</Link> to get started.
         </div>
       ) : (

src/pages/docs/show.tsx

@@ -52,7 +52,7 @@ export default function Document() {
   const title = id ? `Edit document: ${_id}` : "Create new document";
 
   return (
-    <div className="@container p-card bg-fp-bg-01 text-fp-p rounded-fp-l">
+    <div className="p-card bg-fp-bg-01 text-fp-p rounded-fp-l">
       <div className="flex justify-end items-center min-h-[38px] gap-y-[20px] flex-wrap sm:flex-nowrap">
         <nav className="text-fp-s flex-grow">
           <Link
@@ -114,7 +114,7 @@ export default function Document() {
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M8.00001 1C9.85666 1 11.6373 1.73755 12.9501 3.0504C14.263 4.36325 15.0005 6.14385 15.0005 8.0005C15.0005 9.85715 14.263 11.6378 12.9501 12.9506C11.6373 14.2634 9.85666 15.001 8.00001 15.001C6.14336 15.001 4.36276 14.2634 3.04991 12.9506C1.73706 11.6378 0.999512 9.85715 0.999512 8.0005C0.999512 6.14385 1.73706 4.36325 3.04991 3.0504C4.36276 1.73755 6.14336 1 8.00001 1ZM9.05001 5.298C9.57001 5.298 9.99201 4.937 9.99201 4.402C9.99201 3.867 9.56901 3.506 9.05001 3.506C8.53001 3.506 8.11001 3.867 8.11001 4.402C8.11001 4.937 8.53001 5.298 9.05001 5.298ZM9.23301 10.925C9.23301 10.818 9.27001 10.54 9.24901 10.382L8.42701 11.328C8.25701 11.507 8.04401 11.631 7.94401 11.598C7.89864 11.5813 7.86072 11.549 7.83707 11.5068C7.81342 11.4646 7.8056 11.4154 7.81501 11.368L9.18501 7.04C9.29701 6.491 8.98901 5.99 8.33601 5.926C7.64701 5.926 6.63301 6.625 6.01601 7.512C6.01601 7.618 5.99601 7.882 6.01701 8.04L6.83801 7.093C7.00801 6.916 7.20601 6.791 7.30601 6.825C7.35528 6.84268 7.39565 6.87898 7.41846 6.92609C7.44127 6.97321 7.4447 7.02739 7.42801 7.077L6.07001 11.384C5.91301 11.888 6.21001 12.382 6.93001 12.494C7.99001 12.494 8.61601 11.812 9.23401 10.925H9.23301Z" fill="currentColor" />
           </svg>
-          <div className="absolute bottom-10 right-[-120px] w-[240px] @[380px]:right-[-180px] @[560px]:bottom-7 @[560px]:left-5 @[560px]:w-[360px] @[380px]:w-[280px] px-5 py-3.5 bg-fp-bg-00 border border-fp-dec-01 text-14 text-fp-s rounded-fp-s hidden group-hover:block">
+          <div className="absolute bottom-10 right-[-120px] w-[240px] min-[380px]:right-[-180px] min-[560px]:bottom-7 min-[560px]:left-5 min-[560px]:w-[360px] min-[380px]:w-[280px] px-5 py-3.5 bg-fp-bg-00 border border-fp-dec-01 text-14 text-fp-s rounded-fp-s hidden group-hover:block">
             <span className="text-14-bold text-fp-a-03">The document _id</span> is unique within a ledger, and assigned randomly. Use it to specify which record to update.
           </div>
         </div>