Styling.

components/Chat/Response/Response.styled.tsx

@@ -70,25 +70,32 @@ const StyledImages = styled("div", {
 });
 
 const StyledQuestion = styled("h3", {
- fontFamily: "$northwesternSansRegular !important",
+ fontFamily: "$northwesternSansBold",
  fontWeight: "400",
  fontSize: "$gr6",
  letterSpacing: "-0.012em",
  lineHeight: "1.35em",
  margin: "0",
  padding: "0 0 $gr4 0",
- color: "$black50",
+ color: "$black",
 });
 
 const StyledStreamedAnswer = styled("article", {
  fontSize: "$gr3",
- lineHeight: "1.7em",
+ lineHeight: "1.63em",
 
  "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",

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",

components/Facets/Filter/Clear.styled.ts

@@ -26,6 +26,7 @@ const FilterClearStyled = styled("button", {
  variants: {
  isFixed: {
  true: {
+ backgroundColor: "$white",
  boxShadow: "2px 2px 5px #0002",
  },
  },

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`]: {

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 */

components/Header/Header.styled.ts

@@ -1,19 +1,18 @@
 import { VariantProps, styled } from "@/stitches.config";
 
 import { ContainerStyled } from "@/components/Shared/Container";
-import Nav from "../Nav/Nav";
 import { NavStyled } from "@/components/Nav/Nav.styled";
 import { SearchStyled } from "@/components/Search/Search.styled";
 
 /* eslint sort-keys: 0 */
 
 const Lockup = styled("div", {
  position: "relative",
- padding: "$gr4 0 $gr5",
+ padding: "$gr4 0",
  fontSize: "$gr5",
  fontFamily: "$northwesternSansRegular",
  zIndex: "1",
- color: "$purple120",
+ color: "$purple",
 
  a: {
  color: "inherit !important",
@@ -75,6 +74,7 @@ const Primary = styled("div", {
  alignItems: "flex-end",
  justifyContent: "center",
  margin: "0 auto",
+ paddingBottom: "$gr4",
  zIndex: "1",
  transition: "$dcAll",
  position: "relative",
@@ -158,7 +158,7 @@ const Primary = styled("div", {
 
 const Super = styled("div", {
  position: "relative",
- backgroundColor: "$purple120",
+ backgroundColor: "$purple",
  color: "$purple10",
  zIndex: "10",
 
@@ -205,6 +205,11 @@ const HeaderStyled = styled("header", {
  isHero: {
  true: {
  backgroundColor: "$purple",
+
+ [`& ${Super}`]: {
+ boxShadow: "0px 5px 19px #0002",
+ },
+
  [`& ${Lockup}`]: {
  color: "$white !important",
  },

components/Header/Primary.tsx

@@ -1,10 +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 { IconArrowForward } from "../Shared/SVG/Icons";
 import Link from "next/link";
 import Nav from "@/components/Nav/Nav";
 import Search from "@/components/Search/Search";

components/Hero/Hero.styled.ts

@@ -90,8 +90,7 @@ const HeroStyled = styled("div", {
  display: "flex",
  width: "100%",
  height: "100%",
- background:
- "linear-gradient(0deg, #401F68cc 0%, #000a 20%, #0000 61.8%)",
+ background: "linear-gradient(0deg, #000a 0%, #000a 19%, #0000 50%)",
  position: "absolute",
  zIndex: "1",
  bottom: "0",

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(180deg, $purple 3%, #4E2A84cc 19%, #0000 50%)",
- },
  },
  },
 });

components/Search/JumpTo.tsx

@@ -1,4 +1,3 @@
-import { Input, SearchStyled } from "./Search.styled";
 import React, {
  ChangeEvent,
  FocusEvent,
@@ -9,6 +8,7 @@ import React, {
 
 import { IconSearch } from "@/components/Shared/SVG/Icons";
 import SearchJumpToList from "@/components/Search/JumpToList";
+import { SearchStyled } from "./Search.styled";
 import Swiper from "swiper";
 
 interface SearchProps {
@@ -91,7 +91,8 @@ const SearchJumpTo: React.FC<SearchProps> = ({ isSearchActive }) => {
 
  return (
  <SearchStyled ref={formRef} data-testid="search-jump-to-form">
- <Input
+ {/* temporarily setting to textarea for later refinement */}
+ <textarea
  placeholder="Search by keyword or phrase, ex: Berkeley Music Festival"
  onChange={handleSearchChange}
  onFocus={handleSearchFocus}

components/Search/Options.styled.tsx

@@ -69,34 +69,34 @@ const StyledOptionsTabs = styled("div", {
  flexGrow: "0",
  flexWrap: "nowrap",
  height: "38px",
- boxShadow: "0px 3px 15px #0002",
  borderRadius: "50px",
  overflow: "hidden",
 
  button: {
  cursor: "pointer",
- backgroundColor: "$purple",
+ backgroundColor: "transparent",
  border: "0",
- color: "$white",
+ color: "$purple",
  fontFamily: "$northwesternSansRegular",
  fontSize: "$gr3",
  padding: "0 $gr3",
+ height: "2rem",
  transition: "$dcAll",
  whiteSpace: "nowrap",
  display: "flex",
  alignItems: "center",
 
  "&[data-state=active]": {
- backgroundColor: "$purple",
+ color: "$black",
+ fontFamily: "$northwesternSansBold",
 
  [`& ${IconStyled}`]: {
- color: "$purple30",
- fill: "$purple30",
+ color: "$purple",
+ fill: "$purple",
  },
  },
 
  "&[data-state=inactive]": {
- backgroundColor: "$white",
  color: "$black50",
 
  [`& ${IconStyled}`]: {
@@ -110,12 +110,11 @@ const StyledOptionsTabs = styled("div", {
  },
 
  "&:hover": {
- backgroundColor: "$purple120",
- color: "$white",
+ color: "$purple",
 
  [`& ${IconStyled}`]: {
- color: "$white",
- fill: "$white",
+ color: "$purple",
+ fill: "$purple",
  },
  },
  },
@@ -129,8 +128,7 @@ const StyledOptionsTabs = styled("div", {
 const StyledOptions = styled("div", {
  height: "38px",
  transition: "$dcScrollHeight",
- padding: "$gr4 0 0",
- margin: "0 0 $gr6",
+ margin: "0 0 $gr5",
 
  "@sm": {
  backgroundColor: "$gray6",
@@ -166,6 +164,10 @@ const StyledOptions = styled("div", {
  backfaceVisibility: "hidden",
  webkitFontSmoothing: "subpixel-antialiased",
 
+ [`& ${StyledOptionsTabs}`]: {
+ display: "none",
+ },
+
  "@sm": {
  top: "$gr5",
  },

components/Search/TextArea.tsx

@@ -58,21 +58,22 @@ const SearchTextArea = forwardRef<HTMLTextAreaElement, SearchTextAreaProps>(
  return (
  <StyledTextArea isFocused={isFocused}>
  <textarea
+ autoComplete="on"
  id="dc-search"
- placeholder={placeholderText}
- onChange={handleChange}
- onFocus={handleSearchFocus}
- onBlur={handleSearchFocus}
- ref={textareaRef}
- value={searchValue}
  name="search"
- role="search"
+ onBlur={handleSearchFocus}
+ onChange={handleChange}
  onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) => {
  if (e.key === "Enter") {
  e.preventDefault();
  handleSubmit(e);
  }
  }}
+ onFocus={handleSearchFocus}
+ placeholder={placeholderText}
+ ref={textareaRef}
+ role="search"
+ value={searchValue}
  />
  {searchValue && (
  <Clear onClick={clearSearchResults} type="reset">
@@ -84,4 +85,6 @@ const SearchTextArea = forwardRef<HTMLTextAreaElement, SearchTextAreaProps>(
  }
 );
 
+SearchTextArea.displayName = "SearchTextArea";
+
 export default SearchTextArea;

components/Shared/Checkbox.styled.tsx

@@ -16,10 +16,10 @@ export const CheckboxRoot = styled(Checkbox.Root, {
  padding: "0",
  cursor: "pointer",
  borderRadius: "3px",
- color: "$purple30",
+ color: "$white",
 
  svg: {
- padding: "1px",
+ padding: "2px",
  },
 
  "&:hover, &:focus": {

pages/collections/[id].tsx

@@ -137,7 +137,11 @@ const Collection: NextPage = () => {
  </Head>
  )}
 
- <Layout title={collection?.title || ""} description={description || ""}>
+ <Layout
+ description={description || ""}
+ header="hero"
+ title={collection?.title || ""}
+ >
  {collection && (
  <>
  <HeroWrapper>

pages/search.tsx

@@ -197,7 +197,7 @@ const SearchPage: NextPage = () => {
  data-testid="search-page-wrapper"
  title={HEAD_META["SEARCH"].title}
  >
- <StyledResponseWrapper isAiResponse={showStreamedResponse}>
+ <StyledResponseWrapper>
  <Heading as="h1" isHidden>
  Northwestern
  </Heading>

styles/global.ts

@@ -7,6 +7,7 @@ import {
  camptonExtraBold,
  camptonExtraLight,
 } from "./fonts";
+
 import { globalCss } from "@stitches/react";
 
 /* eslint sort-keys: 0 */
@@ -36,6 +37,9 @@ const defaults = {
  color: "$black80",
  fontFamily: "$northwesternSansRegular",
  fontSize: `${rem}px`,
+ optimizeLegibility: "auto",
+ textRendering: "optimizeLegibility",
+ fontSizeAdjust: 0.5,
  },
 
  p: {