diff --git a/app/(main)/[teamId]/page.js b/app/(main)/[teamId]/page.js
index e82bac5..0344bfb 100644
--- a/app/(main)/[teamId]/page.js
+++ b/app/(main)/[teamId]/page.js
@@ -260,18 +260,17 @@ export default function TeamPage({ params }) {
position: relative;
overflow-x: hidden;
width: 100%;
- padding-bottom: 70px;
+ padding-bottom: 70px;
}
.content-wrapper {
position: relative;
flex: 1;
- margin: 0;
- padding: 0;
display: flex;
- justify-content: center;
+ flex-direction: column;
align-items: center;
- height: calc(100vh - 140px); /* Account for header and footer */
+ width: 100%;
+ padding: 80px 0 100px 0;
}
.waves-container {
@@ -305,6 +304,7 @@ export default function TeamPage({ params }) {
display: flex;
align-items: center;
z-index: 3;
+ flex-shrink: 0;
}
.team-info {
@@ -331,42 +331,60 @@ export default function TeamPage({ params }) {
.scroll-background {
background-image: url("/images/scroll.svg");
background-repeat: no-repeat;
- background-size: contain;
+ background-size: 100% 100%;
background-position: center;
- margin: 20px;
- flex: 1;
display: flex;
flex-direction: column;
position: relative;
z-index: 2;
padding: 60px 20px 80px 20px;
- height: calc(100% - 40px);
- max-height: 100%;
- width: 80vw;
- max-width: 450px;
+ margin: 0 auto;
+ width: 90%;
+ max-width: 800px;
+ flex: 1;
+ min-height: 60vh;
+ overflow-y: auto;
+ }
+
+ @media (max-width: 768px) {
+ .scroll-background {
+ width: 95%;
+ padding: 50px 15px 70px 15px;
+ min-height: 50vh;
+ }
+
+ .members-title {
+ margin-top: -20px;
+ }
+
+ .team-actions {
+ width: 90%;
+ bottom: 70px;
+ }
}
.members-container {
display: flex;
flex-direction: column;
width: 100%;
- height: 100%;
+ flex: 1;
}
.members-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
- color: #fff;
+ color: #68543c;
text-align: center;
- margin-top: -46px;
+ margin-top: -30px;
}
.members-content {
flex: 1;
overflow-y: auto;
padding: 10px;
- max-height: 100%;
+ display: flex;
+ flex-direction: column;
}
.members-list {
@@ -375,6 +393,7 @@ export default function TeamPage({ params }) {
gap: 8px;
width: 100%;
align-items: center;
+ flex: 1;
}
.member-card {
@@ -385,7 +404,7 @@ export default function TeamPage({ params }) {
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- border: 1px solid #68543c;
+ border: 1px solid #eaeaea;
width: 100%;
max-width: 320px;
margin: 0 auto 8px auto;
@@ -410,7 +429,7 @@ export default function TeamPage({ params }) {
max-width: 400px;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 8px;
- margin: 0 auto;
+ margin: 20px auto;
font-size: 14px;
}
@@ -418,12 +437,14 @@ export default function TeamPage({ params }) {
display: flex;
gap: 10px;
padding: 10px 20px;
- position: relative;
- bottom: 0;
+ position: fixed;
+ bottom: 80px;
left: 0;
right: 0;
- z-index: 3;
- margin-top: 15px;
+ z-index: 5;
+ width: 80%;
+ max-width: 450px;
+ margin: 0 auto;
}
.action-button {
@@ -446,45 +467,31 @@ export default function TeamPage({ params }) {
color: white;
}
- .loading-container,
- .error-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 100vh;
- padding: 20px;
- text-align: center;
- }
-
- .loading-spinner {
- border: 4px solid #f3f3f3;
- border-top: 4px solid #68543c;
- border-radius: 50%;
- width: 40px;
- height: 40px;
- animation: spin 1s linear infinite;
- margin-bottom: 20px;
- }
-
- @keyframes spin {
- 0% {
- transform: rotate(0deg);
+ @media (max-height: 500px) {
+ .content-wrapper {
+ padding-top: 60px;
+ padding-bottom: 80px;
}
- 100% {
- transform: rotate(360deg);
+
+ .scroll-background {
+ padding: 40px 15px 60px 15px;
+ min-height: 60vh;
+ }
+
+ .members-title {
+ margin-top: -15px;
+ font-size: 18px;
+ }
+
+ .team-actions {
+ bottom: 75px;
}
}
- .error-icon {
- font-size: 48px;
- margin-bottom: 20px;
- color: #d32f2f;
- }
-
- .error-message {
- margin-bottom: 20px;
- color: #d32f2f;
+ @media (min-height: 1000px) {
+ .scroll-background {
+ min-height: 65vh;
+ }
}
`}
diff --git a/components/NavBar.js b/components/NavBar.js
index b6bbf72..aa6d24e 100644
--- a/components/NavBar.js
+++ b/components/NavBar.js
@@ -68,8 +68,17 @@ export default function NavBar({ activeLink, teamData }) {
href="/stats"
className={`nav-item ${activeLink === "stats" ? "active" : ""}`}
>
- 📊
- Stats
+
+
+
-
+
diff --git a/public/images/profile.svg b/public/images/profile.svg
index bf50797..30e7be4 100644
--- a/public/images/profile.svg
+++ b/public/images/profile.svg
@@ -1,3 +1,9 @@
-