More progress.

nulib · Nov 7, 2024 · cadecd5 · cadecd5
1 parent 661dd01
commit cadecd5
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 20 deletions.
diff --git a/components/Collection/Collection.styled.ts b/components/Collection/Collection.styled.ts
@@ -2,12 +2,31 @@ import { styled } from "@/stitches.config";
 
 /* eslint sort-keys: 0 */
 
+const CollectionHeader = styled("div", {
+  display: "flex",
+  justifyContent: "space-between",
+  marginTop: "1.5em",
+  gap: "$gr4",
+
+  "div:last-child": {
+    flexShrink: 0,
+    flexGrow: 0,
+    marginBottom: "$gr2",
+  },
+
+  "@sm": {
+    flexDirection: "column",
+    gap: "0",
+  },
+});
+
 const Description = styled("p", {
-  fontSize: "$gr5",
-  fontFamily: "$northwesternSansLight",
   lineHeight: "1.55em",
-  margin: "$gr2 0 $gr5",
-  color: "$black50",
+  margin: "$gr2 0 $gr6",
+
+  "@sm": {
+    fontSize: "$gr3",
+  },
 });
 
 const HeroWrapper = styled("div", {
@@ -22,4 +41,4 @@ const Interstitial = styled("div", {
   padding: "$gr3 0",
 });
 
-export { Description, Interstitial, HeroWrapper };
+export { CollectionHeader, Description, Interstitial, HeroWrapper };
diff --git a/components/Collection/NavTabs.styled.ts b/components/Collection/NavTabs.styled.ts
@@ -1,4 +1,5 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+
 import { styled } from "@/stitches.config";
 
 /* eslint sort-keys: 0 */
@@ -63,7 +64,6 @@ const StyledContent = styled(TabsPrimitive.Content, {
   borderBottomLeftRadius: 6,
   borderBottomRightRadius: 6,
   outline: "none",
-  "&:focus": { boxShadow: `0 0 0 2px #f0f0f0` },
 
   "& a": {
     color: "$purple",

diff --git a/components/Shared/Expand/Expand.styled.ts b/components/Shared/Expand/Expand.styled.ts
@@ -1,10 +1,10 @@
 import { VariantProps, styled } from "@/stitches.config";
+
 import { Button } from "@nulib/design-system";
 
 /* eslint sort-keys: 0 */
 
 const ExpandButton = styled(Button, {
-  margin: "0 auto",
   opacity: "1",
   transition: "$dcAll",
 });
@@ -14,9 +14,9 @@ const ExpandEdge = styled("div", {
   width: "100%",
   bottom: "0",
   display: "flex",
-  justifyContent: "center",
-  padding: "$4 0 0",
   backgroundColor: "$white",
+  justifyContent: "flex-start",
+  paddingTop: "$gr7",
   background: "linear-gradient(to bottom, #fff0 0%, #fff 61.8%)",
   transition: "$dcAll",
   overflow: "hidden",

diff --git a/components/Shared/Expand/Expand.tsx b/components/Shared/Expand/Expand.tsx
@@ -38,7 +38,12 @@ const Expand: React.FC<ExpandProps & ExpandVariants> = ({
     >
       <ExpandContent ref={contentRef}>{children}</ExpandContent>
       <ExpandEdge>
-        <ExpandButton onClick={handleExpand} isLowercase disabled={isExpanded}>
+        <ExpandButton
+          onClick={handleExpand}
+          isLowercase
+          isPrimary
+          disabled={isExpanded}
+        >
           {buttonText}
         </ExpandButton>
       </ExpandEdge>

diff --git a/components/Work/TopInfo.styled.ts b/components/Work/TopInfo.styled.ts
@@ -44,7 +44,7 @@ const TopInfoContent = styled("div", {
 });
 
 const TopInfoWrapper = styled("section", {
-  margin: "$gr5 0",
+  margin: "$gr5 0 $gr6",
 
   [`> header`]: {
     display: "flex",

diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
@@ -1,4 +1,5 @@
 import {
+  CollectionHeader,
   Description,
   HeroWrapper,
   Interstitial,
@@ -187,13 +188,7 @@ const Collection: NextPage = () => {
                   <TabsTrigger value="metadata">All Subjects</TabsTrigger>
                 </TabsList>
                 <TabsContent value="explore">
-                  <div
-                    style={{
-                      display: "flex",
-                      justifyContent: "space-between",
-                      marginTop: "1.5em",
-                    }}
-                  >
+                  <CollectionHeader>
                     <Heading
                       as="h2"
                       css={{
@@ -203,10 +198,10 @@ const Collection: NextPage = () => {
                       {collection?.title}
                     </Heading>{" "}
                     <IIIFShare uri="" />
-                  </div>
+                  </CollectionHeader>
                   {description && (
                     <Description data-testid="description">
-                      <ReadMore text={description} words={55} />
+                      {<ReadMore text={description} words={55} />}
                     </Description>
                   )}
                   {topMetadata.length > 0 && (