diff --git a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/CrewMining/segments/CrewList/CrewList.tsx b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/CrewMining/segments/CrewList/CrewList.tsx index f1c02ef63..cd62c5d98 100644 --- a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/CrewMining/segments/CrewList/CrewList.tsx +++ b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/CrewMining/segments/CrewList/CrewList.tsx @@ -66,14 +66,16 @@ export default function CrewList() { }); return ( - - - {members.map((member) => ( - - ))} - + + {members.length !== 0 && ( + + {members.map((member) => ( + + ))} + + )} - + diff --git a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/CrewMining/segments/CrewList/styles.ts b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/CrewMining/segments/CrewList/styles.ts index 5986f8605..ad6d7ed97 100644 --- a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/CrewMining/segments/CrewList/styles.ts +++ b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/CrewMining/segments/CrewList/styles.ts @@ -1,11 +1,17 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; -export const Wrapper = styled('div')` +export const Wrapper = styled('div')<{ $noMembers?: boolean }>` display: grid; - align-items: center; grid-template-columns: auto 1fr; gap: 14px; + + ${({ $noMembers }) => + $noMembers && + css` + display: flex; + align-items: center; + `} `; export const PlaceholderText = styled('div')` @@ -25,9 +31,9 @@ export const PlaceholderText = styled('div')` padding: 12px 16px; `; -export const AddNewButton = styled('button')` - width: 92px; - height: 92px; +export const AddNewButton = styled('button')<{ $noMembers?: boolean }>` + width: 99px; + height: 99px; border-radius: 100%; background: rgba(217, 217, 217, 0.1); @@ -43,6 +49,12 @@ export const AddNewButton = styled('button')` transition: background 0.3s ease; + ${({ $noMembers }) => + !$noMembers && + css` + transform: translateY(6px); + `} + &:hover { background: rgba(255, 255, 255, 0.2); } diff --git a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/Leaderboard.tsx b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/Leaderboard.tsx index 35b464126..59c9a8167 100644 --- a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/Leaderboard.tsx +++ b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/Leaderboard.tsx @@ -1,6 +1,19 @@ /* eslint-disable i18next/no-literal-string */ -import { Wrapper } from './styles'; +import LeaderboardList from './segments/LeaderboardList/LeaderboardList'; +import Progress from './segments/Progress/Progress'; +import { Wrapper, TopRow, SectionTitle, Button } from './styles'; export default function Leaderboard() { - return Leaderboard; + return ( + + + Leaderboard + + + + + + + + ); } diff --git a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/segments/LeaderboardList/LeaderboardList.tsx b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/segments/LeaderboardList/LeaderboardList.tsx new file mode 100644 index 000000000..4a29a18b0 --- /dev/null +++ b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/segments/LeaderboardList/LeaderboardList.tsx @@ -0,0 +1,6 @@ +/* eslint-disable i18next/no-literal-string */ +import { Wrapper } from './styles'; + +export default function LeaderboardList() { + return Leaderboard List; +} diff --git a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/segments/LeaderboardList/styles.ts b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/segments/LeaderboardList/styles.ts new file mode 100644 index 000000000..3c8e36843 --- /dev/null +++ b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/segments/LeaderboardList/styles.ts @@ -0,0 +1,3 @@ +import styled from 'styled-components'; + +export const Wrapper = styled('div')``; diff --git a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/segments/Progress/Progress.tsx b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/segments/Progress/Progress.tsx new file mode 100644 index 000000000..96c226466 --- /dev/null +++ b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/segments/Progress/Progress.tsx @@ -0,0 +1,18 @@ +/* eslint-disable i18next/no-literal-string */ +import { Wrapper, TopLabel, Line, Text, CapLeft, CapRight } from './styles'; + +export default function Progress() { + return ( + + + + + You’re 15 hours away from the next rank. Keep mining! + + + + + + + ); +} diff --git a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/segments/Progress/styles.ts b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/segments/Progress/styles.ts new file mode 100644 index 000000000..a2a67966e --- /dev/null +++ b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/segments/Progress/styles.ts @@ -0,0 +1,51 @@ +import styled from 'styled-components'; + +export const Wrapper = styled('div')``; + +export const TopLabel = styled('div')` + display: flex; + align-items: center; + gap: 40px; + width: 100%; + position: relative; +`; + +export const Line = styled('div')` + width: 100%; + height: 2px; + background-color: #e6ff47; +`; + +export const Text = styled('div')` + color: rgba(255, 255, 255, 0.5); + font-size: 13px; + font-style: normal; + font-weight: 700; + line-height: 129.623%; + text-transform: uppercase; + white-space: nowrap; + + span { + color: #e6ff47; + } +`; + +export const CapLeft = styled('div')` + width: 2px; + height: 8px; + background-color: #e6ff47; + + position: absolute; + top: 8px; + left: 0; +`; + +export const CapRight = styled('div')` + width: 2px; + height: 8px; + background-color: #e6ff47; + + position: absolute; + top: 8px; + right: 0; +`; diff --git a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/styles.ts b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/styles.ts index 3c8e36843..10294880e 100644 --- a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/styles.ts +++ b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/segments/Leaderboard/styles.ts @@ -1,3 +1,47 @@ import styled from 'styled-components'; -export const Wrapper = styled('div')``; +export const Wrapper = styled('div')` + display: flex; + flex-direction: column; + gap: 25px; +`; + +export const TopRow = styled('div')` + display: flex; + align-items: center; + justify-content: space-between; +`; + +export const SectionTitle = styled('div')` + color: #fff; + font-size: 22px; + font-weight: 700; + line-height: 129.623%; + text-transform: uppercase; +`; + +export const Button = styled('div')` + color: #fff; + font-size: 15px; + font-weight: 700; + line-height: normal; + text-transform: uppercase; + + border-radius: 9px; + background: rgba(217, 217, 217, 0.1); + + height: 35px; + padding: 12px 16px; + + display: flex; + align-items: center; + justify-content: center; + + cursor: pointer; + + transition: background 0.3s ease; + + &:hover { + background: rgba(255, 255, 255, 0.2); + } +`;