From 595b76e0817d9598b7f09fb19f2cc8ac3e3191cc Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Sat, 19 Jul 2025 18:49:18 +0200
Subject: [PATCH] refactor: settings css BEM

---
 .../SettingsUI.tsx/CustomStatusItem.tsx       | 49 ++++++++------
 .../SettingsUI.tsx/CustomStatusSettings.tsx   |  2 +-
 styles/components/settings.css                | 67 ++++++++++---------
 3 files changed, 62 insertions(+), 56 deletions(-)

diff --git a/components/SettingsUI.tsx/CustomStatusItem.tsx b/components/SettingsUI.tsx/CustomStatusItem.tsx
index e20897e..a189789 100644
--- a/components/SettingsUI.tsx/CustomStatusItem.tsx
+++ b/components/SettingsUI.tsx/CustomStatusItem.tsx
@@ -27,10 +27,10 @@ export const CustomStatusItem: React.FC<Props> = ({
 	return (
 		<div className="custom-status-item">
 			{/* Simple horizontal layout with all inputs in a row */}
-			<div className="custom-status-row">
+			<div className="custom-status-item__row">
 				{/* Icon field - simple text input */}
-				<div className="custom-status-field">
-					<label className="custom-status-label">Icon</label>
+				<div className="custom-status-item__field">
+					<label className="custom-status-item__label">Icon</label>
 					<Input
 						variant="text"
 						value={status.icon}
@@ -38,14 +38,17 @@ export const CustomStatusItem: React.FC<Props> = ({
 							onCustomStatusChange(index, "icon", value || "")
 						}
 						placeholder="📝"
-						className="custom-status-icon-input"
+						className="custom-status-item__input custom-status-item__input--icon"
 					/>
 				</div>
 
 				{/* Name field */}
-				<div className="custom-status-field custom-status-field--name">
-					<label className="custom-status-label">
-						Name <span className="custom-status-required">*</span>
+				<div className="custom-status-item__field custom-status-item__field--name">
+					<label className="custom-status-item__label">
+						Name{" "}
+						<span className="custom-status-item__label--required">
+							*
+						</span>
 					</label>
 					<Input
 						variant="text"
@@ -54,15 +57,17 @@ export const CustomStatusItem: React.FC<Props> = ({
 							onCustomStatusChange(index, "name", value || "")
 						}
 						placeholder="e.g. In Progress"
-						className={`custom-status-name-input ${
-							!isValid ? "custom-status-input--invalid" : ""
+						className={`custom-status-item__input custom-status-item__input--name ${
+							!isValid ? "custom-status-item__input--invalid" : ""
 						}`}
 					/>
 				</div>
 
 				{/* Description field */}
-				<div className="custom-status-field custom-status-field--description">
-					<label className="custom-status-label">Description</label>
+				<div className="custom-status-item__field custom-status-item__field--description">
+					<label className="custom-status-item__label">
+						Description
+					</label>
 					<Input
 						variant="text"
 						value={status.description || ""}
@@ -70,29 +75,29 @@ export const CustomStatusItem: React.FC<Props> = ({
 							onCustomStatusChange(index, "description", value)
 						}
 						placeholder="Optional description"
-						className="custom-status-description-input"
+						className="custom-status-item__input custom-status-item__input--description"
 					/>
 				</div>
 
 				{/* Color picker */}
-				<div className="custom-status-field custom-status-field--color">
-					<label className="custom-status-label">Color</label>
+				<div className="custom-status-item__field custom-status-item__field--color">
+					<label className="custom-status-item__label">Color</label>
 					<Input
 						variant="color"
 						value={status.color || "#888888"}
 						onChange={(value) =>
 							onCustomStatusChange(index, "color", value)
 						}
-						className="custom-status-color-input"
+						className="custom-status-item__input custom-status-item__input--color"
 					/>
 				</div>
 
 				{/* Remove button */}
-				<div className="custom-status-field custom-status-field--actions">
+				<div className="custom-status-item__field custom-status-item__field--actions">
 					<button
 						onClick={() => onCustomStatusRemove(index)}
 						aria-label="Remove status"
-						className="custom-status-remove-btn"
+						className="custom-status-item__remove-btn"
 						title="Remove this status"
 					>
 						×
@@ -101,21 +106,21 @@ export const CustomStatusItem: React.FC<Props> = ({
 			</div>
 
 			{/* Preview row - shows how the status will look */}
-			<div className="custom-status-preview">
+			<div className="custom-status-item__preview">
 				<span
-					className="custom-status-preview-icon"
+					className="custom-status-item__preview-icon"
 					style={{ color: status.color }}
 				>
 					{displayIcon}
 				</span>
 				<span
-					className="custom-status-preview-text"
+					className="custom-status-item__preview-text"
 					style={{ color: status.color }}
 				>
 					{status.name || "Status name"}
 				</span>
 				{status.description && (
-					<span className="custom-status-preview-desc">
+					<span className="custom-status-item__preview-desc">
 						{status.description}
 					</span>
 				)}
@@ -123,7 +128,7 @@ export const CustomStatusItem: React.FC<Props> = ({
 
 			{/* Validation message */}
 			{!isValid && (
-				<div className="custom-status-error">
+				<div className="custom-status-item__error">
 					Please enter a status name
 				</div>
 			)}
diff --git a/components/SettingsUI.tsx/CustomStatusSettings.tsx b/components/SettingsUI.tsx/CustomStatusSettings.tsx
index 9f9c93e..5168fd8 100644
--- a/components/SettingsUI.tsx/CustomStatusSettings.tsx
+++ b/components/SettingsUI.tsx/CustomStatusSettings.tsx
@@ -69,7 +69,7 @@ export const CustomStatusSettings: React.FC<Props> = ({
 			>
 				<div className="custom-status-list">
 					{settings.customStatuses.length === 0 ? (
-						<div className="custom-status-empty">
+						<div className="custom-status-list__empty">
 							<p>
 								No custom statuses yet. Click "Add Status" below
 								to create your first one.
diff --git a/styles/components/settings.css b/styles/components/settings.css
index 0546d1f..6894e8a 100644
--- a/styles/components/settings.css
+++ b/styles/components/settings.css
@@ -46,7 +46,7 @@
 	gap: var(--size-2-1);
 }
 
-/* Custom Status Item - KISS Design */
+/* Custom Status Item - BEM Methodology */
 .custom-status-item {
 	background: var(--background-secondary);
 	border: 1px solid var(--background-modifier-border);
@@ -60,73 +60,73 @@
 	border-color: var(--interactive-hover);
 }
 
-/* Main input row - horizontal layout */
-.custom-status-row {
+.custom-status-item__row {
 	display: flex;
 	align-items: end;
 	gap: var(--size-4-2);
 	margin-bottom: var(--size-4-2);
 }
 
-/* Individual field containers */
-.custom-status-field {
+.custom-status-item__field {
 	display: flex;
 	flex-direction: column;
 	gap: var(--size-2-1);
 }
 
-.custom-status-field--name {
+.custom-status-item__field--name {
 	flex: 2;
 	min-width: 120px;
 }
 
-.custom-status-field--description {
+.custom-status-item__field--description {
 	flex: 2;
 	min-width: 120px;
 }
 
-.custom-status-field--color {
+.custom-status-item__field--color {
 	flex: 0 0 auto;
 }
 
-.custom-status-field--actions {
+.custom-status-item__field--actions {
 	flex: 0 0 auto;
 	padding-top: var(--size-4-1);
 }
 
-/* Labels */
-.custom-status-label {
+.custom-status-item__label {
 	font-size: var(--font-ui-smaller);
 	font-weight: var(--font-medium);
 	color: var(--text-muted);
 	margin-bottom: var(--size-2-1);
 }
 
-.custom-status-required {
+.custom-status-item__label--required {
 	color: var(--text-error);
 }
 
-/* Input styling */
-.custom-status-icon-input {
+.custom-status-item__input {
+	/* Base input styles handled by Input component */
+}
+
+.custom-status-item__input--icon {
 	width: 50px !important;
 	text-align: center;
 	font-size: 1.2em;
 }
 
-.custom-status-name-input {
+.custom-status-item__input--name {
 	font-weight: var(--font-medium);
 }
 
-.custom-status-name-input.custom-status-input--invalid {
+.custom-status-item__input--name.custom-status-item__input--invalid {
 	border-color: var(--text-error) !important;
 	background: var(--background-modifier-error) !important;
 }
 
-.custom-status-description-input {
+.custom-status-item__input--description {
 	color: var(--text-muted);
 }
 
-.custom-status-color-input {
+.custom-status-item__input--color {
 	width: 40px !important;
 	height: 32px !important;
 	border-radius: var(--radius-s);
@@ -134,12 +134,11 @@
 	border: 2px solid var(--background-modifier-border) !important;
 }
 
-.custom-status-color-input:hover {
+.custom-status-item__input--color:hover {
 	border-color: var(--interactive-hover) !important;
 }
 
-/* Remove button */
-.custom-status-remove-btn {
+.custom-status-item__remove-btn {
 	width: 32px;
 	height: 32px;
 	border-radius: var(--radius-s);
@@ -152,13 +151,12 @@
 	transition: all var(--anim-duration-fast) ease;
 }
 
-.custom-status-remove-btn:hover {
+.custom-status-item__remove-btn:hover {
 	background: var(--text-error);
 	transform: scale(1.05);
 }
 
-/* Preview section */
-.custom-status-preview {
+.custom-status-item__preview {
 	display: flex;
 	align-items: center;
 	gap: var(--size-2-2);
@@ -169,27 +167,26 @@
 	font-size: var(--font-ui-small);
 }
 
-.custom-status-preview-icon {
+.custom-status-item__preview-icon {
 	font-size: 1.1em;
 	min-width: 20px;
 	text-align: center;
 }
 
-.custom-status-preview-text {
+.custom-status-item__preview-text {
 	font-weight: var(--font-medium);
 }
 
-.custom-status-preview-desc {
+.custom-status-item__preview-desc {
 	color: var(--text-muted);
 	font-style: italic;
 }
 
-.custom-status-preview-desc::before {
+.custom-status-item__preview-desc::before {
 	content: "— ";
 }
 
-/* Error message */
-.custom-status-error {
+.custom-status-item__error {
 	color: var(--text-error);
 	font-size: var(--font-ui-smaller);
 	margin-top: var(--size-2-1);
@@ -199,8 +196,12 @@
 	border-left: 3px solid var(--text-error);
 }
 
-/* Empty state */
-.custom-status-empty {
+/* Custom Status List - BEM */
+.custom-status-list {
+	/* Container for multiple custom status items */
+}
+
+.custom-status-list__empty {
 	text-align: center;
 	padding: var(--size-4-4) var(--size-4-2);
 	color: var(--text-muted);
@@ -210,7 +211,7 @@
 	background: var(--background-primary-alt);
 }
 
-.custom-status-empty p {
+.custom-status-list__empty p {
 	margin: 0;
 }