Move app to apps/web-react in pnpm workspace layout

2026-10-01 15:48:23 -05:00 · 2026-08-16 09:20:33 +03:00
parent 7e365ccfcf
commit bbc8ea57af
2913 changed files with 227 additions and 250 deletions
--- a/apps/web-react/app/components/TierPill.module.css
+++ b/apps/web-react/app/components/TierPill.module.css
@@ -0,0 +1,131 @@
+:root {
+	--tier-bg-1: hsl(45, 100%, 47%);
+	--tier-bg-2: hsl(280, 90%, 44%);
+	--tier-bg-3: hsl(280, 65%, 52%);
+	--tier-bg-4: hsl(212, 95%, 44%);
+	--tier-bg-5: hsl(212, 80%, 51%);
+	--tier-bg-6: hsl(145, 80%, 34%);
+	--tier-bg-7: hsl(145, 60%, 41%);
+	--tier-bg-8: hsl(220, 10%, 40%);
+	--tier-bg-9: hsl(220, 8%, 49%);
+	--tier-text-1: hsl(45, 100%, 12%);
+	--tier-text-2: hsl(280, 100%, 94%);
+	--tier-text-3: hsl(280, 100%, 95%);
+	--tier-text-4: hsl(212, 100%, 93%);
+	--tier-text-5: hsl(212, 100%, 95%);
+	--tier-text-6: hsl(145, 85%, 92%);
+	--tier-text-7: hsl(145, 75%, 94%);
+	--tier-text-8: hsl(220, 15%, 92%);
+	--tier-text-9: hsl(220, 15%, 95%);
+}
+
+.pill {
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
+	border-radius: var(--radius-selector);
+	padding: 0 var(--s-1-5);
+	height: var(--selector-size-sm);
+	display: grid;
+	place-items: center;
+	min-width: 33px;
+	text-align: center;
+}
+
+.tierX {
+	--_polished-bg: var(--tier-bg-1);
+	background-color: var(--tier-bg-1);
+	color: var(--tier-text-1);
+}
+
+.tierSPlus {
+	--_polished-bg: var(--tier-bg-2);
+	background-color: var(--tier-bg-2);
+	color: var(--tier-text-2);
+}
+
+.tierS {
+	--_polished-bg: var(--tier-bg-3);
+	background-color: var(--tier-bg-3);
+	color: var(--tier-text-3);
+}
+
+.tierAPlus {
+	background-color: var(--tier-bg-4);
+	color: var(--tier-text-4);
+}
+
+.tierA {
+	background-color: var(--tier-bg-5);
+	color: var(--tier-text-5);
+}
+
+.tierBPlus {
+	background-color: var(--tier-bg-6);
+	color: var(--tier-text-6);
+}
+
+.tierB {
+	background-color: var(--tier-bg-7);
+	color: var(--tier-text-7);
+}
+
+.tierCPlus {
+	background-color: var(--tier-bg-8);
+	color: var(--tier-text-8);
+}
+
+.tierC {
+	background-color: var(--tier-bg-9);
+	color: var(--tier-text-9);
+}
+
+.polished {
+	position: relative;
+	overflow: hidden;
+	background-image: linear-gradient(
+		160deg,
+		hsl(from var(--_polished-bg) calc(h + 2) s calc(l + 14)),
+		var(--_polished-bg) 50%,
+		hsl(from var(--_polished-bg) calc(h - 3) s calc(l - 9))
+	);
+
+	&::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(
+			115deg,
+			transparent 35%,
+			hsl(0, 0%, 100%, 0.5) 50%,
+			transparent 65%
+		);
+		transform: translateX(-100%);
+		animation: shine-sweep 6s ease-in-out infinite;
+	}
+}
+
+@keyframes shine-sweep {
+	0% {
+		transform: translateX(-100%);
+	}
+
+	12% {
+		transform: translateX(100%);
+	}
+
+	100% {
+		transform: translateX(100%);
+	}
+}
+
+.withoutAnimation::after {
+	animation: none;
+	visibility: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.polished::after {
+		animation: none;
+		visibility: hidden;
+	}
+}