refactor: apply BEM naming in FilteredAuthors component

githru · Sep 9, 2024 · a7658bb · a7658bb
1 parent b41eacf
commit a7658bb
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss b/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss
@@ -1,8 +1,19 @@
 @import "styles/app";
 
-.selected__author {
+.filtered-authors {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 5px;
+  column-gap: 10px;
+
+  .filtered-authors__label {
+    font-size: $font-size-title;
+    font-weight: $font-weight-semibold;
+  }
+
+  .filtered-authors__author {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 5px;
+  }
 }
diff --git a/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx b/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx
@@ -14,9 +14,9 @@ const FilteredAuthors = () => {
   const addedAuthors = new Set();
 
   return (
-    <div className="selected">
-      <p>Authors:</p>
-      <div className="selected__author">
+    <div className="filtered-authors">
+      <p className="filtered-authors__label">Authors:</p>
+      <div className="filtered-authors__author">
         {authSrcMap &&
           selectedClusters.map((selectedCluster) => {
             return selectedCluster.summary.authorNames.map((authorArray: string[]) => {