Refactor FAQ and LFG CSS modules (#2168)

* faq css module

* lfg css module

* lint

app/features/info/routes/faq.module.css

@@ -1,4 +1,4 @@
-.faq__summary {
+.summary {
 	padding: var(--s-3);
 	border-radius: var(--rounded);
 	background-color: var(--bg-lighter);
@@ -6,7 +6,7 @@
 	font-weight: var(--bold);
 }
 
-.faq__details > p {
+.details {
 	margin-inline: var(--s-4);
 	padding-block: var(--s-3);
 	white-space: pre-line;

app/features/info/routes/faq.tsx

@@ -4,7 +4,7 @@ import { Main } from "~/components/Main";
 import { metaTags } from "~/utils/remix";
 import type { SendouRouteHandle } from "~/utils/remix.server";
 
-import "~/styles/faq.css";
+import styles from "./faq.module.css";
 
 const AMOUNT_OF_QUESTIONS = 9;
 
@@ -28,11 +28,12 @@ export default function FAQPage() {
 			{new Array(AMOUNT_OF_QUESTIONS).fill(null).map((_, i) => {
 				const questionNumber = i + 1;
 				return (
-					<details key={i} className="faq__details">
-						<summary className="faq__summary">
+					<details key={i}>
+						<summary className={styles.summary}>
 							{t(`faq:q${questionNumber}` as any)}
 						</summary>
 						<p
+							className={styles.details}
 							// biome-ignore lint/security/noDangerouslySetInnerHtml: trusted source
 							dangerouslySetInnerHTML={{
 								__html: t(`faq:a${questionNumber}` as any),

app/features/lfg/components/LFGFilters.module.css

@@ -0,0 +1,5 @@
+.filter {
+	padding: var(--s-1-5) var(--s-2);
+	background-color: var(--bg-lighter);
+	border-radius: var(--rounded);
+}

app/features/lfg/components/LFGFilters.tsx

@@ -13,6 +13,8 @@ import { capitalize } from "~/utils/strings";
 import { LFG } from "../lfg-constants";
 import type { LFGFilter } from "../lfg-types";
 
+import styles from "./LFGFilters.module.css";
+
 export function LFGFilters({
 	filters,
 	changeFilter,
@@ -65,7 +67,7 @@ function Filter({
 					aria-label="Delete filter"
 				/>
 			</div>
-			<div className="lfg__filter">
+			<div className={styles.filter}>
 				{filter._tag === "Weapon" && (
 					<WeaponFilterFields
 						value={filter.weaponSplIds}

app/features/lfg/components/LFGPost.module.css

@@ -1,4 +1,4 @@
-.lfg-post__wide-layout {
+.wideLayout {
 	display: grid;
 	grid-template-columns: 1fr;
 	align-items: flex-start;
@@ -6,25 +6,25 @@
 	row-gap: var(--s-2);
 }
 
-.lfg-post__wide-layout__left-row {
+.wideLayout .leftRow {
 	display: flex;
 	gap: var(--s-2);
 	flex-direction: column;
 }
 
 @media screen and (min-width: 640px) {
-	.lfg-post__wide-layout {
+	.wideLayout {
 		grid-template-columns: 1fr 2fr;
 		row-gap: 0;
 	}
 
-	.lfg-post__wide-layout__left-row {
+	.wideLayout .leftRow {
 		position: sticky;
 		top: 55px;
 	}
 }
 
-.lfg__post-user-name {
+.userName {
 	max-width: 125px;
 	text-overflow: ellipsis;
 	overflow: hidden;
@@ -32,7 +32,7 @@
 	color: var(--text);
 }
 
-.lfg__post-team-member-name {
+.teamMemberName {
 	max-width: 75px;
 	text-overflow: ellipsis;
 	overflow: hidden;
@@ -42,24 +42,24 @@
 	color: var(--text);
 }
 
-.lfg__post-text-container {
+.textContainer {
 	position: relative;
 	max-height: 150px;
 	overflow: hidden;
 }
 
-.lfg__post-text-container--expanded {
+.textContainerExpanded {
 	position: relative;
 	margin-bottom: var(--s-6);
 }
 
-.lfg__post-text {
+.text {
 	word-wrap: break-word;
 	white-space: pre-wrap;
 	word-break: break-word;
 }
 
-.lfg__post-text-cut {
+.textCut {
 	background-image: linear-gradient(to bottom, transparent, var(--bg));
 	width: 100%;
 	position: absolute;
@@ -67,7 +67,7 @@
 	height: 100%;
 }
 
-.lfg__post-text__show-all-button {
+.showAllButton {
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -78,11 +78,11 @@
 	z-index: 99;
 }
 
-.lfg__post-text__show-all-button--expanded {
+.showAllButtonExpanded {
 	bottom: -35px;
 }
 
-.lfg-post__pill {
+.pill {
 	font-size: var(--fonts-xxs);
 	font-weight: var(--semi-bold);
 	border-radius: var(--rounded);
@@ -94,12 +94,12 @@
 	position: relative;
 }
 
-.lfg-post__pill--placeholder {
+.pillPlaceholder {
 	visibility: hidden;
 	width: 37px;
 }
 
-.lfg-post__edit-button {
+.editButton {
 	font-size: var(--fonts-xxs);
 	font-weight: var(--semi-bold);
 	border-radius: var(--rounded);
@@ -110,30 +110,24 @@
 	gap: var(--s-1);
 }
 
-.lfg-post__edit-button > svg {
+.editButton > svg {
 	width: 12px;
 }
 
-.lfg-post__tier-pill--end {
-	border-radius: var(--rounded) 0 0 var(--rounded);
-}
-
-.lfg-post__tier-pill--start {
-	border-radius: 0 var(--rounded) var(--rounded) 0;
-}
-
-.lfg-post__tier {
+.tier {
 	position: absolute;
 	top: -3px;
 	right: 4px;
 }
 
-.lfg-post__tier-pill {
+.tierPill {
 	width: 60px;
 }
 
-.lfg__filter {
-	padding: var(--s-1-5) var(--s-2);
-	background-color: var(--bg-lighter);
-	border-radius: var(--rounded);
+.tierPillStart {
+	border-radius: 0 var(--rounded) var(--rounded) 0;
+}
+
+.tierPillEnd {
+	border-radius: var(--rounded) 0 0 var(--rounded);
 }

app/features/lfg/components/LFGPost.tsx

@@ -26,6 +26,8 @@ import {
 import { hourDifferenceBetweenTimezones } from "../core/timezone";
 import type { LFGLoaderData, TiersMap } from "../routes/lfg";
 
+import styles from "./LFGPost.module.css";
+
 type Post = LFGLoaderData["posts"][number];
 
 export function LFGPost({
@@ -50,8 +52,8 @@ function UserLFGPost({ post, tiersMap }: { post: Post; tiersMap: TiersMap }) {
 	const [isExpanded, setIsExpanded] = React.useState(false);
 
 	return (
-		<div className="lfg-post__wide-layout">
-			<div className="lfg-post__wide-layout__left-row">
+		<div className={styles.wideLayout}>
+			<div className={styles.leftRow}>
 				<PostUserHeader
 					author={post.author}
 					includeWeapons={post.type !== "COACH_FOR_TEAM"}
@@ -100,7 +102,7 @@ function TeamLFGPost({
 	const [isExpanded, setIsExpanded] = React.useState(false);
 
 	return (
-		<div className="lfg-post__wide-layout">
+		<div className={styles.wideLayout}>
 			<div className="stack md">
 				<div className="stack xs">
 					<div className="stack horizontal items-center justify-between">
@@ -209,7 +211,7 @@ function PostTeamMember({
 		<div className="stack sm items-center flex-same-size">
 			<div className="stack sm items-center">
 				<Avatar size="xs" user={member} />
-				<Link to={userPage(member)} className="lfg__post-team-member-name">
+				<Link to={userPage(member)} className={styles.teamMemberName}>
 					{member.username}
 				</Link>
 				{tier ? <TierImage tier={tier} width={32} /> : null}
@@ -231,7 +233,7 @@ function PostUserHeader({
 				<Avatar size="xsm" user={author} />
 				<div>
 					<div className="stack horizontal sm items-center text-md font-bold">
-						<Link to={userPage(author)} className="lfg__post-user-name">
+						<Link to={userPage(author)} className={styles.userName}>
 							{author.username}
 						</Link>{" "}
 						{author.country ? <Flag countryCode={author.country} tiny /> : null}
@@ -329,7 +331,7 @@ function PostPills({
 }
 
 function PostTimezonePillPlaceholder() {
-	return <div className="lfg-post__pill lfg-post__pill--placeholder" />;
+	return <div className={clsx(styles.pill, styles.pillPlaceholder)} />;
 }
 
 const currentSeasonNth = currentOrPreviousSeason(new Date())!.nth;
@@ -372,20 +374,20 @@ function PostSkillPill({
 }) {
 	return (
 		<div
-			className={clsx("lfg-post__pill", "lfg-post__tier-pill", {
-				"lfg-post__tier-pill--start": cut === "START",
-				"lfg-post__tier-pill--end": cut === "END",
+			className={clsx(styles.pill, styles.tierPill, {
+				[styles.tierPillStart]: cut === "START",
+				[styles.tierPillEnd]: cut === "END",
 			})}
 		>
 			S{seasonNth}
-			<TierImage tier={tier} width={32} className="lfg-post__tier" />
+			<TierImage tier={tier} width={32} className={styles.tier} />
 		</div>
 	);
 }
 
 function PostPlusServerPill({ plusTier }: { plusTier: number }) {
 	return (
-		<div className="lfg-post__pill">
+		<div className={styles.pill}>
 			<Image alt="" path={navIconUrl("plus")} size={18} />
 			{plusTier}
 		</div>
@@ -409,7 +411,7 @@ function PostTimezonePill({ timezone }: { timezone: string }) {
 	};
 
 	return (
-		<div title={timezone} className={clsx("lfg-post__pill", textColorClass())}>
+		<div title={timezone} className={clsx(styles.pill, textColorClass())}>
 			{diff === 0 ? "±" : ""}
 			{diff > 0 ? "+" : ""}
 			{diff}h
@@ -419,7 +421,7 @@ function PostTimezonePill({ timezone }: { timezone: string }) {
 
 function PostLanguagePill({ languages }: { languages: string }) {
 	return (
-		<div className="lfg-post__pill">
+		<div className={styles.pill}>
 			{languages.replace(/,/g, " / ").toUpperCase()}
 		</div>
 	);
@@ -439,7 +441,7 @@ function PostEditButton({ id }: { id: number }) {
 	const { t } = useTranslation(["common"]);
 
 	return (
-		<Link className="lfg-post__edit-button" to={lfgNewPostPage(id)}>
+		<Link className={styles.editButton} to={lfgNewPostPage(id)}>
 			<EditIcon />
 			{t("common:actions.edit")}
 		</Link>
@@ -491,16 +493,16 @@ function PostExpandableText({
 	return (
 		<div
 			className={clsx({
-				"lfg__post-text-container": !isExpanded,
-				"lfg__post-text-container--expanded": isExpanded,
+				[styles.textContainer]: !isExpanded,
+				[styles.textContainerExpanded]: isExpanded,
 			})}
 		>
-			<div className="lfg__post-text">{text}</div>
+			<div className={styles.text}>{text}</div>
 			{isExpandable ? (
 				<Button
 					onClick={() => setIsExpanded(!isExpanded)}
-					className={clsx("lfg__post-text__show-all-button", {
-						"lfg__post-text__show-all-button--expanded": isExpanded,
+					className={clsx([styles.showAllButton], {
+						[styles.showAllButtonExpanded]: isExpanded,
 					})}
 					variant="outlined"
 					size="tiny"
@@ -510,7 +512,7 @@ function PostExpandableText({
 						: t("common:actions.showMore")}
 				</Button>
 			) : null}
-			{!isExpanded ? <div className="lfg__post-text-cut" /> : null}
+			{!isExpanded ? <div className={styles.textCut} /> : null}
 		</div>
 	);
 }

app/features/lfg/routes/lfg.tsx

@@ -28,8 +28,6 @@ import { action } from "../actions/lfg.server";
 import { loader } from "../loaders/lfg.server";
 export { loader, action };
 
-import "../lfg.css";
-
 export const handle: SendouRouteHandle = {
 	i18n: ["lfg"],
 	breadcrumb: () => ({