feat: header button change for web and mobile

memser-spaceport · Dec 3, 2024 · 4309766 · 4309766
1 parent 9e3f699
commit 4309766
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 5 deletions.
diff --git a/analytics/auth.analytics.ts b/analytics/auth.analytics.ts
@@ -24,6 +24,10 @@ export const useAuthAnalytics = () => {
     captureEvent(AUTH_ANALYTICS.AUTH_LOGIN_BTN_CLICKED);
   };
 
+  const onSignUpBtnClicked = () => {
+    captureEvent(AUTH_ANALYTICS.AUTH_SIGN_UP_BTN_CLICKED);
+  }
+
   const onProceedToLogin = () => {
     captureEvent(AUTH_ANALYTICS.AUTH_PROCEED_TO_LOGIN_CLICKED);
   };
@@ -100,6 +104,7 @@ export const useAuthAnalytics = () => {
     onUpdateEmailClicked,
     onUpdateEmailSuccess,
     onUpdateEmailFailure,
-    onUpdateSameEmailProvided
+    onUpdateSameEmailProvided,
+    onSignUpBtnClicked
   };
 };
diff --git a/components/core/navbar/login-btn.tsx b/components/core/navbar/login-btn.tsx
@@ -23,13 +23,13 @@ const LoginBtn = () => {
   return (
     <>
       <button className="loginBtn" onClick={onLoginClickHandler}>
-        Login
+        Login to the Network
       </button>
       <style jsx>{`
         .loginBtn {
           background: linear-gradient(71.47deg, #427dff 8.43%, #44d5bb 87.45%);
           box-shadow: 0px 1px 1px 0px #07080829;
-          padding: 8px 24px;
+          padding: 8px 12px;
           color: #ffffff;
           font-size: 14px;
           line-height: 24px;

diff --git a/components/core/navbar/mobile-nav-drawer.tsx b/components/core/navbar/mobile-nav-drawer.tsx
@@ -12,6 +12,7 @@ import { toast } from 'react-toastify';
 import { createLogoutChannel } from '@/components/core/login/broadcast-channel';
 import LoginBtn from './login-btn';
 import { getAnalyticsUserInfo, triggerLoader } from '@/utils/common.utils';
+import SignUpBtn from './sign-up';
 
 interface IMobileNavDrawer {
   userInfo: IUserInfo;
@@ -136,7 +137,8 @@ export default function MobileNavDrawer(props: Readonly<IMobileNavDrawer>) {
               {!isLoggedIn && (
                 <div className="md__container__bdy__footer__lgnop">
                   <LoginBtn />
-                  <JoinNetwork />
+                  {/* <JoinNetwork /> */}
+                  <SignUpBtn />
                 </div>
               )}
 

diff --git a/components/core/navbar/nav-bar.tsx b/components/core/navbar/nav-bar.tsx
@@ -15,6 +15,7 @@ import JoinNetwork from './join-network';
 import LoginBtn from './login-btn';
 import MobileNavDrawer from './mobile-nav-drawer';
 import UserProfile from './userProfile';
+import SignUpBtn from './sign-up';
 
 interface INavbar {
   userInfo: IUserInfo;
@@ -151,7 +152,8 @@ export default function Navbar(props: Readonly<INavbar>) {
           </div>
           {!isLoggedIn && (
             <div className="nb__right__lgandjoin">
-              <JoinNetwork />
+              {/* <JoinNetwork /> */}
+              <SignUpBtn />
               <LoginBtn />
             </div>
           )}

diff --git a/components/core/navbar/sign-up.tsx b/components/core/navbar/sign-up.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { useAuthAnalytics } from '@/analytics/auth.analytics';
+import Link from 'next/link';
+
+const SignUpBtn = () => {
+  const authAnalytics = useAuthAnalytics();
+
+  const onLoginClickHandler = () => {
+    authAnalytics.onLoginBtnClicked();
+  };
+  return (
+    <>
+      <Link
+        href="/sign-up"
+        onClick={onLoginClickHandler}
+      >
+        <button className="SignUpBtn">
+          Sign Up
+        </button>
+      </Link>
+      <style jsx>{`
+        .SignUpBtn {
+          background: transparent;
+          color: #475569;
+          font-size: 15px;
+          line-height: 24px;
+          font-weight: 600;
+        }
+
+        .SignUpBtn:hover {
+          // box-shadow: 0 4px 4px 0 rgba(15, 23, 42, 0.04), 0 0 1px 0 rgba(15, 23, 42, 0.12), 0 0 0 2px rgba(21, 111, 247, 0.25); 
+          color: #000000;
+          // background: linear-gradient(71.47deg, #1a61ff 8.43%, #2cc3ae 87.45%);
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default SignUpBtn;
diff --git a/utils/constants.ts b/utils/constants.ts
@@ -230,6 +230,7 @@ export const AUTH_ANALYTICS = {
   AUTH_SETTINGS_EMAIL_UPDATE_SUCCESS: 'AUTH_SETTINGS_EMAIL_UPDATE_SUCCESS',
   AUTH_SETTINGS_EMAIL_UPDATE_FAILED: 'AUTH_SETTINGS_EMAIL_UPDATE_FAILED',
   AUTH_SETTINGS_EMAIL_UPDATE_SAME_AS_OLD: 'AUTH_SETTINGS_EMAIL_UPDATE_SAME_AS_OLD',
+  AUTH_SIGN_UP_BTN_CLICKED: 'AUTH_SIGN_UP_BTN_CLICKED',
 };
 
 export const TEAMS_ANALYTICS_EVENTS = {