Add github button (#577)

skyvern-frontend/package-lock.json

@@ -34,6 +34,7 @@
         "posthog-js": "^1.138.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-github-btn": "^1.4.0",
         "react-hook-form": "^7.51.1",
         "react-router-dom": "^6.22.3",
         "serve-handler": "^6.1.5",
@@ -3791,6 +3792,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/github-buttons": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/github-buttons/-/github-buttons-2.28.0.tgz",
+      "integrity": "sha512-KsCbYiA+MiHO3ytzdGvGt/GNde4GfG9BrrLxxc+ut2snBF9IAjrn2F5mNgHHEXdG/CfFIHOMV8Uxy4LNhxZwUA=="
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -5245,6 +5251,17 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-github-btn": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/react-github-btn/-/react-github-btn-1.4.0.tgz",
+      "integrity": "sha512-lV4FYClAfjWnBfv0iNlJUGhamDgIq6TayD0kPZED6VzHWdpcHmPfsYOZ/CFwLfPv4Zp+F4m8QKTj0oy2HjiGXg==",
+      "dependencies": {
+        "github-buttons": "^2.22.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.51.1",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.1.tgz",

skyvern-frontend/package.json

@@ -42,6 +42,7 @@
     "posthog-js": "^1.138.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-github-btn": "^1.4.0",
     "react-hook-form": "^7.51.1",
     "react-router-dom": "^6.22.3",
     "serve-handler": "^6.1.5",

skyvern-frontend/src/routes/root/RootLayout.tsx

@@ -1,11 +1,12 @@
 import { Link, Outlet } from "react-router-dom";
 import { Toaster } from "@/components/ui/toaster";
 import { SideNav } from "./SideNav";
-import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
+import { DiscordLogoIcon } from "@radix-ui/react-icons";
 import { Logo } from "@/components/Logo";
 import { Profile } from "./Profile";
 import { useContext } from "react";
 import { UserContext } from "@/store/UserContext";
+import GitHubButton from "react-github-btn";
 
 function RootLayout() {
   const user = useContext(UserContext);
@@ -32,15 +33,17 @@ function RootLayout() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <DiscordLogoIcon className="w-6 h-6" />
+            <DiscordLogoIcon className="w-7 h-7" />
           </Link>
-          <Link
-            to="https://github.com/Skyvern-AI/skyvern"
-            target="_blank"
-            rel="noopener noreferrer"
+          <GitHubButton
+            href="https://github.com/skyvern-ai/skyvern"
+            data-color-scheme="no-preference: dark; light: dark; dark: dark;"
+            data-size="large"
+            data-show-count="true"
+            aria-label="Star skyvern-ai/skyvern on GitHub"
           >
-            <GitHubLogoIcon className="w-6 h-6" />
-          </Link>
+            Star
+          </GitHubButton>
         </div>
         <main className="pl-72 pb-4">
           <Outlet />