From 72567fef840b386df66c1982e5996ef90e151004 Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Thu, 29 Dec 2022 17:21:34 +0100
Subject: [PATCH 1/7] /ja progress

---
 .../ProfileCard/ProfileCard.module.scss       | 102 ++++++++++++++++
 components/ProfileCard/ProfileCard.tsx        | 113 ++++++++++++++++++
 pages/ja.tsx                                  |  49 +++++++-
 styles/Ja.module.scss                         |  14 ---
 4 files changed, 258 insertions(+), 20 deletions(-)
 create mode 100644 components/ProfileCard/ProfileCard.module.scss
 create mode 100644 components/ProfileCard/ProfileCard.tsx
 delete mode 100644 styles/Ja.module.scss

diff --git a/components/ProfileCard/ProfileCard.module.scss b/components/ProfileCard/ProfileCard.module.scss
new file mode 100644
index 0000000..2f5083f
--- /dev/null
+++ b/components/ProfileCard/ProfileCard.module.scss
@@ -0,0 +1,102 @@
+.profile {
+	margin: 2rem 0;
+	background: var(--black1);
+	border-radius: 8px;
+	box-shadow: var(--shadow0);
+	article {
+		display: flex;
+		flex-direction: row;
+		padding: 1.5rem 1.5rem 1rem 1.5rem;
+		gap: 1rem;
+		background-color: var(--black2);
+		border-radius: 8px 8px 0 0;
+		@media screen and (max-width: 400px) {
+			flex-direction: column;
+			justify-content: center;
+		}
+		img {
+			border-radius: 50%;
+			height: 128px;
+			width: 128px;
+			@media screen and (max-width: 600px) {
+				height: 64px;
+				width: 64px;
+			}
+		}
+		.inner {
+			width: 100%;
+			header {
+				display: flex;
+				flex-direction: row;
+				align-items: baseline;
+				justify-content: space-between;
+				width: 100%;
+				h1 {
+					font-size: 2rem;
+				}
+				p {
+					font-family: var(--fonts-bold);
+					span {
+						font-size: 2rem;
+					}
+				}
+			}
+			.badges {
+				display: flex;
+				flex-direction: row;
+				gap: 1rem;
+				margin: 8px 0;
+				.badge {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					width: initial;
+					gap: 8px;
+					padding: 4px 8px;
+					background: rgba(white, 0.1);
+					border-radius: 4px;
+					.dot {
+						width: 16px;
+						height: 16px;
+						border-radius: 50%;
+						background-color: #fb636b;
+					}
+				}
+			}
+		}
+	}
+	.xpinfo {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		background: var(--black2);
+		color: #ababab;
+		padding: 0 14px;
+	}
+	.xpbar {
+		display: block;
+		width: 100%;
+		height: 10px;
+		background: rgba(white, 0.025);
+		.xpinner {
+			display: block;
+			height: 100%;
+			width: 99%;
+			background: #fb636b;
+			opacity: 75%;
+		}
+	}
+	footer {
+		min-height: 16px;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		section {
+			width: 50%;
+			padding: 2rem;
+			@media screen and (max-width: 800px) {
+				width: 100%;
+			}
+		}
+	}
+}
diff --git a/components/ProfileCard/ProfileCard.tsx b/components/ProfileCard/ProfileCard.tsx
new file mode 100644
index 0000000..626886e
--- /dev/null
+++ b/components/ProfileCard/ProfileCard.tsx
@@ -0,0 +1,113 @@
+import styles from "./ProfileCard.module.scss";
+
+type UserProfileCardProps = {
+	username: string;
+	description?: string;
+	picture?: string | null;
+	isAdmin?: boolean;
+	isDeveloper?: boolean;
+	experience?: {
+		level: number;
+		tilNextLevel?: number;
+		looseXP?: number;
+	};
+	badges?: {
+		badgeName: string;
+		badgeDesc?: string;
+		badgeMerit?: string;
+		badgeImage?: string;
+	}[];
+	accentColor?: string;
+};
+
+let placeholderPicture = "https://placewaifu.com/image/128?greyscale&blur";
+
+const ProfileCard = (user: UserProfileCardProps) => {
+	return (
+		<>
+			<div className={styles.profile}>
+				<article>
+					<img src={user.picture || placeholderPicture} alt={user.username} />
+					<div className={styles.inner}>
+						<header>
+							<h1>{user.username}</h1>
+							<p>
+								{user.experience?.level && (
+									<>
+										{"LVL "}
+										<span>{user.experience.level}</span>
+									</>
+								)}
+							</p>
+						</header>
+						<p>{user.description}</p>
+						<div className={styles.badges}>
+							{user.isAdmin && (
+								<div className={styles.badge}>
+									<div
+										className={styles.dot}
+										style={{ background: user.accentColor }}
+									/>
+									Admin
+								</div>
+							)}
+							{user.isDeveloper && (
+								<div className={styles.badge}>
+									<div
+										className={styles.dot}
+										style={{ background: user.accentColor }}
+									/>
+									DEV
+								</div>
+							)}
+						</div>
+					</div>
+				</article>
+				{user.experience?.looseXP && user.experience.tilNextLevel && (
+					<div className={styles.xpinfo}>
+						<p>XP: {user.experience.looseXP}</p>
+						<p>XP until next level: {user.experience.tilNextLevel} </p>
+					</div>
+				)}
+				{user.experience?.looseXP && user.experience.tilNextLevel && (
+					<div className={styles.xpbar}>
+						<div
+							className={styles.xpinner}
+							style={{
+								background: user.accentColor,
+								width:
+									(
+										(user.experience.looseXP /
+											(user.experience.looseXP +
+												user.experience.tilNextLevel)) *
+										100
+									).toString() + "%",
+							}}
+						/>
+					</div>
+				)}
+				<footer>
+					{user.badges
+						?.slice(0, 1)
+						.map(
+							(el: {
+								badgeName: string;
+								badgeDesc?: string;
+								badgeMerit?: string;
+								badgeImage?: string;
+							}) => {
+								return (
+									<section>
+										<h3>{el.badgeName}</h3>
+										<p>{el.badgeDesc}</p>
+									</section>
+								);
+							}
+						)}
+				</footer>
+			</div>
+		</>
+	);
+};
+
+export { ProfileCard };
diff --git a/pages/ja.tsx b/pages/ja.tsx
index 2bf12b9..7265b81 100644
--- a/pages/ja.tsx
+++ b/pages/ja.tsx
@@ -1,8 +1,9 @@
-import styles from "../styles/Ja.module.scss";
 import { useUser } from "@auth0/nextjs-auth0/client";
+import { ProfileCard } from "../components/ProfileCard/ProfileCard";
 
 const PageMe = () => {
 	const { user, error, isLoading } = useUser();
+
 	return (
 		<>
 			{isLoading && (
@@ -14,15 +15,51 @@ const PageMe = () => {
 			{error && (
 				<main>
 					<h3>Wystąpił błąd.</h3>
-					<p>Tyle wiemy.</p>
+					<p>Tyle wiemy:</p>
+					<p>{error.name}</p>
+					<p>{error.message}</p>
 				</main>
 			)}
 			{!isLoading && !error && user && (
 				<main>
-					<div className={styles.header}>
-						<img src={user.picture || ""} alt={`${user.name}'s picture`} />
-						<h1>{user.name}</h1>
-					</div>
+					<ProfileCard
+						username={user.name || "unknown user"}
+						picture={user.picture}
+						description={"To Ty! Niezaprzeczalnie. ヽ(*・ω・)ﾉ"}
+						experience={{ level: 69, looseXP: 420, tilNextLevel: 270 }}
+						badges={[
+							{
+								badgeName: "Odkrywca internetowy",
+								badgeDesc: "Zalogowałeś się na stronę internetową gractwa.",
+							},
+							{
+								badgeName: "Technik Informatyk",
+								badgeDesc: "Łapanki na korytarzu to normalka.",
+							},
+							{
+								badgeName: "Rozpad PGTF",
+								badgeDesc: "Służba w oddziałach Super Pizzy - powód do dumy.",
+							},
+							{
+								badgeName: "Mollin Stream",
+								badgeDesc: "„Sorry, ja za bardzo nie pamietam.” ~ Mollin",
+							},
+							{
+								badgeName: "Alkoholik",
+								badgeDesc: "pracoholicy gdy skończy im się pracohol:",
+							},
+							{
+								badgeName: "Studnia Oneshot",
+								badgeDesc: "elf w studni - ciekawe jak stamtąd wyjdzie",
+							},
+							{
+								badgeName: "RemCon 2022",
+								badgeDesc: "pomorze konwent",
+							},
+						]}
+						isAdmin
+						isDeveloper
+					/>
 				</main>
 			)}
 			{!isLoading && !user && (
diff --git a/styles/Ja.module.scss b/styles/Ja.module.scss
deleted file mode 100644
index fad7f83..0000000
--- a/styles/Ja.module.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.header {
-	margin: 2rem 0;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 1rem;
-	img {
-		height: 69px;
-		border-radius: 50%;
-	}
-	h1 {
-		font-size: 2rem;
-	}
-}

From db05967c0538c4dc17df066d91ae61b3107fa657 Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Thu, 29 Dec 2022 17:32:44 +0100
Subject: [PATCH 2/7] el map keys ;p

---
 components/ProfileCard/ProfileCard.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/ProfileCard/ProfileCard.tsx b/components/ProfileCard/ProfileCard.tsx
index 626886e..e32f3ea 100644
--- a/components/ProfileCard/ProfileCard.tsx
+++ b/components/ProfileCard/ProfileCard.tsx
@@ -20,14 +20,15 @@ type UserProfileCardProps = {
 	accentColor?: string;
 };
 
-let placeholderPicture = "https://placewaifu.com/image/128?greyscale&blur";
-
 const ProfileCard = (user: UserProfileCardProps) => {
 	return (
 		<>
 			<div className={styles.profile}>
 				<article>
-					<img src={user.picture || placeholderPicture} alt={user.username} />
+					<img
+						src={user.picture || "https://placewaifu.com/image/128"}
+						alt={user.username}
+					/>
 					<div className={styles.inner}>
 						<header>
 							<h1>{user.username}</h1>
@@ -97,7 +98,7 @@ const ProfileCard = (user: UserProfileCardProps) => {
 								badgeImage?: string;
 							}) => {
 								return (
-									<section>
+									<section key={el.badgeName}>
 										<h3>{el.badgeName}</h3>
 										<p>{el.badgeDesc}</p>
 									</section>

From def79c162cfbea305bbe7af86e55d30e55ab697b Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Fri, 30 Dec 2022 13:45:45 +0100
Subject: [PATCH 3/7] fix navbar offsets

---
 components/Navigation/Navigation.module.scss | 8 +++++++-
 components/Navigation/Navigation.tsx         | 7 +++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/components/Navigation/Navigation.module.scss b/components/Navigation/Navigation.module.scss
index 3b409a8..25e79a9 100644
--- a/components/Navigation/Navigation.module.scss
+++ b/components/Navigation/Navigation.module.scss
@@ -91,7 +91,7 @@
 	display: none;
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 860px) {
 	.nav {
 		height: 3rem;
 	}
@@ -101,6 +101,12 @@
 	.mobile {
 		display: inherit;
 	}
+	.menumobile {
+		padding: 0 1rem;
+	}
+	.logoutmobile {
+		padding: 0 1rem;
+	}
 }
 
 /* FOR TESTING MOBILE NAV WITHOUT DEVTOOLS */
diff --git a/components/Navigation/Navigation.tsx b/components/Navigation/Navigation.tsx
index 2dec81d..85da3c7 100644
--- a/components/Navigation/Navigation.tsx
+++ b/components/Navigation/Navigation.tsx
@@ -27,7 +27,10 @@ const Navigation = () => {
 						</Link>
 					);
 				})}
-				<div tabIndex={0} className={`${styles.dropdown} ${styles.mobile}`}>
+				<div
+					tabIndex={0}
+					className={`${styles.dropdown} ${styles.mobile} ${styles.menumobile}`}
+				>
 					<Icon icon="Menu" />
 					{/* TUTAJ WSTAWIĆ IKONKĘ PÓŹNIEJ */}
 					<div className={styles.innerdropdown}>
@@ -68,7 +71,7 @@ const Navigation = () => {
 				{!isLoading && user && (
 					<Link
 						href="/api/auth/logout"
-						className={`${styles.link} ${styles.partprofile}`}
+						className={`${styles.link} ${styles.partprofile} ${styles.logoutmobile}`}
 					>
 						<Icon icon="LogOut" />
 					</Link>

From b3908b6ace5df6af9dcd8c9d28393c139630ff50 Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Fri, 30 Dec 2022 18:08:03 +0100
Subject: [PATCH 4/7] profilecard on profilepages, settings page init & more

---
 .../ProfileCard/ProfileCard.module.scss       |  3 +
 components/ProfileCard/ProfileCard.tsx        | 74 +++++++--------
 pages/ja.tsx                                  | 77 ----------------
 pages/ja/index.tsx                            | 92 +++++++++++++++++++
 pages/ja/ustawienia.tsx                       | 42 +++++++++
 pages/profil/[profname]/index.tsx             | 78 +++++++++++-----
 styles/globals.scss                           | 11 +++
 styles/ustawienia.module.scss                 | 10 ++
 8 files changed, 249 insertions(+), 138 deletions(-)
 delete mode 100644 pages/ja.tsx
 create mode 100644 pages/ja/index.tsx
 create mode 100644 pages/ja/ustawienia.tsx
 create mode 100644 styles/ustawienia.module.scss

diff --git a/components/ProfileCard/ProfileCard.module.scss b/components/ProfileCard/ProfileCard.module.scss
index 2f5083f..af8fb01 100644
--- a/components/ProfileCard/ProfileCard.module.scss
+++ b/components/ProfileCard/ProfileCard.module.scss
@@ -18,6 +18,9 @@
 			border-radius: 50%;
 			height: 128px;
 			width: 128px;
+			aspect-ratio: 1 / 1;
+			object-fit: cover;
+			object-position: 50% 35%;
 			@media screen and (max-width: 600px) {
 				height: 64px;
 				width: 64px;
diff --git a/components/ProfileCard/ProfileCard.tsx b/components/ProfileCard/ProfileCard.tsx
index e32f3ea..9a11ca9 100644
--- a/components/ProfileCard/ProfileCard.tsx
+++ b/components/ProfileCard/ProfileCard.tsx
@@ -1,62 +1,64 @@
 import styles from "./ProfileCard.module.scss";
 
 type UserProfileCardProps = {
-	username: string;
-	description?: string;
-	picture?: string | null;
-	isAdmin?: boolean;
-	isDeveloper?: boolean;
-	experience?: {
-		level: number;
-		tilNextLevel?: number;
-		looseXP?: number;
+	data: {
+		username: string;
+		description?: string;
+		picture?: string | null;
+		isAdmin?: boolean;
+		isDeveloper?: boolean;
+		experience?: {
+			level: number;
+			tilNextLevel?: number;
+			looseXP?: number;
+		};
+		badges?: {
+			badgeName: string;
+			badgeDesc?: string;
+			badgeMerit?: string;
+			badgeImage?: string;
+		}[];
+		accentColor?: string;
 	};
-	badges?: {
-		badgeName: string;
-		badgeDesc?: string;
-		badgeMerit?: string;
-		badgeImage?: string;
-	}[];
-	accentColor?: string;
 };
 
-const ProfileCard = (user: UserProfileCardProps) => {
+const ProfileCard = ({ data }: UserProfileCardProps) => {
 	return (
 		<>
 			<div className={styles.profile}>
 				<article>
 					<img
-						src={user.picture || "https://placewaifu.com/image/128"}
-						alt={user.username}
+						src={data.picture || "https://placewaifu.com/image/128"}
+						alt={data.username}
 					/>
 					<div className={styles.inner}>
 						<header>
-							<h1>{user.username}</h1>
+							<h1>{data.username}</h1>
 							<p>
-								{user.experience?.level && (
+								{data.experience?.level && (
 									<>
 										{"LVL "}
-										<span>{user.experience.level}</span>
+										<span>{data.experience.level}</span>
 									</>
 								)}
 							</p>
 						</header>
-						<p>{user.description}</p>
+						<p>{data.description}</p>
 						<div className={styles.badges}>
-							{user.isAdmin && (
+							{data.isAdmin && (
 								<div className={styles.badge}>
 									<div
 										className={styles.dot}
-										style={{ background: user.accentColor }}
+										style={{ background: data.accentColor }}
 									/>
 									Admin
 								</div>
 							)}
-							{user.isDeveloper && (
+							{data.isDeveloper && (
 								<div className={styles.badge}>
 									<div
 										className={styles.dot}
-										style={{ background: user.accentColor }}
+										style={{ background: data.accentColor }}
 									/>
 									DEV
 								</div>
@@ -64,23 +66,23 @@ const ProfileCard = (user: UserProfileCardProps) => {
 						</div>
 					</div>
 				</article>
-				{user.experience?.looseXP && user.experience.tilNextLevel && (
+				{data.experience?.looseXP && data.experience.tilNextLevel && (
 					<div className={styles.xpinfo}>
-						<p>XP: {user.experience.looseXP}</p>
-						<p>XP until next level: {user.experience.tilNextLevel} </p>
+						<p>XP: {data.experience.looseXP}</p>
+						<p>XP until next level: {data.experience.tilNextLevel} </p>
 					</div>
 				)}
-				{user.experience?.looseXP && user.experience.tilNextLevel && (
+				{data.experience?.looseXP && data.experience.tilNextLevel && (
 					<div className={styles.xpbar}>
 						<div
 							className={styles.xpinner}
 							style={{
-								background: user.accentColor,
+								background: data.accentColor,
 								width:
 									(
-										(user.experience.looseXP /
-											(user.experience.looseXP +
-												user.experience.tilNextLevel)) *
+										(data.experience.looseXP /
+											(data.experience.looseXP +
+												data.experience.tilNextLevel)) *
 										100
 									).toString() + "%",
 							}}
@@ -88,7 +90,7 @@ const ProfileCard = (user: UserProfileCardProps) => {
 					</div>
 				)}
 				<footer>
-					{user.badges
+					{data.badges
 						?.slice(0, 1)
 						.map(
 							(el: {
diff --git a/pages/ja.tsx b/pages/ja.tsx
deleted file mode 100644
index 7265b81..0000000
--- a/pages/ja.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useUser } from "@auth0/nextjs-auth0/client";
-import { ProfileCard } from "../components/ProfileCard/ProfileCard";
-
-const PageMe = () => {
-	const { user, error, isLoading } = useUser();
-
-	return (
-		<>
-			{isLoading && (
-				<main>
-					<h3>Ładujemy dane dla Ciebie...</h3>
-					<p>Sit tight.</p>
-				</main>
-			)}
-			{error && (
-				<main>
-					<h3>Wystąpił błąd.</h3>
-					<p>Tyle wiemy:</p>
-					<p>{error.name}</p>
-					<p>{error.message}</p>
-				</main>
-			)}
-			{!isLoading && !error && user && (
-				<main>
-					<ProfileCard
-						username={user.name || "unknown user"}
-						picture={user.picture}
-						description={"To Ty! Niezaprzeczalnie. ヽ(*・ω・)ﾉ"}
-						experience={{ level: 69, looseXP: 420, tilNextLevel: 270 }}
-						badges={[
-							{
-								badgeName: "Odkrywca internetowy",
-								badgeDesc: "Zalogowałeś się na stronę internetową gractwa.",
-							},
-							{
-								badgeName: "Technik Informatyk",
-								badgeDesc: "Łapanki na korytarzu to normalka.",
-							},
-							{
-								badgeName: "Rozpad PGTF",
-								badgeDesc: "Służba w oddziałach Super Pizzy - powód do dumy.",
-							},
-							{
-								badgeName: "Mollin Stream",
-								badgeDesc: "„Sorry, ja za bardzo nie pamietam.” ~ Mollin",
-							},
-							{
-								badgeName: "Alkoholik",
-								badgeDesc: "pracoholicy gdy skończy im się pracohol:",
-							},
-							{
-								badgeName: "Studnia Oneshot",
-								badgeDesc: "elf w studni - ciekawe jak stamtąd wyjdzie",
-							},
-							{
-								badgeName: "RemCon 2022",
-								badgeDesc: "pomorze konwent",
-							},
-						]}
-						isAdmin
-						isDeveloper
-					/>
-				</main>
-			)}
-			{!isLoading && !user && (
-				<main>
-					<h1>/ja</h1>
-					<p>
-						Musisz być zalogowany aby skorzystać z funkcjonalności tej strony.
-					</p>
-				</main>
-			)}
-		</>
-	);
-};
-
-export default PageMe;
diff --git a/pages/ja/index.tsx b/pages/ja/index.tsx
new file mode 100644
index 0000000..3a60d17
--- /dev/null
+++ b/pages/ja/index.tsx
@@ -0,0 +1,92 @@
+import { useUser } from "@auth0/nextjs-auth0/client";
+import Link from "next/link";
+import { ProfileCard } from "../../components/ProfileCard/ProfileCard";
+import { SEO } from "../../components/SEO";
+
+const PageMe = () => {
+	const { user, error, isLoading } = useUser();
+
+	return (
+		<>
+			{isLoading && (
+				<main>
+					<h3>Ładujemy dane dla Ciebie...</h3>
+					<p>Sit tight.</p>
+				</main>
+			)}
+			{error && (
+				<main>
+					<h3>Wystąpił błąd.</h3>
+					<p>Tyle wiemy:</p>
+					<p>{error.name}</p>
+					<p>{error.message}</p>
+				</main>
+			)}
+			{!isLoading && !error && user && (
+				<main>
+					<SEO title="twój profil" />
+					<ProfileCard
+						data={{
+							username: user.name || "unknown user",
+							picture: user.picture,
+							description: "Twój opis. ヽ(*・ω・)ﾉ",
+							isAdmin: true,
+							isDeveloper: true,
+							experience: {
+								level: 69,
+								looseXP: 420,
+								tilNextLevel: 69,
+							},
+							badges: [
+								{
+									badgeName: "Odkrywca internetowy",
+									badgeDesc:
+										"Logowanie się na gractwo.pl nie jest takie straszne.",
+								},
+								{
+									badgeName: "Technik Informatyk",
+									badgeDesc: "Łapanki na korytarzu to normalka.",
+								},
+								{
+									badgeName: "Rozpad PGTF",
+									badgeDesc: "Służba w oddziałach Super Pizzy - powód do dumy.",
+								},
+								{
+									badgeName: "Mollin Stream",
+									badgeDesc: "„Sorry, ja za bardzo nie pamietam.” ~ Mollin",
+								},
+								{
+									badgeName: "Alkoholik",
+									badgeDesc: "pracoholicy gdy skończy im się pracohol:",
+								},
+								{
+									badgeName: "Studnia Oneshot",
+									badgeDesc: "elf w studni - ciekawe jak stamtąd wyjdzie",
+								},
+								{
+									badgeName: "RemCon 2022",
+									badgeDesc: "pomorze konwent",
+								},
+							],
+						}}
+					/>
+					<Link href="/ja/ustawienia">
+						<button style={{ width: "100%", margin: 0 }}>
+							Ustawienia Konta
+						</button>
+					</Link>
+				</main>
+			)}
+			{!isLoading && !user && (
+				<main>
+					<h1>/ja</h1>
+					<p>
+						Musisz być zalogowany aby skorzystać z funkcjonalności tej strony.
+					</p>
+				</main>
+			)}
+		</>
+	);
+};
+
+export default PageMe;
diff --git a/pages/ja/ustawienia.tsx b/pages/ja/ustawienia.tsx
new file mode 100644
index 0000000..bdc01eb
--- /dev/null
+++ b/pages/ja/ustawienia.tsx
@@ -0,0 +1,42 @@
+import { useUser } from "@auth0/nextjs-auth0/client";
+import { SEO } from "../../components/SEO";
+import styles from "../../styles/ustawienia.module.scss";
+
+const PageMeSettings = () => {
+	const { user, error, isLoading } = useUser();
+
+	return (
+		<>
+			{isLoading && (
+				<>
+					<main>
+						<h3>Ładowanie danych...</h3>
+					</main>
+				</>
+			)}
+			{error && (
+				<main>
+					<h3>Wystąpił błąd.</h3>
+					<p>Tyle wiemy.</p>
+				</main>
+			)}
+			{!isLoading && !error && user && (
+				<>
+					<main>
+						<SEO title="ustawienia konta" />
+						<h1>ustawienia konta</h1>
+						<p>
+							Kolor akcentowy <input type="color" name="" id="" />
+						</p>
+					</main>
+					<main>
+						<h3>uwaga: strona w trakcie budowy. funkcjonalność niegotowa.</h3>
+						<button>Zapisz zmiany</button>
+					</main>
+				</>
+			)}
+		</>
+	);
+};
+
+export default PageMeSettings;
diff --git a/pages/profil/[profname]/index.tsx b/pages/profil/[profname]/index.tsx
index cc4a8be..433fdc8 100644
--- a/pages/profil/[profname]/index.tsx
+++ b/pages/profil/[profname]/index.tsx
@@ -1,5 +1,6 @@
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import { ProfileCard } from "../../../components/ProfileCard/ProfileCard";
 import { SEO } from "../../../components/SEO";
 
 const ProfilePage = () => {
@@ -43,37 +44,64 @@ const ProfilePage = () => {
 				return wpis.Name.replaceAll(" ", "-").toLocaleLowerCase() === profname;
 			})[0];
 			return (
-				<main>
+				<>
 					<SEO title={person.Name} />
-					<div
-						style={{
-							display: "flex",
-							flexDirection: "row",
-							alignItems: "center",
-							gap: "1rem",
-							marginBottom: "1rem",
-						}}
-					>
-						<img
-							src={person.Img}
-							alt={`${person.Name} profile image`}
+					<main>
+						<div
 							style={{
-								width: "128px",
-								aspectRatio: "1/1",
-								objectFit: "cover",
-								borderRadius: "50%",
+								display: "flex",
+								flexDirection: "row",
+								justifyContent: "center",
+								alignItems: "center",
+								gap: "1rem",
+								margin: "2rem 0 0 0",
 							}}
-						/>
-						<div>
-							<h1>{person.Name}</h1>
-							<p>{person.Desc}</p>
+						>
+							<img
+								src={person.Img}
+								alt={`${person.Name} profile image`}
+								style={{
+									width: "128px",
+									aspectRatio: "1/1",
+									objectFit: "cover",
+									borderRadius: "50%",
+								}}
+							/>
+							<div>
+								<h1>{person.Name}</h1>
+								<p>{person.Desc}</p>
+							</div>
 						</div>
-					</div>
-					{/* FOR LATER BIGDESC DATASET */}
-					{/* {person.profile?.bigdesc.map((el, index) => {
+						{/* FOR LATER BIGDESC DATASET */}
+						{/* {person.profile?.bigdesc.map((el, index) => {
 						return <p key={index}>{el || <br />}</p>;
 					})} */}
-				</main>
+					</main>
+					<main>
+						<ProfileCard
+							data={{
+								username: person.Name,
+								picture: person.Img,
+								description: "Twój opis. ヽ(*・ω・)ﾉ",
+								// accentColor: "violet",
+								isAdmin: person.IsAdmin,
+								isDeveloper: person.DevBadge,
+								experience: {
+									level: 69,
+									looseXP: 420,
+									tilNextLevel: 69,
+								},
+								badges: [
+									{
+										badgeName: "Odkrywca internetowy",
+										badgeDesc:
+											"Logowanie się na gractwo.pl nie jest takie straszne.",
+									},
+								],
+							}}
+						/>
+					</main>
+				</>
 			);
 		} else {
 			return (
diff --git a/styles/globals.scss b/styles/globals.scss
index 0d50be4..9c12678 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -62,6 +62,17 @@ button {
 		// color: black;
 	}
 }
+input {
+	display: inline-block;
+	font-size: 1rem;
+	padding: 4px;
+	border-radius: 3px;
+	background: rgba(white, 0.1);
+	border: 0;
+	color: white;
+	outline: none;
+	font-family: var(--fonts-norm);
+}
 
 .chips {
 	display: flex;
diff --git a/styles/ustawienia.module.scss b/styles/ustawienia.module.scss
new file mode 100644
index 0000000..e299b66
--- /dev/null
+++ b/styles/ustawienia.module.scss
@@ -0,0 +1,10 @@
+.inputSectionParent {
+	display: flex;
+	flex-direction: column;
+}
+.inputSection {
+	display: flex;
+	flex-direction: row;
+	gap: 1rem;
+	align-items: baseline;
+}

From e749b051b07c92d2b995fa26d81fc85cc589710b Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Fri, 30 Dec 2022 19:20:37 +0100
Subject: [PATCH 5/7] further ProfileCard adjustments

---
 .../ProfileCard/ProfileCard.module.scss       |  3 ++
 components/ProfileCard/ProfileCard.tsx        |  2 +-
 pages/ja/index.tsx                            | 50 +++++++++++++++----
 pages/profil/[profname]/index.tsx             | 24 ++++-----
 4 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/components/ProfileCard/ProfileCard.module.scss b/components/ProfileCard/ProfileCard.module.scss
index af8fb01..3be1bef 100644
--- a/components/ProfileCard/ProfileCard.module.scss
+++ b/components/ProfileCard/ProfileCard.module.scss
@@ -28,6 +28,8 @@
 		}
 		.inner {
 			width: 100%;
+			display: flex;
+			flex-direction: column;
 			header {
 				display: flex;
 				flex-direction: row;
@@ -49,6 +51,7 @@
 				flex-direction: row;
 				gap: 1rem;
 				margin: 8px 0;
+				margin-top: auto;
 				.badge {
 					display: flex;
 					flex-direction: row;
diff --git a/components/ProfileCard/ProfileCard.tsx b/components/ProfileCard/ProfileCard.tsx
index 9a11ca9..94f5176 100644
--- a/components/ProfileCard/ProfileCard.tsx
+++ b/components/ProfileCard/ProfileCard.tsx
@@ -60,7 +60,7 @@ const ProfileCard = ({ data }: UserProfileCardProps) => {
 										className={styles.dot}
 										style={{ background: data.accentColor }}
 									/>
-									DEV
+									Developer
 								</div>
 							)}
 						</div>
diff --git a/pages/ja/index.tsx b/pages/ja/index.tsx
index 3a60d17..d9e084b 100644
--- a/pages/ja/index.tsx
+++ b/pages/ja/index.tsx
@@ -1,10 +1,36 @@
 import { useUser } from "@auth0/nextjs-auth0/client";
 import Link from "next/link";
+import { useEffect, useState } from "react";
 import { ProfileCard } from "../../components/ProfileCard/ProfileCard";
 import { SEO } from "../../components/SEO";
 
 const PageMe = () => {
 	const { user, error, isLoading } = useUser();
+	type personsSchema = {
+		Id: string;
+		Name: string;
+		Desc?: string;
+		Img?: string;
+		IsAdmin?: boolean;
+		DevBadge?: boolean;
+		AssignedUser?: string;
+	};
+	const [personsData, setPersonsData] = useState<personsSchema | null>(null);
+
+	useEffect(() => {
+		fetch("https://gractwo.pl/api/v1/admincards")
+			.then((res) => {
+				return res.json();
+			})
+			.then((data) => {
+				setPersonsData(
+					data.filter((el: personsSchema) => {
+						if (!user) return false;
+						return el.AssignedUser === user.sub?.replace("oauth2|discord|", "");
+					})[0]
+				);
+			});
+	}, [user]);
 
 	return (
 		<>
@@ -29,14 +55,15 @@ const PageMe = () => {
 						data={{
 							username: user.name || "unknown user",
 							picture: user.picture,
-							description: "Twój opis. ヽ(*・ω・)ﾉ",
-							isAdmin: true,
-							isDeveloper: true,
-							experience: {
-								level: 69,
-								looseXP: 420,
-								tilNextLevel: 69,
-							},
+							description: personsData?.Desc || "twój opis.",
+							isAdmin: personsData?.IsAdmin,
+							isDeveloper: personsData?.DevBadge,
+							// isAdmin: true,
+							// experience: {
+							// 	level: 69,
+							// 	looseXP: 420,
+							// 	tilNextLevel: 69,
+							// },
 							badges: [
 								{
 									badgeName: "Odkrywca internetowy",
@@ -71,10 +98,15 @@ const PageMe = () => {
 						}}
 					/>
 					<Link href="/ja/ustawienia">
-						<button style={{ width: "100%", margin: 0 }}>
+						<button style={{ width: "100%", margin: 0, marginBottom: "12px" }}>
 							Ustawienia Konta
 						</button>
 					</Link>
+					{/* <Link href="/ja/ustawienia-profilu-publicznego">
+						<button style={{ width: "100%", margin: 0, marginBottom: "12px" }}>
+							Ustawienia Profilu Publicznego
+						</button>
+					</Link> */}
 				</main>
 			)}
 			{!isLoading && !user && (
diff --git a/pages/profil/[profname]/index.tsx b/pages/profil/[profname]/index.tsx
index 433fdc8..3bd1051 100644
--- a/pages/profil/[profname]/index.tsx
+++ b/pages/profil/[profname]/index.tsx
@@ -46,7 +46,7 @@ const ProfilePage = () => {
 			return (
 				<>
 					<SEO title={person.Name} />
-					<main>
+					{/* <main>
 						<div
 							style={{
 								display: "flex",
@@ -71,26 +71,26 @@ const ProfilePage = () => {
 								<h1>{person.Name}</h1>
 								<p>{person.Desc}</p>
 							</div>
-						</div>
-						{/* FOR LATER BIGDESC DATASET */}
-						{/* {person.profile?.bigdesc.map((el, index) => {
+						</div> */}
+					{/* FOR LATER BIGDESC DATASET */}
+					{/* {person.profile?.bigdesc.map((el, index) => {
 						return <p key={index}>{el || <br />}</p>;
 					})} */}
-					</main>
+					{/* </main> */}
 					<main>
 						<ProfileCard
 							data={{
 								username: person.Name,
 								picture: person.Img,
-								description: "Twój opis. ヽ(*・ω・)ﾉ",
-								// accentColor: "violet",
+								description: person.Desc,
 								isAdmin: person.IsAdmin,
 								isDeveloper: person.DevBadge,
-								experience: {
-									level: 69,
-									looseXP: 420,
-									tilNextLevel: 69,
-								},
+								// accentColor: "violet",
+								// experience: {
+								// level: 69,
+								// looseXP: 420,
+								// tilNextLevel: 69,
+								// },
 								badges: [
 									{
 										badgeName: "Odkrywca internetowy",

From 6b769d01ba5c2edba5cc007bcc31220e34ed31fc Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Fri, 30 Dec 2022 19:46:42 +0100
Subject: [PATCH 6/7] save some api bandwith

---
 pages/ja/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/ja/index.tsx b/pages/ja/index.tsx
index d9e084b..872ebca 100644
--- a/pages/ja/index.tsx
+++ b/pages/ja/index.tsx
@@ -18,6 +18,7 @@ const PageMe = () => {
 	const [personsData, setPersonsData] = useState<personsSchema | null>(null);
 
 	useEffect(() => {
+		if (!user) return;
 		fetch("https://gractwo.pl/api/v1/admincards")
 			.then((res) => {
 				return res.json();

From 977492a7b2b183a683a3740f52d243ad4f365d47 Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Fri, 30 Dec 2022 19:54:22 +0100
Subject: [PATCH 7/7] remove unused styling file

---
 styles/ustawienia.module.scss | 10 ----------
 1 file changed, 10 deletions(-)
 delete mode 100644 styles/ustawienia.module.scss

diff --git a/styles/ustawienia.module.scss b/styles/ustawienia.module.scss
deleted file mode 100644
index e299b66..0000000
--- a/styles/ustawienia.module.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.inputSectionParent {
-	display: flex;
-	flex-direction: column;
-}
-.inputSection {
-	display: flex;
-	flex-direction: row;
-	gap: 1rem;
-	align-items: baseline;
-}