Archived
visual tweaks 1
This commit is contained in:
centauridesigns committed
1 parent
83e69f3c23
commit
59d956b69b
4 files changed
+121
-91
No files matched your search
@@ -0,0 +1,29 @@
|
||||
import React from "react";
|
||||
|
||||
const LogoutIcon: React.FC<{ className?: string }> = ({ className }) => (
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 111 77"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
>
|
||||
<g clipPath="url(#clip0_853_175)">
|
||||
<g>
|
||||
<path
|
||||
d="M95.7996 53.05C93.2796 53.05 91.3096 55.12 91.3096 57.76C91.3096 60.4 93.2896 62.47 95.7996 62.47H106.04C108.56 62.47 110.53 60.4 110.53 57.76V19.13C110.53 16.49 108.55 14.42 106.04 14.42H95.7996C93.2796 14.42 91.3096 16.49 91.3096 19.13C91.3096 21.77 93.2896 23.84 95.7996 23.84H101.55V53.05H95.7996Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M85.21 35.32L49.1 1.3C47.26 -0.440005 44.4 -0.440005 42.56 1.3C40.72 3.04 40.72 5.73 42.56 7.46L70.84 34.1H4.61C2.03 34.1 0 36.01 0 38.44C0 40.87 2.03 42.78 4.61 42.78H70.84L42.56 69.42C40.72 71.16 40.72 73.85 42.56 75.58C43.48 76.45 44.68 76.88 45.78 76.88C46.88 76.88 48.18 76.45 49 75.58L85.11 41.56C85.94 40.78 86.49 39.65 86.49 38.52C86.49 37.39 86.03 36.26 85.11 35.48L85.2 35.31L85.21 35.32Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default LogoutIcon;
|
||||
@@ -1,13 +1,26 @@
|
||||
import React from "react";
|
||||
import LogoutIcon from "../../../public/icons/LogoutIcon";
|
||||
|
||||
interface ProfileCardProps {
|
||||
hasUiogMembership: boolean;
|
||||
hasDnsMembership: boolean;
|
||||
}
|
||||
|
||||
const membershipPerks = [
|
||||
{
|
||||
title: "UIOG",
|
||||
const membershipStatuses = {
|
||||
Combined: {
|
||||
title: "Combined",
|
||||
description: "You have both memberships, and can enjoy all privileges.",
|
||||
blurb: "Your added Combined perks:",
|
||||
missingPerks: [
|
||||
"access to UiO Gaming Association Room",
|
||||
"access to Gangfest Events (2x / year)",
|
||||
],
|
||||
gradient: "bg-success-bg",
|
||||
image: "/images/p_both.png",
|
||||
tag: "Combined",
|
||||
},
|
||||
UIOG: {
|
||||
title: "UiO Gaming",
|
||||
description:
|
||||
"You are missing a DNS Standard membership. You can purchase one below.",
|
||||
blurb: "You will gain Combined perks:",
|
||||
@@ -15,130 +28,104 @@ const membershipPerks = [
|
||||
"access to UiO Gaming Association Room",
|
||||
"access to Gangfest Events (2x / year)",
|
||||
],
|
||||
gradient: "bg-mixed",
|
||||
image: "/images/uiog.png",
|
||||
tag: "UiO Gaming",
|
||||
},
|
||||
{
|
||||
title: "DNS",
|
||||
DNS: {
|
||||
title: "DNS Standard",
|
||||
description:
|
||||
"You are missing a UiO Gaming membership. You can purchase one below.",
|
||||
blurb: "",
|
||||
missingPerks: [],
|
||||
gradient: "bg-mixed",
|
||||
image: "/images/neuf.png",
|
||||
tag: "DNS Standard",
|
||||
},
|
||||
{
|
||||
title: "Combined",
|
||||
description: "You have both memberships, and can enjoy all privileges.",
|
||||
blurb: "Your added Combined perks:",
|
||||
missingPerks: [],
|
||||
},
|
||||
{
|
||||
None: {
|
||||
title: "None",
|
||||
description:
|
||||
"You are missing both memberships. You can purchase them below.",
|
||||
blurb: "",
|
||||
missingPerks: [],
|
||||
gradient: "bg-failure-bg",
|
||||
image: "/images/p_none.png",
|
||||
tag: "Free",
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const ProfileCard: React.FC<ProfileCardProps> = ({
|
||||
hasUiogMembership,
|
||||
hasDnsMembership,
|
||||
}) => {
|
||||
let membershipStatus;
|
||||
if (hasUiogMembership && hasDnsMembership) {
|
||||
membershipStatus = membershipPerks[2]; // Combined
|
||||
} else if (hasUiogMembership) {
|
||||
membershipStatus = membershipPerks[0]; // UIOG
|
||||
} else if (hasDnsMembership) {
|
||||
membershipStatus = membershipPerks[1]; // DNS
|
||||
} else {
|
||||
membershipStatus = membershipPerks[3]; // None
|
||||
}
|
||||
const statusKey = hasUiogMembership
|
||||
? hasDnsMembership
|
||||
? "Combined"
|
||||
: "UIOG"
|
||||
: hasDnsMembership
|
||||
? "DNS"
|
||||
: "None";
|
||||
|
||||
let gradientBottom;
|
||||
let imagePath;
|
||||
let tag;
|
||||
|
||||
if (membershipStatus.title === "Combined") {
|
||||
gradientBottom = "bg-success-bg";
|
||||
imagePath = "/images/p_both.png";
|
||||
tag = "Combined";
|
||||
} else if (membershipStatus.title === "None") {
|
||||
gradientBottom = "bg-failure-bg";
|
||||
imagePath = "/images/p_none.png";
|
||||
tag = "Free";
|
||||
} else {
|
||||
gradientBottom = "bg-mixed";
|
||||
|
||||
if (membershipStatus.title === "UIOG") {
|
||||
imagePath = "/images/p_uiog.png";
|
||||
tag = "UiO Gaming";
|
||||
}
|
||||
|
||||
if (membershipStatus.title === "DNS") {
|
||||
imagePath = "/images/p_neuf.png";
|
||||
tag = "DNS Standard";
|
||||
}
|
||||
}
|
||||
const membershipStatus = membershipStatuses[statusKey];
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`p-6 rounded-lg shadow-md text-white bg-gradient-to-b from-primary ${gradientBottom} transition-all duration-500p-7 m-5 gap-10 h-full`}
|
||||
className={`flex flex-1 flex-col gap-5 p-6 rounded-lg shadow-md text-white bg-gradient-to-b from-primary ${membershipStatus.gradient} transition-all duration-500 m-5 h-full`}
|
||||
>
|
||||
{/* Top Row */}
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
{/* User Icon and Name */}
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-14 h-14 rounded-md">
|
||||
<div className="w-20 h-20 rounded-md">
|
||||
<img
|
||||
src={imagePath}
|
||||
src={membershipStatus.image}
|
||||
alt="User Icon"
|
||||
className="w-full h-full rounded-md"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex flex-col">
|
||||
<p className="pb">wailern</p>
|
||||
<p className="text-sm">{tag}</p>
|
||||
<p className="opacity-50">{membershipStatus.tag}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Log Out Button */}
|
||||
<button className="bg-overlay-bright px-4 py-2 rounded-lg outline outline-outline2 outline-2">
|
||||
<p className="text-outline2">Log Out →</p>
|
||||
<button className="flex flex-row bg-overlay-bright px-3 py-1 rounded-md outline outline-outline2 outline-2 items-center gap-3">
|
||||
<p className="ph text-outline2">Log Out</p>
|
||||
<LogoutIcon className="w-8 ml-2 text-outline2" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Membership Status */}
|
||||
<div className="space-y-2">
|
||||
{["UIOG", "DNS"].map((key) => {
|
||||
const isActive = key === "UIOG" ? hasUiogMembership : hasDnsMembership;
|
||||
const displayName = key === "UIOG" ? "UiO Gaming" : "DNS Standard";
|
||||
return (
|
||||
<div
|
||||
className={`p-4 rounded-lg flex justify-between items-center ${
|
||||
hasUiogMembership ? "bg-success" : "bg-failure"
|
||||
key={key}
|
||||
className={`p-4 py-6 rounded-lg flex justify-between items-center ${
|
||||
isActive ? "bg-success" : "bg-failure"
|
||||
}`}
|
||||
>
|
||||
<p>{hasUiogMembership ? "✅ UiO Gaming" : "❌ UiO Gaming"}</p>
|
||||
<div>🎮</div>
|
||||
</div>
|
||||
<div
|
||||
className={`p-4 rounded-lg flex justify-between items-center ${
|
||||
hasDnsMembership ? "bg-success" : "bg-failure"
|
||||
}`}
|
||||
>
|
||||
<p className="">
|
||||
{hasDnsMembership ? "✅ DNS Standard" : "❌ DNS Standard"}
|
||||
</p>
|
||||
<div>🐟</div>
|
||||
</div>
|
||||
<p>{isActive ? `✅ ${displayName}` : `❌ ${displayName}`}</p>
|
||||
<div>{key === "UIOG" ? "🎮" : "🐟"}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Description */}
|
||||
<div className="mt-4 space-y-4">
|
||||
<p>{membershipStatus.description}</p>
|
||||
<div>
|
||||
<p className="pb">{membershipStatus.blurb}</p>
|
||||
{membershipStatus.missingPerks.length > 0 && (
|
||||
<ul className="list-disc list-inside mt-2 text-sm space-y-2">
|
||||
<div className="mt-2 space-y-5">
|
||||
<p className="ps">{membershipStatus.description}</p>
|
||||
{membershipStatus.blurb && (
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<p className="psh">{membershipStatus.blurb}</p>
|
||||
{membershipStatus.missingPerks.map((perk, index) => (
|
||||
<p key={index}>+ {perk}</p>
|
||||
<p className="ps" key={index}>
|
||||
+ {perk}
|
||||
</p>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
+16
-2
@@ -52,7 +52,7 @@ h2 {
|
||||
p {
|
||||
font-family: var(--font-nunito);
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.45rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -60,12 +60,17 @@ p {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.ph {
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.po {
|
||||
color: var(--outline);
|
||||
}
|
||||
|
||||
.pd {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.45rem;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
@@ -74,6 +79,15 @@ p {
|
||||
color: var(--foreground)
|
||||
}
|
||||
|
||||
.ps {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.psh {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-weight: 800;
|
||||
font-size: 2.5rem;
|
||||
|
||||
+9
-9
@@ -9,18 +9,18 @@ const config: Config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
background: "var(--background)",
|
||||
foreground: "var(--foreground)",
|
||||
primary: "var(--primary)",
|
||||
overlay: "var(--overlay)",
|
||||
'background': "var(--background)",
|
||||
'foreground': "var(--foreground)",
|
||||
'primary': "var(--primary)",
|
||||
'overlay': "var(--overlay)",
|
||||
'overlay-bright': "var(--overlay-bright)",
|
||||
outline: "var(--outline)",
|
||||
outline2: "var(--outline2)",
|
||||
'outline': "var(--outline)",
|
||||
'outline2': "var(--outline2)",
|
||||
'success-bg': "var(--success-bg)",
|
||||
success: "var(--success)",
|
||||
'success': "var(--success)",
|
||||
'failure-bg': "var(--failure-bg)",
|
||||
failure: "var(--failure)",
|
||||
mixed: "var(--mixed)",
|
||||
'failure': "var(--failure)",
|
||||
'mixed': "var(--mixed)",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
|
||||
Reference in new issue
Block a user