Eliminate small toggles

app/components/elements/Switch.module.css

@@ -1,5 +1,5 @@
 .root {
-	--height: var(--toggle-height);
+	--height: var(--toggle-height-small);
 
 	cursor: pointer;
 	display: grid;
@@ -13,10 +13,6 @@
 	margin-block-end: 0;
 }
 
-.small {
-	--height: var(--toggle-height-small);
-}
-
 .indicator {
 	width: calc(var(--height) * 1.75);
 	height: var(--height);

app/components/elements/Switch.tsx

@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import {
 	Switch as ReactAriaSwitch,
 	type SwitchProps as ReactAriaSwitchProps,
@@ -7,15 +6,11 @@ import styles from "./Switch.module.css";
 
 interface SendouSwitchProps extends ReactAriaSwitchProps {
 	children?: React.ReactNode;
-	size?: "small" | "medium";
 }
 
-export function SendouSwitch({ children, size, ...rest }: SendouSwitchProps) {
+export function SendouSwitch({ children, ...rest }: SendouSwitchProps) {
 	return (
-		<ReactAriaSwitch
-			{...rest}
-			className={clsx(styles.root, { [styles.small]: size === "small" })}
-		>
+		<ReactAriaSwitch {...rest} className={styles.root}>
 			<div className={styles.indicator} />
 			{children}
 		</ReactAriaSwitch>

app/features/build-analyzer/routes/analyzer.tsx

@@ -1314,7 +1314,6 @@ function EffectsSelector({
 											? handleAddEffect(effect.type)
 											: handleRemoveEffect(effect.type)
 									}
-									size="small"
 								/>
 							)}
 						</div>

app/features/calendar/components/BracketProgressionSelector.tsx

@@ -475,7 +475,6 @@ function TournamentFormatBracketSelector({
 						<div className="stack sm horizontal mt-1 mb-2">
 							<SendouSwitch
 								id={createId("follow-up-bracket")}
-								size="small"
 								isSelected={Boolean(bracket.sources)}
 								onChange={(isSelected) =>
 									updateBracket({

app/features/calendar/routes/calendar.new.tsx

@@ -818,7 +818,6 @@ function RankedToggle() {
 			<SendouSwitch
 				name="isRanked"
 				id={id}
-				size="small"
 				isSelected={isRanked}
 				onChange={setIsRanked}
 			/>
@@ -847,7 +846,6 @@ function EnableNoScreenToggle() {
 			<SendouSwitch
 				name="enableNoScreenToggle"
 				id={id}
-				size="small"
 				isSelected={enableNoScreen}
 				onChange={setEnableNoScreen}
 			/>
@@ -873,7 +871,6 @@ function EnableSubsToggle() {
 			<SendouSwitch
 				name="enableSubs"
 				id={id}
-				size="small"
 				isSelected={enableSubs}
 				onChange={setEnableSubs}
 			/>
@@ -900,7 +897,6 @@ function AutonomousSubsToggle() {
 			<SendouSwitch
 				name="autonomousSubs"
 				id={id}
-				size="small"
 				isSelected={autonomousSubs}
 				onChange={setAutonomousSubs}
 			/>
@@ -927,7 +923,6 @@ function RequireIGNToggle() {
 			<SendouSwitch
 				name="requireInGameNames"
 				id={id}
-				size="small"
 				isSelected={requireIGNs}
 				onChange={setRequireIGNs}
 			/>
@@ -957,7 +952,6 @@ function InvitationalToggle({
 			<SendouSwitch
 				name="isInvitational"
 				id={id}
-				size="small"
 				isSelected={isInvitational}
 				onChange={setIsInvitational}
 			/>
@@ -984,7 +978,6 @@ function TestToggle() {
 			<SendouSwitch
 				name="isTest"
 				id={id}
-				size="small"
 				isSelected={isTest}
 				onChange={setIsTest}
 			/>

app/features/components-showcase/routes/components.tsx

@@ -597,7 +597,6 @@ function SelectSection({ id }: { id: string }) {
 
 function SwitchSection({ id }: { id: string }) {
 	const [isOn, setIsOn] = useState(false);
-	const [isSmallOn, setIsSmallOn] = useState(true);
 
 	return (
 		<Section>
@@ -610,16 +609,6 @@ function SwitchSection({ id }: { id: string }) {
 					</SendouSwitch>
 				</ComponentRow>
 
-				<ComponentRow label="Small">
-					<SendouSwitch
-						size="small"
-						isSelected={isSmallOn}
-						onChange={setIsSmallOn}
-					>
-						Small switch
-					</SendouSwitch>
-				</ComponentRow>
-
 				<ComponentRow label="Without Label">
 					<SendouSwitch aria-label="Toggle without label" />
 				</ComponentRow>

app/features/map-list-generator/routes/maps.tsx

@@ -138,11 +138,7 @@ function MapListCreator({ mapPool }: { mapPool: MapPool }) {
 		<div className={styles.mapListCreator}>
 			<div className={styles.toggleContainer}>
 				<Label>{t("common:maps.halfSz")}</Label>
-				<SendouSwitch
-					isSelected={szEveryOther}
-					onChange={setSzEveryOther}
-					size="small"
-				/>
+				<SendouSwitch isSelected={szEveryOther} onChange={setSzEveryOther} />
 			</div>
 			<SendouButton onPress={handleCreateMaplist} isDisabled={disabled}>
 				{t("common:maps.createMapList")}

app/features/tier-list-maker/routes/tier-list-maker.tsx

@@ -195,14 +195,12 @@ function TierListMakerContent() {
 						<SendouSwitch
 							isSelected={canAddDuplicates}
 							onChange={setCanAddDuplicates}
-							size="small"
 						>
 							{t("tier-list-maker:allowDuplicates")}
 						</SendouSwitch>
 						<SendouSwitch
 							isSelected={showTierHeaders}
 							onChange={setShowTierHeaders}
-							size="small"
 						>
 							{t("tier-list-maker:showTierHeaders")}
 						</SendouSwitch>

app/features/tournament-bracket/routes/to.$id.brackets.finalize.tsx

@@ -229,7 +229,6 @@ function NewBadgeReceiversSelector({
 												badgeId: badge.id,
 												userId: member.userId,
 											})}
-											size="small"
 										/>
 										<Avatar user={member} size="xxs" className="mr-2" />
 										{member.username}

app/styles/vars.css

@@ -140,7 +140,6 @@ html {
 	--input-focus-ring: 2px solid var(--color-text-accent);
 	--input-focus-ring-error: 2px solid var(--color-error);
 
-	--toggle-height: 1.5rem;
 	--toggle-height-small: 1.25rem;
 
 	--input-icon-width: 18px;