fixed a bunch of styling and component usage

made sure almost all viewer pages use the navbar component properly instead of using their hardcoded version, started to match the styling of the design for a lot of pages
This commit is contained in:
bobbert committed 2025-03-23 14:33:53 +00:00
1 parent ffdc2279ec
commit 8d0bca1d87
16 files changed
+292 -126

No files matched your search

+48 -19
View File
@@ -140,7 +140,7 @@ export default function TeamPage({ params }) {
const continueTreasureHunt = async (e) => {
e.preventDefault();
setLoading(true);
try {
// Check if hunt is active first
const timestamp = Date.now();
@@ -153,10 +153,10 @@ export default function TeamPage({ params }) {
},
credentials: "include",
});
if (response.ok) {
const data = await response.json();
if (data.active) {
// Hunt is active, redirect to map
router.push("/map");
@@ -219,23 +219,25 @@ export default function TeamPage({ params }) {
<div className="members-container">
<h2 className="members-title">Team Members</h2>
{teamMembers.length > 0 ? (
<div className="members-list">
{teamMembers.map((member) => (
<div key={member.id} className="member-card">
<div className="member-avatar">👤</div>
<div className="member-details">
<div className="member-name">
{member.username}
{member.id === session?.user?.id && " (You)"}
<div className="members-background">
{teamMembers.length > 0 ? (
<div className="members-list">
{teamMembers.map((member) => (
<div key={member.id} className="member-card">
<div className="member-avatar">👤</div>
<div className="member-details">
<div className="member-name">
{member.username}
{member.id === session?.user?.id && " (You)"}
</div>
</div>
</div>
</div>
))}
</div>
) : (
<div className="empty-state">No team members found</div>
)}
))}
</div>
) : (
<div className="empty-state">No team members found</div>
)}
</div>
</div>
<div className="team-actions">
@@ -404,7 +406,10 @@ export default function TeamPage({ params }) {
}
.team-banner {
background-color: #68543c;
background-image: url("/images/Bottom-Bar.svg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: white;
padding: 20px;
position: relative;
@@ -423,12 +428,14 @@ export default function TeamPage({ params }) {
margin: 0;
font-size: 24px;
font-weight: bold;
color: white;
}
.team-code {
font-size: 24px;
font-weight: bold;
margin-left: auto;
color: white;
}
.members-container {
@@ -444,10 +451,26 @@ export default function TeamPage({ params }) {
color: #333;
}
/* New background div that holds the scroll background image */
.members-background {
position: relative;
background-image: url("/images/scroll.svg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 30px 20px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 300px;
}
.members-list {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
align-items: center;
}
.member-card {
@@ -457,6 +480,8 @@ export default function TeamPage({ params }) {
display: flex;
align-items: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 80vw;
max-width: 500px;
}
.member-avatar {
@@ -472,6 +497,10 @@ export default function TeamPage({ params }) {
text-align: center;
padding: 30px;
color: #888;
width: 80vw;
max-width: 500px;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 8px;
}
.team-actions {