From 4062f9dea98b2cd8d40d7d366321d88975b73ca8 Mon Sep 17 00:00:00 2001
From: Katie Campbell Downie <katie.campbelldownie@skylight.digital>
Date: Mon, 28 Oct 2024 17:26:54 -0500
Subject: [PATCH 01/11] Add Sign In button to header; add /signin page with
 basic form; redirect to /query from signin page button click

---
 .../query/components/header/header.module.css | 11 +++
 .../app/query/components/header/header.tsx    | 26 +++++-
 query-connector/src/app/signin/page.tsx       | 86 +++++++++++++++++++
 .../src/app/signin/signinPage.module.scss     | 37 ++++++++
 query-connector/src/styles/custom-styles.scss |  1 +
 5 files changed, 158 insertions(+), 3 deletions(-)
 create mode 100644 query-connector/src/app/signin/page.tsx
 create mode 100644 query-connector/src/app/signin/signinPage.module.scss

diff --git a/query-connector/src/app/query/components/header/header.module.css b/query-connector/src/app/query/components/header/header.module.css
index e1ab821f2..355aecad3 100644
--- a/query-connector/src/app/query/components/header/header.module.css
+++ b/query-connector/src/app/query/components/header/header.module.css
@@ -5,4 +5,15 @@
   color: white !important;
   padding: 0px !important;
   font: inherit !important;
+  margin-right: 1rem !important;
+}
+
+.signinButton {
+  padding: 0.75rem 1.25rem !important;
+  cursor: pointer;
+  background: none !important;
+  border: 2px solid white !important;
+  border-radius: 4px !important;
+  color: white !important;
+  font: inherit !important;
 }
diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx
index 5667dfab3..40b5fd83b 100644
--- a/query-connector/src/app/query/components/header/header.tsx
+++ b/query-connector/src/app/query/components/header/header.tsx
@@ -2,9 +2,10 @@
 
 import { useEffect, useRef, useState } from "react";
 import { Modal, ModalButton } from "../../designSystem/Modal";
-import { ModalRef } from "@trussworks/react-uswds";
+import { ModalRef, Button } from "@trussworks/react-uswds";
 import styles from "./header.module.css";
 import { metadata } from "@/app/constants";
+import { useRouter, usePathname } from "next/navigation";
 /**
  * Produces the header.
  * @returns The HeaderComponent component.
@@ -17,6 +18,13 @@ export default function HeaderComponent() {
     setIsClient(true);
   }, []);
 
+  const router = useRouter();
+  const path = usePathname()
+
+  const handleClick = () => {
+    router.push(`/signin`);
+  };
+
   return (
     <>
       <header className="usa-header usa-header--basic bg-primary-darker">
@@ -33,7 +41,7 @@ export default function HeaderComponent() {
               <em className="usa-logo__text text-base-lightest">
                 <a
                   className="text-base-lightest font-sans-xl text-bold"
-                  href="/tefca-viewer"
+                  href={process.env.NODE_ENV === "production" ? "/tefca-viewer" : "/"}
                   title={metadata.title}
                 >
                   {metadata.title}
@@ -48,13 +56,25 @@ export default function HeaderComponent() {
               marginLeft: "auto",
             }}
           >
-            {isClient && (
+            {(path != '/signin' && isClient) && (
               <ModalButton
                 modalRef={modalRef}
                 title={"Data Usage Policy"}
                 className={styles.dataUsagePolicyButton}
               />
             )}
+            {/* TODO: Rework show/hide rules based on actual auth status */}
+            {(path != '/signin' && path != '/query') && ( 
+               <Button
+                 className={styles.signinButton}
+                 type="button"
+                 id="signin-button"
+                 title={"Sign in button"}
+                 onClick={() => handleClick()}
+              >
+                Sign in
+              </Button>
+            )}
           </div>
         </div>
       </header>
diff --git a/query-connector/src/app/signin/page.tsx b/query-connector/src/app/signin/page.tsx
new file mode 100644
index 000000000..164a24f9d
--- /dev/null
+++ b/query-connector/src/app/signin/page.tsx
@@ -0,0 +1,86 @@
+"use client";
+import React, { useState } from "react";
+
+import {
+  Fieldset,
+  Label,
+  TextInput
+} from "@trussworks/react-uswds";
+
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import styles from "./signinPage.module.scss";
+
+/**
+ * The sign-in page for Query Connector.
+ * @returns The SigninPage component.
+ */
+export default function SigninPage() {
+  const router = useRouter();
+
+  const [userName, setUserName] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+
+  const handleSignin = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    router.push(`/query`);
+  }
+
+  return (
+    <div className="display-flex">
+      <div className={`${styles[`column-left`]} ${styles.column}`}>
+      <Image
+        alt="Graphic illustrating what TEFCA is"
+        className={styles.image}
+        src="/tefca-viewer/tefca-graphic.svg"
+        width={474}
+        height={438}
+        priority
+      />
+      </div>
+      <div className={styles.column}>
+        <div className={styles.card}>
+          <form onSubmit={handleSignin} action="" method="">
+            <div className={styles.formText}>
+              <h3>Sign in to Query Connector</h3>
+              <p>This workspace allows you to sign in with your organizational account.</p>
+            </div>
+            <Fieldset>
+              <Label htmlFor="Username" className="margin-top-0-important">
+                Username
+              </Label>
+              <TextInput
+                id="Username"
+                name="username"
+                type="text"
+                className={styles.formInput}
+                value={userName}
+                onChange={(event) => {
+                  setUserName(event.target.value);
+                }}
+              />
+               <Label htmlFor="Password" className="margin-top-0-important">
+                Password
+              </Label>
+              <TextInput
+                id="Password"
+                name="password"
+                type="password"
+                className={styles.formInput}
+                value={password}
+                onChange={(event) => {
+                  setPassword(event.target.value);
+                }}
+              />
+            </Fieldset>
+            <button              
+              className={`usa-button ${styles[`signin-button`]}`} type="submit"
+            >
+              Sign in
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/query-connector/src/app/signin/signinPage.module.scss b/query-connector/src/app/signin/signinPage.module.scss
new file mode 100644
index 000000000..f2786be44
--- /dev/null
+++ b/query-connector/src/app/signin/signinPage.module.scss
@@ -0,0 +1,37 @@
+@use "../../styles/_variables" as *;
+
+.column {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.column-left {
+    background: #adcfdc;
+}
+
+.signin-button {
+    margin: 1rem 0rem !important;
+    width: 100%;
+}
+
+.card {
+    min-width: 10rem;
+    max-width: 50%;
+    color: #5c5c5c;
+}
+
+.image {
+    max-width: 60%;
+    max-height: 60%;
+    min-width: 10rem;
+}
+
+.formText {
+    text-align: center;
+}
+
+.formInput {
+    margin: 0.5rem 0rem;
+}
diff --git a/query-connector/src/styles/custom-styles.scss b/query-connector/src/styles/custom-styles.scss
index 326081d02..b2b05a5a6 100644
--- a/query-connector/src/styles/custom-styles.scss
+++ b/query-connector/src/styles/custom-styles.scss
@@ -191,6 +191,7 @@ body {
   grid-template-columns: 1fr; // Defines a single column
   justify-content: center; // Centers the column in the container
   background-color: rgba(247, 249, 250, 1);
+  flex: auto; // Sizes main-body to fill space between header and footer
 }
 
 .home {

From 291fa80bccdeae1738392c7e59de46d8fdca89fc Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Mon, 28 Oct 2024 22:34:53 +0000
Subject: [PATCH 02/11] [pre-commit.ci] auto fixes from pre-commit hooks

---
 .../app/query/components/header/header.tsx    | 24 +++++++------
 query-connector/src/app/signin/page.tsx       | 36 +++++++++----------
 2 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx
index 40b5fd83b..6c2714b41 100644
--- a/query-connector/src/app/query/components/header/header.tsx
+++ b/query-connector/src/app/query/components/header/header.tsx
@@ -19,7 +19,7 @@ export default function HeaderComponent() {
   }, []);
 
   const router = useRouter();
-  const path = usePathname()
+  const path = usePathname();
 
   const handleClick = () => {
     router.push(`/signin`);
@@ -41,7 +41,11 @@ export default function HeaderComponent() {
               <em className="usa-logo__text text-base-lightest">
                 <a
                   className="text-base-lightest font-sans-xl text-bold"
-                  href={process.env.NODE_ENV === "production" ? "/tefca-viewer" : "/"}
+                  href={
+                    process.env.NODE_ENV === "production"
+                      ? "/tefca-viewer"
+                      : "/"
+                  }
                   title={metadata.title}
                 >
                   {metadata.title}
@@ -56,7 +60,7 @@ export default function HeaderComponent() {
               marginLeft: "auto",
             }}
           >
-            {(path != '/signin' && isClient) && (
+            {path != "/signin" && isClient && (
               <ModalButton
                 modalRef={modalRef}
                 title={"Data Usage Policy"}
@@ -64,13 +68,13 @@ export default function HeaderComponent() {
               />
             )}
             {/* TODO: Rework show/hide rules based on actual auth status */}
-            {(path != '/signin' && path != '/query') && ( 
-               <Button
-                 className={styles.signinButton}
-                 type="button"
-                 id="signin-button"
-                 title={"Sign in button"}
-                 onClick={() => handleClick()}
+            {path != "/signin" && path != "/query" && (
+              <Button
+                className={styles.signinButton}
+                type="button"
+                id="signin-button"
+                title={"Sign in button"}
+                onClick={() => handleClick()}
               >
                 Sign in
               </Button>
diff --git a/query-connector/src/app/signin/page.tsx b/query-connector/src/app/signin/page.tsx
index 164a24f9d..bdac8a8c8 100644
--- a/query-connector/src/app/signin/page.tsx
+++ b/query-connector/src/app/signin/page.tsx
@@ -1,11 +1,7 @@
 "use client";
 import React, { useState } from "react";
 
-import {
-  Fieldset,
-  Label,
-  TextInput
-} from "@trussworks/react-uswds";
+import { Fieldset, Label, TextInput } from "@trussworks/react-uswds";
 
 import { useRouter } from "next/navigation";
 import Image from "next/image";
@@ -24,26 +20,29 @@ export default function SigninPage() {
   const handleSignin = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     router.push(`/query`);
-  }
+  };
 
   return (
     <div className="display-flex">
       <div className={`${styles[`column-left`]} ${styles.column}`}>
-      <Image
-        alt="Graphic illustrating what TEFCA is"
-        className={styles.image}
-        src="/tefca-viewer/tefca-graphic.svg"
-        width={474}
-        height={438}
-        priority
-      />
+        <Image
+          alt="Graphic illustrating what TEFCA is"
+          className={styles.image}
+          src="/tefca-viewer/tefca-graphic.svg"
+          width={474}
+          height={438}
+          priority
+        />
       </div>
       <div className={styles.column}>
         <div className={styles.card}>
           <form onSubmit={handleSignin} action="" method="">
             <div className={styles.formText}>
               <h3>Sign in to Query Connector</h3>
-              <p>This workspace allows you to sign in with your organizational account.</p>
+              <p>
+                This workspace allows you to sign in with your organizational
+                account.
+              </p>
             </div>
             <Fieldset>
               <Label htmlFor="Username" className="margin-top-0-important">
@@ -59,7 +58,7 @@ export default function SigninPage() {
                   setUserName(event.target.value);
                 }}
               />
-               <Label htmlFor="Password" className="margin-top-0-important">
+              <Label htmlFor="Password" className="margin-top-0-important">
                 Password
               </Label>
               <TextInput
@@ -73,8 +72,9 @@ export default function SigninPage() {
                 }}
               />
             </Fieldset>
-            <button              
-              className={`usa-button ${styles[`signin-button`]}`} type="submit"
+            <button
+              className={`usa-button ${styles[`signin-button`]}`}
+              type="submit"
             >
               Sign in
             </button>

From b9ee4b268e0c6c6722e46e952753b7428b9855a4 Mon Sep 17 00:00:00 2001
From: Katie Campbell Downie <katie.campbelldownie@skylight.digital>
Date: Tue, 29 Oct 2024 13:02:58 -0500
Subject: [PATCH 03/11] Add gear icon for menu dropdown; go to landing page on
 Log Out click

---
 .../query/components/header/header.module.css | 36 ++++++++++++++
 .../app/query/components/header/header.tsx    | 48 ++++++++++++++++++-
 2 files changed, 83 insertions(+), 1 deletion(-)

diff --git a/query-connector/src/app/query/components/header/header.module.css b/query-connector/src/app/query/components/header/header.module.css
index 355aecad3..cbcf4420b 100644
--- a/query-connector/src/app/query/components/header/header.module.css
+++ b/query-connector/src/app/query/components/header/header.module.css
@@ -17,3 +17,39 @@
   color: white !important;
   font: inherit !important;
 }
+
+.menuButton {
+  cursor: pointer;
+  background: none !important;
+  border: none !important;
+  color: white !important;
+  padding: 0px !important;
+  font: inherit !important;
+  margin: 0 !important;
+}
+
+.menuDropdownContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.menuDropdown {
+  border-radius: 4px !important;
+  padding: 0.5rem !important;
+  background: #ffffff !important;
+  margin: 3.5rem 3rem 0rem 0rem !important;
+  width: 10rem !important;
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16);
+}
+
+.menuItem {
+  color: black !important;
+  text-decoration: none;
+  padding: 0.5rem 1rem !important;
+}
+
+.menuItem:hover {
+  text-decoration: none !important;
+}
diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx
index 6c2714b41..2fa08b118 100644
--- a/query-connector/src/app/query/components/header/header.tsx
+++ b/query-connector/src/app/query/components/header/header.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { Modal, ModalButton } from "../../designSystem/Modal";
-import { ModalRef, Button } from "@trussworks/react-uswds";
+import { ModalRef, Button, Icon } from "@trussworks/react-uswds";
 import styles from "./header.module.css";
 import { metadata } from "@/app/constants";
 import { useRouter, usePathname } from "next/navigation";
@@ -13,6 +13,7 @@ import { useRouter, usePathname } from "next/navigation";
 export default function HeaderComponent() {
   const modalRef = useRef<ModalRef>(null);
   const [isClient, setIsClient] = useState(false);
+  const [showMenu, setShowMenu] = useState(false);
 
   useEffect(() => {
     setIsClient(true);
@@ -25,6 +26,10 @@ export default function HeaderComponent() {
     router.push(`/signin`);
   };
 
+  const toggleMenuDropdown = () => {
+    setShowMenu(!showMenu)
+  }
+
   return (
     <>
       <header className="usa-header usa-header--basic bg-primary-darker">
@@ -34,6 +39,7 @@ export default function HeaderComponent() {
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
+            height: "4.5rem !important",
           }}
         >
           <div style={{ display: "flex", alignItems: "center" }}>
@@ -58,6 +64,7 @@ export default function HeaderComponent() {
               whiteSpace: "nowrap",
               textAlign: "right",
               marginLeft: "auto",
+              display: "flex"
             }}
           >
             {path != "/signin" && isClient && (
@@ -79,6 +86,28 @@ export default function HeaderComponent() {
                 Sign in
               </Button>
             )}
+            {(path == "/query") && (
+              <button
+                onClick={toggleMenuDropdown}
+                className={`${styles.menuButton} usa-accordion__button usa-nav__link usa-current`}
+                aria-expanded="false"
+                aria-controls="dropdown-menu"
+                style={{
+                  background: "transparent",
+                  padding: "0 !important",
+                  height: "1.5rem !important",
+                  width: "1.5rem !important",
+                  margin: "0 1rem 0 0 !important"
+                }}
+              >
+                  <Icon.Settings
+                    className="usa-icon qc-settings"
+                    size={3}
+                    color="#fff"
+                    aria-label="Gear icon indicating settings menu"
+                  />
+            </button>
+          )}
           </div>
         </div>
       </header>
@@ -91,6 +120,23 @@ export default function HeaderComponent() {
           description="It's not! Data inputted into the TEFCA Query Connector is not persisted or stored anywhere."
         ></Modal>
       )}
+
+      {showMenu && (
+        <div className={styles.menuDropdownContainer}>
+          <ul id="dropdown-menu" className={`usa-nav__submenu ${styles.menuDropdown}`}>
+            <li className={`usa-nav__submenu-item`}>
+              <a className={styles.menuItem} href="#">
+                My queries 
+              </a>
+            </li>
+            <li className={`usa-nav__submenu-item`}>
+              <a className={styles.menuItem} href="/">
+                Log out
+              </a>
+            </li>
+          </ul>
+        </div>
+      )}
     </>
   );
 }

From b7a59233c9718546794f13f5daa6e9dedce6c8b5 Mon Sep 17 00:00:00 2001
From: Katie Campbell Downie <katie.campbelldownie@skylight.digital>
Date: Tue, 29 Oct 2024 13:14:54 -0500
Subject: [PATCH 04/11] prettier formatting

---
 query-connector/src/app/query/components/header/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx
index 2fa08b118..8806e6bb4 100644
--- a/query-connector/src/app/query/components/header/header.tsx
+++ b/query-connector/src/app/query/components/header/header.tsx
@@ -126,7 +126,7 @@ export default function HeaderComponent() {
           <ul id="dropdown-menu" className={`usa-nav__submenu ${styles.menuDropdown}`}>
             <li className={`usa-nav__submenu-item`}>
               <a className={styles.menuItem} href="#">
-                My queries 
+                My queries
               </a>
             </li>
             <li className={`usa-nav__submenu-item`}>

From 7f30eaf538d2548aca9ba91e7fab156926e22564 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Tue, 29 Oct 2024 18:16:16 +0000
Subject: [PATCH 05/11] [pre-commit.ci] auto fixes from pre-commit hooks

---
 .../app/query/components/header/header.tsx    | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx
index 8806e6bb4..b7b314d9a 100644
--- a/query-connector/src/app/query/components/header/header.tsx
+++ b/query-connector/src/app/query/components/header/header.tsx
@@ -27,8 +27,8 @@ export default function HeaderComponent() {
   };
 
   const toggleMenuDropdown = () => {
-    setShowMenu(!showMenu)
-  }
+    setShowMenu(!showMenu);
+  };
 
   return (
     <>
@@ -64,7 +64,7 @@ export default function HeaderComponent() {
               whiteSpace: "nowrap",
               textAlign: "right",
               marginLeft: "auto",
-              display: "flex"
+              display: "flex",
             }}
           >
             {path != "/signin" && isClient && (
@@ -86,7 +86,7 @@ export default function HeaderComponent() {
                 Sign in
               </Button>
             )}
-            {(path == "/query") && (
+            {path == "/query" && (
               <button
                 onClick={toggleMenuDropdown}
                 className={`${styles.menuButton} usa-accordion__button usa-nav__link usa-current`}
@@ -97,17 +97,17 @@ export default function HeaderComponent() {
                   padding: "0 !important",
                   height: "1.5rem !important",
                   width: "1.5rem !important",
-                  margin: "0 1rem 0 0 !important"
+                  margin: "0 1rem 0 0 !important",
                 }}
               >
-                  <Icon.Settings
-                    className="usa-icon qc-settings"
-                    size={3}
-                    color="#fff"
-                    aria-label="Gear icon indicating settings menu"
-                  />
-            </button>
-          )}
+                <Icon.Settings
+                  className="usa-icon qc-settings"
+                  size={3}
+                  color="#fff"
+                  aria-label="Gear icon indicating settings menu"
+                />
+              </button>
+            )}
           </div>
         </div>
       </header>
@@ -123,7 +123,10 @@ export default function HeaderComponent() {
 
       {showMenu && (
         <div className={styles.menuDropdownContainer}>
-          <ul id="dropdown-menu" className={`usa-nav__submenu ${styles.menuDropdown}`}>
+          <ul
+            id="dropdown-menu"
+            className={`usa-nav__submenu ${styles.menuDropdown}`}
+          >
             <li className={`usa-nav__submenu-item`}>
               <a className={styles.menuItem} href="#">
                 My queries

From 0906224e924d708f0f6126501a5adad1df77d2a1 Mon Sep 17 00:00:00 2001
From: Katie Campbell Downie <katie.campbelldownie@skylight.digital>
Date: Tue, 29 Oct 2024 13:21:15 -0500
Subject: [PATCH 06/11] tweak icon spacing

---
 .../src/app/query/components/header/header.module.css            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/query-connector/src/app/query/components/header/header.module.css b/query-connector/src/app/query/components/header/header.module.css
index cbcf4420b..e4b59b2cb 100644
--- a/query-connector/src/app/query/components/header/header.module.css
+++ b/query-connector/src/app/query/components/header/header.module.css
@@ -26,6 +26,7 @@
   padding: 0px !important;
   font: inherit !important;
   margin: 0 !important;
+  height: 1.5rem !important;
 }
 
 .menuDropdownContainer {

From 52db5c993185fd736e94753ef73626776ec28d1b Mon Sep 17 00:00:00 2001
From: Katie Campbell Downie <katie.campbelldownie@skylight.digital>
Date: Tue, 29 Oct 2024 13:28:22 -0500
Subject: [PATCH 07/11] PR feedback

---
 query-connector/src/app/signin/page.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/query-connector/src/app/signin/page.tsx b/query-connector/src/app/signin/page.tsx
index bdac8a8c8..e0dbcd4f0 100644
--- a/query-connector/src/app/signin/page.tsx
+++ b/query-connector/src/app/signin/page.tsx
@@ -14,8 +14,8 @@ import styles from "./signinPage.module.scss";
 export default function SigninPage() {
   const router = useRouter();
 
-  const [userName, setUserName] = useState<string>("");
-  const [password, setPassword] = useState<string>("");
+  const [_userName, setUserName] = useState<string>("");
+  const [_password, setPassword] = useState<string>("");
 
   const handleSignin = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -53,7 +53,6 @@ export default function SigninPage() {
                 name="username"
                 type="text"
                 className={styles.formInput}
-                value={userName}
                 onChange={(event) => {
                   setUserName(event.target.value);
                 }}
@@ -66,7 +65,6 @@ export default function SigninPage() {
                 name="password"
                 type="password"
                 className={styles.formInput}
-                value={password}
                 onChange={(event) => {
                   setPassword(event.target.value);
                 }}

From 4713065bf77535bba416834cbe20eb1a27e37823 Mon Sep 17 00:00:00 2001
From: DanPaseltiner <dan@skylight.digital>
Date: Thu, 31 Oct 2024 13:09:45 -0400
Subject: [PATCH 08/11] Set back link in header

---
 .../src/app/query/components/header/header.tsx   | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx
index b7b314d9a..62feb4123 100644
--- a/query-connector/src/app/query/components/header/header.tsx
+++ b/query-connector/src/app/query/components/header/header.tsx
@@ -29,7 +29,8 @@ export default function HeaderComponent() {
   const toggleMenuDropdown = () => {
     setShowMenu(!showMenu);
   };
-
+  const backLink =
+    process.env.NODE_ENV === "production" ? "/tefca-viewer" : "/";
   return (
     <>
       <header className="usa-header usa-header--basic bg-primary-darker">
@@ -47,11 +48,7 @@ export default function HeaderComponent() {
               <em className="usa-logo__text text-base-lightest">
                 <a
                   className="text-base-lightest font-sans-xl text-bold"
-                  href={
-                    process.env.NODE_ENV === "production"
-                      ? "/tefca-viewer"
-                      : "/"
-                  }
+                  href={backLink}
                   title={metadata.title}
                 >
                   {metadata.title}
@@ -133,7 +130,12 @@ export default function HeaderComponent() {
               </a>
             </li>
             <li className={`usa-nav__submenu-item`}>
-              <a className={styles.menuItem} href="/">
+              <a
+                className={styles.menuItem}
+                href={
+                  process.env.NODE_ENV === "production" ? "/tefca-viewer" : "/"
+                }
+              >
                 Log out
               </a>
             </li>

From 59b086512a0a56f52a1d7a9c7e6d7143418dc9c8 Mon Sep 17 00:00:00 2001
From: Katie Campbell Downie <katie.campbelldownie@skylight.digital>
Date: Thu, 31 Oct 2024 17:07:49 -0500
Subject: [PATCH 09/11] PR design feedback - error state, some responsive
 sizing, hide My Queries for now

---
 .../app/query/components/header/header.tsx    |   8 +-
 query-connector/src/app/signin/page.tsx       | 122 ++++++++++++------
 .../src/app/signin/signinPage.module.scss     | 121 +++++++++++++++--
 3 files changed, 201 insertions(+), 50 deletions(-)

diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx
index 62feb4123..677760656 100644
--- a/query-connector/src/app/query/components/header/header.tsx
+++ b/query-connector/src/app/query/components/header/header.tsx
@@ -124,17 +124,15 @@ export default function HeaderComponent() {
             id="dropdown-menu"
             className={`usa-nav__submenu ${styles.menuDropdown}`}
           >
-            <li className={`usa-nav__submenu-item`}>
+            {/* <li className={`usa-nav__submenu-item`}>
               <a className={styles.menuItem} href="#">
                 My queries
               </a>
-            </li>
+            </li> */}
             <li className={`usa-nav__submenu-item`}>
               <a
                 className={styles.menuItem}
-                href={
-                  process.env.NODE_ENV === "production" ? "/tefca-viewer" : "/"
-                }
+                href={backLink}                
               >
                 Log out
               </a>
diff --git a/query-connector/src/app/signin/page.tsx b/query-connector/src/app/signin/page.tsx
index e0dbcd4f0..46291899e 100644
--- a/query-connector/src/app/signin/page.tsx
+++ b/query-connector/src/app/signin/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import React, { useState } from "react";
 
-import { Fieldset, Label, TextInput } from "@trussworks/react-uswds";
+import { Fieldset, Icon, Label, TextInput } from "@trussworks/react-uswds";
 
 import { useRouter } from "next/navigation";
 import Image from "next/image";
@@ -13,12 +13,42 @@ import styles from "./signinPage.module.scss";
  */
 export default function SigninPage() {
   const router = useRouter();
+ 
+  type Credentials = {
+    username: string;
+    password: string;
+  };
+
+  const [signinError, setSigninError] = useState<boolean>(false);
+  const [credentials, setCredentials] = useState<Credentials>({
+    username: "",
+    password: "",
+  })
+
+  const handleInput = (event: React.FormEvent<HTMLInputElement>) => {
+    event.preventDefault();
+
+    const attribute = event.currentTarget.getAttribute("name") || ""
+    const value = event.currentTarget.value;
+   
+    // clear error state when entering input text
+    if (signinError && value != "") {
+      setSigninError(false)
+    }
 
-  const [_userName, setUserName] = useState<string>("");
-  const [_password, setPassword] = useState<string>("");
+    if (attribute != "") {
+      setCredentials({...credentials, [attribute]: value})
+    }
+  }
 
   const handleSignin = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
+    if (credentials.username == "" || credentials.password == "") {
+      setSigninError(true);
+      return;
+    } else {
+      setSigninError(false)
+    }
     router.push(`/query`);
   };
 
@@ -36,47 +66,65 @@ export default function SigninPage() {
       </div>
       <div className={styles.column}>
         <div className={styles.card}>
-          <form onSubmit={handleSignin} action="" method="">
-            <div className={styles.formText}>
-              <h3>Sign in to Query Connector</h3>
-              <p>
-                This workspace allows you to sign in with your organizational
-                account.
-              </p>
+          <form className={styles.formContainer} onSubmit={handleSignin} action="" method="">
+            <div className={styles.formContent}>
+              <div className={styles.formHeader}>
+                <h3>Sign in to Query Connector</h3>
+                <p>
+                  This workspace allows you to sign in with your organizational
+                  account.
+                </p>
+              </div>
+                <Fieldset className={styles.formFields}>
+                <div className={styles.formInputGroup}>
+                <Label htmlFor="Username" className="margin-top-0-important">
+                  Username
+                </Label>
+                <TextInput
+                  id="Username"
+                  name="username"
+                  type="text"
+                  className={signinError ? `${styles.formError}` : `${styles.formInput}`}
+                  onChange={(event) => {
+                    handleInput(event);
+                  }}
+                />
+                </div>
+                <div className={styles.formInputGroup}>
+                <Label htmlFor="Password" className="margin-top-0-important">
+                  Password
+                </Label>
+                <TextInput
+                  id="Password"
+                  name="password"
+                  type="password"
+                  className={signinError ? `${styles.formError}` : `${styles.formInput}`}
+                  onChange={(event) => {
+                    handleInput(event);
+                  }}
+                />
+                </div>
+                </Fieldset>
             </div>
-            <Fieldset>
-              <Label htmlFor="Username" className="margin-top-0-important">
-                Username
-              </Label>
-              <TextInput
-                id="Username"
-                name="username"
-                type="text"
-                className={styles.formInput}
-                onChange={(event) => {
-                  setUserName(event.target.value);
-                }}
-              />
-              <Label htmlFor="Password" className="margin-top-0-important">
-                Password
-              </Label>
-              <TextInput
-                id="Password"
-                name="password"
-                type="password"
-                className={styles.formInput}
-                onChange={(event) => {
-                  setPassword(event.target.value);
-                }}
-              />
-            </Fieldset>
             <button
               className={`usa-button ${styles[`signin-button`]}`}
               type="submit"
             >
               Sign in
-            </button>
+            </button>  
           </form>
+          <div className={signinError ? `${styles.inlineError}` : `${styles.hidden}`}>
+              <Icon.Info
+                className="usa-icon qc-info"
+                size={3}
+                color="#E41D3D"
+                aria-label="Information icon indicating a form error"
+                aria-hidden={!signinError}
+              />                 
+              <p>
+                You have entered an invalid username and/or password
+              </p>
+            </div>
         </div>
       </div>
     </div>
diff --git a/query-connector/src/app/signin/signinPage.module.scss b/query-connector/src/app/signin/signinPage.module.scss
index f2786be44..dfaa27e6f 100644
--- a/query-connector/src/app/signin/signinPage.module.scss
+++ b/query-connector/src/app/signin/signinPage.module.scss
@@ -3,6 +3,7 @@
 .column {
     width: 100%;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
 }
@@ -12,26 +13,130 @@
 }
 
 .signin-button {
-    margin: 1rem 0rem !important;
+    margin: 5px 0 5px 0;
     width: 100%;
+    padding: 0.75rem 1.25rem 0.75rem 1.25rem;
+    font-size: 16px;
+    line-height: 19px;
+    font-weight: 700;
 }
 
 .card {
-    min-width: 10rem;
-    max-width: 50%;
+    min-width: 50%;
+    max-width: 25rem;
     color: #5c5c5c;
+    margin: 1.5rem;
 }
 
 .image {
-    max-width: 60%;
-    max-height: 60%;
-    min-width: 10rem;
+    max-height: 66%;
+    padding: 1.5rem;
 }
 
-.formText {
+@media screen and (max-width: 786px) {
+    .column-left {
+        display: none;
+    }
+}
+
+.formContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem 2.5rem 0.75rem 2.5rem;
+}
+
+.formContent {
+    padding: 0.875rem 0 0.875rem 0;
+    margin: 0.75rem 0 0.75rem 0;
+}
+
+.formHeader {
     text-align: center;
+    margin: 0 0 0.5rem 0;
+    padding: 0 0 0.5rem 0;
+
+    h3 {
+        font-size: 20px;
+        line-height: 23.5px;
+        margin: 0;
+        padding: 2.25px 0;
+    }
+
+    p {
+        font-size: 14px;
+        line-height: 19px;
+        font-weight: 400;
+        padding: 0;
+        margin: 0;
+    }
+}
+
+.formFields {
+    padding: 0.25rem 0 0.25rem 0;
+    margin: 0 0 1rem 0;
+}
+
+.formInputGroup {
+    label {
+        font-size: 14px;
+        line-height: 19px;
+        margin-bottom: 0.25rem;
+    }
+
+    padding-bottom: 0.25rem;
 }
 
+// .formInputGroup {
+//     margin-bottom: 0.25rem;
+//     padding: 0 0 0.75rem 0 !important;
+// }
+
 .formInput {
-    margin: 0.5rem 0rem;
+    border-radius: 0.25rem;
+    padding: 0.75rem;
+    margin: 0;
+    font-size: 14px;
+    line-height: 17px;
+    height: unset;
+}
+
+.formError {
+    border-radius: 0.25rem;
+    padding: 0.75rem;
+    margin: 0;
+    font-size: 14px;
+    line-height: 17px;
+    height: unset;
+    border: 1px solid #e41d3d !important;
+}
+
+.inlineError {
+    width: 100%;
+    display: inline-flex;
+    color: #e41d3d;
+    align-items: center;
+    justify-content: center;
+
+    p {
+        margin: 0 0 0 0.5rem;
+        font-size: 14px;
+        line-height: 19px;
+    }
+}
+
+.hidden {
+    visibility: hidden;
+    width: 100%;
+    display: inline-flex;
+    color: #e41d3d;
+    align-items: center;
+    justify-content: center;
+
+    p {
+        margin: 0 0 0 0.5rem;
+        font-size: 14px;
+        line-height: 19px;
+    }
 }

From d128a1bcd55a1bafceb266614aaaf853cdcb3b99 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Thu, 31 Oct 2024 22:08:57 +0000
Subject: [PATCH 10/11] [pre-commit.ci] auto fixes from pre-commit hooks

---
 .../app/query/components/header/header.tsx    |   5 +-
 query-connector/src/app/signin/page.tsx       | 111 ++++++++++--------
 2 files changed, 64 insertions(+), 52 deletions(-)

diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx
index 677760656..5ba5ee857 100644
--- a/query-connector/src/app/query/components/header/header.tsx
+++ b/query-connector/src/app/query/components/header/header.tsx
@@ -130,10 +130,7 @@ export default function HeaderComponent() {
               </a>
             </li> */}
             <li className={`usa-nav__submenu-item`}>
-              <a
-                className={styles.menuItem}
-                href={backLink}                
-              >
+              <a className={styles.menuItem} href={backLink}>
                 Log out
               </a>
             </li>
diff --git a/query-connector/src/app/signin/page.tsx b/query-connector/src/app/signin/page.tsx
index 46291899e..c88bd6c99 100644
--- a/query-connector/src/app/signin/page.tsx
+++ b/query-connector/src/app/signin/page.tsx
@@ -13,7 +13,7 @@ import styles from "./signinPage.module.scss";
  */
 export default function SigninPage() {
   const router = useRouter();
- 
+
   type Credentials = {
     username: string;
     password: string;
@@ -23,23 +23,23 @@ export default function SigninPage() {
   const [credentials, setCredentials] = useState<Credentials>({
     username: "",
     password: "",
-  })
+  });
 
   const handleInput = (event: React.FormEvent<HTMLInputElement>) => {
     event.preventDefault();
 
-    const attribute = event.currentTarget.getAttribute("name") || ""
+    const attribute = event.currentTarget.getAttribute("name") || "";
     const value = event.currentTarget.value;
-   
+
     // clear error state when entering input text
     if (signinError && value != "") {
-      setSigninError(false)
+      setSigninError(false);
     }
 
     if (attribute != "") {
-      setCredentials({...credentials, [attribute]: value})
+      setCredentials({ ...credentials, [attribute]: value });
     }
-  }
+  };
 
   const handleSignin = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -47,7 +47,7 @@ export default function SigninPage() {
       setSigninError(true);
       return;
     } else {
-      setSigninError(false)
+      setSigninError(false);
     }
     router.push(`/query`);
   };
@@ -66,7 +66,12 @@ export default function SigninPage() {
       </div>
       <div className={styles.column}>
         <div className={styles.card}>
-          <form className={styles.formContainer} onSubmit={handleSignin} action="" method="">
+          <form
+            className={styles.formContainer}
+            onSubmit={handleSignin}
+            action=""
+            method=""
+          >
             <div className={styles.formContent}>
               <div className={styles.formHeader}>
                 <h3>Sign in to Query Connector</h3>
@@ -75,56 +80,66 @@ export default function SigninPage() {
                   account.
                 </p>
               </div>
-                <Fieldset className={styles.formFields}>
+              <Fieldset className={styles.formFields}>
                 <div className={styles.formInputGroup}>
-                <Label htmlFor="Username" className="margin-top-0-important">
-                  Username
-                </Label>
-                <TextInput
-                  id="Username"
-                  name="username"
-                  type="text"
-                  className={signinError ? `${styles.formError}` : `${styles.formInput}`}
-                  onChange={(event) => {
-                    handleInput(event);
-                  }}
-                />
+                  <Label htmlFor="Username" className="margin-top-0-important">
+                    Username
+                  </Label>
+                  <TextInput
+                    id="Username"
+                    name="username"
+                    type="text"
+                    className={
+                      signinError
+                        ? `${styles.formError}`
+                        : `${styles.formInput}`
+                    }
+                    onChange={(event) => {
+                      handleInput(event);
+                    }}
+                  />
                 </div>
                 <div className={styles.formInputGroup}>
-                <Label htmlFor="Password" className="margin-top-0-important">
-                  Password
-                </Label>
-                <TextInput
-                  id="Password"
-                  name="password"
-                  type="password"
-                  className={signinError ? `${styles.formError}` : `${styles.formInput}`}
-                  onChange={(event) => {
-                    handleInput(event);
-                  }}
-                />
+                  <Label htmlFor="Password" className="margin-top-0-important">
+                    Password
+                  </Label>
+                  <TextInput
+                    id="Password"
+                    name="password"
+                    type="password"
+                    className={
+                      signinError
+                        ? `${styles.formError}`
+                        : `${styles.formInput}`
+                    }
+                    onChange={(event) => {
+                      handleInput(event);
+                    }}
+                  />
                 </div>
-                </Fieldset>
+              </Fieldset>
             </div>
             <button
               className={`usa-button ${styles[`signin-button`]}`}
               type="submit"
             >
               Sign in
-            </button>  
+            </button>
           </form>
-          <div className={signinError ? `${styles.inlineError}` : `${styles.hidden}`}>
-              <Icon.Info
-                className="usa-icon qc-info"
-                size={3}
-                color="#E41D3D"
-                aria-label="Information icon indicating a form error"
-                aria-hidden={!signinError}
-              />                 
-              <p>
-                You have entered an invalid username and/or password
-              </p>
-            </div>
+          <div
+            className={
+              signinError ? `${styles.inlineError}` : `${styles.hidden}`
+            }
+          >
+            <Icon.Info
+              className="usa-icon qc-info"
+              size={3}
+              color="#E41D3D"
+              aria-label="Information icon indicating a form error"
+              aria-hidden={!signinError}
+            />
+            <p>You have entered an invalid username and/or password</p>
+          </div>
         </div>
       </div>
     </div>

From b7ed66e1a3bdc52ffbdd97000a609f3f0f459639 Mon Sep 17 00:00:00 2001
From: Katie Campbell Downie <katie.campbelldownie@skylight.digital>
Date: Fri, 1 Nov 2024 11:36:47 -0500
Subject: [PATCH 11/11] tweak whitespace

---
 .../src/app/signin/signinPage.module.scss        | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/query-connector/src/app/signin/signinPage.module.scss b/query-connector/src/app/signin/signinPage.module.scss
index dfaa27e6f..70ddd89f1 100644
--- a/query-connector/src/app/signin/signinPage.module.scss
+++ b/query-connector/src/app/signin/signinPage.module.scss
@@ -13,7 +13,7 @@
 }
 
 .signin-button {
-    margin: 5px 0 5px 0;
+    margin: 0;
     width: 100%;
     padding: 0.75rem 1.25rem 0.75rem 1.25rem;
     font-size: 16px;
@@ -48,8 +48,7 @@
 }
 
 .formContent {
-    padding: 0.875rem 0 0.875rem 0;
-    margin: 0.75rem 0 0.75rem 0;
+    padding: 0.75rem 0 0.75rem 0;
 }
 
 .formHeader {
@@ -74,8 +73,8 @@
 }
 
 .formFields {
-    padding: 0.25rem 0 0.25rem 0;
-    margin: 0 0 1rem 0;
+    padding: 0;
+    margin: 0;
 }
 
 .formInputGroup {
@@ -85,14 +84,9 @@
         margin-bottom: 0.25rem;
     }
 
-    padding-bottom: 0.25rem;
+    padding-bottom: 1.5rem;
 }
 
-// .formInputGroup {
-//     margin-bottom: 0.25rem;
-//     padding: 0 0 0.75rem 0 !important;
-// }
-
 .formInput {
     border-radius: 0.25rem;
     padding: 0.75rem;