Remove 'community driven:' from banner and make GitHub icon inline (#2720)

* refactor(ui): Simplify GitHub contribution links and adjust sticky sidebar

* fix(ui): add cursor-pointer to buttons for better UX

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: ComputelessComputer <[email protected]>

Author: devin-ai-integration[bot]

apps/web/src/routes/_view/app/account.tsx

@@ -128,7 +128,7 @@ function AccountSettingsCard() {
       <button
         onClick={() => manageBillingMutation.mutate()}
         disabled={manageBillingMutation.isPending}
-        className="px-4 h-8 flex items-center text-sm bg-linear-to-b from-white to-stone-50 border border-neutral-300 text-neutral-700 rounded-full shadow-sm hover:shadow-md hover:scale-[102%] active:scale-[98%] transition-all disabled:opacity-50 disabled:hover:scale-100"
+        className="cursor-pointer px-4 h-8 flex items-center text-sm bg-linear-to-b from-white to-stone-50 border border-neutral-300 text-neutral-700 rounded-full shadow-sm hover:shadow-md hover:scale-[102%] active:scale-[98%] transition-all disabled:opacity-50 disabled:hover:scale-100"
       >
         {manageBillingMutation.isPending ? "Loading..." : "Manage Billing"}
       </button>
@@ -219,7 +219,7 @@ function SignOutSection() {
       <button
         onClick={() => signOut.mutate()}
         disabled={signOut.isPending}
-        className="px-4 h-8 flex items-center text-sm text-red-600 hover:text-red-700 border border-red-200 hover:border-red-300 rounded-full transition-all disabled:opacity-50 disabled:hover:border-red-200"
+        className="cursor-pointer px-4 h-8 flex items-center text-sm text-red-600 hover:text-red-700 border border-red-200 hover:border-red-300 rounded-full transition-all disabled:opacity-50 disabled:hover:border-red-200"
       >
         {signOut.isPending ? "Signing out..." : "Sign out"}
       </button>

apps/web/src/routes/_view/app/integration.tsx

@@ -1,17 +1,17 @@
 import Nango from "@nangohq/frontend";
 import { createFileRoute } from "@tanstack/react-router";
 import { useServerFn } from "@tanstack/react-start";
+import { useState } from "react";
 
 import { nangoCreateConnectSession } from "../../../functions/nango";
 
 export const Route = createFileRoute("/_view/app/integration")({
   component: Component,
 });
 
-const nango = new Nango();
-
 function Component() {
   const getSessionToken = useServerFn(nangoCreateConnectSession);
+  const [nango] = useState(() => new Nango());
 
   const handleConnect = async () => {
     const connect = nango.openConnectUI({

apps/web/src/routes/_view/gallery/index.tsx

@@ -209,12 +209,13 @@ function ContributeBanner() {
         "transition-colors",
       ])}
     >
-      <Icon icon="mdi:github" className="text-base" />
-      <span>
-        <strong>Community-driven:</strong> Have an idea?{" "}
-        <span className="group-hover:underline group-hover:decoration-dotted group-hover:underline-offset-2">
-          Contribute on GitHub
-        </span>
+      Have an idea? Contribute on{" "}
+      <span className="group-hover:underline group-hover:decoration-dotted group-hover:underline-offset-2 items-center inline-flex gap-0.5">
+        <Icon
+          icon="mdi:github"
+          className="text-base inline-block align-middle"
+        />{" "}
+        GitHub
       </span>
     </a>
   );
@@ -425,7 +426,7 @@ function DesktopSidebar({
 }) {
   return (
     <aside className="hidden lg:block w-56 shrink-0">
-      <div className="sticky top-[85px]">
+      <div className="sticky top-21.25">
         <h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-4">
           Categories
         </h3>

apps/web/src/routes/_view/shortcuts/index.tsx

@@ -163,12 +163,13 @@ function ContributeBanner() {
         "transition-colors",
       ])}
     >
-      <Icon icon="mdi:github" className="text-base" />
-      <span>
-        <strong>Community-driven:</strong> Have a shortcut idea?{" "}
-        <span className="group-hover:underline group-hover:decoration-dotted group-hover:underline-offset-2">
-          Contribute on GitHub
-        </span>
+      Have a shortcut idea? Contribute on{" "}
+      <span className="group-hover:underline group-hover:decoration-dotted group-hover:underline-offset-2 items-center inline-flex gap-0.5">
+        <Icon
+          icon="mdi:github"
+          className="text-base inline-block align-middle"
+        />{" "}
+        GitHub
       </span>
     </a>
   );
@@ -309,7 +310,7 @@ function DesktopSidebar({
 }) {
   return (
     <aside className="hidden lg:block w-56 shrink-0">
-      <div className="sticky top-[85px]">
+      <div className="sticky top-21.25">
         <h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-4">
           Categories
         </h3>

apps/web/src/routes/_view/templates/index.tsx

@@ -166,12 +166,13 @@ function ContributeBanner() {
         "transition-colors",
       ])}
     >
-      <Icon icon="mdi:github" className="text-base" />
-      <span>
-        <strong>Community-driven:</strong> Have a template idea?{" "}
-        <span className="group-hover:underline group-hover:decoration-dotted group-hover:underline-offset-2">
-          Contribute on GitHub
-        </span>
+      Have a template idea? Contribute on{" "}
+      <span className="group-hover:underline group-hover:decoration-dotted group-hover:underline-offset-2 items-center inline-flex gap-0.5">
+        <Icon
+          icon="mdi:github"
+          className="text-base inline-block align-middle"
+        />{" "}
+        GitHub
       </span>
     </a>
   );
@@ -312,7 +313,7 @@ function DesktopSidebar({
 }) {
   return (
     <aside className="hidden lg:block w-56 shrink-0">
-      <div className="sticky top-[85px]">
+      <div className="sticky top-21.25">
         <h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-4">
           Categories
         </h3>