Fix styling.

nulib · Oct 30, 2024 · 37058f8 · 37058f8
1 parent b9396d5
commit 37058f8
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 28 deletions.
diff --git a/components/Shared/IIIF/Share.tsx b/components/Shared/IIIF/Share.tsx
@@ -1,10 +1,11 @@
 import * as Dropdown from "@radix-ui/react-dropdown-menu";
 
-import { IconArrowForward, IconChevronDown } from "../SVG/Icons";
+import Icon, { IconStyled } from "../Icon";
+import { IconChevronDown, IconExternalLink } from "../SVG/Icons";
 
 import CopyText from "../CopyText";
 import IIIFLogo from "../SVG/IIIF";
-import Icon from "../Icon";
+import { color } from "framer-motion";
 import { styled } from "@/stitches.config";
 
 const IIIFShare = ({ uri }: { uri: string }) => {
@@ -35,24 +36,6 @@ const IIIFShare = ({ uri }: { uri: string }) => {
               View in Clover IIIF
             </a>
           </Dropdown.Item>
-          <Dropdown.Item>
-            <a
-              href={`https://projectmirador.org/embed/?iiif-content=${uri}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              View in Mirador
-            </a>
-          </Dropdown.Item>
-          <Dropdown.Item>
-            <a
-              href={`https://theseus-viewer.netlify.app/?iiif-content=${uri}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              View in Theseus
-            </a>
-          </Dropdown.Item>
           <Dropdown.Item>
             <a href={uri} target="_blank" rel="noreferrer">
               View Raw JSON
@@ -66,8 +49,22 @@ const IIIFShare = ({ uri }: { uri: string }) => {
               href="https://iiif.io/get-started/why-iiif/"
               target="_blank"
               rel="noreferrer"
+              data-id="what-is-iiif"
             >
               What is IIIF?
+              <Icon
+                style={{
+                  display: "inline-flex",
+                  width: "16px",
+                  height: "16px",
+                  color: "$black50",
+                  fill: "$black50",
+                  marginLeft: "0.25em",
+                }}
+                hasSVGPadding={false}
+              >
+                <IconExternalLink />
+              </Icon>
             </a>
           </Dropdown.Item>
         </StyledIIIFShareContent>
@@ -84,7 +81,7 @@ const StyledIIIFShare = styled("div", {
     backgroundColor: "transparent",
     color: "$black50",
     fontFamily: "$northwesternSansRegular",
-    fontSize: "$gr2",
+    fontSize: "$gr3",
     borderRadius: "38px",
     border: "none",
     display: "flex",
@@ -98,6 +95,9 @@ const StyledIIIFShare = styled("div", {
     "> span": {
       svg: {
         padding: "7px",
+        path: {
+          fill: "$purple !important",
+        },
       },
 
       "&:last-child": {
@@ -133,17 +133,32 @@ const StyledIIIFShareContent = styled(Dropdown.Content, {
   boxShadow: "5px 5px 19px 0 #0002",
   display: "flex",
   flexDirection: "column",
-  gap: "$gr1",
-  lineHeight: "1.25em",
-  fontSize: "$gr2 !important",
+  fontSize: "$gr2 ",
   fontFamily: "$northwesternSansRegular",
-  minWidth: "200px",
+  minWidth: "160px",
+  gap: "$gr2",
 
   a: {
     textDecoration: "underline",
     textDecorationThickness: "min(2px,max(1px,.05em))",
     textUnderlineOffset: "calc(.05em + 2px)",
     textDecorationColor: "$purple10",
+    color: "$black50",
+
+    "&[data-id='what-is-iiif']": {
+      display: "flex",
+
+      [`${IconStyled}`]: {
+        marginTop: "-3px",
+      },
+    },
+
+    "&:hover, &:active": {
+      svg: {
+        color: "$purple",
+        fill: "$purple",
+      },
+    },
   },
 
   button: {
@@ -156,6 +171,12 @@ const StyledIIIFShareContent = styled(Dropdown.Content, {
     textDecorationThickness: "min(2px,max(1px,.05em))",
     textUnderlineOffset: "calc(.05em + 2px)",
     textDecorationColor: "$purple10",
+    color: "$black50",
+
+    "&:hover": {
+      color: "$purple",
+      fill: "$purple",
+    },
   },
 });
 

diff --git a/components/Shared/Icon.tsx b/components/Shared/Icon.tsx
@@ -1,12 +1,23 @@
+import { CSS } from "@stitches/react";
 import { ReactNode } from "react";
 import { styled } from "@/stitches.config";
 
 interface IconProps {
   children: ReactNode;
+  style?: CSS;
+  hasSVGPadding?: boolean;
 }
 
-const Icon: React.FC<IconProps> = ({ children }) => {
-  return <IconStyled>{children}</IconStyled>;
+const Icon: React.FC<IconProps> = ({
+  children,
+  style,
+  hasSVGPadding = true,
+}) => {
+  return (
+    <IconStyled css={{ ...style }} hasSVGPadding={hasSVGPadding}>
+      {children}
+    </IconStyled>
+  );
 };
 
 /* eslint sort-keys: 0 */
@@ -32,7 +43,21 @@ export const IconStyled = styled("span", {
     color: "inherit",
     fill: "inherit",
     stroke: "inherit",
-    padding: "8px",
+  },
+
+  variants: {
+    hasSVGPadding: {
+      true: {
+        svg: {
+          padding: "0.5em",
+        },
+      },
+      false: {
+        svg: {
+          padding: "0",
+        },
+      },
+    },
   },
 });
 

diff --git a/components/Shared/SVG/Icons.tsx b/components/Shared/SVG/Icons.tsx
@@ -79,6 +79,13 @@ const IconClear: React.FC = () => (
   </svg>
 );
 
+const IconExternalLink: React.FC = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path d="M224 304a16 16 0 01-11.31-27.31l157.94-157.94A55.7 55.7 0 00344 112H104a56.06 56.06 0 00-56 56v240a56.06 56.06 0 0056 56h240a56.06 56.06 0 0056-56V168a55.7 55.7 0 00-6.75-26.63L235.31 299.31A15.92 15.92 0 01224 304z" />
+    <path d="M448 48H336a16 16 0 000 32h73.37l-38.74 38.75a56.35 56.35 0 0122.62 22.62L432 102.63V176a16 16 0 0032 0V64a16 16 0 00-16-16z" />
+  </svg>
+);
+
 const IconFilter: React.FC = () => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
     <title>Filter</title>
@@ -228,6 +235,7 @@ export {
   IconCheck,
   IconChevronDown,
   IconClear,
+  IconExternalLink,
   IconFilter,
   IconImage,
   IconInfo,