feat(BOOK-212): Refactored LoginButton and added successful tracking functionality

Approved-by: Linus Flood

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

@@ -7,7 +7,6 @@ import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membership
 import { useLazyPathname } from "@scandic-hotels/common/hooks/useLazyPathname"
 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 { isValidSession } from "@scandic-hotels/trpc/utils/session"
 
@@ -75,17 +74,18 @@ export default function MyPagesMenuWrapper() {
             trackLoginClick("top menu")
           }}
           redirectTo={loginPathname}
-          trackingId="loginStartNewTopMenu"
+          loginPosition="top-menu"
+          variant="Text"
+          typography="Body/Paragraph/mdBold"
+          wrapping={false}
         >
           <Avatar />
-          <Typography variant={"Body/Paragraph/mdBold"}>
-            <span className={styles.loginText}>
-              {intl.formatMessage({
-                id: "header.logInJoin",
-                defaultMessage: "Log in/Join",
-              })}
-            </span>
-          </Typography>
+          <span className={styles.loginText}>
+            {intl.formatMessage({
+              id: "header.logInJoin",
+              defaultMessage: "Log in/Join",
+            })}
+          </span>
         </LoginButton>
       )}
     </>

apps/scandic-web/components/Header/MainMenu/MyPagesMenuWrapper/myPagesMenuWrapper.module.css

@@ -1,7 +1,5 @@
-.loginLink {
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x1);
+.loginLink:hover {
+  text-decoration: none !important; /* Special case for the login link inside the header */
 }
 
 @media screen and (max-width: 767px) {