From 33e543a78ff5abd46d628102779529ffddf23b1d Mon Sep 17 00:00:00 2001
From: James Ritchie <james@jamesritchie.co.uk>
Date: Wed, 14 Dec 2022 17:33:13 +0000
Subject: [PATCH] Updated the docs button to use a proper Button component

---
 apps/webapp/app/components/layout/Header.tsx     | 16 ++++++----------
 .../webapp/app/components/primitives/Buttons.tsx |  2 +-
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/apps/webapp/app/components/layout/Header.tsx b/apps/webapp/app/components/layout/Header.tsx
index 205abf02f..109e35d2e 100644
--- a/apps/webapp/app/components/layout/Header.tsx
+++ b/apps/webapp/app/components/layout/Header.tsx
@@ -1,8 +1,9 @@
-import { DocumentTextIcon } from "@heroicons/react/24/solid";
+import { DocumentTextIcon } from "@heroicons/react/24/outline";
 import { Link } from "@remix-run/react";
 import { useOptionalUser } from "~/hooks/useUser";
 import { Logo } from "../Logo";
 import { OrganizationMenu } from "../navigation/OrganizationMenu";
+import { SecondaryA } from "../primitives/Buttons";
 import { UserProfileMenu } from "../UserProfileMenu";
 
 type HeaderProps = {
@@ -23,15 +24,10 @@ export function Header({ children }: HeaderProps) {
       <div className="flex flex-1 justify-center">{children}</div>
 
       <div className="flex items-center gap-2">
-        <a
-          href="https://docs.apihero.run"
-          target="_blank"
-          className="group flex items-center justify-center gap-1 rounded border border-slate-200 bg-white py-1 px-2 text-sm text-slate-700 shadow-sm transition hover:bg-slate-50 hover:text-blue-600"
-          rel="noreferrer"
-        >
-          <DocumentTextIcon className="h-4 w-4 transition group-hover:text-blue-600" />
-          <span>Docs</span>
-        </a>
+        <SecondaryA href="https://docs.apihero.run" target="_blank">
+          <DocumentTextIcon className="h-4 w-4" />
+          Docs
+        </SecondaryA>
         {user ? (
           <UserProfileMenu user={user} />
         ) : (
diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx
index fb2aa62ea..3ee249484 100644
--- a/apps/webapp/app/components/primitives/Buttons.tsx
+++ b/apps/webapp/app/components/primitives/Buttons.tsx
@@ -9,7 +9,7 @@ const primaryClasses = classnames(
 );
 const secondaryClasses = classnames(
   commonClasses,
-  "bg-slate-600 text-white hover:bg-slate-700 focus:bg-slate-700"
+  "bg-slate-800 text-white hover:bg-slate-700 focus:bg-slate-700"
 );
 
 type ButtonProps = React.DetailedHTMLProps<