diff --git a/components/Header/Super.tsx b/components/Header/Super.tsx
index dcafb641..9402fd3f 100644
--- a/components/Header/Super.tsx
+++ b/components/Header/Super.tsx
@@ -15,7 +15,9 @@ import { NavResponsiveOnly } from "@/components/Nav/Nav.styled";
import { NorthwesternWordmark } from "@/components/Shared/SVG/Northwestern";
import React from "react";
import { UserContext } from "@/context/user-context";
+import { defaultAIState } from "@/hooks/useGenerativeAISearchToggle";
import useLocalStorage from "@/hooks/useLocalStorage";
+import { useRouter } from "next/router";
const nav = [
{
@@ -33,9 +35,12 @@ const nav = [
];
export default function HeaderSuper() {
+ const router = useRouter();
+ const { query } = router;
+
const [isLoaded, setIsLoaded] = React.useState(false);
const [isExpanded, setIsExpanded] = React.useState(false);
- const [ai, setAI] = useLocalStorage("ai", "false");
+ const [ai, setAI] = useLocalStorage("ai", defaultAIState);
React.useEffect(() => {
setIsLoaded(true);
@@ -45,7 +50,12 @@ export default function HeaderSuper() {
const handleMenu = () => setIsExpanded(!isExpanded);
const handleLogout = () => {
- if (ai === "true") setAI("false");
+ // reset AI state and remove query param
+ setAI(defaultAIState);
+ delete query?.ai;
+ router.push(router.pathname, { query });
+
+ // logout
window.location.href = `${DCAPI_ENDPOINT}/auth/logout`;
};
diff --git a/components/Search/GenerativeAIToggle.test.tsx b/components/Search/GenerativeAIToggle.test.tsx
index 59b311e8..67f63e4d 100644
--- a/components/Search/GenerativeAIToggle.test.tsx
+++ b/components/Search/GenerativeAIToggle.test.tsx
@@ -57,7 +57,11 @@ describe("GenerativeAIToggle", () => {
await user.click(checkbox);
expect(checkbox).toHaveAttribute("data-state", "checked");
- expect(localStorage.getItem("ai")).toEqual(JSON.stringify("true"));
+
+ const ai = JSON.parse(String(localStorage.getItem("ai")));
+ expect(ai?.enabled).toEqual("true");
+ expect(typeof ai?.expires).toEqual("number");
+ expect(ai?.expires).toBeGreaterThan(Date.now());
});
it("renders the generative AI tooltip", () => {
@@ -99,7 +103,10 @@ describe("GenerativeAIToggle", () => {
...defaultSearchState,
};
- localStorage.setItem("ai", JSON.stringify("true"));
+ localStorage.setItem(
+ "ai",
+ JSON.stringify({ enabled: "true", expires: 9733324925021 }),
+ );
mockRouter.setCurrentUrl("/search");
render(
@@ -117,7 +124,7 @@ describe("GenerativeAIToggle", () => {
mockRouter.setCurrentUrl("/");
- localStorage.setItem("ai", JSON.stringify("false"));
+ localStorage.setItem("ai", JSON.stringify({ enabled: "false" }));
render(
withUserProvider(
@@ -127,6 +134,9 @@ describe("GenerativeAIToggle", () => {
await user.click(screen.getByRole("checkbox"));
- expect(localStorage.getItem("ai")).toEqual(JSON.stringify("true"));
+ const ai = JSON.parse(String(localStorage.getItem("ai")));
+ expect(ai?.enabled).toEqual("true");
+ expect(typeof ai?.expires).toEqual("number");
+ expect(ai?.expires).toBeGreaterThan(Date.now());
});
});
diff --git a/components/Search/GenerativeAIToggle.tsx b/components/Search/GenerativeAIToggle.tsx
index f460ff99..0774a641 100644
--- a/components/Search/GenerativeAIToggle.tsx
+++ b/components/Search/GenerativeAIToggle.tsx
@@ -63,7 +63,8 @@ export default function GenerativeAIToggle() {
{AI_LOGIN_ALERT}
diff --git a/components/Search/Search.test.tsx b/components/Search/Search.test.tsx
index da91e2b5..5f747ad9 100644
--- a/components/Search/Search.test.tsx
+++ b/components/Search/Search.test.tsx
@@ -106,7 +106,10 @@ describe("Search component", () => {
});
it("renders generative AI placeholder text when AI search is active", () => {
- localStorage.setItem("ai", JSON.stringify("true"));
+ localStorage.setItem(
+ "ai",
+ JSON.stringify({ enabled: "true", expires: 9733324925021 }),
+ );
render(withUserProvider());
diff --git a/components/Shared/AlertDialog.styled.ts b/components/Shared/AlertDialog.styled.ts
index 941b2808..d13e7bb1 100644
--- a/components/Shared/AlertDialog.styled.ts
+++ b/components/Shared/AlertDialog.styled.ts
@@ -19,7 +19,7 @@ const AlertDialogOverlay = styled(AlertDialog.Overlay, {
const AlertDialogContent = styled(AlertDialog.Content, {
backgroundColor: "white",
- borderRadius: 6,
+ borderRadius: "6px",
boxShadow:
"hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
position: "fixed",
@@ -29,8 +29,9 @@ const AlertDialogContent = styled(AlertDialog.Content, {
width: "90vw",
maxWidth: "500px",
maxHeight: "85vh",
- padding: 25,
+ padding: "$gr4",
zIndex: "2",
+ fontSize: "$gr3",
"&:focus": { outline: "none" },
});
@@ -46,7 +47,11 @@ const AlertDialogTitle = styled(AlertDialog.Title, {
const AlertDialogButtonRow = styled("div", {
display: "flex",
- justifyContent: "flex-end",
+ justifyContent: "space-between",
+
+ "> button": {
+ margin: 0,
+ },
"& > *:not(:last-child)": {
marginRight: "$gr3",
diff --git a/components/Shared/AlertDialog.tsx b/components/Shared/AlertDialog.tsx
index a92f4e58..516419eb 100644
--- a/components/Shared/AlertDialog.tsx
+++ b/components/Shared/AlertDialog.tsx
@@ -43,13 +43,13 @@ export default function SharedAlertDialog({
{children}
{cancel && (
-