Merge pull request #248 from nulib/deploy/staging

Production updates.

Author: mathewjordan

components/BloomWrapper.tsx

@@ -15,9 +15,10 @@ const StyledBloomIIIFWrapper = styled("div", {
     display: "none",
   },
 
-  "@sm": {
+  "@xs": {
     "& > div > div": {
       alignItems: "center",
+      textAlign: "center",
 
       "& > div": {
         "&:last-child": {

components/Facets/Facets.styled.ts

@@ -1,4 +1,3 @@
-import { StyledToggle } from "@/components/Shared/Switch.styled";
 import { Wrapper as WorkTypeWrapper } from "@/components/Facets/WorkType/WorkType.styled";
 import { styled } from "@/stitches.config";
 
@@ -7,23 +6,28 @@ import { styled } from "@/stitches.config";
 const StyledFacets = styled("div", {
   display: "flex",
   justifyContent: "space-between",
-  margin: "1.618rem 0",
   position: "relative",
+  margin: "$gr4 0",
   left: "0",
-  transition: "$dcAll",
+  transition: "$dcScrollLeft",
   zIndex: "1",
 
   [`& ${WorkTypeWrapper}`]: {
     borderRight: "1px solid $black10",
     paddingRight: "$gr2",
     transition: "$dcWidth",
+
+    "@sm": {
+      marginTop: "$gr3",
+      borderRight: "none",
+      paddingRight: "0",
+    },
   },
 
   "@sm": {
-    [`& ${WorkTypeWrapper}`]: {
-      width: "0",
-      opacity: "0",
-    },
+    padding: "$gr4 0",
+    flexDirection: "column",
+    alignItems: "center",
   },
 });
 
@@ -32,41 +36,61 @@ const Width = styled("span", {
   width: "100%",
 });
 
+const FacetExtras = styled("div", {
+  display: "flex",
+
+  "@sm": {
+    marginTop: "$gr4",
+    flexDirection: "column-reverse",
+    alignItems: "center",
+  },
+});
+
 const Wrapper = styled("div", {
+  height: "38px",
+  transition: "$dcScrollHeight",
+  margin: "$gr4 0",
+
+  "@sm": {
+    margin: "-$gr4 0 $gr4",
+    backgroundColor: "$gray6",
+    height: "225px",
+  },
+
   ".facets-ui-container": {
     transition: "$dcAll",
   },
 
   "&[data-filter-fixed='true']": {
-    margin: "1.618rem 0",
     flexGrow: "0",
     flexShrink: "1",
     height: "38px",
 
-    [`& ${WorkTypeWrapper}`]: {
+    "@sm": {
+      backgroundColor: "transparent",
+      margin: "0",
+    },
+
+    [`& ${FacetExtras}`]: {
       width: "0",
       opacity: "0",
     },
 
     [`& ${StyledFacets}`]: {
       position: "fixed",
-      top: "50px",
+      margin: "0",
+      top: "$gr6",
       left: "50%",
       zIndex: "1",
       transform: "translate(-50%)",
       backfaceVisibility: "hidden",
       webkitFontSmoothing: "subpixel-antialiased",
-    },
 
-    [`& ${StyledToggle}`]: {
-      width: "0",
-      opacity: "0",
+      "@sm": {
+        top: "$gr5",
+      },
     },
   },
 });
 
-const FacetExtras = styled("div", {
-  display: "flex",
-});
-
 export { FacetExtras, StyledFacets, Width, Wrapper };

components/Facets/Filter/Clear.styled.ts

@@ -17,6 +17,7 @@ const FilterClearStyled = styled("button", {
   marginLeft: "$gr2",
   padding: "0 $gr3",
   transition: "$dcAll",
+  whiteSpace: "nowrap",
 
   "&:focus, &:hover": {
     color: "$purple",

components/Header/Header.styled.ts

@@ -76,6 +76,7 @@ const Primary = styled("div", {
   position: "relative",
   top: "unset",
   height: "$gr5",
+  boxShadow: "2px 2px 5px #0001",
 
   [`& ${ContainerStyled}`]: {
     display: "flex",
@@ -86,15 +87,15 @@ const Primary = styled("div", {
     transition: "$dcAll",
 
     [`& ${NavStyled}`]: {
-      backgroundColor: "$gray6",
-      color: "$purple",
+      backgroundColor: "$purple120",
       fontSize: "$gr4",
-      fontFamily: "$northwesternSansBold",
-      paddingTop: "2px",
+      fontFamily: "$northwesternSansRegular",
       display: "flex",
       height: "$gr5",
+      boxShadow: "3px -3px 19px #fff1",
 
       a: {
+        color: "$white",
         display: "flex",
         height: "100%",
         justifyContent: "center",
@@ -120,6 +121,8 @@ const Primary = styled("div", {
   },
 
   "&[data-search-fixed='true']": {
+    zIndex: "2",
+
     [`& ${ContainerStyled}`]: {
       position: "fixed",
       top: "0",
@@ -143,10 +146,6 @@ const Primary = styled("div", {
         opacity: "0",
       },
 
-      button: {
-        backgroundColor: "$purple10",
-      },
-
       [`& ${SearchStyled}`]: {
         marginRight: "0",
       },
@@ -209,6 +208,8 @@ const HeaderStyled = styled("header", {
         },
 
         [`& ${Primary}`]: {
+          boxShadow: "unset",
+
           [`& ${SearchStyled}, & ${NavStyled}`]: {
             boxShadow: "8px 8px 19px #0003",
           },

components/Heading/Heading.styled.ts

@@ -19,6 +19,10 @@ const StyledHeading = styled("h2", {
     letterSpacing: "-0.015em",
     margin: "$gr6 0 $gr4",
 
+    "@sm": {
+      fontSize: "$gr7 !important",
+    },
+
     "&::before": {
       height: "$gr1",
       width: "$gr7",

components/Homepage/Overview.tsx

@@ -25,7 +25,7 @@ const HomepageOverview = () => {
               audiovisual materials - as well as licensed art historical images
               for teaching and reference.
             </p>
-            <Button isPrimary onClick={() => router.push("/about")}>
+            <Button isPrimary isLowercase onClick={() => router.push("/about")}>
               Learn More
             </Button>
           </Content>

components/Search/Search.styled.ts

@@ -10,14 +10,18 @@ const SearchStyled = styled("form", {
   backgroundColor: "$white",
   height: "$gr5",
   marginRight: "$gr5",
-  boxShadow: "inset 0 -1px 0 #f0f0f0",
+  boxShadow: "3px -3px 19px #fff1",
   transition: "$dcAll",
 
   "@sm": {
     width: "100%",
     marginRight: "0",
   },
 
+  "@lg": {
+    marginRight: "$gr3",
+  },
+
   svg: {
     position: "absolute",
     display: "flex",
@@ -41,19 +45,30 @@ const Input = styled("input", {
   width: "100%",
   border: "none",
   backgroundColor: "transparent",
-  padding: "2px $gr5 0",
+  padding: "1px $gr3 0 $gr5",
   fontSize: "$gr3",
   zIndex: "1",
   fontFamily: "$northwesternSansRegular",
+  whiteSpace: "nowrap",
+
+  "&::placeholder": {
+    overflow: "hidden",
+    color: "$black80",
+    textOverflow: "ellipsis",
+    marginRight: "$gr5",
+  },
 });
 
 const Button = styled("button", {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
   border: "none",
-  backgroundColor: "$gray6",
-  padding: "2px $3 0",
-  color: "$purple",
+  backgroundColor: "$purple120",
+  padding: "0 $gr3 ",
+  color: "$white",
   fontSize: "$gr4",
-  fontFamily: "$northwesternSansBold",
+  fontFamily: "$northwesternSansRegular",
   cursor: "pointer",
   textRendering: "optimizeLegibility",
 });
@@ -63,18 +78,25 @@ const Clear = styled("button", {
   display: "flex",
   right: "5rem",
   height: "$gr5",
-  width: "$gr5",
+  width: "calc($gr5 + $gr2)",
   justifyContent: "center",
   textAlign: "center",
   alignItems: "center",
   cursor: "pointer",
   border: "none",
-  backgroundColor: "transparent",
+  background: "linear-gradient(90deg, #fff0 0, #fff  38.2%)",
   zIndex: "1",
+  fill: "$black80",
+
+  "&:focus, &:hover": {
+    fill: "$purple30",
+  },
 
   svg: {
-    fill: "$black50",
-    padding: "$gr1",
+    fill: "inherit",
+    padding: "$gr2",
+    marginLeft: "$gr2",
+    transition: "$dcAll",
   },
 });
 

components/Search/Search.tsx

@@ -1,5 +1,9 @@
 import { Button, Clear, Input, SearchStyled } from "./Search.styled";
-import { IconClear, IconSearch } from "@/components/Shared/SVG/Icons";
+import {
+  IconArrowForward,
+  IconClear,
+  IconSearch,
+} from "@/components/Shared/SVG/Icons";
 import React, {
   ChangeEvent,
   FocusEvent,
@@ -98,7 +102,7 @@ const Search: React.FC<SearchProps> = ({ isSearchActive }) => {
         </Clear>
       )}
       <Button type="submit" data-testid="submit-button">
-        Search
+        Search <IconArrowForward />
       </Button>
       {isLoaded && <IconSearch />}
     </SearchStyled>

components/SharedLink/SharedLink.test.tsx

@@ -153,6 +153,7 @@ const work: Work = {
   },
   file_sets: [
     {
+      accession_number: "inu-dil-12b39039-68af-4a31-8b04-1b025d95a0b8",
       duration: null,
       height: 4050,
       id: "7ad42e60-a8b6-444d-b4cf-f53f9c2756f6",

components/Work/TopInfo.styled.ts

@@ -7,12 +7,12 @@ const ActionButtons = styled("div", {
   display: "flex",
   flexDirection: "row",
   justifyContent: "flext-start",
-  padding: "1rem 0",
+  padding: "$gr2 0",
 
   button: {
-    marginRight: "$4",
+    marginRight: "$gr3",
     fontFamily: "$northwesternSansLight",
-    paddingTop: "$3",
+    paddingTop: "$gr3",
 
     "&:last-child": {
       marginRight: "0",
@@ -30,9 +30,9 @@ const ActionButtons = styled("div", {
 
 const TopInfoContent = styled("div", {
   display: "grid",
-  gap: "$7",
+  gap: "$gr7",
   gridTemplateColumns: "618fr 382fr",
-  margin: "$3 0",
+  margin: "$gr3 0",
 
   "@md": {
     gap: "$gr5",
@@ -45,7 +45,7 @@ const TopInfoContent = styled("div", {
 });
 
 const TopInfoWrapper = styled("section", {
-  margin: "$6 0",
+  margin: "$gr5 0",
 
   [`> header`]: {
     display: "flex",
@@ -58,28 +58,26 @@ const TopInfoWrapper = styled("section", {
       letterSpacing: "-0.015em",
       margin: "0",
 
-      "&::before": {
-        height: "$1",
-        width: "$7",
-        display: "block",
-        backgroundColor: "$purple10",
-        content: "",
-        position: "relative",
-        top: "-$4",
+      "@sm": {
+        fontSize: "$gr7",
       },
     },
 
     p: {
-      fontSize: "$5",
+      fontSize: "$gr5",
       color: "$black50",
       fontFamily: "$northwesternSansLight",
       lineHeight: "1.47em",
+
+      "@sm": {
+        fontSize: "$gr4",
+      },
     },
   },
 });
 
 const TopInfoCollection = styled("div", {
-  padding: "1rem 0",
+  padding: "$gr4 0",
 
   [`& ${StyledHeading}`]: {
     color: "$black80",