-
-
-
+
+ {images.map((image, i) => (
+
+ {displayImage('desktop', image, i)}
+ {displayImage('mobile', image, i)}
+
+ ))}
+
+
{users.map(({ name, points, image }) => {
const position = sorted.indexOf(name);
return (
@@ -87,7 +90,7 @@ const Leaderboard = ({ user }: LeaderboardProps) => {
even={name !== userName}
className={styles.row}
style={{
- transform: `translateY(${position * 4}rem)`,
+ transform: `translateY(calc(${position} * var(--leaderboard-height)))`,
zIndex: name === userName ? '5' : undefined,
}}
/>
diff --git a/src/components/onboarding/Leaderboard/style.module.scss b/src/components/onboarding/Leaderboard/style.module.scss
index 6aed2179..33d1aa75 100644
--- a/src/components/onboarding/Leaderboard/style.module.scss
+++ b/src/components/onboarding/Leaderboard/style.module.scss
@@ -1,15 +1,27 @@
@use 'src/styles/vars.scss' as vars;
.wrapper {
+ --leaderboard-height: 4rem;
border-radius: 0.5rem;
overflow: hidden;
position: relative;
+ @media (max-width: vars.$breakpoint-md) {
+ --leaderboard-height: 5rem;
+ }
+
.row {
+ height: var(--leaderboard-height);
left: 0;
position: absolute;
right: 0;
top: 0;
transition: transform 0.2s;
+
+ @media (max-width: vars.$breakpoint-sm) {
+ img {
+ display: none;
+ }
+ }
}
}
diff --git a/src/lib/types/apiRequests.ts b/src/lib/types/apiRequests.ts
index a62efc8b..11a4a80d 100644
--- a/src/lib/types/apiRequests.ts
+++ b/src/lib/types/apiRequests.ts
@@ -77,6 +77,7 @@ export interface UserPatches {
graduationYear?: number;
bio?: string;
isAttendancePublic?: boolean;
+ onboardingSeen?: boolean;
passwordChange?: PasswordUpdate;
}
diff --git a/src/lib/types/apiResponses.ts b/src/lib/types/apiResponses.ts
index 7d822f29..a434d9ec 100644
--- a/src/lib/types/apiResponses.ts
+++ b/src/lib/types/apiResponses.ts
@@ -382,6 +382,7 @@ export interface PrivateProfile extends PublicProfile {
state: UserState;
credits: number;
resumes?: PublicResume[];
+ onboardingSeen: boolean;
}
export interface PublicFeedback {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 664c6c6c..0a5bdb84 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -97,13 +97,7 @@ const PortalHomePage = ({
setCheckinModalVisible(false);
// Start onboarding after checking in
- // TEMP: This should be saved server-side in the future
- // Do not start onboarding if user already attended other events
- if (attendance.length > 1) {
- return;
- }
- const onboardingState = localStorage.getItem(config.tempLocalOnboardingKey);
- if (onboardingState === 'onboarded') {
+ if (user.onboardingSeen) {
return;
}
router.push(
diff --git a/src/pages/onboard.tsx b/src/pages/onboard.tsx
index 807074b4..92077e04 100644
--- a/src/pages/onboard.tsx
+++ b/src/pages/onboard.tsx
@@ -1,5 +1,6 @@
import { OnboardingScreen } from '@/components/onboarding';
import { config } from '@/lib';
+import { UserAPI } from '@/lib/api';
import withAccessType, { GetServerSidePropsWithAuth } from '@/lib/hoc/withAccessType';
import { PermissionService } from '@/lib/services';
import { URL } from '@/lib/types';
@@ -9,10 +10,11 @@ import { useRouter } from 'next/router';
interface OnboardProps {
destination: URL;
+ authToken: string;
user: PrivateProfile;
}
-const OnboardPage: NextPage = ({ user, destination }) => {
+const OnboardPage: NextPage = ({ authToken, user, destination }) => {
const router = useRouter();
const handleExit = () => {
@@ -25,7 +27,7 @@ const OnboardPage: NextPage = ({ user, destination }) => {
user={user}
onDismiss={handleExit}
onFinish={() => {
- localStorage.setItem(config.tempLocalOnboardingKey, 'onboarded');
+ UserAPI.updateCurrentUserProfile(authToken, { onboardingSeen: true });
}}
/>
@@ -34,12 +36,13 @@ const OnboardPage: NextPage
= ({ user, destination }) => {
export default OnboardPage;
-const getServerSidePropsFunc: GetServerSidePropsWithAuth = async ({ query }) => {
+const getServerSidePropsFunc: GetServerSidePropsWithAuth = async ({ query, authToken }) => {
const route = query?.destination ? decodeURIComponent(query?.destination as string) : null;
return {
props: {
destination: route || config.homeRoute,
+ authToken,
quietNavbar: true,
},
};