Merged in chore/SW-3381-move-loginbutton-to-ds- (pull request #2752)

chore(SW-3381) Moved LoginButton to design system

* chore(SW-3381) Moved LoginButton to design system


Approved-by: Anton Gunnarsson

apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -3,6 +3,7 @@
 import FocusLock from "react-focus-lock"
 import { useIntl } from "react-intl"
 
+import { logout } from "@scandic-hotels/common/constants/routes/handleAuth"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -10,8 +11,6 @@ import Link from "@scandic-hotels/design-system/Link"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { trpc } from "@scandic-hotels/trpc/client"
 
-import { logout } from "@/constants/routes/handleAuth"
-
 import useLang from "@/hooks/useLang"
 
 import styles from "./myPagesMenuContent.module.css"

apps/scandic-web/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx

@@ -5,11 +5,14 @@ import { useIntl } from "react-intl"
 
 import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
 import { Avatar } from "@scandic-hotels/design-system/Avatar"
+import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 
-import LoginButton from "@/components/LoginButton"
 import useLang from "@/hooks/useLang"
+import { useLazyPathname } from "@/hooks/useLazyPathname"
 import { isValidClientSession } from "@/utils/clientSession"
+import { trackLoginClick } from "@/utils/tracking"
 
 import MyPagesMenu, { MyPagesMenuSkeleton } from "../MyPagesMenu"
 import MyPagesMobileMenu, {
@@ -21,6 +24,7 @@ import styles from "./myPagesMenuWrapper.module.css"
 export default function MyPagesMenuWrapper() {
   const intl = useIntl()
   const lang = useLang()
+  const loginPathname = useLazyPathname()
 
   const { data: session } = useSession()
   const isUserLoggedIn = isValidClientSession(session)
@@ -61,19 +65,25 @@ export default function MyPagesMenuWrapper() {
         </>
       ) : (
         <LoginButton
-          className={styles.loginLink}
           aria-label={intl.formatMessage({
             defaultMessage: "Log in/Join",
           })}
-          position="top menu"
+          className={styles.loginLink}
+          lang={lang}
+          onClick={() => {
+            trackLoginClick("top menu")
+          }}
+          pathName={loginPathname}
           trackingId="loginStartNewTopMenu"
         >
           <Avatar />
-          <span className={styles.loginText}>
-            {intl.formatMessage({
-              defaultMessage: "Log in/Join",
-            })}
-          </span>
+          <Typography variant={"Body/Paragraph/mdRegular"}>
+            <span className={styles.loginText}>
+              {intl.formatMessage({
+                defaultMessage: "Log in/Join",
+              })}
+            </span>
+          </Typography>
         </LoginButton>
       )}
     </>