wip: moved components + fixed theme toggle alignment

Author: tabarra

panel/src/components/ui/alert.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground text-black/75 dark:text-white/90",
   {
     variants: {
       variant: {

panel/src/components/AccountDialog.tsx panel/src/layout/AccountDialog.tsxpanel/src/components/AccountDialog.tsx renamed to panel/src/layout/AccountDialog.tsx

@@ -7,22 +7,22 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useAuth } from "@/hooks/auth";
-import { memo, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { TabsTrigger, TabsList, TabsContent, Tabs } from "@/components/ui/tabs";
 import { ApiChangeIdentifiersReq, ApiChangePasswordReq } from "@shared/authApiTypes";
 import { useAccountModal, useCloseAccountModal } from "@/hooks/dialogs";
 import { GenericApiOkResp } from "@shared/genericApiTypes";
-import { ApiTimeout, fetchWithTimeout, useAuthedFetcher, useBackendApi } from "@/hooks/fetch";
+import { fetchWithTimeout, useAuthedFetcher, useBackendApi } from "@/hooks/fetch";
 import consts from "@shared/consts";
-import { txToast } from "./TxToaster";
+import { txToast } from "@/components/TxToaster";
 import useSWR from 'swr';
-import TxAnchor from "./TxAnchor";
+import TxAnchor from "@/components/TxAnchor";
 
 
 /**
  * Change Password tab
  */
-const ChangePasswordTab = memo(function () {
+function ChangePasswordTab() {
     const { authData, setAuthData } = useAuth();
     const { setAccountModalTab } = useAccountModal();
     const closeAccountModal = useCloseAccountModal();
@@ -151,7 +151,7 @@ const ChangePasswordTab = memo(function () {
             </form>
         </TabsContent>
     );
-})
+}
 
 
 /**

…el/src/components/BreakpointDebugger.tsx panel/src/layout/BreakpointDebugger.tsxpanel/src/components/BreakpointDebugger.tsx renamed to panel/src/layout/BreakpointDebugger.tsx panel/src/components/BreakpointDebugger.tsx renamed to panel/src/layout/BreakpointDebugger.tsx

@@ -143,14 +143,8 @@ function AuthedHeaderFragment() {
                 {/* TODO: remove this when remaking the ingame menu */}
                 {window.txConsts.isWebInterface && (
                     <DropdownMenuItem className="cursor-pointer" onClick={switchTheme}>
-                        <span className="hidden dark:flex items-center">
-                            <SunIcon className="mr-2 h-4 w-4" />
-                            Light Mode
-                        </span>
-                        <span className="flex dark:hidden items-center">
-                            <MoonIcon className="mr-2 h-4 w-4" />
-                            Dark Mode
-                        </span>
+                        {theme === 'light' ? <SunIcon className="mr-2 h-4 w-4" /> : <MoonIcon className="mr-2 h-4 w-4" />}
+                        {theme === 'light' ? 'Light Mode' : 'Dark Mode'}
                     </DropdownMenuItem>
                 )}
                 <DropdownMenuItem className="cursor-pointer" onClick={openAccountModal}>

panel/src/layout/Header.tsx

@@ -9,7 +9,7 @@ import WarningBar from './WarningBar';
 import ConfirmDialog from '@/components/ConfirmDialog';
 import PromptDialog from '@/components/PromptDialog';
 import TxToaster from '@/components/TxToaster';
-import AccountDialog from '@/components/AccountDialog';
+import AccountDialog from './AccountDialog';
 import { useOpenAccountModal } from '@/hooks/dialogs';
 import PlayerModal from './PlayerModal/PlayerModal';
 import { playerModalUrlParam, useOpenPlayerModal } from '@/hooks/playerModal';
@@ -18,7 +18,7 @@ import MainSocket from './MainSocket';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { useToggleTheme } from '@/hooks/theme';
 import { hotkeyEventListener } from '@/lib/hotkeyEventListener';
-import BreakpointDebugger from '@/components/BreakpointDebugger';
+import BreakpointDebugger from './BreakpointDebugger';
 import ActionModal from './ActionModal/ActionModal';
 import { useEffect } from 'react';
 import { actionModalUrlParam, useOpenActionModal } from '@/hooks/actionModal';