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

Approved-by: Linus Flood

apps/scandic-web/components/Sidebar/JoinLoyalty/LoyaltyLoginButton.tsx

@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"
 import { useLazyPathname } from "@scandic-hotels/common/hooks/useLazyPathname"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
-import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "@/hooks/useLang"
 import { trackLoginClick } from "@/utils/tracking"
@@ -22,17 +21,18 @@ export function LoyaltyLoginButton() {
         trackLoginClick("join scandic friends sidebar")
       }}
       redirectTo={loginPathname}
-      trackingId="loginJoinLoyalty"
+      loginPosition="scandic-friends-sidebar"
+      variant="Text"
+      typography="Body/Supporting text (caption)/smBold"
+      wrapping={false}
     >
       <MaterialIcon icon="arrow_forward" color="CurrentColor" size={20} />
-      <Typography variant={"Body/Paragraph/mdRegular"}>
-        <span>
-          {intl.formatMessage({
-            id: "loyalty.loginButton",
-            defaultMessage: "Log in here",
-          })}
-        </span>
-      </Typography>
+      <span>
+        {intl.formatMessage({
+          id: "loyalty.loginButton",
+          defaultMessage: "Log in here",
+        })}
+      </span>
     </LoginButton>
   )
 }

apps/scandic-web/components/Sidebar/JoinLoyalty/joinLoyalty.module.css

@@ -17,6 +17,7 @@ article.wrapper .preamble {
 .loginContainer {
   display: grid;
   gap: var(--Spacing-x2);
+  justify-items: start;
 }
 
 .button {