From dc177917583d290bb99598df960fb7cf2779cd96 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sat, 18 May 2024 13:53:39 -0600
Subject: [PATCH] Settings fixes

---
 web/src/components/menu/AccountSettings.tsx | 94 ++++++++++-----------
 web/src/components/menu/GeneralSettings.tsx | 30 +++----
 web/src/components/navigation/Bottombar.tsx |  4 +-
 3 files changed, 61 insertions(+), 67 deletions(-)

diff --git a/web/src/components/menu/AccountSettings.tsx b/web/src/components/menu/AccountSettings.tsx
index 53fcd564d..fa4834a0d 100644
--- a/web/src/components/menu/AccountSettings.tsx
+++ b/web/src/components/menu/AccountSettings.tsx
@@ -34,55 +34,51 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
   const MenuItem = isDesktop ? DropdownMenuItem : DialogClose;
 
   return (
-    <div className={className}>
-      <Container>
-        <Trigger asChild>
-          <a href="#">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <div
-                  className={cn(
-                    "flex flex-col items-center justify-center",
-                    isDesktop
-                      ? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted"
-                      : "text-secondary-foreground",
-                    className,
-                  )}
-                >
-                  <VscAccount className="size-5 md:m-[6px]" />
-                </div>
-              </TooltipTrigger>
-              <TooltipPortal>
-                <TooltipContent side="right">
-                  <p>Account</p>
-                </TooltipContent>
-              </TooltipPortal>
-            </Tooltip>
-          </a>
-        </Trigger>
-        <Content
-          className={
-            isDesktop ? "mr-5 w-72" : "max-h-[75dvh] overflow-hidden p-2"
-          }
-        >
-          <div className="w-full flex-col overflow-y-auto overflow-x-hidden">
-            <DropdownMenuLabel>
-              Current User: {profile?.username || "anonymous"}
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
-            <MenuItem
-              className={
-                isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
-              }
+    <Container>
+      <Trigger asChild>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div
+              className={cn(
+                "flex flex-col items-center justify-center",
+                isDesktop
+                  ? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted"
+                  : "text-secondary-foreground",
+                className,
+              )}
             >
-              <a className="flex" href={logoutUrl}>
-                <LuLogOut className="mr-2 size-4" />
-                <span>Logout</span>
-              </a>
-            </MenuItem>
-          </div>
-        </Content>
-      </Container>
-    </div>
+              <VscAccount className="size-5 md:m-[6px]" />
+            </div>
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent side="right">
+              <p>Account</p>
+            </TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
+      </Trigger>
+      <Content
+        className={
+          isDesktop ? "mr-5 w-72" : "max-h-[75dvh] overflow-hidden p-2"
+        }
+      >
+        <div className="w-full flex-col overflow-y-auto overflow-x-hidden">
+          <DropdownMenuLabel>
+            Current User: {profile?.username || "anonymous"}
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
+          <MenuItem
+            className={
+              isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
+            }
+          >
+            <a className="flex" href={logoutUrl}>
+              <LuLogOut className="mr-2 size-4" />
+              <span>Logout</span>
+            </a>
+          </MenuItem>
+        </div>
+      </Content>
+    </Container>
   );
 }
diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
index d40a1a33b..608db7997 100644
--- a/web/src/components/menu/GeneralSettings.tsx
+++ b/web/src/components/menu/GeneralSettings.tsx
@@ -116,22 +116,20 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
       <div className={className}>
         <Container>
           <Trigger asChild>
-            <a href="#">
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div
-                    className={`flex flex-col items-center justify-center ${isDesktop ? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted" : "text-secondary-foreground"}`}
-                  >
-                    <LuSettings className="size-5 md:m-[6px]" />
-                  </div>
-                </TooltipTrigger>
-                <TooltipPortal>
-                  <TooltipContent side="right">
-                    <p>Settings</p>
-                  </TooltipContent>
-                </TooltipPortal>
-              </Tooltip>
-            </a>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div
+                  className={`flex flex-col items-center justify-center ${isDesktop ? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted" : "text-secondary-foreground"}`}
+                >
+                  <LuSettings className="size-5 md:m-[6px]" />
+                </div>
+              </TooltipTrigger>
+              <TooltipPortal>
+                <TooltipContent side="right">
+                  <p>Settings</p>
+                </TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
           </Trigger>
           <Content
             className={
diff --git a/web/src/components/navigation/Bottombar.tsx b/web/src/components/navigation/Bottombar.tsx
index 2f73a4f9e..6836f34e4 100644
--- a/web/src/components/navigation/Bottombar.tsx
+++ b/web/src/components/navigation/Bottombar.tsx
@@ -15,7 +15,7 @@ import {
 } from "@/context/statusbar-provider";
 import { Link } from "react-router-dom";
 import { cn } from "@/lib/utils";
-import { isMobile } from "react-device-detect";
+import { isIOS, isMobile } from "react-device-detect";
 import { isPWA } from "@/utils/isPWA";
 
 function Bottombar() {
@@ -25,7 +25,7 @@ function Bottombar() {
     <div
       className={cn(
         "absolute inset-x-4 bottom-0 flex h-16 flex-row justify-between",
-        isPWA
+        isPWA && isIOS
           ? "portrait:items-start portrait:pt-1 landscape:items-center"
           : "items-center",
         isMobile && !isPWA && "h-12 landscape:md:h-16",