fix(sandpack-react): open sandbox button (#761)

codesandbox · Feb 28, 2023 · 430a0f5 · 430a0f5 · vercel · Feb 28, 2023
1 parent b7386d2
commit 430a0f5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/sandpack-react/src/components/common/OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx b/sandpack-react/src/components/common/OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx
@@ -1,7 +1,6 @@
 import { useClasser } from "@code-hike/classer";
-import * as React from "react";
 
-import { THEME_PREFIX } from "../../../styles";
+import { css, THEME_PREFIX } from "../../../styles";
 import {
   buttonClassName,
   iconStandaloneClassName,
@@ -25,6 +24,7 @@ export const OpenInCodeSandboxButton = (): JSX.Element | null => {
       )}
     >
       <ExportIcon />
+      <span>Open Sandbox</span>
     </UnstyledOpenInCodeSandboxButton>
   );
 };
diff --git a/sandpack-react/src/styles/shared.ts b/sandpack-react/src/styles/shared.ts
@@ -16,6 +16,7 @@ export const buttonClassName = css({
   cursor: "pointer",
   color: "$colors$clickable",
   border: 0,
+  textDecoration: "none",
 
   "&:disabled": { color: "$colors$disabled" },
 
@@ -36,12 +37,14 @@ export const buttonClassName = css({
   },
 
   // If there's a children besides the icon
-  [`&.${iconStandaloneClassName}&:not(:has(svg + span))`]: {
+  [`&.${iconStandaloneClassName}&:not(:has(span))`]: {
     width: "$space$7",
   },
 
   [`&.${iconStandaloneClassName}&:has(svg + span)`]: {
     paddingRight: "$space$3",
+    paddingLeft: "$space$2",
+    gap: "$space$1",
   },
 });