Refine TextArea UX, overall header styling.

nulib · Jun 26, 2024 · 883f5e5 · 883f5e5
1 parent 4446c2b
commit 883f5e5
Show file tree

Hide file tree

Showing 26 changed files with 347 additions and 232 deletions.
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"