refactor: refresh

src/pages/layout.tsx

@@ -1,7 +1,6 @@
 import "./layout.css";
 
 import { CSSProperties, useEffect, useState, useSyncExternalStore } from "react";
-import * as Dialog from "@radix-ui/react-dialog";
 import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet";
 import { FormattedMessage } from "react-intl";
@@ -17,8 +16,10 @@ import { Login } from "@/index";
 import { useLang } from "@/hooks/lang";
 import { AllLocales } from "@/intl";
 import { NewVersion } from "@/serviceWorker";
-import AsyncButton from "@/element/async-button";
 import { trackEvent } from "@/utils";
+import { BorderButton, DefaultButton } from "@/element/buttons";
+import Modal from "@/element/modal";
+import Logo from "@/element/logo";
 
 export function LayoutPage() {
   const navigate = useNavigate();
@@ -109,24 +110,15 @@ export function LayoutPage() {
 
   function loggedOut() {
     if (login) return;
-
-    function handleLogin() {
-      setShowLogin(true);
-    }
-
-    return (
-      <Dialog.Root open={showLogin} onOpenChange={setShowLogin}>
-        <AsyncButton className="btn btn-border" onClick={handleLogin}>
-          <FormattedMessage defaultMessage="Login" id="AyGauy" />
-          <Icon name="login" />
-        </AsyncButton>
-        <Dialog.Portal>
-          <Dialog.Overlay className="dialog-overlay" />
-          <Dialog.Content className="dialog-content">
-            <LoginSignup close={() => setShowLogin(false)} />
-          </Dialog.Content>
-        </Dialog.Portal>
-      </Dialog.Root>
+    return (<>
+      <BorderButton onClick={() => setShowLogin(true)}>
+        <FormattedMessage defaultMessage="Login" id="AyGauy" />
+        <Icon name="login" />
+      </BorderButton>
+      {showLogin && <Modal id="login">
+        <LoginSignup close={() => setShowLogin(false)} />
+      </Modal>}
+    </>
     );
   }
 
@@ -141,16 +133,16 @@ export function LayoutPage() {
       </Helmet>
       <header>
         <div
-          className="bg-white flex items-center pointer rounded-2xl aspect-square px-1"
+          className="bg-white text-black flex items-center cursor-pointer rounded-2xl aspect-square px-1"
           onClick={() => navigate("/")}>
-          <img src="/zap-stream.svg" width={40} />
+          <Logo width={40} height={40} />
         </div>
         <div className="grow flex items-center gap-2"></div>
         <div className="flex items-center gap-3">
           <Link
             to="https://discord.gg/Wtg6NVDdbT"
             target="_blank"
-            className="flex items-center max-md:hidden gap-1 bg-gray-1 hover:bg-gray-2 font-bold p-2 rounded-xl">
+            className="flex items-center max-md:hidden gap-1 bg-layer-1 hover:bg-layer-2 font-bold p-2 rounded-xl">
             <Icon name="link" />
             Discord
           </Link>
@@ -182,9 +174,9 @@ function NewVersionBanner() {
           <FormattedMessage defaultMessage="Refresh the page to use the latest version" id="Gmiwnd" />
         </p>
       </div>
-      <AsyncButton onClick={() => window.location.reload()} className="btn">
+      <DefaultButton onClick={() => window.location.reload()} className="btn">
         <FormattedMessage defaultMessage="Refresh" id="rELDbB" />
-      </AsyncButton>
+      </DefaultButton>
     </div>
   );
 }