design updates

lamson-dev · Jun 20, 2024 · 3e59c2f · 3e59c2f
1 parent e62df0a
commit 3e59c2f
Show file tree

Hide file tree

Showing 11 changed files with 1,003 additions and 163 deletions.
diff --git a/components/view/access-form/agreement-section.tsx b/components/view/access-form/agreement-section.tsx
@@ -1,17 +1,23 @@
 import { Dispatch, SetStateAction, useEffect } from "react";
 
+import { Brand, DataroomBrand } from "@prisma/client";
+
 import { Checkbox } from "@/components/ui/checkbox";
 
+import { determineTextColor } from "@/lib/utils/determine-text-color";
+
 import { DEFAULT_ACCESS_FORM_TYPE } from ".";
 
 export default function AgreementSection({
   data,
   setData,
   agreementContent,
+  brand,
 }: {
   data: DEFAULT_ACCESS_FORM_TYPE;
   setData: Dispatch<SetStateAction<DEFAULT_ACCESS_FORM_TYPE>>;
   agreementContent: string;
+  brand?: Partial<Brand> | Partial<DataroomBrand> | null;
 }) {
   const handleCheckChange = (checked: boolean) => {
     setData((prevData) => ({ ...prevData, hasConfirmedAgreement: checked }));
@@ -23,15 +29,29 @@ export default function AgreementSection({
         <Checkbox
           id="agreement"
           onCheckedChange={handleCheckChange}
-          className="mt-0.5 border border-gray-400  focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-300 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-white data-[state=checked]:bg-black data-[state=checked]:text-white"
+          className="mt-0.5 border border-gray-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-300 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-white data-[state=checked]:bg-black data-[state=checked]:text-white"
         />
-        <label className="text-sm font-normal leading-5 text-white peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        <label
+          className="text-sm font-normal leading-5 text-white peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          style={{
+            color:
+              brand && brand.accentColor
+                ? determineTextColor(brand.accentColor)
+                : "white",
+          }}
+        >
           I have reviewed and agree to the terms of this{" "}
           <a
             href={`${agreementContent}`}
             target="_blank"
             rel="noreferrer noopener"
-            className=" underline hover:text-gray-200"
+            className="underline hover:text-gray-200"
+            style={{
+              color:
+                brand && brand.accentColor
+                  ? determineTextColor(brand.accentColor)
+                  : "white",
+            }}
           >
             Non-Disclosure Agreement
           </a>

diff --git a/components/view/access-form/email-section.tsx b/components/view/access-form/email-section.tsx
@@ -1,13 +1,19 @@
 import { Dispatch, SetStateAction, useEffect } from "react";
 
+import { Brand, DataroomBrand } from "@prisma/client";
+
+import { determineTextColor } from "@/lib/utils/determine-text-color";
+
 import { DEFAULT_ACCESS_FORM_TYPE } from ".";
 
 export default function EmailSection({
   data,
   setData,
+  brand,
 }: {
   data: DEFAULT_ACCESS_FORM_TYPE;
   setData: Dispatch<SetStateAction<DEFAULT_ACCESS_FORM_TYPE>>;
+  brand?: Partial<Brand> | Partial<DataroomBrand> | null;
 }) {
   const { email } = data;
 
@@ -30,12 +36,20 @@ export default function EmailSection({
     setData({ ...data, email: newEmail });
   };
 
+  console.log("brand", brand);
+
   return (
     <div className="pb-5">
       <div className="relative space-y-2 rounded-md shadow-sm">
         <label
           htmlFor="email"
           className="block text-sm font-medium leading-6 text-white"
+          style={{
+            color:
+              brand && brand.accentColor
+                ? determineTextColor(brand.accentColor)
+                : "white",
+          }}
         >
           Email address
         </label>
@@ -46,14 +60,22 @@ export default function EmailSection({
           autoCorrect="off"
           autoComplete="email"
           autoFocus
-          className="flex w-full rounded-md border-0 bg-black py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-300 sm:text-sm sm:leading-6"
+          className="flex w-full rounded-md border-0 bg-black py-1.5 text-gray-500 shadow-sm ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-300 sm:text-sm sm:leading-6"
+          style={{
+            backgroundColor:
+              brand && brand.accentColor ? brand.accentColor : "black",
+            color:
+              brand && brand.accentColor
+                ? determineTextColor(brand.accentColor)
+                : "white",
+          }}
           value={email || ""}
           placeholder="Enter email"
           onChange={handleEmailChange}
           aria-invalid="true"
           data-1p-ignore
         />
-        <p className="text-sm text-gray-600">
+        <p className="text-sm text-gray-500">
           This data will be shared with the sender.
         </p>
       </div>

diff --git a/components/view/access-form/index.tsx b/components/view/access-form/index.tsx
@@ -1,7 +1,14 @@
+import Image from "next/image";
+import Link from "next/link";
+
 import { useEffect } from "react";
 
+import { Brand, DataroomBrand } from "@prisma/client";
+
 import { Button } from "@/components/ui/button";
 
+import { determineTextColor } from "@/lib/utils/determine-text-color";
+
 import AgreementSection from "./agreement-section";
 import EmailSection from "./email-section";
 import NameSection from "./name-section";
@@ -22,23 +29,27 @@ export type DEFAULT_ACCESS_FORM_TYPE = {
 export default function AccessForm({
   data,
   email,
+  brand,
   setData,
   onSubmitHandler,
   requireEmail,
   requirePassword,
   requireAgreement,
   agreementContent,
   isLoading,
+  linkId,
 }: {
   data: DEFAULT_ACCESS_FORM_TYPE;
   email: string | null | undefined;
   setData: React.Dispatch<React.SetStateAction<DEFAULT_ACCESS_FORM_TYPE>>;
   onSubmitHandler: React.FormEventHandler<HTMLFormElement>;
+  brand?: Partial<Brand> | Partial<DataroomBrand> | null;
   requireEmail: boolean;
   requirePassword: boolean;
   requireAgreement?: boolean;
   agreementContent?: string;
   isLoading: boolean;
+  linkId?: string;
 }) {
   useEffect(() => {
     const userEmail = email;
@@ -50,27 +61,67 @@ export default function AccessForm({
     }
   }, [email]);
 
+  console.log("brand", brand);
   return (
     <>
-      <div className="flex h-screen flex-1 flex-col  bg-black px-6 py-12 lg:px-8">
+      <div
+        className="bg-gray-95 flex h-screen flex-1 flex-col px-6 py-12 lg:px-8"
+        style={{
+          backgroundColor:
+            brand && brand.accentColor ? brand.accentColor : "black",
+        }}
+      >
+        {/* <div className="bg-gray-950" style={{ backgroundColor: accentColor }}> */}
+
+        {/* <div className="relative flex h-16 w-full flex-shrink-0 items-center justify-center">
+          {brand && brand.logo ? (
+            <Image
+              className="object-contain"
+              src={brand.logo}
+              alt="Logo"
+              fill
+              quality={100}
+              priority
+            />
+          ) : (
+            <Link
+              href={`https://www.papermark.io?utm_campaign=navbar&utm_medium=navbar&utm_source=papermark-${linkId}`}
+              target="_blank"
+              className="text-2xl font-bold tracking-tighter text-white"
+            >
+              Papermark
+            </Link>
+          )}
+        </div> */}
+
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
-          <h1 className="mt-10 text-2xl font-bold leading-9 tracking-tight text-white">
+          <h1
+            className="mt-10 text-2xl font-bold leading-9 tracking-tight text-white"
+            style={{
+              color:
+                brand && brand.accentColor
+                  ? determineTextColor(brand.accentColor)
+                  : "white",
+            }}
+          >
             Your action is requested to continue
           </h1>
         </div>
 
         <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-md">
           <form className="space-y-4" onSubmit={onSubmitHandler}>
             {requireAgreement && agreementContent ? (
-              <NameSection {...{ data, setData }} />
+              <NameSection {...{ data, setData, brand }} />
+            ) : null}
+            {requireEmail ? (
+              <EmailSection {...{ data, setData, brand }} />
             ) : null}
-            {requireEmail ? <EmailSection {...{ data, setData }} /> : null}
             {requirePassword ? (
-              <PasswordSection {...{ data, setData }} />
+              <PasswordSection {...{ data, setData, brand }} />
             ) : null}
             {requireAgreement && agreementContent ? (
               <AgreementSection
-                {...{ data, setData }}
+                {...{ data, setData, brand }}
                 agreementContent={agreementContent}
               />
             ) : null}
@@ -86,12 +137,29 @@ export default function AccessForm({
                 }
                 className="w-1/3 min-w-fit bg-white text-gray-950 hover:bg-white/90"
                 loading={isLoading}
+                style={{
+                  backgroundColor:
+                    brand && brand.accentColor
+                      ? determineTextColor(brand.accentColor)
+                      : "white",
+
+                  color:
+                    brand && brand.accentColor ? brand.accentColor : "black",
+                }}
               >
                 Continue
               </Button>
             </div>
           </form>
         </div>
+        <div className="mt-auto text-center">
+          <p className="mt-10 text-sm leading-9 tracking-tight text-gray-500">
+            <a href="/" target="_blank" rel="noopener noreferrer">
+              This document is securely shared with you using{" "}
+              <span className="font-semibold">Papermark</span>
+            </a>
+          </p>
+        </div>
       </div>
     </>
   );

diff --git a/components/view/access-form/name-section.tsx b/components/view/access-form/name-section.tsx
@@ -1,13 +1,19 @@
 import { Dispatch, SetStateAction, useEffect } from "react";
 
+import { Brand, DataroomBrand } from "@prisma/client";
+
+import { determineTextColor } from "@/lib/utils/determine-text-color";
+
 import { DEFAULT_ACCESS_FORM_TYPE } from ".";
 
 export default function NameSection({
   data,
   setData,
+  brand,
 }: {
   data: DEFAULT_ACCESS_FORM_TYPE;
   setData: Dispatch<SetStateAction<DEFAULT_ACCESS_FORM_TYPE>>;
+  brand?: Partial<Brand> | Partial<DataroomBrand> | null;
 }) {
   const { name } = data;
 
@@ -36,6 +42,12 @@ export default function NameSection({
         <label
           htmlFor="name"
           className="block text-sm font-medium leading-6 text-white"
+          style={{
+            color:
+              brand && brand.accentColor
+                ? determineTextColor(brand.accentColor)
+                : "white",
+          }}
         >
           Name
         </label>
@@ -47,6 +59,14 @@ export default function NameSection({
           autoComplete="off"
           autoFocus
           className="flex w-full rounded-md border-0 bg-black py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-300 sm:text-sm sm:leading-6"
+          style={{
+            backgroundColor:
+              brand && brand.accentColor ? brand.accentColor : "black",
+            color:
+              brand && brand.accentColor
+                ? determineTextColor(brand.accentColor)
+                : "white",
+          }}
           value={name || ""}
           placeholder="Enter your full name"
           onChange={handleNameChange}

diff --git a/components/view/access-form/password-section.tsx b/components/view/access-form/password-section.tsx
@@ -1,16 +1,22 @@
 import { Dispatch, SetStateAction, useState } from "react";
 
+import { Brand, DataroomBrand } from "@prisma/client";
+
 import Eye from "@/components/shared/icons/eye";
 import EyeOff from "@/components/shared/icons/eye-off";
 
+import { determineTextColor } from "@/lib/utils/determine-text-color";
+
 import { DEFAULT_ACCESS_FORM_TYPE } from ".";
 
 export default function PasswordSection({
   data,
   setData,
+  brand,
 }: {
   data: DEFAULT_ACCESS_FORM_TYPE;
   setData: Dispatch<SetStateAction<DEFAULT_ACCESS_FORM_TYPE>>;
+  brand?: Partial<Brand> | Partial<DataroomBrand> | null;
 }) {
   const { password } = data;
   const [showPassword, setShowPassword] = useState<boolean>(false);
@@ -21,6 +27,12 @@ export default function PasswordSection({
         <label
           htmlFor="password"
           className="block text-sm font-medium leading-6 text-white"
+          style={{
+            color:
+              brand && brand.accentColor
+                ? determineTextColor(brand.accentColor)
+                : "white",
+          }}
         >
           Passcode
         </label>
@@ -32,6 +44,14 @@ export default function PasswordSection({
             autoCorrect="off"
             autoComplete="off"
             className="flex w-full rounded-md border-0 bg-black py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-300 sm:text-sm sm:leading-6"
+            style={{
+              backgroundColor:
+                brand && brand.accentColor ? brand.accentColor : "black",
+              color:
+                brand && brand.accentColor
+                  ? determineTextColor(brand.accentColor)
+                  : "white",
+            }}
             value={password || ""}
             placeholder="Enter passcode"
             onChange={(e) => {

diff --git a/components/view/document-view.tsx b/components/view/document-view.tsx
@@ -193,6 +193,7 @@ export default function DocumentView({
         requireAgreement={enableAgreement!}
         agreementContent={link.agreement?.content}
         isLoading={isLoading}
+        brand={brand}
       />
     );
   }
@@ -205,7 +206,13 @@ export default function DocumentView({
     );
   }
   return (
-    <div className="bg-gray-950">
+    <div
+      className="bg-gray-950"
+      style={{
+        backgroundColor:
+          brand && brand.accentColor ? brand.accentColor : "rgb(3, 7, 18)",
+      }}
+    >
       {submitted ? (
         <ViewData
           link={link}

diff --git a/pages/api/links/[id]/index.ts b/pages/api/links/[id]/index.ts
@@ -105,6 +105,7 @@ export default async function handle(
           select: {
             logo: true,
             brandColor: true,
+            accentColor: true,
           },
         });
       } else if (linkType === "DATAROOM_LINK") {