Update theme toggle functionality and UI components

Implemented a new ModeToggle feature for theme switching in personal account dropdown. The changes also made adjustments to several UI components, such as transforming Dialog to AlertDialog in transfer-ownership-dialog, and introducing invitation-submit-button in team-accounts. Some minor amendments include text changes and styling modifications.

apps/web/app/(marketing)/_components/site-header-account-section.tsx

@@ -13,6 +13,7 @@ import { Button } from '@kit/ui/button';
 import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';
 
+import featuresFlagConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
 
 export function SiteHeaderAccountSection(
@@ -38,6 +39,9 @@ function SuspendedPersonalAccountDropdown(props: { session: Session | null }) {
           paths={{
             home: pathsConfig.app.home,
           }}
+          features={{
+            enableThemeToggle: featuresFlagConfig.enableThemeToggle,
+          }}
           session={session}
           signOutRequested={() => signOut.mutateAsync()}
         />

apps/web/app/(marketing)/_components/site-header.tsx

@@ -1,5 +1,7 @@
 import type { Session } from '@supabase/supabase-js';
 
+import { ModeToggle } from '@kit/ui/mode-toggle';
+
 import { SiteHeaderAccountSection } from '~/(marketing)/_components/site-header-account-section';
 import { SiteNavigation } from '~/(marketing)/_components/site-navigation';
 import { AppLogo } from '~/components/app-logo';
@@ -17,13 +19,11 @@ export function SiteHeader(props: { session?: Session | null }) {
         </div>
 
         <div className={'flex flex-1 items-center justify-end space-x-4'}>
-          <div className={'flex items-center'}></div>
+          <div className={'flex items-center'}>
+            <ModeToggle />
+          </div>
 
           <SiteHeaderAccountSection session={props.session ?? null} />
-
-          <div className={'flex lg:hidden'}>
-            <SiteNavigation />
-          </div>
         </div>
       </div>
     </div>