leaderboard update

apps/battlepass-service/src/index.ts

@@ -3,8 +3,8 @@ import { cors } from 'hono/cors';
 import { createClient } from '@supabase/supabase-js';
 
 export type Bindings = {
-    HIBISCUS_SUPABASE_SERVICE_KEY: string;
-    NEXT_PUBLIC_HIBISCUS_SUPABASE_API_URL: string;
+  HIBISCUS_SUPABASE_SERVICE_KEY: string;
+  NEXT_PUBLIC_HIBISCUS_SUPABASE_API_URL: string;
 };
 
 const HTTP_BAD_REQUEST = 400;
@@ -15,59 +15,69 @@ const app = new Hono<{ Bindings: Bindings }>();
 app.use('/api/*', cors());
 
 app.get('/api/leaderboard', async (c) => {
-    try {
-        const supabase = createClient(
-            c.env.NEXT_PUBLIC_HIBISCUS_SUPABASE_API_URL,
-            c.env.HIBISCUS_SUPABASE_SERVICE_KEY
-        );      
+  try {
+    const supabase = createClient(
+      c.env.NEXT_PUBLIC_HIBISCUS_SUPABASE_API_URL,
+      c.env.HIBISCUS_SUPABASE_SERVICE_KEY
+    );
 
-        const pageNumber = parseInt(c.req.query("pageNumber") ?? "");
-        const pageSize = parseInt(c.req.query("pageSize") ?? "");
+    const pageNumber = parseInt(c.req.query('pageNumber') ?? '');
+    const pageSize = parseInt(c.req.query('pageSize') ?? '');
 
-        if (isNaN(pageNumber) || isNaN(pageSize) || pageNumber < 1 || pageSize < 1) {
-            return c.json({
-                error: 'INVALID_QUERY_PARAMS',
-                message: 'Please provide valid pageNumber and pageSize.',
-            }, HTTP_BAD_REQUEST);
-        }
+    if (
+      isNaN(pageNumber) ||
+      isNaN(pageSize) ||
+      pageNumber < 1 ||
+      pageSize < 1
+    ) {
+      return c.json(
+        {
+          error: 'INVALID_QUERY_PARAMS',
+          message: 'Please provide valid pageNumber and pageSize.',
+        },
+        HTTP_BAD_REQUEST
+      );
+    }
 
-        const { data, error } = await supabase
-            .from('leaderboard')
-            .select(`
+    const { data, error } = await supabase
+      .from('leaderboard')
+      .select(
+        `
                 bonus_points,
                 event_points,
                 total_points,
                 user_profiles(
                     first_name,
                     last_name
                 )
-                `)
-                .order('total_points', {ascending: false})
-                .range((pageNumber - 1) * pageSize, pageNumber * pageSize - 1)
+                `
+      )
+      .order('total_points', { ascending: false })
+      .range((pageNumber - 1) * pageSize, pageNumber * pageSize - 1);
 
-        if (error) {
-            return c.json({ error: error.message }, INTERNAL_SERVER_ERROR);
-        }
+    if (error) {
+      return c.json({ error: error.message }, INTERNAL_SERVER_ERROR);
+    }
 
-        return c.json({
-            data: {
-                pageNumber: pageNumber,
-                pageCount: pageSize,
-                leaderboard: data
-            }
-        });
-    } catch (e) {
-        if(e instanceof Error){
-            console.error("Error:", e.message); // Extract and log the error message.
-        }
-        return c.json(
-            {
-                error: 'UNKNOWN_ERROR',
-                message: 'An unknown error occurred.',
-            },
-            INTERNAL_SERVER_ERROR
-        );
+    return c.json({
+      data: {
+        pageNumber: pageNumber,
+        pageCount: pageSize,
+        leaderboard: data,
+      },
+    });
+  } catch (e) {
+    if (e instanceof Error) {
+      console.error('Error:', e.message); // Extract and log the error message.
     }
+    return c.json(
+      {
+        error: 'UNKNOWN_ERROR',
+        message: 'An unknown error occurred.',
+      },
+      INTERNAL_SERVER_ERROR
+    );
+  }
 });
 
 export default app;

apps/dashboard/common/apis/battlepass/battlepass.api.ts

@@ -3,7 +3,7 @@ import { HibiscusSupabaseClient } from '@hibiscus/hibiscus-supabase-client';
 import { SupabaseClient } from '@supabase/supabase-js';
 import { BonusPointsStatus } from './types';
 import { container } from 'tsyringe';
-import { BattlePassRepository } from 'apps/dashboard/repository/battlepass.repository';
+import { BattlePassRepository } from '../../../repository/battlepass.repository';
 import axios from 'axios';
 
 const getNumberStatusBonusPoint = (status: BonusPointsStatus) => {
@@ -64,6 +64,7 @@ export interface BattlepassAPIInterface {
     bonusPointsId: string,
     status: BonusPointsStatus
   ) => Promise<void>;
+  setBonusPointPending: (userId: string, bonusPointId: string) => Promise<void>;
 }
 
 export class BattlepassAPI implements BattlepassAPIInterface {
@@ -136,6 +137,17 @@ export class BattlepassAPI implements BattlepassAPIInterface {
     }
   }
 
+  async setBonusPointPending(userId: string, bonusPointId: string) {
+    try {
+      await axios.post('/api/battlepass/bonus-points', {
+        userId,
+        bonusPointId,
+      });
+    } catch (e) {
+      throw new Error('Failed to set bonus points');
+    }
+  }
+
   async getBonusPointEventsUserStatus(userId: string): Promise<{
     data: {
       id: string;

apps/dashboard/components/battlepass/battlepass-page.tsx

@@ -1,4 +1,11 @@
 import { H3, Text } from '@hibiscus/ui';
+import { GlobalStyles } from '@hibiscus/styles';
+import {
+  GlobalStyle,
+  BodyTextSmall,
+  BodyText,
+  Heading,
+} from '@hacksc/sctw-ui-kit';
 import { useBattlepassAPI } from '../../hooks/use-battlepass-api/use-battlepass-api';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
@@ -56,38 +63,23 @@ function BattlepassPage() {
   return (
     <Wrapper>
       <BattlepassWelcomeHeader />
-      <Image
-        width="100"
-        height="100"
-        src={'/hackform-illustrations/stamp-earth.svg'}
-        alt="Illustration"
-        style={{
-          position: 'absolute',
-          left: '420px',
-          top: '10px',
-        }}
-      />
       <WidgetContainer>
         <WidgetHeader>Your Points</WidgetHeader>
         {bpProg !== null && (
           <BattlepassPointsBar
             rangeMinPoint={bpProg.level}
             rangeMaxPoint={bpProg.nextLevel}
             currentPoint={userPoints}
-            minLabel={
-              <Text>
-                Current points: <GlowSpan>{userPoints}</GlowSpan>
-              </Text>
-            }
+            minLabel={<YellowPoints>{userPoints} PTS</YellowPoints>}
             maxLabel={
               BATTLEPASS_LEVEL_POINTS[bpProg.level] <
               BATTLEPASS_LEVEL_POINTS[3] ? (
-                <Text>
-                  Next level points:{' '}
-                  <GlowSpan color={Colors2023.BLUE.STANDARD}>
-                    {bpProg.nextLevel}
-                  </GlowSpan>
-                </Text>
+                <PreNextLevelText>
+                  Next level @{' '}
+                  <NextLevelTextSpan color={Colors2023.BLUE.STANDARD}>
+                    {bpProg.nextLevel} PTS
+                  </NextLevelTextSpan>
+                </PreNextLevelText>
               ) : null
             }
           />
@@ -117,10 +109,44 @@ function BattlepassPage() {
 
 export default BattlepassPage;
 
+const PreNextLevelText = styled(BodyTextSmall)`
+  color: #939393;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+const NextLevelTextSpan = styled.span`
+  color: var(--Redward, #ff514f);
+  text-align: center;
+  /* smaller red glow */
+  text-shadow: 0px 0px 10px rgba(255, 94, 92, 0.5);
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: 0;
+  text-transform: uppercase;
+`;
+
+const YellowPoints = styled(BodyTextSmall)`
+  color: var(--Arthurs-Sweater, #ecb400);
+  text-align: center;
+  /* smaller yellow glow */
+  text-shadow: 0px 0px 10px #ffd13c;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: 0;
+  text-transform: uppercase;
+`;
+
 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 2rem;
+  background-color: white;
+  padding-bottom: 50px;
 `;
 
 const WidgetContainer = styled.div`
@@ -143,9 +169,19 @@ const RightColumnSecondSection = styled.div`
 
 const SecondSection = styled.div`
   display: flex;
+
   gap: 30px;
+  @media (max-width: 1024px) {
+    flex-direction: column;
+  }
 `;
 
-const WidgetHeader = styled(H3)`
-  font-size: 120%;
+const WidgetHeader = styled.p`
+  font-family: 'filson-pro', sans-serif;
+  color: var(--Redward, #ff514f);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: -1.25px;
 `;

apps/dashboard/components/battlepass/battlepass-points-bar.tsx

@@ -61,6 +61,7 @@ const BarFront = styled.div<{ progress: number }>`
 `;
 
 const BottomDiv = styled.div`
+  margin-top: 8px;
   display: flex;
   justify-content: space-between;
 `;

apps/dashboard/components/battlepass/battlepass-welcome-header.tsx

@@ -1,5 +1,6 @@
 import { Colors2023 } from '@hibiscus/styles';
 import { H1, Text } from '@hibiscus/ui';
+
 import useHibiscusUser from '../../hooks/use-hibiscus-user/use-hibiscus-user';
 
 export const BattlepassWelcomeHeader = () => {
@@ -16,14 +17,15 @@ export const BattlepassWelcomeHeader = () => {
       <div>
         <H1
           style={{
-            color: Colors2023.BLUE.STANDARD,
+            color: 'black',
             fontSize: '30px',
+            fontFamily: "'filson-pro', sans-serif",
           }}
         >
-          Welcome, {user.firstName}
+          Your Leaderboard
         </H1>
         <Text style={{ color: '#989898' }}>
-          What would you like to do today?
+          Check your ranking on the leaderboard and win prizes!
         </Text>
       </div>
     </div>

apps/dashboard/components/battlepass/bonus-points/bonus-points-item.tsx

@@ -1,5 +1,6 @@
 import { H3, H4, Text } from '@hibiscus/ui';
-import { Button } from '@hibiscus/ui-kit-2023';
+// import { Button } from '@hibiscus/ui-kit-2023';
+import { Button } from '@hacksc/sctw-ui-kit';
 import React from 'react';
 import styled from 'styled-components';
 import { BonusPointsStatus } from '../../../common/apis/battlepass/types';
@@ -13,13 +14,13 @@ interface Props {
 function BonusPointsItem({ data, handleClick }: Props) {
   return (
     <Container>
-      <div>
-        <Text style={{ color: 'gray' }}>{data.points} pts</Text>
+      <TextDiv>
+        <Text style={{ color: 'white' }}>{data.points} pts</Text>
         <H4>{data.title}</H4>
-      </div>
+      </TextDiv>
       <div>
         <Button
-          color="black"
+          color="yellow"
           disabled={data.status !== BonusPointsStatus.VERIFY}
           onClick={handleClick}
         >
@@ -32,9 +33,19 @@ function BonusPointsItem({ data, handleClick }: Props) {
 
 export default BonusPointsItem;
 
+const TextDiv = styled.div`
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+`;
+
 const Container = styled.div`
   display: flex;
   justify-content: space-between;
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: center;
+  }
   padding: 10px;
   gap: 10px;
 `;

apps/dashboard/components/battlepass/bonus-points/bonus-points-list.tsx

@@ -1,8 +1,7 @@
 import { H3, Modal, Text, Link } from '@hibiscus/ui';
-import { Button } from '@hibiscus/ui-kit-2023';
+import { Button } from '@hacksc/sctw-ui-kit';
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { BonusPointsStatus } from '../../../common/apis/battlepass/types';
 import { useBattlepassAPI } from '../../../hooks/use-battlepass-api/use-battlepass-api';
 import useHibiscusUser from '../../../hooks/use-hibiscus-user/use-hibiscus-user';
 import { GrayBox } from '../../gray-box/gray-box';
@@ -38,7 +37,7 @@ function BattlepassBonusPointsList({ items }: Props) {
           <Text>{chosenBP?.description}</Text>
           <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
             <Link href={chosenBP?.link ?? ''} passHref>
-              <Button color="black">SUBMIT FORM</Button>
+              <Button color="yellow">SUBMIT FORM</Button>
             </Link>
           </div>
         </GrayBox>
@@ -50,11 +49,7 @@ function BattlepassBonusPointsList({ items }: Props) {
           handleClick={async () => {
             setChosenBP(item);
             setOpen(true);
-            await battlepassApi.updateUserBonusPointStatus(
-              user.id,
-              item.id,
-              BonusPointsStatus.PENDING
-            );
+            await battlepassApi.setBonusPointPending(user.id, item.id);
           }}
         />
       ))}