refactor: migrate filter item and section styles from VE to SCSS + BEM

src/renderer/src/pages/catalogue/filter-item.tsx

@@ -1,5 +1,5 @@
-import { vars } from "@renderer/theme.css";
 import { XIcon } from "@primer/octicons-react";
+import "./filter.scss";
 
 interface FilterItemProps {
   filter: string;
@@ -9,39 +9,13 @@ interface FilterItemProps {
 
 export function FilterItem({ filter, orbColor, onRemove }: FilterItemProps) {
   return (
-    <div
+    <div className="filter-item">
-      style={{
+      <div className="filter-item__orb" style={{ backgroundColor: orbColor }} />
-        display: "flex",
-        alignItems: "center",
-        color: vars.color.body,
-        backgroundColor: vars.color.darkBackground,
-        padding: "6px 12px",
-        borderRadius: 4,
-        border: `solid 1px ${vars.color.border}`,
-        fontSize: 12,
-      }}
-    >
-      <div
-        style={{
-          width: 10,
-          height: 10,
-          backgroundColor: orbColor,
-          borderRadius: "50%",
-          marginRight: 8,
-        }}
-      />
       {filter}
       <button
         type="button"
         onClick={onRemove}
-        style={{
+        className="filter-item__remove-button"
-          color: vars.color.body,
-          marginLeft: 4,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: "pointer",
-        }}
       >
         <XIcon size={13} />
       </button>

src/renderer/src/pages/catalogue/filter-section.tsx

@@ -1,9 +1,8 @@
 import { CheckboxField, TextField } from "@renderer/components";
 import { useFormat } from "@renderer/hooks";
 import { useCallback, useMemo, useState } from "react";
-
+import "./filter.scss";
 import List from "rc-virtual-list";
-import { vars } from "@renderer/theme.css";
 import { useTranslation } from "react-i18next";
 
 export interface FilterSectionProps {
@@ -54,36 +53,18 @@ export function FilterSection({
 
   return (
     <div>
-      <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+      <div className="filter-section__header">
         <div
-          style={{
+          className="filter-section__orb"
-            width: 10,
+          style={{ backgroundColor: color }}
-            height: 10,
-            backgroundColor: color,
-            borderRadius: "50%",
-          }}
         />
-        <h3
+        <h3 className="filter-section__title">{title}</h3>
-          style={{
-            fontSize: 16,
-            fontWeight: 500,
-          }}
-        >
-          {title}
-        </h3>
       </div>
 
       {selectedItemsCount > 0 ? (
         <button
           type="button"
-          style={{
+          className="filter-section__clear-button"
-            fontSize: 12,
-            marginBottom: 12,
-            display: "block",
-            color: vars.color.body,
-            cursor: "pointer",
-            textDecoration: "underline",
-          }}
           onClick={onClear}
         >
           {t("clear_filters", {
@@ -91,7 +72,7 @@ export function FilterSection({
           })}
         </button>
       ) : (
-        <span style={{ fontSize: 12, marginBottom: 12, display: "block" }}>
+        <span className="filter-section__count">
           {t("filter_count", {
             filterCount: formatNumber(items.length),
           })}
@@ -102,7 +83,7 @@ export function FilterSection({
         placeholder={t("search")}
         onChange={(e) => onSearch(e.target.value)}
         value={search}
-        containerProps={{ style: { marginBottom: 16 } }}
+        containerProps={{ className: "filter-section__search" }}
         theme="dark"
       />
 
@@ -122,7 +103,7 @@ export function FilterSection({
         }}
       >
         {(item) => (
-          <div key={item.value} style={{ height: 28, maxHeight: 28 }}>
+          <div key={item.value} className="filter-section__item">
             <CheckboxField
               label={item.label}
               checked={item.checked}

src/renderer/src/pages/catalogue/filter.scss

@@ -0,0 +1,71 @@
+@use "../../scss/globals.scss";
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  color: globals.$body-color;
+  background-color: globals.$dark-background-color;
+  padding: 6px 12px;
+  border-radius: 4px;
+  border: solid 1px globals.$border-color;
+  font-size: 12px;
+
+  &__orb {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-right: 8px;
+  }
+
+  &__remove-button {
+    color: globals.$body-color;
+    margin-left: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+}
+
+.filter-section {
+  &__header {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  &__orb {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+  }
+
+  &__title {
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  &__count {
+    font-size: 12px;
+    margin-bottom: 12px;
+    display: block;
+  }
+
+  &__clear-button {
+    font-size: 12px;
+    margin-bottom: 12px;
+    display: block;
+    color: globals.$body-color;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  &__search {
+    margin-bottom: 16px;
+  }
+
+  &__item {
+    height: 28px;
+    max-height: 28px;
+  }
+}