From 1e03e23805c6ce3a7b3bcfd373aafa3f774446c8 Mon Sep 17 00:00:00 2001
From: jschlinger <johanna.schlinger@fau.de>
Date: Tue, 17 Sep 2024 14:44:53 +0200
Subject: [PATCH] exchange css selectors for bem named classes

---
 src/components/ColorPicker/ColorPicker.scss | 15 ++++++++-------
 src/components/ColorPicker/ColorPicker.tsx  |  7 ++++---
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/ColorPicker/ColorPicker.scss b/src/components/ColorPicker/ColorPicker.scss
index cf1383ddf..968e5b850 100644
--- a/src/components/ColorPicker/ColorPicker.scss
+++ b/src/components/ColorPicker/ColorPicker.scss
@@ -14,12 +14,12 @@
   margin-top: auto;
   border-radius: $rounded--full;
 
-  > li {
+  &__item {
     display: flex;
     justify-content: center;
     align-items: center;
 
-    > button {
+    &__button {
       cursor: pointer;
       border: none;
       background: none;
@@ -44,7 +44,6 @@
   }
 
   > ul > li {
-    padding: 0;
   }
 }
 
@@ -52,10 +51,12 @@
   .color-picker {
     background-color: $navy--600;
 
-    > li > button {
-      &:focus-visible {
-        border-radius: $rounded--full;
-        outline: none;
+    &__item {
+      &__button {
+        &:focus-visible {
+          border-radius: $rounded--full;
+          outline: none;
+        }
       }
     }
   }
diff --git a/src/components/ColorPicker/ColorPicker.tsx b/src/components/ColorPicker/ColorPicker.tsx
index 33be2a553..1c3b3eb99 100644
--- a/src/components/ColorPicker/ColorPicker.tsx
+++ b/src/components/ColorPicker/ColorPicker.tsx
@@ -37,7 +37,7 @@ export const ColorPicker = (props: ColorPickerProps) => {
   return (
     <ReactFocusLock autoFocus={false} className="fix-focus-lock-placement">
       <ul className="color-picker">
-        <li className={getColorClassName(props.color)}>
+        <li className={`${getColorClassName(props.color)} color-picker__item`}>
           <button
             id={primColorAnchor}
             aria-label={formatColorName(props.color)}
@@ -46,6 +46,7 @@ export const ColorPicker = (props: ColorPickerProps) => {
               props.onClose?.();
               dispatch(Actions.editColumn(props.id, {name: props.name, color: props.color, index: props.index, visible: props.visible}));
             }}
+            className="color-picker__item__button"
           >
             <div className="column__header-color-option column__header-color-option--selected" />
           </button>
@@ -54,7 +55,7 @@ export const ColorPicker = (props: ColorPickerProps) => {
         {colorsWithoutSelectedColor.map((item) => {
           const anchor = uniqueId(`color-picker-${item.toString()}`);
           return (
-            <li className={getColorClassName(item)}>
+            <li className={`${getColorClassName(item)} color-picker__item`}>
               <button
                 id={anchor}
                 aria-label={formatColorName(item)}
@@ -63,7 +64,7 @@ export const ColorPicker = (props: ColorPickerProps) => {
                   props.onClose?.();
                   dispatch(Actions.editColumn(props.id, {name: props.name, color: item, index: props.index, visible: props.visible}));
                 }}
-                className={item.toString()}
+                className={`${item.toString()} color-picker__item__button`}
               >
                 <div className={`column__header-color-option column__header-color-option--${item.toString()}`} />
               </button>