fixed responsiveness for mobile

src/components/AppWrapper/index.tsx

@@ -0,0 +1,15 @@
+import { NavBar } from "../NavBar";
+import { ReactNode } from "react";
+
+type ReactChildren = {
+ children: ReactNode;
+}
+
+export default function AppWrapper({children}:ReactChildren){
+ return(
+ <>
+ <NavBar />
+ {children}
+ </>
+ );
+}

src/components/CompletedChallenges/styles.module.scss

@@ -17,4 +17,10 @@
  font-size: 1.5rem;
  }
  }
+}
+
+@media screen and (max-width: 800px) {
+ .completedChallenges {
+ margin: 2rem 0;
+ }
 }

src/components/NavBar/styles.module.scss

@@ -57,15 +57,30 @@
  height: 4rem;
 
  flex-direction: row;
+
+ img {
+ width: 4rem;
+ height: 4rem;
+ }
+
  > div {
  flex-direction: row;
 
  > div {
+ width: 1.5rem;
+
  &.selected::before {
+ height: 2.3rem;
+ width: 0.3rem;
  left: initial;
- top: - 1.35rem;
+ top: - 1rem;
+ //top: - 1.35rem;
  transform: rotate(-90deg);
  }
+
+ &:last-child {
+ margin-right: 3rem;
+ }
  }
  }
  }

src/components/Profile/Profile.module.scss

@@ -32,11 +32,17 @@
  .githubButton {
  margin-left: auto;
  cursor: pointer;
-
+ text-align: center;
  p {
  margin: 0;
  font-size: 0.875rem;
  text-align: center;
  }
  }
+}
+
+@media screen and (max-width: 800px){
+ .profileContainer {
+ margin-top: 2rem;
+ }
 }

src/components/Profile/index.tsx

@@ -12,7 +12,9 @@ export default function Profile(){
 
  return(
  <div className={styles.profileContainer}>
+
  <img src={user? user.avatar: name? `https://avatars.dicebear.com/api/human/${name}.svg`:'icons/avatar.svg'} alt={user? user.name: name? name:'Player 404'} />
+
  <div>
  <strong>{user? user.name: name? name:'Player 404'}</strong>
  <p>
@@ -24,9 +26,10 @@ export default function Profile(){
  {!user && 
  <div onClick={()=>router.push('/login')} className={styles.githubButton} title="Login ou Mudar nome do usuário"> 
  <img src="icons/github-icon.svg" alt="github" />
- <p>Login</p>
+ <p>Sign In</p>
  </div>
  }
+
  </div>
  );
 }

src/components/Table/index.tsx

@@ -0,0 +1,59 @@
+import styles from './styles.module.scss';
+
+type LeaderBoard = {
+ name: string;
+ avatar: string;
+ level: number;
+ experience: number;
+ challengesCompleted: number;
+}
+
+type LeaderBoardProps = {
+ leaderboard: LeaderBoard[] | null;
+}
+
+
+export function Table({leaderboard}:LeaderBoardProps){
+ return(
+ <table className={styles.leaderboardTable}>
+ <thead>
+ <tr>
+ <th>Posição</th>
+ <th>Usuário</th>
+ <th>Desafios</th>
+ <th>Experiência</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ {leaderboard?.map((user,index)=>(
+ <tr key={index}>
+
+ <td>{index+1}</td>
+
+ <td className={styles.profile}>
+ <img src={user.avatar} alt={user.name} />
+ <div>
+ <strong>{user.name}</strong>
+ <div>
+ <img src="icons/Up.svg" alt="Up" />
+ <span>Level {user.level}</span>
+ </div>
+ </div>
+ </td>
+
+ <td>
+ <span>{user.challengesCompleted}</span>
+ completados
+ </td>
+
+ <td>
+ <span>{user.experience}</span>
+ xp
+ </td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ );
+}

src/components/Table/styles.module.scss

@@ -0,0 +1,117 @@
+.leaderboardTable {
+ width: 100%;
+ border-collapse: collapse;
+ font-family: 'Inter', sans-serif;
+ font-weight: 500;
+
+ td, th {
+ padding: 0.5rem 1rem; 
+ }
+
+ td {
+ height: 4.5rem;
+ }
+
+ th {
+ color: var(--text);
+ text-align: left;
+ }
+
+ tbody {
+
+ tr {
+ background-color: var(--white);
+ border-bottom: 7px solid #f2f3f5;
+
+ td {
+
+ &:first-child{
+ text-align: center;
+ font-size: 1.5rem;
+ color: var(--text);
+ border-right: 7px solid #f2f3f5;
+ width: 4rem;
+ }
+
+ &.profile {
+ width: 20rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+
+ > img {
+ width: 3rem;
+ height: 3rem;
+ border-radius: 50%;
+ }
+
+ > div {
+ flex: 1;
+
+ strong {
+ display: block;
+ margin-bottom: 0.3rem;
+ color: var(--title);
+ }
+
+ > div {
+ display: flex;
+
+ span {
+ font-size: 0.975rem;
+ margin-left: 0.4rem;
+ color: var(--text);
+ font-weight: 400;
+ }
+ }
+ }
+ }
+
+ > span{
+ color: var(--blue);
+ margin-right: 0.4rem;
+ }
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 800px) {
+ .leaderboardTable {
+ overflow: hidden;
+ border-radius: 5px;
+
+ thead {
+ display: none;
+ }
+
+ tbody {
+
+ tr {
+ width: 90vw;
+ display: flex;
+ flex-wrap: wrap;
+ border-radius: 5px;
+ margin-bottom: 10px;
+ border: none;
+
+ td {
+ width: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:first-child {
+ border-bottom: 7px solid #f2f3f5;
+ border-bottom-right-radius: 5px;
+ }
+
+ &.profile {
+ width: initial;
+ }
+
+ }
+ }
+ }
+ }
+}

src/context/CountdownContext.tsx

@@ -20,7 +20,7 @@ const CountdownContext = createContext({} as CountdownContextProviderProps);
 function CountdownContextProvider({children}:Record<string,ReactNode>){
 
  const { startNewChallenge } = useChallenge();
- const [ time, setTime ] = useState(0.25 * 60);
+ const [ time, setTime ] = useState(25 * 60);
  const [ isActive, setIsActive ] = useState(false);
  const [ hasFinish, setHasFinish ] = useState(false);
  const [ initialTime, setInitialTime ] = useState(time);

src/pages/index.tsx

@@ -4,11 +4,11 @@ import CompletedChallenges from '../components/CompletedChallenges';
 import Countdown from '../components/Countdown';
 import ChallengeBox from '../components/ChallengeBox';
 import Head from 'next/head';
-import { NavBar } from '../components/NavBar';
 import { useEffect } from 'react';
 import { useAuth } from '../hooks/useAuth';
 import { GetStaticProps } from 'next';
 import styles from '../styles/pages/Home.module.scss';
+import AppWrapper from '../components/AppWrapper';
 
 
 export default function Home() {
@@ -19,8 +19,7 @@ export default function Home() {
  }, []);
 
  return (
- <>
- <NavBar />
+ <AppWrapper>
  <div className={styles.container}>
  <Head>
  <title>Home | MoveIt</title>
@@ -38,6 +37,6 @@ export default function Home() {
  </div>
  </section>
  </div>
- </>
+ </AppWrapper>
  )
 }