nulib · mathewjordan · Jun 26, 2024 · Jun 26, 2024
diff --git a/components/Chat/Response/Response.styled.tsx b/components/Chat/Response/Response.styled.tsx
@@ -20,7 +20,6 @@ const StyledResponse = styled("section", {
 });
 
 const StyledResponseAside = styled("aside", {
-  // background: "linear-gradient(7deg, $white 0%, $gray6 100%)",
   width: "38.2%",
   flexShrink: 0,
   borderRadius: "inherit",
@@ -77,19 +76,26 @@ const StyledQuestion = styled("h3", {
   letterSpacing: "-0.012em",
   lineHeight: "1.35em",
   margin: "0",
-  padding: "0 0 $gr3 0",
+  padding: "0 0 $gr4 0",
   color: "$black",
 });
 
 const StyledStreamedAnswer = styled("article", {
   fontSize: "$gr3",
-  lineHeight: "1.7em",
+  lineHeight: "1.63em",
 
-  strong: {
+  "h1, h2, h3, h4, h5, h6, strong": {
     fontWeight: "400",
     fontFamily: "$northwesternSansBold",
   },
 
+  a: {
+    textDecoration: "underline",
+    textDecorationThickness: "min(2px,max(1px,.05em))",
+    textUnderlineOffset: "calc(.05em + 2px)",
+    textDecorationColor: "$purple10",
+  },
+
   "span.markdown-cursor": {
     position: "relative",
     marginLeft: "$gr1",

diff --git a/components/Clover/ViewerWrapper.styled.ts b/components/Clover/ViewerWrapper.styled.ts
@@ -5,10 +5,9 @@ import { styled } from "@/stitches.config";
 const ViewerWrapperStyled = styled("section", {
   position: "relative",
   zIndex: "1",
-  margin: "1px 0 0 0",
 
-  "[class*='-css']": {
-    boxShadow: "3px 3px 11px #0002",
+  ".clover-viewer-painting": {
+    background: "#f0f0f0",
   },
 
   "& label[for='information-toggle']": {

diff --git a/components/Facets/Facets.styled.ts b/components/Facets/Facets.styled.ts
@@ -49,7 +49,7 @@ const FacetExtras = styled("div", {
 const Wrapper = styled("div", {
   height: "38px",
   transition: "$dcScrollHeight",
-  margin: "$gr4 0",
+  margin: "0 0 $gr4",
 
   "@sm": {
     margin: "-$gr4 0 $gr4",

diff --git a/components/Facets/Filter/Clear.styled.ts b/components/Facets/Filter/Clear.styled.ts
@@ -26,6 +26,7 @@ const FilterClearStyled = styled("button", {
   variants: {
     isFixed: {
       true: {
+        backgroundColor: "$white",
         boxShadow: "2px 2px 5px #0002",
       },
     },

diff --git a/components/Facets/UserFacets/UserFacets.styled.ts b/components/Facets/UserFacets/UserFacets.styled.ts
@@ -1,11 +1,12 @@
 import * as Dropdown from "@radix-ui/react-dropdown-menu";
+
 import { styled } from "@/stitches.config";
 
 /* eslint sort-keys: 0 */
 
 const DropdownToggle = styled(Dropdown.Trigger, {
   display: "flex",
-  padding: "0 $gr2",
+  padding: "0 $gr1",
   border: "none",
   position: "relative",
   backgroundColor: "transparent",
@@ -21,7 +22,6 @@ const DropdownToggle = styled(Dropdown.Trigger, {
 
   svg: {
     width: "$gr4",
-    marginBottom: "-3px",
     color: "$purple120",
     transform: "rotate(0deg)",
     transition: "$dcAll",
@@ -41,7 +41,8 @@ const DropdownToggle = styled(Dropdown.Trigger, {
     height: "19px",
     borderRadius: "50%",
     marginTop: "-$gr4",
-    marginRight: "calc(-$gr3 + 4px)",
+    position: "absolute",
+    right: "-6px",
   },
 
   [`&:hover`]: {

diff --git a/components/Facets/WorkType/WorkType.styled.ts b/components/Facets/WorkType/WorkType.styled.ts
@@ -1,4 +1,5 @@
 import * as Radio from "@radix-ui/react-radio-group";
+
 import { styled } from "@/stitches.config";
 
 /* eslint sort-keys: 0 */

diff --git a/components/Header/Header.styled.ts b/components/Header/Header.styled.ts
@@ -1,4 +1,5 @@
 import { VariantProps, styled } from "@/stitches.config";
+
 import { ContainerStyled } from "@/components/Shared/Container";
 import { NavStyled } from "@/components/Nav/Nav.styled";
 import { SearchStyled } from "@/components/Search/Search.styled";
@@ -7,13 +8,14 @@ import { SearchStyled } from "@/components/Search/Search.styled";
 
 const Lockup = styled("div", {
   position: "relative",
-  padding: "$gr4 0 $gr5",
-  fontSize: "$gr6",
-  fontFamily: "$northwesternSansLight",
+  padding: "$gr4 0",
+  fontSize: "$gr5",
+  fontFamily: "$northwesternSansRegular",
   zIndex: "1",
+  color: "$purple",
 
   a: {
-    color: "$white !important",
+    color: "inherit !important",
     textDecoration: "none",
   },
 });
@@ -58,7 +60,6 @@ const MenuToggle = styled("button", {
 const PrimaryInner = styled("div", {
   display: "flex",
   flexGrow: "1",
-  alignItems: "center",
 
   "@sm": {
     "& nav": {
@@ -70,13 +71,14 @@ const PrimaryInner = styled("div", {
 const Primary = styled("div", {
   color: "$black",
   display: "flex",
+  alignItems: "flex-end",
+  justifyContent: "center",
   margin: "0 auto",
+  paddingBottom: "$gr4",
   zIndex: "1",
   transition: "$dcAll",
   position: "relative",
   top: "unset",
-  height: "$gr5",
-  boxShadow: "2px 2px 5px #0001",
 
   [`& ${ContainerStyled}`]: {
     display: "flex",
@@ -87,15 +89,13 @@ const Primary = styled("div", {
     transition: "$dcAll",
 
     [`& ${NavStyled}`]: {
-      backgroundColor: "$purple120",
-      fontSize: "$gr4",
+      fontSize: "$gr3",
       fontFamily: "$northwesternSansRegular",
       display: "flex",
       height: "$gr5",
-      boxShadow: "3px -3px 19px #fff1",
 
       a: {
-        color: "$white",
+        color: "$purple",
         display: "flex",
         height: "100%",
         justifyContent: "center",
@@ -123,13 +123,16 @@ const Primary = styled("div", {
   "&[data-search-fixed='true']": {
     zIndex: "2",
 
+    form: {
+      backgroundColor: "white",
+      boxShadow: "0px 5px 19px #0002",
+    },
+
     [`& ${ContainerStyled}`]: {
       position: "fixed",
       top: "0",
       maxWidth: "100%",
       padding: "0",
-      backgroundColor: "white",
-      boxShadow: "0px 3px 11px #0003",
       transition: "$dcAll",
 
       "> span": {
@@ -155,7 +158,7 @@ const Primary = styled("div", {
 
 const Super = styled("div", {
   position: "relative",
-  backgroundColor: "$purple120",
+  backgroundColor: "$purple",
   color: "$purple10",
   zIndex: "10",
 
@@ -196,23 +199,27 @@ const User = styled("span", {
 });
 
 const HeaderStyled = styled("header", {
-  backgroundColor: "$purple",
-  color: "$white",
   flexDirection: "column",
 
   variants: {
     isHero: {
       true: {
+        backgroundColor: "$purple",
+
+        [`& ${Super}`]: {
+          boxShadow: "0px 5px 19px #0002",
+        },
+
         [`& ${Lockup}`]: {
-          textShadow: "1px 1px 3px #0003",
+          color: "$white !important",
         },
 
-        [`& ${Primary}`]: {
-          boxShadow: "unset",
+        [`& ${SearchStyled}`]: {
+          background: "$white",
+        },
 
-          [`& ${SearchStyled}, & ${NavStyled}`]: {
-            boxShadow: "8px 8px 19px #0003",
-          },
+        [`& ${NavStyled} a`]: {
+          color: "$white !important",
         },
       },
     },

diff --git a/components/Header/Primary.tsx b/components/Header/Primary.tsx
@@ -1,9 +1,7 @@
 import { Primary, PrimaryInner } from "@/components/Header/Header.styled";
 import { useEffect, useRef, useState } from "react";
 
-import { AcademicN } from "@/components/Shared/SVG/Northwestern";
 import Container from "@/components/Shared/Container";
-import Heading from "@/components/Heading/Heading";
 import Link from "next/link";
 import Nav from "@/components/Nav/Nav";
 import Search from "@/components/Search/Search";
@@ -49,9 +47,6 @@ const HeaderPrimary: React.FC = () => {
         ref={primaryRef}
       >
         <Container>
-          <Heading as="span">
-            <AcademicN />
-          </Heading>
           <PrimaryInner>
             {!isCollectionPage && (
               <Search isSearchActive={handleIsSearchActive} />

diff --git a/components/Header/Super.tsx b/components/Header/Super.tsx
@@ -5,6 +5,7 @@ import {
   Super,
   User,
 } from "@/components/Header/Header.styled";
+
 import Container from "../Shared/Container";
 import { DCAPI_ENDPOINT } from "@/lib/constants/endpoints";
 import Link from "next/link";

diff --git a/components/Hero/Hero.styled.ts b/components/Hero/Hero.styled.ts
@@ -45,7 +45,7 @@ const HeroStyled = styled("div", {
         width: "100%",
         height: "300px",
         background:
-          "linear-gradient(173deg, $purple 0%, #4E2A84cc 19%, #0000 61.8%)",
+          "linear-gradient(180deg, $purple 0%, #4E2A84cc 19%, #0000 61.8%)",
         position: "absolute",
         zIndex: "1",
       },
@@ -90,8 +90,7 @@ const HeroStyled = styled("div", {
           display: "flex",
           width: "100%",
           height: "100%",
-          background:
-            "linear-gradient(7deg, #401F68cc 0%, #000a 20%, #0000 61.8%)",
+          background: "linear-gradient(0deg, #000a 0%, #000a 19%, #0000 50%)",
           position: "absolute",
           zIndex: "1",
           bottom: "0",

diff --git a/components/Homepage/Hero.styled.ts b/components/Homepage/Hero.styled.ts
@@ -24,11 +24,6 @@ export const HomepageHeroStyled = styled("div", {
 
       ".swiper-slide": {
         figure: {
-          "&::before": {
-            background:
-              "linear-gradient(7deg, #000a 0%, #000a 20%, #0000 61.8%)",
-          },
-
           figcaption: {
             alignItems: "flex-end",
             bottom: "$gr6",
@@ -41,11 +36,6 @@ export const HomepageHeroStyled = styled("div", {
           },
         },
       },
-
-      ".swiper-wrapper::before": {
-        background:
-          "linear-gradient(173deg, $purple 0%, #4E2A84dd 12%, #0000 31%)",
-      },
     },
   },
 });
diff --git a/components/Search/GenerativeAI.styled.ts b/components/Search/GenerativeAI.styled.ts
@@ -8,7 +8,11 @@ const GenerativeAIToggleWrapper = styled("div", {
   color: "$black50",
   fontSize: "$gr2",
   display: "flex",
+  position: "relative",
+  flexDirection: "row",
+  flexWrap: "nowrap",
   flexShrink: "0",
+  height: "$gr5",
   alignItems: "center",
   marginRight: "$gr1",
 

diff --git a/components/Search/GenerativeAIToggle.test.tsx b/components/Search/GenerativeAIToggle.test.tsx
@@ -44,11 +44,7 @@ describe("GenerativeAIToggle", () => {
 
   it("renders the generative AI toggle UI and toggles state for a logged in user", async () => {
     const user = userEvent.setup();
-    render(
-      withUserProvider(
-        withSearchProvider(<GenerativeAIToggle isSearchActive={true} />)
-      )
-    );
+    render(withUserProvider(withSearchProvider(<GenerativeAIToggle />)));
 
     const label = screen.getByLabelText("Use Generative AI");
     const checkbox = screen.getByRole("checkbox");
@@ -61,7 +57,7 @@ describe("GenerativeAIToggle", () => {
   });
 
   it("renders the generative AI tooltip", () => {
-    render(withSearchProvider(<GenerativeAIToggle isSearchActive={true} />));
+    render(withSearchProvider(<GenerativeAIToggle />));
     // Target the svg icon itself
     const tooltip = screen.getByText("Information Circle");
 
@@ -79,7 +75,7 @@ describe("GenerativeAIToggle", () => {
 
     render(
       withUserProvider(
-        withSearchProvider(<GenerativeAIToggle isSearchActive={true} />),
+        withSearchProvider(<GenerativeAIToggle />),
         nonLoggedInUser
       )
     );
@@ -103,10 +99,7 @@ describe("GenerativeAIToggle", () => {
     mockRouter.setCurrentUrl("/search?ai=true");
     render(
       withUserProvider(
-        withSearchProvider(
-          <GenerativeAIToggle isSearchActive={true} />,
-          activeSearchState
-        )
+        withSearchProvider(<GenerativeAIToggle />, activeSearchState)
       )
     );
 
@@ -121,10 +114,7 @@ describe("GenerativeAIToggle", () => {
 
     render(
       withUserProvider(
-        withSearchProvider(
-          <GenerativeAIToggle isSearchActive={false} />,
-          defaultSearchState
-        )
+        withSearchProvider(<GenerativeAIToggle />, defaultSearchState)
       )
     );
 

diff --git a/components/Search/GenerativeAIToggle.tsx b/components/Search/GenerativeAIToggle.tsx
@@ -37,21 +37,13 @@ function GenerativeAITooltip() {
   );
 }
 
-type GenerativeAIToggleProps = {
-  isSearchActive: boolean;
-};
-
-export default function GenerativeAIToggle({
-  isSearchActive,
-}: GenerativeAIToggleProps) {
+export default function GenerativeAIToggle() {
   const { closeDialog, dialog, isChecked, handleCheckChange, handleLogin } =
     useGenerativeAISearchToggle();
 
   return (
     <>
-      <GenerativeAIToggleWrapper
-        {...(isSearchActive ? { css: { marginRight: "$gr5" } } : {})}
-      >
+      <GenerativeAIToggleWrapper data-testid="generative-ai-toggle">
         <CheckboxRootStyled
           checked={isChecked}
           id="isGenerativeAI"