v3 - shared studio button improvements (#557)

* fix(CustomToolMenu): support link button in sidebar context

* fix(ToolMenuLinkButton): support dark theme

studio/components/CustomToolMenu.tsx

@@ -1,12 +1,17 @@
 import { ToolMenuProps } from "sanity";
-import { Inline } from "@sanity/ui";
-import { LinkButton } from "./linkButton/LinkButton";
+import { Inline, Stack } from "@sanity/ui";
+import { ToolMenuLinkButton } from "./toolMenuLinkButton/ToolMenuLinkButton";
 
 export default function CustomToolMenu(props: ToolMenuProps) {
+  const Wrapper = props.context === "topbar" ? Inline : Stack;
   return (
-    <Inline>
+    <Wrapper space={4}>
       {props.renderDefault(props)}
-      <LinkButton value="/shared" />
-    </Inline>
+      <ToolMenuLinkButton
+        value={"/shared"}
+        label={"Shared Studio"}
+        context={props.context}
+      />
+    </Wrapper>
   );
 }

studio/components/toolMenuLinkButton/ToolMenuLinkButton.tsx

@@ -0,0 +1,25 @@
+import styles from "./toolMenuLinkButton.module.css";
+import { useTheme } from "@sanity/ui";
+
+interface LinkButtonProps {
+  label: string;
+  value?: string;
+  context: "topbar" | "sidebar";
+}
+
+export const ToolMenuLinkButton = ({
+  label,
+  value,
+  context,
+}: LinkButtonProps) => {
+  const theme = useTheme();
+  const prefersDark = theme.sanity.v2?.color._dark ?? false;
+  return (
+    <a
+      className={`${styles.wrapper}${context === "sidebar" ? ` ${styles.inSidebar}` : ""}${prefersDark ? ` ${styles.darkTheme}` : ""}`}
+      href={value}
+    >
+      <span className={styles.text}>{label}</span>
+    </a>
+  );
+};

studio/components/linkButton/linkButton.module.css → studio/components/toolMenuLinkButton/toolMenuLinkButton.module.css

@@ -8,20 +8,28 @@
   padding: 0.2rem 0.5rem;
 }
 
+.wrapper.inSidebar {
+  padding: 0.5rem 0.75rem;
+}
+
 .wrapper:hover {
   background: #f5f5f7;
 }
 
+.darkTheme.wrapper:hover {
+  background: #191a24;
+}
+
 .text {
   display: flex;
   align-items: center;
   text-decoration: block;
   font-weight: 500;
   color: #323545;
   letter-spacing: 0;
-  font-size: 13px;
   gap: 0.2rem;
-  line-height: 19px;
+  font-size: 0.8125rem;
+  line-height: calc(19 / 13);
 
   &::after {
     content: "";
@@ -32,3 +40,11 @@
     background-color: #323545;
   }
 }
+
+.darkTheme .text {
+  color: #bec0cd;
+
+  &::after {
+    background-color: #bec0cd;
+  }
+}