diff --git a/src/components/AppWrapper/index.tsx b/src/components/AppWrapper/index.tsx
new file mode 100644
index 0000000..17a215b
--- /dev/null
+++ b/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(
+ <>
+
+ {children}
+ >
+ );
+}
\ No newline at end of file
diff --git a/src/components/CompletedChallenges/styles.module.scss b/src/components/CompletedChallenges/styles.module.scss
index 196adeb..5dfaae7 100644
--- a/src/components/CompletedChallenges/styles.module.scss
+++ b/src/components/CompletedChallenges/styles.module.scss
@@ -17,4 +17,10 @@
font-size: 1.5rem;
}
}
+}
+
+@media screen and (max-width: 800px) {
+ .completedChallenges {
+ margin: 2rem 0;
+ }
}
\ No newline at end of file
diff --git a/src/components/NavBar/styles.module.scss b/src/components/NavBar/styles.module.scss
index eeea0a6..374ce97 100644
--- a/src/components/NavBar/styles.module.scss
+++ b/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;
+ }
}
}
}
diff --git a/src/components/Profile/Profile.module.scss b/src/components/Profile/Profile.module.scss
index 9dd0f90..0aeeeb7 100644
--- a/src/components/Profile/Profile.module.scss
+++ b/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;
+ }
}
\ No newline at end of file
diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx
index c804fd3..b297e7a 100644
--- a/src/components/Profile/index.tsx
+++ b/src/components/Profile/index.tsx
@@ -12,7 +12,9 @@ export default function Profile(){
return(
+
![{user?]({user?)
+
{user? user.name: name? name:'Player 404'}
@@ -24,9 +26,10 @@ export default function Profile(){
{!user &&
router.push('/login')} className={styles.githubButton} title="Login ou Mudar nome do usuário">
![github](icons/github-icon.svg)
-
Login
+
Sign In
}
+
);
}
\ No newline at end of file
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
new file mode 100644
index 0000000..02d6270
--- /dev/null
+++ b/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(
+
+
+
+ Posição |
+ Usuário |
+ Desafios |
+ Experiência |
+
+
+
+
+ {leaderboard?.map((user,index)=>(
+
+
+ {index+1} |
+
+
+
+
+ {user.name}
+
+ ![Up](icons/Up.svg)
+ Level {user.level}
+
+
+ |
+
+
+ {user.challengesCompleted}
+ completados
+ |
+
+
+ {user.experience}
+ xp
+ |
+
+ ))}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Table/styles.module.scss b/src/components/Table/styles.module.scss
new file mode 100644
index 0000000..57eab55
--- /dev/null
+++ b/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;
+ }
+
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/context/CountdownContext.tsx b/src/context/CountdownContext.tsx
index c6b8582..bf1b897 100644
--- a/src/context/CountdownContext.tsx
+++ b/src/context/CountdownContext.tsx
@@ -20,7 +20,7 @@ const CountdownContext = createContext({} as CountdownContextProviderProps);
function CountdownContextProvider({children}:Record
){
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);
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index fc317fa..5ba7f8d 100644
--- a/src/pages/index.tsx
+++ b/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 (
- <>
-
+
Home | MoveIt
@@ -38,6 +37,6 @@ export default function Home() {
- >
+
)
}
\ No newline at end of file
diff --git a/src/pages/leaderboard.tsx b/src/pages/leaderboard.tsx
index cf09ec4..d889454 100644
--- a/src/pages/leaderboard.tsx
+++ b/src/pages/leaderboard.tsx
@@ -11,6 +11,8 @@ import { useAuth } from '../hooks/useAuth';
import { database, getDocs, collection, query, limit, orderBy } from '../service';
// Style
import styles from '../styles/pages/leaderboard.module.scss';
+import AppWrapper from '../components/AppWrapper';
+import { Table } from '../components/Table';
type LeaderBoard = {
name: string;
@@ -24,7 +26,7 @@ type LeaderBoardProps = {
leaderboard: LeaderBoard[] | null;
}
-export default function Ranking({leaderboard}:LeaderBoardProps){
+export default function Leaderboard({leaderboard}:LeaderBoardProps){
const { setCurrentPage } = useAuth();
useEffect(() => {
@@ -32,56 +34,20 @@ export default function Ranking({leaderboard}:LeaderBoardProps){
}, [])
return(
- <>
-
+
+
Leaderboard | MoveIt
+
Leaderboard
-
-
-
- Posição |
- Usuário |
- Desafios |
- Experiência |
-
-
-
-
- {leaderboard?.map((user,index)=>(
-
- {index+1} |
-
-
-
-
- {user.name}
-
- ![Up](icons/Up.svg)
- Level {user.level}
-
-
- |
-
-
- {user.challengesCompleted}
- completados
- |
-
-
- {user.experience}
- xp
- |
-
- ))}
-
-
+
Apenas usuários autenticados aparecerão no leaderboard!
+
- >
+
);
}
diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss
index 05cf174..a07db7d 100644
--- a/src/styles/pages/Home.module.scss
+++ b/src/styles/pages/Home.module.scss
@@ -20,12 +20,13 @@
@media screen and (max-width: 800px){
.container {
- margin-top: 2.5rem;
+ margin-top: 3rem;
section {
padding: 1rem 0;
display: flex;
flex-direction: column;
+ gap: 1rem;
}
}
}
\ No newline at end of file
diff --git a/src/styles/pages/leaderboard.module.scss b/src/styles/pages/leaderboard.module.scss
index 89ae837..4bfbfef 100644
--- a/src/styles/pages/leaderboard.module.scss
+++ b/src/styles/pages/leaderboard.module.scss
@@ -3,99 +3,26 @@
max-width: 992px;
margin: 0 auto;
padding: 2.5rem 2rem;
+ //overflow: hidden;
h1 {
margin-bottom: 2rem;
}
- table {
- 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);
- }
-
- thead {
- 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;
- }
-
- &:nth-child(2){
- width: 40%;
- display: flex;
- align-items: center;
- gap: 0.5rem;
-
- > img {
- width: 3rem;
- height: 3rem;
- border-radius: 50%;
- }
-
- > div {
- width: 20rem;
- 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;
- /* font-weight: 500; */
- }
- }
- }
- }
- }
-
> p {
text-align: center;
font-weight: 500;
margin-top: 1rem;
}
+}
+
+@media screen and (max-width: 800px) {
+ .container {
+ padding: 1rem;
+ margin-top: 4rem;
+
+ h1 {
+ margin-bottom: 1rem;
+ }
+ }
}
\ No newline at end of file
diff --git a/src/styles/pages/login.module.scss b/src/styles/pages/login.module.scss
index 6c7ed8b..091423a 100644
--- a/src/styles/pages/login.module.scss
+++ b/src/styles/pages/login.module.scss
@@ -1,8 +1,9 @@
.container {
background-color: #5965E0;
height: 100vh;
- display: flex;
- flex-direction: column;
+ /* display: flex;
+ flex-direction: column; */
+ box-sizing: border-box;
color: var(--white);
@@ -118,6 +119,7 @@
}
}
+
@media screen and (max-width: 800px){
.container {
@@ -125,7 +127,13 @@
.bigLogo {
display: none;
}
-
+ }
+
+ main {
+ box-sizing: border-box;
+ width: 90%;
+ margin: 0 auto;
+ overflow: hidden;
}
}
}
\ No newline at end of file