Improve responsive layouts and streamline page loading

components/Shell.tsx

@@ -1,7 +1,7 @@
 import { getI18n } from "@/lib/i18n";
 import "server-only";
 import Link from "next/link";
-import { Compass, ArrowUpRight } from "lucide-react";
+import { Compass, ArrowUpRight, UserRound } from "lucide-react";
 import { LanguageSwitcher } from "./LanguageSwitcher";
 import { rawUser, admin, required } from "@/lib/supabase";
 import { canReviewMaps, isAdministrator } from "@/shared/permissions";
@@ -25,8 +25,19 @@ export async function Header() {
           <Link
             href={account ? "/dashboard" : "/log-in"}
             className="header-account"
+            aria-label={account ? t("My account") : t("Log in")}
           >
-            {account ? t("My account") : t("Log in")} <ArrowUpRight size={15} />
+            <UserRound
+              size={18}
+              className="account-symbol"
+              aria-hidden="true"
+            />
+            <span>{account ? t("My account") : t("Log in")}</span>{" "}
+            <ArrowUpRight
+              className="account-arrow"
+              size={15}
+              aria-hidden="true"
+            />
           </Link>
         </div>
       </div>