Refine textarea UX.

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']": {

components/Header/Header.styled.ts

@@ -1,6 +1,7 @@
 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";
 
@@ -12,9 +13,10 @@ const Lockup = styled("div", {
  fontSize: "$gr5",
  fontFamily: "$northwesternSansRegular",
  zIndex: "1",
+ color: "$purple120",
 
  a: {
- color: "$purple !important",
+ color: "inherit !important",
  textDecoration: "none",
  },
 });
@@ -59,7 +61,6 @@ const MenuToggle = styled("button", {
 const PrimaryInner = styled("div", {
  display: "flex",
  flexGrow: "1",
- alignItems: "flex-end",
 
  "@sm": {
  "& nav": {
@@ -88,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",
@@ -202,8 +201,17 @@ const HeaderStyled = styled("header", {
  variants: {
  isHero: {
  true: {
+ backgroundColor: "$purple",
  [`& ${Lockup}`]: {
- textShadow: "1px 1px 3px #0003",
+ color: "$white !important",
+ },
+
+ [`& ${SearchStyled}`]: {
+ background: "$white",
+ },
+
+ [`& ${NavStyled} a`]: {
+ color: "$white !important",
  },
  },
  },

components/Header/Primary.tsx

@@ -4,6 +4,7 @@ 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

@@ -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",
  },
@@ -91,7 +91,7 @@ const HeroStyled = styled("div", {
  width: "100%",
  height: "100%",
  background:
- "linear-gradient(7deg, #401F68cc 0%, #000a 20%, #0000 61.8%)",
+ "linear-gradient(0deg, #401F68cc 0%, #000a 20%, #0000 61.8%)",
  position: "absolute",
  zIndex: "1",
  bottom: "0",

components/Homepage/Hero.styled.ts

@@ -44,7 +44,7 @@ export const HomepageHeroStyled = styled("div", {
 
  ".swiper-wrapper::before": {
  background:
- "linear-gradient(173deg, $purple 0%, #4E2A84dd 12%, #0000 31%)",
+ "linear-gradient(180deg, $purple 3%, #4E2A84cc 19%, #0000 50%)",
  },
  },
  },

components/Search/Search.styled.ts

@@ -7,14 +7,14 @@ const SearchStyled = styled("form", {
  display: "flex",
  flexShrink: "0",
  flexGrow: "1",
- marginRight: "$gr5",
+ marginRight: "$gr4",
  transition: "$dcAll",
  borderRadius: "3px",
 
  variants: {
  isFocused: {
  true: {
- backgroundColor: "$white",
+ backgroundColor: "$white !important",
  boxShadow: "3px 3px 11px #0001",
  outline: "2px solid $purple60",
  },
@@ -35,7 +35,7 @@ const SearchStyled = styled("form", {
  marginRight: "$gr3",
  },
 
- svg: {
+ "> svg": {
  position: "absolute",
  display: "flex",
  left: "0",
@@ -56,14 +56,27 @@ const SearchStyled = styled("form", {
 const Button = styled("button", {
  display: "flex",
  border: "none",
- backgroundColor: "$purple120",
+ backgroundColor: "$purple",
  alignItems: "center",
- padding: "0 $gr4",
+ padding: "0 $gr2",
+ margin: "7px",
+ height: "38px",
  color: "$white",
- fontSize: "$gr4",
+ fontSize: "$gr3",
+ borderRadius: "3px",
  fontFamily: "$northwesternSansRegular",
  cursor: "pointer",
  textRendering: "optimizeLegibility",
+ gap: "$gr1",
+ position: "relative",
+
+ "> svg": {
+ width: "$gr3",
+ height: "$gr3",
+ marginTop: "-2px",
+ fontFamily: "Times !important",
+ color: "$purple60",
+ },
 });
 
 const ResultsMessage = styled("span", {
@@ -109,18 +122,6 @@ const ResultsWrapper = styled("div", {
 
 const StyledResponseWrapper = styled("div", {
  padding: "0 0 $gr6",
-
- variants: {
- isAiResponse: {
- true: {
- background:
- "linear-gradient(-5deg, $white calc(100% - 150px), $brightBlueB calc(100% + 100px))",
- },
- false: {
- background: "inherit",
- },
- },
- },
 });
 
 export {

components/Search/Search.tsx

@@ -121,7 +121,7 @@ const Search: React.FC<SearchProps> = ({ isSearchActive }) => {
  />
  <GenerativeAIToggle />
  <Button type="submit" data-testid="submit-button">
- Search
+ Search <IconArrowForward />
  </Button>
  {isLoaded && <IconSearch />}
  </SearchStyled>

components/Search/TextArea.styled.ts

@@ -7,23 +7,24 @@ const Clear = styled("button", {
  display: "flex",
  right: "0",
  height: "$gr5",
- width: "calc($gr5 + $gr2)",
+ width: "$gr5",
+ marginRight: "$gr2",
  justifyContent: "center",
  textAlign: "center",
  alignItems: "center",
  cursor: "pointer",
  border: "none",
  background: "linear-gradient(90deg, #f0f0f000 0, transparent 38.2%)",
  zIndex: "1",
- fill: "$black80",
+ fill: "$black50",
 
  "&:focus, &:hover": {
- fill: "$purple30",
+ fill: "$brightRed",
  },
 
  svg: {
  fill: "inherit",
- padding: "15px",
+ padding: "5px",
  marginLeft: "$gr2",
  transition: "$dcAll",
  },
@@ -53,18 +54,19 @@ const StyledTextArea = styled("div", {
 
  textarea: {
  background: "transparent",
- padding: "16px $gr5 0",
+ padding: "15px $gr5 0",
  border: "none",
- height: "$gr5",
  fontSize: "$gr3",
  lineHeight: "138%",
+ height: "$gr5",
  zIndex: "1",
  fontFamily: "$northwesternSansRegular",
  resize: "none",
  overflow: "hidden",
  width: "100%",
  outline: "none",
  transition: "$dcAll",
+ boxSizing: "border-box",
 
  "&::placeholder": {
  overflow: "hidden",

components/Search/TextArea.tsx

@@ -38,16 +38,14 @@ const SearchTextArea = forwardRef<HTMLTextAreaElement, SearchTextAreaProps>(
  useEffect(() => {
  const textarea = textareaRef.current;
  if (textarea) {
- textarea.style.height = "auto"; // Reset height to auto
- textarea.style.height = `${textarea.scrollHeight}px`; // Set height to scrollHeight
+ textarea.style.height = `${textarea.scrollHeight}px`;
  }
  }, [searchValue]);
 
  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
  handleSearchChange(e);
  const textarea = textareaRef.current;
  if (textarea) {
- textarea.style.height = "auto";
  textarea.style.height = `${textarea.scrollHeight}px`;
  }
  };