fix: search and logo

src/components/Dashboard/DashboardHeader.tsx

@@ -9,7 +9,7 @@ import {
   MenuList,
   Stack,
   Text,
-  VStack
+  VStack,
 } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 const DashboardHeader = () => {
@@ -67,7 +67,7 @@ const DashboardHeader = () => {
                 flexDir="row"
                 backgroundColor="superteamBlue.900"
                 padding={[
-                  '0.9rem 2rem 0.8rem 2rem',
+                  '0.7rem 1.6rem 0.6rem 1.6rem',
                   '1rem 2.2rem 0.9rem 2.2rem',
                 ]}
                 fontSize={['14px', '15px', '16px']}
@@ -86,6 +86,7 @@ const DashboardHeader = () => {
                   as="a"
                   href="https://airtable.com/shrOqa7YLUB29Gq3n"
                   target="_blank"
+                  fontSize={{ base: 'sm', md: 'md' }}
                   background="superteamGray.900"
                   _hover={{ bg: 'superteamBlack.200', color: 'superteamWhite' }}
                   _focus={{ bg: 'superteamBlack.200', color: 'superteamWhite' }}
@@ -96,6 +97,7 @@ const DashboardHeader = () => {
                   as="a"
                   href=" https://airtable.com/shrxXBIaztqhDCG79"
                   target="_blank"
+                  fontSize={{ base: 'sm', md: 'md' }}
                   background="superteamGray.900"
                   _hover={{ bg: 'superteamBlack.200', color: 'superteamWhite' }}
                   _focus={{ bg: 'superteamBlack.200', color: 'superteamWhite' }}
@@ -105,7 +107,7 @@ const DashboardHeader = () => {
                 {/* <MenuItem
                   as="a"
                   href=" https://airtable.com/shrxXBIaztqhDCG79"
-                  target="_blank"
+                  target="_blank"    fontSize={{base:'sm', md:'md'}}
                   background="superteamGray.900"
                   _hover={{ bg: 'superteamBlack.200', color: 'superteamWhite' }}
                   _focus={{ bg: 'superteamBlack.200', color: 'superteamWhite' }}
@@ -117,6 +119,7 @@ const DashboardHeader = () => {
                   as="a"
                   href="https://superteam.fun/bounties"
                   target="_blank"
+                  fontSize={{ base: 'sm', md: 'md' }}
                   background="superteamGray.900"
                   _hover={{ bg: 'superteamBlack.200', color: 'superteamWhite' }}
                   _focus={{ bg: 'superteamBlack.200', color: 'superteamWhite' }}

src/components/Dashboard/LeaderBoardWrapper.tsx

@@ -16,9 +16,9 @@ import {
 } from '@chakra-ui/react';
 import React from 'react';
 import { HiSearch } from 'react-icons/hi';
+import { dashboardDataType } from '../../interfaces/dashboardStore';
 import { filteredData } from '../../util/filterData';
 import EnhancedTable from './Leaderboard';
-import { dashboardDataType } from './Row/interfaces/dashboardStore';
 
 type propsType = {
   dashboardData: dashboardDataType[];
@@ -46,7 +46,6 @@ const LeaderBoardWrapper = ({ dashboardData }: propsType) => {
     const newFilter = data.filter((value: { name: string }) => {
       return value.name.toLowerCase().includes(searchWord.toLowerCase());
     });
-
     if (searchWord === '') {
       setData(dashboardData);
     } else {

src/components/Dashboard/Leaderboard.tsx

@@ -12,7 +12,7 @@ import {
 } from '@chakra-ui/react';
 import * as React from 'react';
 import Pagination from '../Pagination';
-import { xpType } from './Row/interfaces/xp';
+import { xpType } from '../../interfaces/xp';
 import TableRow from './Row/TableRow';
 import TableRowMobile from './Row/TableRowMobile';
 //import XPGraph from './graph';

src/components/Dashboard/Row/GraphColumn.tsx

@@ -2,7 +2,7 @@ import { Flex, Icon, Text, Tooltip } from '@chakra-ui/react';
 import { BsCaretDownFill } from 'react-icons/bs';
 import CustomTag from '../../HOC/Tag.HOC';
 import Chart from './Chart';
-import { xpType } from './interfaces/xp';
+import { xpType } from '../../../interfaces/xp';
 
 type propsType = {
   row: xpType;
@@ -52,9 +52,10 @@ const GraphColumn = ({ row }: propsType) => {
   const calculateXpGrowth = () => {
     const lastMonth = lastSixMonths[0].xp;
     const secondLastMonth = lastSixMonths[1].xp;
-    if (secondLastMonth === 0) return 0;
-    const diff = lastMonth - secondLastMonth;
-    const growth = (diff / secondLastMonth) * 100;
+    const thirdLastMonth = lastSixMonths[2].xp;
+    if (thirdLastMonth === 0) return 0;
+    const diff = lastMonth - thirdLastMonth;
+    const growth = (diff / thirdLastMonth) * 100;
     if (growth > 0) {
       return Math.round(growth);
     } else if (growth < 0) {
@@ -84,7 +85,7 @@ const GraphColumn = ({ row }: propsType) => {
             fontWeight="400"
           >
             <Text color={'superteamWhite'} fontSize={'14px'}>
-              {Math.round(lastSixMonths[0].xp)}
+              {Math.round(lastSixMonths[1].xp)}
             </Text>
           </Tooltip>
           <CustomTag colorScheme={'superteamGray'} text="XP" />
@@ -109,7 +110,7 @@ const GraphColumn = ({ row }: propsType) => {
             fontWeight="400"
           >
             <Text as="span" fontSize={'12px'} color={graphColor}>
-              {Math.round(lastSixMonths[1].xp)}
+              {Math.round(lastSixMonths[2].xp)}
             </Text>
           </Tooltip>
           <Tooltip

src/components/Dashboard/Row/TableRow.tsx

@@ -5,7 +5,7 @@ import CustomTag from '../../HOC/Tag.HOC';
 import MedalSVG from '../../Logo/MedalSVG';
 import { ExpandedRow } from './ExpandedRow';
 import GraphColumn from './GraphColumn';
-import { xpType } from './interfaces/xp';
+import { xpType } from '../../../interfaces/xp';
 import RowCategories from './RowCategories';
 
 type propTypes = {

src/components/Dashboard/Row/TableRowMobile.tsx

@@ -5,7 +5,7 @@ import CustomTag from '../../HOC/Tag.HOC';
 import MedalSVG from '../../Logo/MedalSVG';
 import { ExpandedRowMobile } from './ExpandedRow';
 import GraphColumn from './GraphColumn';
-import { xpType } from './interfaces/xp';
+import { xpType } from '../../../interfaces/xp';
 import RowCategories from './RowCategories';
 
 type propTypes = {

src/components/Logo/LogoImg.tsx

@@ -0,0 +1,12 @@
+import { Center } from '@chakra-ui/react';
+import Image from 'next/image';
+
+const LogoImg = () => {
+  return (
+    <Center w={{ base: '120px', md: '150px' }} h={{ base: '15px', md: '20px' }}>
+      <Image src="/Logo.png" alt="superteam Logo" width={500} height={500} />
+    </Center>
+  );
+};
+
+export default LogoImg;

src/components/Navigation/Header.tsx

@@ -7,7 +7,7 @@ import {
 import { ReactNode } from 'react';
 import { FaDiscord, FaTwitter } from 'react-icons/fa';
 import { SiSubstack } from 'react-icons/si';
-import Logo from '../Logo';
+import LogoImg from '../Logo/LogoImg';
 
 const IconButton = ({
   children,
@@ -58,7 +58,7 @@ export default function Header() {
         w="100%"
         maxW="7xl"
       >
-        <Logo />
+        <LogoImg />
         <Stack direction={'row'} spacing={[2, 6]}>
           <IconButton
             label={'Discord'}

src/lib/getXPDistributions.ts

@@ -1,5 +1,5 @@
 const Airtable = require('airtable');
-import { receivedXPFromAirtableType } from '../components/Dashboard/Row/interfaces/airtableRecievedXP';
+import { receivedXPFromAirtableType } from '../interfaces/airtableRecievedXP';
 import { skillKind } from '../enums/skill';
 
 // this function fetches xp distribution

src/pages/_document.tsx

@@ -5,6 +5,8 @@ export default function Document() {
     <Html lang="en">
       <Head>
         <link rel="icon" href="/favicon.ico" />
+        {/* eslint-disable-next-line @next/next/no-sync-scripts*/}
+        <script src="/static/theme.js" />
       </Head>
       <body>
         <Main />

src/pages/index.tsx

@@ -2,7 +2,7 @@ import { Container } from '@chakra-ui/react';
 import config from '../../config/general.config';
 import DashboardHeader from '../components/Dashboard/DashboardHeader';
 import LeaderBoardWrapper from '../components/Dashboard/LeaderBoardWrapper';
-import { dashboardDataType } from '../components/Dashboard/Row/interfaces/dashboardStore';
+import { dashboardDataType } from '../interfaces/dashboardStore';
 import SEO from '../components/SEO/SEO';
 import { dataCalculator } from '../util/dataCalculator';
 

src/util/dataCalculator.tsx → src/util/dataCalculator.ts

@@ -1,9 +1,7 @@
-import { receivedXPFromAirtableType } from '../components/Dashboard/Row/interfaces/airtableRecievedXP';
-import {
-  dashboardDataType,
-  totalOverallXPType,
-} from '../components/Dashboard/Row/interfaces/dashboardStore';
-import { xpType } from '../components/Dashboard/Row/interfaces/xp';
+import { receivedXPFromAirtableType } from '../interfaces/airtableRecievedXP';
+import { dashboardDataType,
+  totalOverallXPType, } from '../interfaces/dashboardStore';
+import { xpType } from '../interfaces/xp';
 import {
   getBountiesRecordsFunction,
   getXPRecordFunction,

src/util/filterData.tsx → src/util/filterData.ts

@@ -1,4 +1,4 @@
-import { dashboardDataType } from '../components/Dashboard/Row/interfaces/dashboardStore';
+import { dashboardDataType } from '../interfaces/dashboardStore';
 
 export function filteredData(data: dashboardDataType[]) {
   const ContributorsData = data.map((item) => {

src/util/sourceTotalXpCalculator.ts

@@ -1,4 +1,4 @@
-import { receivedXPFromAirtableType } from '../components/Dashboard/Row/interfaces/airtableRecievedXP';
+import { receivedXPFromAirtableType } from '../interfaces/airtableRecievedXP';
 import { receivedXPFromAirtableTotalType } from '../components/Dashboard/Row/interfaces/airtableRecievedXPTotal';
 import { totalOverallXPType } from '../components/Dashboard/Row/interfaces/dashboardStore';
 import {

static/theme.ts

@@ -0,0 +1,47 @@
+(function () {
+    var currentTheme;
+
+    function changeTheme(inputTheme: string) {
+      if (inputTheme === "dark") {
+        const theme = themeConfig.dark;
+        for (let key in theme) {
+          setCSSVar(key, theme[key]);
+        }
+        localStorage.setItem("theme", inputTheme);
+      } else {
+        const theme = themeConfig.light;
+        for (let key in theme) {
+          setCSSVar(key, theme[key]);
+        }
+        localStorage.setItem("theme", inputTheme);
+      }
+    }
+
+    function setCSSVar(property: string, color: string | null) {
+      document.documentElement.style.setProperty(property, color);
+    }
+    try {
+      currentTheme = localStorage.getItem("theme") || "light";
+
+      var themeConfig = {
+        dark: {
+          "--color-homepage-bg": "#171A21",
+          "--color-text": "#fff",
+          "--code": "#ccc",
+          "--color-blue": "#f300e0",
+          "--color-grey": "#ccc",
+        },
+        light: {
+          "--color-homepage-bg": "#fff",
+          "--color-text": "#000",
+          "--code": "#f1f1f1",
+          "--color-blue": "#0070f3",
+          "--color-grey": "#eaeaea",
+        },
+      };
+
+      changeTheme(currentTheme);
+    } catch (err) {
+      console.log(new Error("accessing theme has been denied"));
+    }
+  })();