chore: update left navigation styling (#3120)

* Updates left nav * Updates left nav and preview page to identify as test --------- Co-authored-by: Dave Samojlenko <[email protected]> Co-authored-by: Peter Thiessen <[email protected]>
cds-snc · Jan 16, 2024 · 78835ee · 78835ee
1 parent 0157a0f
commit 78835ee
Show file tree

Hide file tree

Showing 15 changed files with 199 additions and 48 deletions.
diff --git a/components/form-builder/app/Preview.tsx b/components/form-builder/app/Preview.tsx
@@ -134,7 +134,7 @@ export const Preview = () => {
           </div>
           <h1 className="mt-4">
             {formRecord.form[localizeField(LocalizedFormProperties.TITLE, language)] ||
-              t("pagePreview", { ns: "form-builder" })}
+              t("gcFormsTest", { ns: "form-builder" })}
           </h1>
         </div>
 

diff --git a/components/form-builder/app/navigation/LeftNavigation.tsx b/components/form-builder/app/navigation/LeftNavigation.tsx
@@ -1,12 +1,16 @@
 import React from "react";
 import { useTranslation } from "next-i18next";
-import { DesignIcon, PreviewIcon, PublishIcon, GearIcon, MessageIcon } from "../../icons";
+import {
+  NavEditIcon,
+  NavPreviewIcon,
+  NavPublishIcon,
+  NavSettingsIcon,
+  NavResponsesIcon,
+} from "../../icons";
 import { useTemplateContext } from "@components/form-builder/hooks";
 import { useTemplateStore } from "../../store/useTemplateStore";
-import { useSession } from "next-auth/react";
 import { useActivePathname, cleanPath } from "../../hooks/useActivePathname";
-import { NavLink } from "@components/globals/NavLink";
-import { cn } from "@lib/utils";
+import { LinkButton } from "@components/globals";
 
 const linkHelper = (url: string, activePathname: string) => {
   const baseUrl = "/form-builder";
@@ -22,49 +26,65 @@ const linkHelper = (url: string, activePathname: string) => {
 export const LeftNavigation = () => {
   const { t } = useTranslation("form-builder");
   const { isPublished, id } = useTemplateStore((s) => ({ id: s.id, isPublished: s.isPublished }));
-  const { status } = useSession();
   const { activePathname } = useActivePathname();
   const { saveForm } = useTemplateContext();
 
-  const iconClassname =
-    "inline-block w-6 h-6 group-hover:fill-blue-hover group-focus:fill-white-default group-active:fill-white-default mr-2 -mt-1";
-
   return (
     <nav aria-label={t("navLabelFormBuilder")}>
       <ul className="m-0 list-none p-0">
         {!isPublished && (
           <li>
-            <NavLink {...linkHelper("/edit", activePathname)} onClick={saveForm}>
-              <DesignIcon className={iconClassname} />
-              {t("edit")}
-            </NavLink>
+            <LinkButton.LeftNav
+              testid="edit"
+              {...linkHelper("/edit", activePathname)}
+              onClick={saveForm}
+              title={t("edit")}
+            >
+              <NavEditIcon />
+            </LinkButton.LeftNav>
           </li>
         )}
         <li>
-          <NavLink {...linkHelper("/preview", activePathname)} onClick={saveForm}>
-            <PreviewIcon className={iconClassname} />
-            {status === "authenticated" ? t("test") : t("pagePreview")}
-          </NavLink>
+          <LinkButton.LeftNav
+            testid="preview"
+            {...linkHelper("/preview", activePathname)}
+            onClick={saveForm}
+            title={t("test")}
+          >
+            <NavPreviewIcon />
+          </LinkButton.LeftNav>
         </li>
         <li>
-          <NavLink {...linkHelper(`/settings/${id}`, activePathname)} onClick={saveForm}>
-            <GearIcon className={iconClassname} />
-            {t("pageSettings")}
-          </NavLink>
+          <LinkButton.LeftNav
+            testid="settings"
+            {...linkHelper(`/settings/${id}`, activePathname)}
+            onClick={saveForm}
+            title={t("pageSettings")}
+          >
+            <NavSettingsIcon />
+          </LinkButton.LeftNav>
         </li>
         {!isPublished && (
           <li>
-            <NavLink {...linkHelper("/publish", activePathname)} onClick={saveForm}>
-              <PublishIcon className={iconClassname} />
-              {t("publish")}
-            </NavLink>
+            <LinkButton.LeftNav
+              testid="publish"
+              {...linkHelper("/publish", activePathname)}
+              onClick={saveForm}
+              title={t("publish")}
+            >
+              <NavPublishIcon />
+            </LinkButton.LeftNav>
           </li>
         )}
         <li>
-          <NavLink {...linkHelper(`/responses/${id}`, activePathname)} onClick={saveForm}>
-            <MessageIcon className={cn(iconClassname, "mt-[6px] ml-[2px]")} />
-            {t("responsesNavLabel")}
-          </NavLink>
+          <LinkButton.LeftNav
+            testid="responses"
+            {...linkHelper(`/responses/${id}`, activePathname)}
+            onClick={saveForm}
+            title={t("responsesNavLabel")}
+          >
+            <NavResponsesIcon />
+          </LinkButton.LeftNav>
         </li>
       </ul>
     </nav>

diff --git a/components/form-builder/app/shared/Tooltip.tsx b/components/form-builder/app/shared/Tooltip.tsx
@@ -11,7 +11,7 @@ interface TooltipProps {
 
 export const Tooltip = ({ text, children, className = "", side = "left" }: TooltipProps) => {
   return (
-    <TooltipPrimitive.Provider>
+    <TooltipPrimitive.Provider delayDuration={100}>
       <TooltipPrimitive.Root>
         <TooltipPrimitive.Trigger asChild>
           <span>{children}</span>

diff --git a/components/form-builder/icons/NavEditIcon.tsx b/components/form-builder/icons/NavEditIcon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+export const NavEditIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    className={className}
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="M2.1146 29.8855V23.9264L9.52524 16.5158L2.68759 9.63994C2.45839 9.41075 2.28649 9.15609 2.1719 8.87596C2.0573 8.59583 2 8.3157 2 8.03558C2 7.75545 2.0573 7.47532 2.1719 7.1952C2.28649 6.91507 2.45839 6.66041 2.68759 6.43121L6.12551 2.95509C6.35471 2.72589 6.60937 2.55399 6.8895 2.4394C7.16962 2.3248 7.44975 2.2675 7.72988 2.2675C8.01 2.2675 8.2965 2.3248 8.58936 2.4394C8.88222 2.55399 9.14325 2.72589 9.37244 2.95509L16.2483 9.83094L23.7735 2.3057C23.9009 2.17837 24.0282 2.0956 24.1555 2.05741C24.2829 2.01921 24.4229 2.00011 24.5757 2.00011C24.7285 2.00011 24.8686 2.01921 24.9959 2.05741C25.1232 2.0956 25.2506 2.17837 25.3779 2.3057L29.6944 6.62221C29.8217 6.74954 29.9045 6.87687 29.9427 7.0042C29.9809 7.13153 30 7.27159 30 7.42439C30 7.57719 29.9809 7.71725 29.9427 7.84458C29.9045 7.97191 29.8217 8.09924 29.6944 8.22657L22.1692 15.7518L29.045 22.6277C29.2742 22.8569 29.4461 23.1179 29.5607 23.4107C29.6753 23.7036 29.7326 23.9901 29.7326 24.2702C29.7326 24.5504 29.6753 24.8305 29.5607 25.1106C29.4461 25.3907 29.2742 25.6454 29.045 25.8746L25.6071 29.2743C25.3779 29.5035 25.1232 29.6754 24.8431 29.79C24.563 29.9046 24.2829 29.9619 24.0027 29.9619C23.7226 29.9619 23.4425 29.9046 23.1623 29.79C22.8822 29.6754 22.6276 29.5035 22.3984 29.2743L15.5225 22.4367L8.07367 29.8855H2.1146ZM11.1678 14.8732L14.6057 11.4353L11.8172 8.64676L9.98363 10.4803L8.37926 8.87596L10.2128 7.0424L7.76808 4.59765L4.33015 8.03558L11.1678 14.8732ZM23.9263 27.67L27.3643 24.232L24.9195 21.7873L23.0859 23.6208L21.4816 22.0165L23.3151 20.1829L20.5266 17.3944L17.0887 20.8323L23.9263 27.67ZM4.40655 27.5936H7.08049L22.9332 11.7409L20.2592 9.06695L4.40655 24.9196V27.5936ZM24.5375 10.1365L27.2115 7.46259L24.5375 4.78865L21.8636 7.46259L24.5375 10.1365Z" />
+  </svg>
+);
diff --git a/components/form-builder/icons/NavPreviewIcon.tsx b/components/form-builder/icons/NavPreviewIcon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+export const NavPreviewIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    className={className}
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="M3.99961 30.4C3.33294 30.4 2.76628 30.1667 2.29961 29.7C1.83294 29.2333 1.59961 28.6667 1.59961 28V4.00001C1.59961 3.33334 1.83294 2.76667 2.29961 2.30001C2.76628 1.83334 3.33294 1.60001 3.99961 1.60001H27.9996C28.6663 1.60001 29.2329 1.83334 29.6996 2.30001C30.1663 2.76667 30.3996 3.33334 30.3996 4.00001V28C30.3996 28.6667 30.1663 29.2333 29.6996 29.7C29.2329 30.1667 28.6663 30.4 27.9996 30.4H3.99961ZM3.99961 28H27.9996V7.20001H3.99961V28ZM15.9996 23.8C13.8663 23.8 11.9596 23.2267 10.2796 22.08C8.59961 20.9333 7.37294 19.44 6.59961 17.6C7.37294 15.76 8.59961 14.2667 10.2796 13.12C11.9596 11.9733 13.8663 11.4 15.9996 11.4C18.1329 11.4 20.0396 11.9733 21.7196 13.12C23.3996 14.2667 24.6263 15.76 25.3996 17.6C24.6263 19.44 23.3996 20.9333 21.7196 22.08C20.0396 23.2267 18.1329 23.8 15.9996 23.8ZM15.9996 21.8C17.5196 21.8 18.9196 21.4267 20.1996 20.68C21.4796 19.9333 22.4796 18.9067 23.1996 17.6C22.4796 16.2933 21.4796 15.2667 20.1996 14.52C18.9196 13.7733 17.5196 13.4 15.9996 13.4C14.4796 13.4 13.0796 13.7733 11.7996 14.52C10.5196 15.2667 9.51961 16.2933 8.79961 17.6C9.51961 18.9067 10.5196 19.9333 11.7996 20.68C13.0796 21.4267 14.4796 21.8 15.9996 21.8ZM15.9996 19.6C15.4396 19.6 14.9663 19.4067 14.5796 19.02C14.1929 18.6333 13.9996 18.16 13.9996 17.6C13.9996 17.04 14.1929 16.5667 14.5796 16.18C14.9663 15.7933 15.4396 15.6 15.9996 15.6C16.5596 15.6 17.0329 15.7933 17.4196 16.18C17.8063 16.5667 17.9996 17.04 17.9996 17.6C17.9996 18.16 17.8063 18.6333 17.4196 19.02C17.0329 19.4067 16.5596 19.6 15.9996 19.6Z" />
+  </svg>
+);
diff --git a/components/form-builder/icons/NavPublishIcon.tsx b/components/form-builder/icons/NavPublishIcon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+export const NavPublishIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    className={className}
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="M13.8756 22.552L24.0636 12.364L22.4076 10.744L13.8756 19.276L9.55561 14.956L7.93561 16.576L13.8756 22.552ZM15.9996 30.4C14.0316 30.4 12.1716 30.022 10.4196 29.266C8.66761 28.51 7.13761 27.478 5.82961 26.17C4.52161 24.862 3.48961 23.332 2.73361 21.58C1.97761 19.828 1.59961 17.968 1.59961 16C1.59961 14.008 1.97761 12.136 2.73361 10.384C3.48961 8.63201 4.52161 7.10801 5.82961 5.81201C7.13761 4.51601 8.66761 3.49001 10.4196 2.73401C12.1716 1.97801 14.0316 1.60001 15.9996 1.60001C17.9916 1.60001 19.8636 1.97801 21.6156 2.73401C23.3676 3.49001 24.8916 4.51601 26.1876 5.81201C27.4836 7.10801 28.5096 8.63201 29.2656 10.384C30.0216 12.136 30.3996 14.008 30.3996 16C30.3996 17.968 30.0216 19.828 29.2656 21.58C28.5096 23.332 27.4836 24.862 26.1876 26.17C24.8916 27.478 23.3676 28.51 21.6156 29.266C19.8636 30.022 17.9916 30.4 15.9996 30.4ZM15.9996 28.24C19.4076 28.24 22.2996 27.046 24.6756 24.658C27.0516 22.27 28.2396 19.384 28.2396 16C28.2396 12.592 27.0516 9.70001 24.6756 7.32401C22.2996 4.94801 19.4076 3.76001 15.9996 3.76001C12.6156 3.76001 9.72961 4.94801 7.34161 7.32401C4.95361 9.70001 3.75961 12.592 3.75961 16C3.75961 19.384 4.95361 22.27 7.34161 24.658C9.72961 27.046 12.6156 28.24 15.9996 28.24Z" />
+  </svg>
+);
diff --git a/components/form-builder/icons/NavResponsesIcon.tsx b/components/form-builder/icons/NavResponsesIcon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+export const NavResponsesIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    className={className}
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="M15.9996 19.744L18.0156 15.136L22.6236 13.12L18.0156 11.104L15.9996 6.49601L13.9836 11.104L9.37561 13.12L13.9836 15.136L15.9996 19.744ZM1.59961 30.4V3.76001C1.59961 3.20801 1.81561 2.71001 2.24761 2.26601C2.67961 1.82201 3.18361 1.60001 3.75961 1.60001H28.2396C28.7916 1.60001 29.2896 1.82201 29.7336 2.26601C30.1776 2.71001 30.3996 3.20801 30.3996 3.76001V22.48C30.3996 23.032 30.1776 23.53 29.7336 23.974C29.2896 24.418 28.7916 24.64 28.2396 24.64H7.35961L1.59961 30.4ZM3.75961 25.18L6.45961 22.48H28.2396V3.76001H3.75961V25.18ZM3.75961 3.76001V25.18V3.76001Z" />
+  </svg>
+);
diff --git a/components/form-builder/icons/NavSettingsIcon.tsx b/components/form-builder/icons/NavSettingsIcon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+export const NavSettingsIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    className={className}
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="M12.6876 30.4L11.9676 25.864C11.5116 25.696 11.0316 25.468 10.5276 25.18C10.0236 24.892 9.57961 24.592 9.19561 24.28L4.94761 26.224L1.59961 20.32L5.48761 17.476C5.43961 17.26 5.40961 17.014 5.39761 16.738C5.38561 16.462 5.37961 16.216 5.37961 16C5.37961 15.784 5.38561 15.538 5.39761 15.262C5.40961 14.986 5.43961 14.74 5.48761 14.524L1.59961 11.68L4.94761 5.77601L9.19561 7.72001C9.57961 7.40801 10.0236 7.10801 10.5276 6.82001C11.0316 6.53201 11.5116 6.31601 11.9676 6.17201L12.6876 1.60001H19.3116L20.0316 6.13601C20.4876 6.30401 20.9736 6.52601 21.4896 6.80201C22.0056 7.07801 22.4436 7.38401 22.8036 7.72001L27.0516 5.77601L30.3996 11.68L26.5116 14.452C26.5596 14.692 26.5896 14.95 26.6016 15.226C26.6136 15.502 26.6196 15.76 26.6196 16C26.6196 16.24 26.6136 16.492 26.6016 16.756C26.5896 17.02 26.5596 17.272 26.5116 17.512L30.3996 20.32L27.0516 26.224L22.8036 24.28C22.4196 24.592 21.9816 24.898 21.4896 25.198C20.9976 25.498 20.5116 25.72 20.0316 25.864L19.3116 30.4H12.6876ZM15.9996 20.68C17.2956 20.68 18.3996 20.224 19.3116 19.312C20.2236 18.4 20.6796 17.296 20.6796 16C20.6796 14.704 20.2236 13.6 19.3116 12.688C18.3996 11.776 17.2956 11.32 15.9996 11.32C14.7036 11.32 13.5996 11.776 12.6876 12.688C11.7756 13.6 11.3196 14.704 11.3196 16C11.3196 17.296 11.7756 18.4 12.6876 19.312C13.5996 20.224 14.7036 20.68 15.9996 20.68ZM15.9996 18.52C15.3036 18.52 14.7096 18.274 14.2176 17.782C13.7256 17.29 13.4796 16.696 13.4796 16C13.4796 15.304 13.7256 14.71 14.2176 14.218C14.7096 13.726 15.3036 13.48 15.9996 13.48C16.6956 13.48 17.2896 13.726 17.7816 14.218C18.2736 14.71 18.5196 15.304 18.5196 16C18.5196 16.696 18.2736 17.29 17.7816 17.782C17.2896 18.274 16.6956 18.52 15.9996 18.52ZM14.4156 28.24H17.5836L18.0876 24.208C18.8796 24.016 19.6296 23.716 20.3376 23.308C21.0456 22.9 21.6876 22.408 22.2636 21.832L26.0796 23.488L27.5196 20.896L24.1356 18.412C24.2316 18.004 24.3096 17.602 24.3696 17.206C24.4296 16.81 24.4596 16.408 24.4596 16C24.4596 15.592 24.4356 15.19 24.3876 14.794C24.3396 14.398 24.2556 13.996 24.1356 13.588L27.5196 11.104L26.0796 8.51201L22.2636 10.168C21.7116 9.54401 21.0876 9.02201 20.3916 8.60201C19.6956 8.18201 18.9276 7.91201 18.0876 7.79201L17.5836 3.76001H14.4156L13.9116 7.79201C13.0956 7.96001 12.3336 8.24801 11.6256 8.65601C10.9176 9.06401 10.2876 9.56801 9.73561 10.168L5.91961 8.51201L4.47961 11.104L7.86361 13.588C7.76761 13.996 7.68961 14.398 7.62961 14.794C7.56961 15.19 7.53961 15.592 7.53961 16C7.53961 16.408 7.56961 16.81 7.62961 17.206C7.68961 17.602 7.76761 18.004 7.86361 18.412L4.47961 20.896L5.91961 23.488L9.73561 21.832C10.3116 22.408 10.9536 22.9 11.6616 23.308C12.3696 23.716 13.1196 24.016 13.9116 24.208L14.4156 28.24Z" />
+  </svg>
+);
diff --git a/components/form-builder/icons/index.ts b/components/form-builder/icons/index.ts
@@ -78,3 +78,8 @@ export { ForwardArrowIcon } from "./ForwardArrowIcon";
 export { StartIcon } from "./StartIcon";
 export { SavedCheckIcon } from "./SavedCheckIcon";
 export { SavedFailIcon } from "./SavedFailIcon";
+export { NavEditIcon } from "./NavEditIcon";
+export { NavPreviewIcon } from "./NavPreviewIcon";
+export { NavPublishIcon } from "./NavPublishIcon";
+export { NavSettingsIcon } from "./NavSettingsIcon";
+export { NavResponsesIcon } from "./NavResponsesIcon";
diff --git a/components/globals/Buttons/LinkButton.tsx b/components/globals/Buttons/LinkButton.tsx
@@ -2,12 +2,18 @@ import React from "react";
 import { StyledLink } from "@components/globals/";
 import { themes } from "@components/globals";
 import { cn } from "@lib/utils";
+import { Tooltip } from "../../form-builder/app/shared/Tooltip";
+import Link from "next/link";
 
 type LinkButtonProps = {
   href: string;
   children: JSX.Element | string;
   className?: string;
   scroll?: boolean;
+  title?: string;
+  onClick?: () => void;
+  isActive?: boolean;
+  testid?: string;
 };
 
 export const Primary = ({ href, children, className, scroll }: LinkButtonProps) => {
@@ -39,7 +45,51 @@ export const Secondary = ({ href, className, children, scroll }: LinkButtonProps
   );
 };
 
+export const LeftNav = ({
+  href,
+  children,
+  title = "",
+  onClick,
+  isActive,
+  testid,
+}: LinkButtonProps) => {
+  const classes = {
+    base: "border-box flex h-[60px] w-[60px] items-center justify-center text-black-default no-underline ",
+    hover: "hover:border-indigo-700 [&_svg]:hover:fill-indigo-700 hover:border-1 ",
+    focus:
+      "focus:border-indigo-700 focus:bg-white [&_svg]:focus:fill-indigo-700 focus:shadow-none focus:outline-[0px] focus:outline-offset-0 focus:outline-indigo-700 focus:border-1",
+    active:
+      "active:top-0.5 active:bg-indigo-700 [&_svg]:active:fill-white active:text-white active:shadow-none active:outline-[0px] active:outline-indigo-700",
+    isActive:
+      "bg-indigo-700 [&_svg]:fill-white [&_svg]:hover:fill-white shadow-none outline-[0px] outline-indigo-700 focus:shadow-none focus:outline-[0px] focus:outline-offset-0",
+  };
+
+  return (
+    <div className="relative z-10 flex h-[60px] w-[60px]">
+      <Tooltip text={title} side="right">
+        <Link
+          {...(isActive && { "aria-current": "page" })}
+          aria-label={title}
+          href={href}
+          onClick={onClick}
+          data-testid={testid ? testid : ""}
+          className={cn(
+            classes.base,
+            classes.hover,
+            !isActive && classes.focus,
+            classes.active,
+            isActive && classes.isActive
+          )}
+        >
+          {children}
+        </Link>
+      </Tooltip>
+    </div>
+  );
+};
+
 export const LinkButton = {
   Primary,
   Secondary,
+  LeftNav,
 };
diff --git a/components/globals/Header.tsx b/components/globals/Header.tsx
@@ -26,16 +26,16 @@ export const Header = ({ context = "default", user }: HeaderParams) => {
   const { t, i18n } = useTranslation(["common", "form-builder", "admin-login"]);
 
   return (
-    <header className="mb-12 border-b-1 border-gray-500 bg-white px-4 py-2 laptop:px-32 desktop:px-64">
+    <header className="mb-5 border-b-1 border-gray-500 bg-white px-0 py-2 ">
       <div className="grid w-full grid-flow-col">
         <div className="flex">
           <Link href="/form-builder" legacyBehavior>
             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
             <a
               id="logo"
-              className="mr-5 flex border-r-1 pr-5 text-3xl font-semibold !text-black no-underline !shadow-none focus:bg-white"
+              className="mr-5 flex border-r-1 pr-[0.77rem] text-3xl font-semibold !text-black no-underline !shadow-none focus:bg-white"
             >
-              <div className="inline-block h-[45px] w-[46px] py-2">
+              <div className="inline-block h-[45px] w-[46px] p-2">
                 <SiteLogo title={t("title")} />
               </div>
             </a>

diff --git a/components/globals/layouts/FormBuilderLayout.tsx b/components/globals/layouts/FormBuilderLayout.tsx
@@ -12,6 +12,7 @@ import { TwoColumnLayout } from "./TwoColumnLayout";
 const css = `
 body {
    background-color: #F9FAFB;
+   background: linear-gradient(to right, white 59px, #d1d5db 59px, #d1d5db 60px, #F9FAFB 60px);
 }
 `;
 
@@ -27,7 +28,7 @@ const PageLayout = ({
   return (
     <>
       <Head>
-        <style>{css}</style>
+        <style>{hideLeftNav ? `body{ background-color: #F9FAFB }` : css}</style>
       </Head>
       {hideLeftNav ? (
         <FullWidthLayout context="default">{page}</FullWidthLayout>

diff --git a/components/globals/layouts/TwoColumnLayout.tsx b/components/globals/layouts/TwoColumnLayout.tsx
@@ -24,13 +24,15 @@ export const TwoColumnLayout = ({
         <SkipLink />
 
         <Header context={context} user={user} />
-        <div className="mx-4 shrink-0 grow basis-auto laptop:mx-32 desktop:mx-64">
+        <div className="shrink-0 grow basis-auto">
           <ToastContainer containerId="default" />
           <ToastContainer limit={1} containerId="wide" autoClose={false} width="600px" />
           <>
             <div>
-              <div className="flex flex-row gap-10">
-                <div className="min-w-[181px]">{leftColumnContent}</div>
+              <div className="flex flex-row gap-10 pr-12">
+                <div id="left-nav" className="sticky top-5 z-10 h-full">
+                  {leftColumnContent}
+                </div>
                 <main
                   id="content"
                   className={cn("w-full", context === "formBuilder" && "form-builder")}

diff --git a/cypress/downloads/downloads.html b/cypress/downloads/downloads.html