From 1654378850ffd46a443043bf980c077fefc641e7 Mon Sep 17 00:00:00 2001
From: Chris Weaver <25087905+Weves@users.noreply.github.com>
Date: Wed, 31 Jul 2024 17:29:14 -0700
Subject: [PATCH] Fix user dropdown font (#2007)

---
 web/src/app/layout.tsx              |  4 ++--
 web/src/components/UserDropdown.tsx | 21 +++++++++++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index eecb32403..4328be873 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -60,9 +60,9 @@ export default async function RootLayout({
         </head>
       )}
 
-      <body className="relative">
+      <body className={`relative ${inter.variable} font-sans`}>
         <div
-          className={`${inter.variable} font-sans text-default bg-background ${
+          className={`text-default bg-background ${
             // TODO: remove this once proper dark mode exists
             process.env.THEME_IS_DARK?.toLowerCase() === "true" ? "dark" : ""
           }`}
diff --git a/web/src/components/UserDropdown.tsx b/web/src/components/UserDropdown.tsx
index 988c6a32f..185c98624 100644
--- a/web/src/components/UserDropdown.tsx
+++ b/web/src/components/UserDropdown.tsx
@@ -1,15 +1,13 @@
 "use client";
 
 import { useState, useRef, useContext } from "react";
-import { FiSearch, FiMessageSquare, FiTool, FiLogOut } from "react-icons/fi";
+import { FiLogOut } from "react-icons/fi";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { User } from "@/lib/types";
 import { checkUserIsNoAuthUser, logout } from "@/lib/user";
-import { BasicSelectable } from "@/components/BasicClickable";
 import { Popover } from "./popover/Popover";
 import { LOGOUT_DISABLED } from "@/lib/constants";
-import { Settings } from "@/app/admin/settings/interfaces";
 import { SettingsContext } from "./settings/SettingsProvider";
 import { LightSettingsIcon } from "./icons/icons";
 import { pageType } from "@/app/chat/sessionSidebar/types";
@@ -54,7 +52,22 @@ export function UserDropdown({
             onClick={() => setUserInfoVisible(!userInfoVisible)}
             className="flex cursor-pointer"
           >
-            <div className="my-auto bg-background-strong ring-2 ring-transparent group-hover:ring-background-300/50 transition-ring duration-150 rounded-lg inline-block flex-none px-2 text-base ">
+            <div
+              className="
+                my-auto
+                bg-background-strong
+                ring-2
+                ring-transparent
+                group-hover:ring-background-300/50
+                transition-ring
+                duration-150
+                rounded-lg
+                inline-block
+                flex-none
+                px-2
+                text-base
+              "
+            >
               {user && user.email ? user.email[0].toUpperCase() : "A"}
             </div>
           </div>
