💅 Center drawer buttons

c0debrain · May 18, 2023 · f909de8 · f909de8
1 parent 7349764
commit f909de8
Showing 1 changed file with 16 additions and 40 deletions.
diff --git a/next/src/components/Drawer.tsx b/next/src/components/Drawer.tsx
@@ -19,13 +19,7 @@ import { api } from "../utils/api";
 import { useRouter } from "next/router";
 import FadingHr from "./FadingHr";
 
-const Drawer = ({
-  showHelp,
-  showSettings,
-}: {
-  showHelp: () => void;
-  showSettings: () => void;
-}) => {
+const Drawer = ({ showHelp, showSettings }: { showHelp: () => void; showSettings: () => void }) => {
   const [t] = useTranslation("drawer");
   const [showDrawer, setShowDrawer] = useState(true);
   const { session, signIn, signOut, status } = useAuth();
@@ -95,57 +89,41 @@ const Drawer = ({
           </div>
           <ul className="flex flex-col gap-2 overflow-auto">
             {userAgents.map((agent, index) => (
-                <DrawerItem
-                  key={index}
-                  icon={<FaRobot />}
-                  text={agent.name}
-                  className="w-full"
-                  onClick={() => void router.push(`/agent?id=${agent.id}`)}
-                />
-              )
-            )}
+              <DrawerItem
+                key={index}
+                icon={<FaRobot />}
+                text={agent.name}
+                className="w-full"
+                onClick={() => void router.push(`/agent?id=${agent.id}`)}
+              />
+            ))}
 
             {status === "unauthenticated" && (
               <div>
-                <a
-                  className="link"
-                  onClick={() => void signIn()}
-                >
+                <a className="link" onClick={() => void signIn()}>
                   {t("SIGN_IN")}
                 </a>{" "}
                 {t("SIGN_IN_NOTICE")}
               </div>
             )}
             {status === "authenticated" && userAgents.length === 0 && (
-              <div>
-                {t("NEED_TO_SIGN_IN_AND_CREATE_AGENT_FIRST")}
-              </div>
+              <div>{t("NEED_TO_SIGN_IN_AND_CREATE_AGENT_FIRST")}</div>
             )}
           </ul>
         </div>
 
         <div className="flex flex-col gap-1">
           <FadingHr className="my-2" />
           <AuthItem session={session} signIn={signIn} signOut={signOut} />
+          <DrawerItem icon={<FaQuestionCircle />} text={t("HELP_BUTTON")} onClick={showHelp} />
+          <DrawerItem icon={<FaHeart />} text={t("SUPPORT_BUTTON")} onClick={handleSupport} />
           <DrawerItem
-            icon={<FaQuestionCircle />}
-            text={t("HELP_BUTTON")}
-            onClick={showHelp}
-          />
-          <DrawerItem
-            icon={<FaHeart />}
-            text={t("SUPPORT_BUTTON")}
-            onClick={handleSupport}
-          />
-          <DrawerItem
-            icon={
-              <FaCog className="transition-transform group-hover:rotate-90" />
-            }
+            icon={<FaCog className="transition-transform group-hover:rotate-90" />}
             text={t("SETTINGS_BUTTON")}
             onClick={showSettings}
           />
           <FadingHr className="my-2" />
-          <div className="flex flex-row items-center">
+          <div className="flex flex-row items-center justify-center gap-2">
             <DrawerItem
               icon={
                 <FaDiscord
@@ -243,9 +221,7 @@ const AuthItem: React.FC<{
   const [t] = useTranslation("drawer");
   const icon = session?.user ? <FaSignOutAlt /> : <FaSignInAlt />;
   const onClick = session?.user ? signOut : signIn;
-  const text = session?.user
-    ? t("SIGN_OUT")
-    : t("SIGN_IN");
+  const text = session?.user ? t("SIGN_OUT") : t("SIGN_IN");
 
   return <DrawerItem icon={icon} text={text} onClick={onClick} />;
 };