@ludo.ninja/components 1.5.8 → 1.6.0

package/src/components/registrationPage/registrationSelection/index.tsx

@@ -1,141 +0,0 @@
-import React from 'react';
-
-import styled from 'styled-components';
-
-import { preferencesSchema as schema } from '@ludo.ninja/api';
-import { MainText } from '@ludo.ninja/ui';
-import { AccentColor } from '@ludo.ninja/ui/build/styles/colors';
-import MainButton from '@ludo.ninja/ui/build/system/Buttons/MainButton';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, TextGrayColor } from '@/styles/colors';
-
-import { RegistrationSelectBox } from '@/components/registrationPage';
-
-import { Box, Flex, H1, H3 } from '@system';
-
-// Styles
-
-const StyledCaption = styled(H1)`
-  font-size: 24px;
-`;
-
-const StyledRegistrationSelection = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-items: center;
-  align-items: center;
-
-  .info {
-    max-width: 520px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-items: center;
-    user-select: none;
-  }
-
-  .content {
-    width: 100%;
-    margin-top: 24px;
-
-    &-values {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-      grid-gap: 24px;
-      margin-bottom: 56px;
-
-      ${mediaQuery.tablet} {
-        grid-gap: 16px;
-        grid-template-columns: 1fr 1fr;
-      }
-    }
-
-    &-next {
-      max-width: 82px;
-      margin: 0 auto;
-    }
-  }
-`;
-
-// Interface
-interface Props {
-  step: string;
-  maxSteps: string;
-  title: string;
-  subtitle: string;
-  values: schema.IInterest[] | null;
-  selectedNames: string[];
-  saveValue: string;
-  onClick: (name: string) => void;
-  onSaveClick: () => void;
-  text: string;
-}
-
-// Components
-
-const RegistrationSelection: React.FC<Props> = ({
-  step,
-  title,
-  subtitle,
-  maxSteps,
-  values,
-  selectedNames,
-  saveValue,
-  onClick,
-  onSaveClick,
-  text,
-}) => (
-  <StyledRegistrationSelection>
-    <div className="info">
-      <Box>
-        <Flex justifyContent={'center'}>
-          <StyledCaption
-            color={AccentColor}
-            mr={10}
-          >{`Step ${step}/${maxSteps} - `}</StyledCaption>
-          <StyledCaption color={BlackColor}>{title}</StyledCaption>
-        </Flex>
-        <H3
-          color={TextGrayColor}
-          mt={16}
-          mb={4}
-          fontSize={18}
-          textAlign={'center'}
-        >
-          {subtitle}
-        </H3>
-        <MainText fontSize={13} textAlign={'center'} color={TextGrayColor}>
-          {text}
-        </MainText>
-      </Box>
-    </div>
-
-    <div className="content">
-      <div className="content-values">
-        {values?.map(
-          ({ name, imageUrl }: { name: string; imageUrl: string }) => {
-            return (
-              <RegistrationSelectBox
-                key={name}
-                name={name}
-                image={imageUrl}
-                selected={selectedNames.includes(name)}
-                onClick={onClick}
-              />
-            );
-          }
-        )}
-      </div>
-
-      <div className="content-next">
-        <MainButton onClick={onSaveClick} variant="primaryM" text={saveValue} />
-      </div>
-    </div>
-  </StyledRegistrationSelection>
-);
-
-// Export
-
-export default RegistrationSelection;

package/src/components/rewards/FAQ/index.tsx

@@ -1,251 +0,0 @@
-import React, { useState } from 'react';
-
-import styled from 'styled-components';
-
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { WhiteColor } from '@/styles/colors';
-
-import { Flex, H3, H5 } from '@system';
-
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-
-import { dmsansFontVarCss, poppinsFontVarCss } from '@/fonts/vars';
-
-import ArrowIcon from '@/public/rewardsPage/arrow_up_light.svg';
-
-// Styles
-
-const StyledFAQRewards = styled(Flex)`
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 24px;
-
-  min-height: max-content;
-  width: 100%;
-  max-width: 720px;
-  background: ${({ theme }) => theme.colors.bg};
-  margin-bottom: 80px;
-
-  ${mediaQuery.maxWidthTablet} {
-    max-width: 588px;
-    gap: 4px;
-  }
-
-  .faq_desc {
-    font-family: ${dmsansFontVarCss.css};
-    font-weight: 400;
-    font-size: 1.5em;
-    line-height: 1.46;
-    color: ${({ theme }) => theme.colors.grayText};
-    max-height: 0;
-    padding-bottom: 0;
-    opacity: 0;
-    transition: opacity 0.3s ease, max-height 0.12s ease,
-      padding-bottom 0.12s ease;
-
-    ${mediaQuery.maxWidthTablet} {
-      max-width: 575px;
-    }
-  }
-
-  .faq_desc.open {
-    max-height: 100%;
-    opacity: 1;
-    padding-bottom: 24px;
-
-    ${mediaQuery.mobile} {
-      padding-bottom: 16px;
-    }
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    gap: ${adaptiveValueCalc(24)};
-    max-width: ${adaptiveValueCalc(720)};
-    margin-bottom: ${adaptiveValueCalc(80)};
-
-    .faq_desc {
-      font-size: ${adaptiveValueCalc(15)};
-    }
-
-    .faq_desc.open {
-      padding-bottom: ${adaptiveValueCalc(24)};
-    }
-  }
-`;
-
-const StyledArrowIcon = styled.div<{ isShow: boolean }>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  z-index: 1;
-
-  transform: ${(props) => (props.isShow ? 'rotate(0)' : 'rotate(180deg)')};
-  transition: all 0.3s ease-out;
-  width: 38px;
-  height: 38px;
-
-  ${mediaQuery.minWidthFourK} {
-    width: ${adaptiveValueCalc(38)};
-    height: ${adaptiveValueCalc(38)};
-  }
-`;
-
-const StyledTitleWrapper = styled(Flex)`
-  align-items: center;
-  justify-content: space-between;
-
-  width: 100%;
-  min-height: 70px;
-
-  ${mediaQuery.mobile} {
-    min-height: 50px;
-    margin: 8px 0;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    min-height: ${adaptiveValueCalc(70)};
-  }
-`;
-
-const StyledFlexDivider = styled(Flex)`
-  align-items: center;
-  flex-direction: column;
-
-  width: 100%;
-
-  :not(:last-child) {
-    border-bottom: 1px solid ${({ theme }) => theme.colors.blankProgressBar};
-
-    ${mediaQuery.minWidthFourK} {
-      border-bottom: ${adaptiveValueCalc(1)} solid
-        ${({ theme }) => theme.colors.blankProgressBar};
-    }
-  }
-`;
-
-const TitleFAQ = styled(H3)`
-  font-family: ${poppinsFontVarCss.css};
-
-  font-weight: 600;
-  font-size: 2.4em;
-  line-height: 1.5;
-  text-align: center;
-  color: ${({ theme }) => theme.colors.naturalWhite};
-
-  ${mediaQuery.mobile} {
-    font-size: 2.2em;
-    line-height: 1.27;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    font-size: ${adaptiveValueCalc(15)};
-  }
-`;
-
-const AccordionTitle = styled(H5)`
-  color: ${WhiteColor};
-
-  font-family: ${poppinsFontVarCss.css};
-  font-weight: 500;
-  font-size: 1.5em;
-  line-height: 1.46;
-  text-align: left;
-
-  ${mediaQuery.minWidthFourK} {
-    font-size: ${adaptiveValueCalc(15)};
-  }
-`;
-
-type FAQItem = { id: number; title: string; description: string };
-
-const FAQ_ITEMS: FAQItem[] = [
-  {
-    id: 1,
-    title: "What's Ludo XP?",
-    description:
-      "Think of Ludo XP as a fun rewards system. It's all about giving back to users like you for engaging with different opportunities on the platform. The more you dive in, the more rewards you can earn!",
-  },
-  {
-    id: 2,
-    title: 'What Counts as a Ludo opportunity?',
-    description:
-      "Opportunities are special perks from projects aiming to deepen their connection with you. These can range from exclusive features, to rewards, or even insights into the project's journey. They're crafted to enrich your experience and draw you closer to the essence of the project.",
-  },
-  {
-    id: 3,
-    title: 'How Do XP Points Work?',
-    description:
-      "Unlike Ludo Rank, which grows through your interactions on the blockchain with high-reputation entities, XP points are earned through off-chain activities recommended by Ludo. Engage in these activities, and you'll rack up XP points.",
-  },
-  {
-    id: 4,
-    title: "What's the Deal with XP Levels?",
-    description:
-      "Your XP Level acts as a meter of your engagement within Ludo's ecosystem. It showcases how active you've been with the platform's offerings, with higher levels reflecting greater activity.",
-  },
-  {
-    id: 5,
-    title: 'Why Bother Increasing My XP?',
-    description:
-      "Elevating your XP level not only brings direct rewards but also indirectly boosts your Ludo Rank by increasing your chances of receiving on-chain rewards. Web3 projects are always on the lookout for engaged users, and a higher XP level signals your commitment and engagement. This, in turn, opens the door to more significant opportunities within the Web3 space, including exclusive on-chain rewards. It's about proving your engagement and dedication, not just investing money.",
-  },
-];
-
-// Component
-
-const ArrowIconResize = () => {
-  const { windowDimensions } = useWindowDimensionsWithServerInitial();
-  return (
-    <ArrowIcon
-      style={getAdaptiveScale({
-        windowDimensions,
-        currentSize: 1,
-      })}
-    />
-  );
-};
-
-const FAQRewards = () => {
-  const [openTopics, setOpenTopics] = useState(Array(3).fill(false));
-
-  const toggleDescription = (index: number) => {
-    setOpenTopics((prevOpenTopics) => {
-      const newOpenTopics = [...prevOpenTopics];
-      newOpenTopics[index] = !newOpenTopics[index];
-      return newOpenTopics;
-    });
-  };
-
-  return (
-    <StyledFAQRewards>
-      <TitleFAQ>Frequently Asked Questions</TitleFAQ>
-      <Flex flexDirection="column" width="100%">
-        {FAQ_ITEMS.map(({ id, title, description }) => (
-          <StyledFlexDivider key={id}>
-            <StyledTitleWrapper>
-              <AccordionTitle>{title}</AccordionTitle>
-              <StyledArrowIcon
-                isShow={openTopics[id]}
-                onClick={() => toggleDescription(id)}
-              >
-                <ArrowIconResize />
-              </StyledArrowIcon>
-            </StyledTitleWrapper>
-            <p className={`faq_desc ${openTopics[id] ? 'open' : ''}`}>
-              {description}
-            </p>
-          </StyledFlexDivider>
-        ))}
-      </Flex>
-    </StyledFAQRewards>
-  );
-};
-
-// Export
-
-export default FAQRewards;

package/src/components/rewards/clarifications/index.tsx

@@ -1,128 +0,0 @@
-import styled from 'styled-components';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { WhiteColor } from '@/styles/colors';
-
-import { Flex, H3 } from '@system';
-
-import { dmsansFontVarCss, poppinsFontVarCss } from '@/fonts/vars';
-
-// Styles
-
-const StyledClarifications = styled(Flex)`
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 24px;
-
-  min-width: 720px;
-  min-height: 260px;
-  max-width: max-content;
-  margin-bottom: 80px;
-  background: ${({ theme }) => theme.colors.bg};
-
-  ${mediaQuery.maxWidthTablet} {
-    min-width: 588px;
-  }
-
-  ${mediaQuery.mobile} {
-    min-width: 100%;
-    margin-bottom: 56px;
-  }
-
-  .clar_desc {
-    font-family: ${dmsansFontVarCss.css};
-    font-weight: 400;
-    font-size: 1.5em;
-    line-height: 1.46;
-
-    color: ${({ theme }) => theme.colors.grayText};
-    margin: 0 auto;
-    text-align: center;
-
-    ${mediaQuery.maxWidthTablet} {
-      max-width: 473px;
-    }
-
-    ${mediaQuery.mobile} {
-      font-size: 1.4em;
-      line-height: 1.28;
-    }
-  }
-
-  .goal_desc,
-  .goal_exp {
-    font-family: ${poppinsFontVarCss.css};
-
-    font-weight: 500;
-    font-size: 1.5em;
-    line-height: 1.46;
-    color: ${({ theme }) => theme.colors.naturalWhite};
-
-    ${mediaQuery.mobile} {
-      font-size: 1.4em;
-      line-height: 1.42;
-    }
-  }
-
-  .goal_desc {
-    ${mediaQuery.mobile} {
-      max-width: 170px;
-    }
-  }
-`;
-
-const StyledFlex = styled(Flex)`
-  width: 100%;
-  justify-content: space-between;
-  padding: 16px 0;
-  align-items: center;
-
-  :not(:last-child) {
-    border-bottom: 1px solid ${({ theme }) => theme.colors.blankProgressBar};
-  }
-`;
-// Component
-
-const Clarifications = ({
-  goalsArr,
-}: {
-  goalsArr: { desc: string; expPerTime: string }[];
-}) => {
-  return (
-    <StyledClarifications>
-      <Flex flexDirection="column" width="100%" style={{ gap: '16px' }}>
-        <H3
-          style={{
-            lineHeight: '1.5',
-            fontWeight: 600,
-            fontSize: '2.4em',
-            textAlign: 'center',
-            fontFamily: poppinsFontVarCss.css,
-          }}
-          color={WhiteColor}
-        >
-          How does it work?
-        </H3>
-        <p className={`clar_desc`}>
-          Further developing and growing NFT Trader for our team has been an
-          exciting journey so far.
-        </p>
-      </Flex>
-      <Flex flexDirection="column" width="100%">
-        {goalsArr && goalsArr.length > 0
-          ? goalsArr.map(({ desc, expPerTime }) => (
-              <StyledFlex key={desc + expPerTime}>
-                <p className={`goal_desc`}>{desc}</p>
-                <p className={`goal_exp`}>{expPerTime}</p>
-              </StyledFlex>
-            ))
-          : null}
-      </Flex>
-    </StyledClarifications>
-  );
-};
-
-//Export
-
-export default Clarifications;

package/src/components/rewards/logoBottom/index.tsx

@@ -1,52 +0,0 @@
-import styled from 'styled-components';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-
-import { Flex } from '@system';
-
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-
-import Logo from '@/public/logo/main_logo_dark.svg';
-
-// Styles
-
-const StyledBottomLogo = styled(Flex)`
-  align-items: center;
-  justify-content: center;
-
-  width: 100%;
-
-  ${mediaQuery.maxWidthTablet} {
-    margin-bottom: 28px;
-  }
-
-  ${mediaQuery.mobile} {
-    margin-bottom: 0;
-  }
-
-  .bottom_logo {
-    transform: scale(0.8);
-  }
-`;
-// Component
-
-const BottomLogo = () => {
-  const { windowDimensions } = useWindowDimensionsWithServerInitial();
-
-  return (
-    <StyledBottomLogo>
-      <Logo
-        className={'bottom_logo'}
-        style={getAdaptiveScale({
-          windowDimensions,
-          currentSize: 0.8,
-        })}
-      />
-    </StyledBottomLogo>
-  );
-};
-
-// Export
-
-export default BottomLogo;

package/src/components/rewards/prograssBar/index.tsx

@@ -1,62 +0,0 @@
-import styled from 'styled-components';
-
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { ExpTaskProgressFill, ExpUserProgressFill } from '@/styles/colors';
-
-// Styles
-
-const StyledProgress = styled.div<{
-  percent: number | boolean | null;
-  isForUser?: boolean | undefined;
-  height: number | null;
-}>`
-  width: 100%;
-  height: ${(props) => (props.height ? `${props.height}px` : '12px')};
-  background-color: ${({ theme }) => theme.colors.blankProgressBar};
-  border-radius: 100px;
-
-  .progress_fill {
-    width: ${(props) => (props.percent ? `${props.percent}%` : '0%')};
-    //width: 50%;
-    height: 100%;
-    background-color: ${(props) =>
-      props.isForUser ? ExpUserProgressFill : ExpTaskProgressFill};
-    border-radius: 100px;
-    transition: all 1500ms;
-  }
-  ${mediaQuery.minWidthFourK} {
-    height: ${(props) =>
-      props.height ? adaptiveValueCalc(props.height) : adaptiveValueCalc(12)};
-    border-radius: ${adaptiveValueCalc(100)};
-
-    .progress_fill {
-      border-radius: ${adaptiveValueCalc(100)};
-    }
-  }
-`;
-
-//   Component
-
-const ProgressBar = ({
-  height,
-  percent,
-  isUserTab,
-}: {
-  height: number;
-  percent: number;
-  isUserTab?: boolean;
-}) => {
-  return (
-    <>
-      <StyledProgress percent={percent} height={height} isForUser={isUserTab}>
-        <div className="progress_fill"></div>
-      </StyledProgress>
-    </>
-  );
-};
-
-// Export
-
-export default ProgressBar;

package/src/components/rewards/rewardsButton/index.tsx

@@ -1,79 +0,0 @@
-import styled from 'styled-components';
-
-import { poppinsFontVarCss } from '@ludo.ninja/ui/build/fonts/vars';
-import {
-  ExpTaskProgressFill,
-  TextGray2Color,
-  WhiteColor,
-} from '@ludo.ninja/ui/build/styles/colors';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-
-const RewardsButton = styled.button`
-  display: flex;
-  padding: 9px 24px;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-
-  border-radius: 30px;
-  border: 1px solid ${ExpTaskProgressFill};
-
-  color: ${WhiteColor};
-  text-align: center;
-
-  font-family: ${poppinsFontVarCss.css};
-  font-size: 15px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 22px;
-
-  white-space: nowrap;
-  background: transparent;
-  transition: 0.2s all ease-in;
-  user-select: none;
-  cursor: pointer;
-
-  @media (hover: hover) {
-    &:hover {
-      background: #1b1c27;
-      box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.1);
-      transition: 0.2s all ease-in-out;
-    }
-  }
-
-  &:disabled {
-    border: 1px solid #00622d;
-    color: ${TextGray2Color};
-    transition: 0.2s all ease-in-out;
-
-    &:hover {
-      background: transparent;
-    }
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    padding: ${adaptiveValueCalc(9)} ${adaptiveValueCalc(24)};
-    gap: ${adaptiveValueCalc(4)};
-
-    border-radius: ${adaptiveValueCalc(30)};
-    border: ${adaptiveValueCalc(1)} solid ${ExpTaskProgressFill};
-
-    font-size: ${adaptiveValueCalc(15)};
-    line-height: ${adaptiveValueCalc(22)};
-
-    @media (hover: hover) {
-      &:hover {
-        box-shadow: 0 ${adaptiveValueCalc(6)} ${adaptiveValueCalc(15)} 0
-          rgba(0, 0, 0, 0.1);
-      }
-    }
-
-    &:disabled {
-      border: ${adaptiveValueCalc(1)} solid #00622d;
-    }
-  }
-`;
-
-export default RewardsButton;