Update user edit page to use CSS modules

app/features/user-page/routes/u.$identifier.edit.tsx

@@ -1,4 +1,5 @@
 import { Form, Link, useLoaderData, useMatches } from "@remix-run/react";
+import clsx from "clsx";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Button } from "~/components/Button";
@@ -31,7 +32,7 @@ import { action } from "../actions/u.$identifier.edit.server";
 import { loader } from "../loaders/u.$identifier.edit.server";
 export { loader, action };
 
-import "~/styles/u-edit.css";
+import styles from "~/styles/u.$identifier.module.css";
 
 export default function UserEditPage() {
 	const { t } = useTranslation(["common", "user"]);
@@ -45,7 +46,7 @@ export default function UserEditPage() {
 
 	return (
 		<div className="half-width">
-			<Form className="u-edit__container" method="post">
+			<Form className={styles.container} method="post">
 				{isSupporter ? (
 					<CustomizedColorsInput initialColors={layoutData.css} />
 				) : null}
@@ -143,15 +144,15 @@ function InGameNameInputs() {
 			<Label>{t("user:ign")}</Label>
 			<div className="stack horizontal sm items-center">
 				<Input
-					className="u-edit__in-game-name-text"
+					className={styles.inGameNameText}
 					name="inGameNameText"
 					aria-label="In game name"
 					maxLength={USER.IN_GAME_NAME_TEXT_MAX_LENGTH}
 					defaultValue={inGameNameParts?.[0]}
 				/>
-				<div className="u-edit__in-game-name-hashtag">#</div>
+				<div className={styles.inGameNameHashtag}>#</div>
 				<Input
-					className="u-edit__in-game-name-discriminator"
+					className={styles.inGameNameDiscriminator}
 					name="inGameNameDiscriminator"
 					aria-label="In game name discriminator"
 					maxLength={USER.IN_GAME_NAME_DISCRIMINATOR_MAX_LENGTH}
@@ -179,7 +180,7 @@ function SensSelects() {
 					id="motionSens"
 					name="motionSens"
 					defaultValue={data.user.motionSens ?? undefined}
-					className="u-edit__sens-select"
+					className={styles.sensSelect}
 				>
 					<option value="">{"-"}</option>
 					{SENS_OPTIONS.map((sens) => (
@@ -196,7 +197,7 @@ function SensSelects() {
 					id="stickSens"
 					name="stickSens"
 					defaultValue={data.user.stickSens ?? undefined}
-					className="u-edit__sens-select"
+					className={styles.sensSelect}
 				>
 					<option value="">{"-"}</option>
 					{SENS_OPTIONS.map((sens) => (
@@ -237,6 +238,7 @@ function CountrySelect() {
 			}}
 			name="country"
 			defaultSelectedKey={data.user.country ?? undefined}
+			className={styles.countrySelect}
 		>
 			{({ key, ...item }) => (
 				<SendouSelectItem key={key} {...item}>
@@ -274,7 +276,7 @@ function WeaponPoolSelect() {
 	const latestWeapon = weapons[weapons.length - 1];
 
 	return (
-		<div className="stack md u-edit__weapon-pool">
+		<div className={clsx("stack md", styles.weaponPool)}>
 			<input type="hidden" name="weapons" value={JSON.stringify(weapons)} />
 			<div>
 				<label htmlFor="weapon">{t("user:weaponPool")}</label>
@@ -363,7 +365,7 @@ function BioTextarea({
 	const [value, setValue] = React.useState(initialValue ?? "");
 
 	return (
-		<div className="u-edit__bio-container">
+		<div className={styles.bioContainer}>
 			<Label
 				htmlFor="bio"
 				valueLimits={{ current: value.length, max: USER.BIO_MAX_LENGTH }}
@@ -481,7 +483,7 @@ function CommissionTextArea({
 	const [value, setValue] = React.useState(initialValue ?? "");
 
 	return (
-		<div className="u-edit__bio-container">
+		<div className={styles.bioContainer}>
 			<Label
 				htmlFor="commissionText"
 				valueLimits={{

app/features/user-page/user-page-schemas.server.ts

@@ -1,5 +1,4 @@
 import { z } from "zod";
-import "~/styles/u-edit.css";
 import { BADGE } from "~/features/badges/badges-constants";
 import { isCustomUrl } from "~/utils/urls";
 import {

app/styles/u.$identifier.module.css

@@ -1,4 +1,4 @@
-.u-edit__container {
+.container {
 	display: flex;
 	width: 100%;
 	flex-direction: column;
@@ -6,34 +6,34 @@
 	gap: var(--s-6);
 }
 
-.u-edit__country-select {
+.countrySelect {
 	max-width: 10rem;
 }
 
-.u-edit__in-game-name-text {
+.inGameNameText {
 	max-width: 8rem;
 }
 
-.u-edit__in-game-name-hashtag {
+.inGameNameHashtag {
 	font-size: var(--fonts-lg);
 }
 
-.u-edit__in-game-name-discriminator {
+.inGameNameDiscriminator {
 	width: 5rem;
 }
 
-.u-edit__sens-select {
+.sensSelect {
 	width: 6rem;
 }
 
-.u-edit__weapon-pool {
+.weaponPool {
 	width: 20rem;
 }
 
-.u-edit__bio-container {
+.bioContainer {
 	width: 100%;
 }
 
-.u-edit__bio-container > textarea {
+.bioContainer > textarea {
 	width: 100%;
 }