From 430a0f5d13acc6da11e4108c8c4c82b35a0c7978 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Tue, 28 Feb 2023 09:31:00 +0000
Subject: [PATCH] fix(sandpack-react): open sandbox button (#761)

---
 .../OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx      | 4 ++--
 sandpack-react/src/styles/shared.ts                          | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/sandpack-react/src/components/common/OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx b/sandpack-react/src/components/common/OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx
index 8d66d9243..d8f37606b 100644
--- 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
index a1dc29550..5f50f81a7 100644
--- 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",
   },
 });