98 nit only 1 primary button per page 1 (#107)

* changed all buttons that needed to be outline as outline

* added back to home button which appears only on pages that are not the home

* better select button for results

* updated ehader

src/app/page.tsx

@@ -46,7 +46,7 @@ const Home: React.FC = async () => {
 
   return (
     <div>
-      <div className="mx-auto py-16 sm:px-4 sm:py-16 md:px-8 lg:px-16">
+      <div className="container mx-auto py-16 sm:px-4 sm:py-16 md:px-8 lg:px-16">
         <h1 className="text-center text-5xl font-extrabold tracking-tight">
           Welcome to the{" "}
           <span className="block text-custom-primary sm:inline">
@@ -91,12 +91,12 @@ const Home: React.FC = async () => {
                     Knowledge Academy).
                   </li>
                   <li className="mb-4">
-                    <strong>&apos;Find the Expert&apos;:</strong> Gain
-                    access to a powerful search functionality that empowers you
-                    to pinpoint experts in specific technologies at Info
-                    Support. This feature proves invaluable when clients have
-                    precise inquiries, enabling you to quickly locate the
-                    consultant with the expertise needed to address their needs.
+                    <strong>&apos;Find the Expert&apos;:</strong> Gain access to
+                    a powerful search functionality that empowers you to
+                    pinpoint experts in specific technologies at Info Support.
+                    This feature proves invaluable when clients have precise
+                    inquiries, enabling you to quickly locate the consultant
+                    with the expertise needed to address their needs.
                   </li>
                 </ol>
               </div>

src/components/login.tsx

@@ -28,7 +28,7 @@ export function Login({
     <>
       <p>Logged in as {session.user?.name}</p>
       <Button
-        className="ml-2"
+        className="ml-2 mr-2"
         variant={"outline"}
         onClick={() => signOut({ callbackUrl: "/" })}
       >

src/components/select-role-results.tsx

@@ -6,16 +6,14 @@ import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
 import { ScrollArea } from "~/components/ui/scroll-area";
 import { type Section } from "~/models/types";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { slugify } from "~/utils/slugify";
-import { ArrowDown } from "./svg";
+import { ArrowDownDarkModeFriendly } from "./svg";
 
 const SelectRoleResults = ({ roles }: { roles: Section[] }) => {
   const pathname = usePathname() || "";
@@ -38,15 +36,14 @@ const SelectRoleResults = ({ roles }: { roles: Section[] }) => {
       <DropdownMenuTrigger asChild>
         <div className="mt-5 flex justify-center">
           <div className="mt-5 flex flex-col items-center gap-6 md:flex-row">
-            <Button className=" bg-custom-buttonPrimary text-custom-secondary hover:bg-custom-buttonHover dark:bg-custom-buttonPrimary dark:hover:bg-custom-buttonHover">
-              Viewing results for role: {currentRoleBeautified} <ArrowDown />
+            <Button variant="outline" className="max-w-[550px]">
+              Viewing results for role: {currentRoleBeautified}{" "}
+              <ArrowDownDarkModeFriendly />
             </Button>
           </div>
         </div>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
-        <DropdownMenuLabel>Roles:</DropdownMenuLabel>
-        <DropdownMenuSeparator />
+      <DropdownMenuContent className="w-[450px]">
         <ScrollArea className="w-50 h-72 rounded-md border">
           {roles.map((section) => (
             <Link href={section.href} key={section.id}>

src/components/svg.tsx

@@ -400,3 +400,33 @@ export function ArrowDown() {
     </svg>
   );
 }
+
+export function ArrowDownDarkModeFriendly() {
+  return (
+    <svg
+      className="arrow-down ml-2 mt-0.5 fill-[#003865] dark:fill-white"
+      width="10"
+      height="10"
+      viewBox="0 0 6 4"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        id="Vector"
+        d="M2.39275 2.39352V3.60801H3.60721V2.39352H2.39275Z"
+      ></path>
+      <path
+        id="Vector_2"
+        d="M1.19637 1.19662V2.41102H2.41079V1.19662H1.19637Z"
+      ></path>
+      <path
+        id="Vector_3"
+        d="M3.58911 1.19662V2.41102H4.80359V1.19662H3.58911Z"
+      ></path>
+      <path id="Vector_4" d="M0 0V1.21442H1.21441L1.21442 0H0Z"></path>
+      <path
+        id="Vector_5"
+        d="M4.78552 0V1.21442H5.9999L6.00001 0H4.78552Z"
+      ></path>
+    </svg>
+  );
+}