refactor(view): apply BEM naming in VerticalClusterList component

githru · Sep 10, 2024 · 6aa3a91 · 6aa3a91
1 parent 2328f78
commit 6aa3a91
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/packages/view/src/components/VerticalClusterList/VerticalClusterList.scss b/packages/view/src/components/VerticalClusterList/VerticalClusterList.scss
@@ -3,24 +3,24 @@
 .vertical-cluster-list {
   display: flex;
   flex-direction: column;
-}
-
-.selected__container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  column-gap: 20px;
-  padding: 0 10px 20px;
-  width: 100%;
 
-  & .selected__content {
+  &__header {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    column-gap: 10px;
+    column-gap: 20px;
+    padding: 0 10px 20px;
+    width: 100%;
+
+    & .selected__content {
+      display: flex;
+      align-items: center;
+      column-gap: 10px;
 
-    p {
-      font-size: $font-size-title;
-      font-weight: $font-weight-semibold;
+      p {
+        font-size: $font-size-title;
+        font-weight: $font-weight-semibold;
+      }
     }
   }
 }
diff --git a/packages/view/src/components/VerticalClusterList/VerticalClusterList.tsx b/packages/view/src/components/VerticalClusterList/VerticalClusterList.tsx
@@ -12,7 +12,7 @@ const VerticalClusterList = () => {
   return (
     <div className="vertical-cluster-list">
       {selectedData.length > 0 && (
-        <div className="selected__container">
+        <div className="vertical-cluster-list__header">
           <FilteredAuthors />
           <SelectedClusterGroup />
         </div>