refactoring allStyles styleStyle -> style-style

src/pages/CatalogSpecialists/CatalogSpecialists.jsx

@@ -145,25 +145,25 @@ const CatalogSpecialists = () => {
     }
   ];
   return (
-    <section className="catalogSpecialists">
+    <section className="catalog-specialists">
       <AuthHeader />
-      <div className="container catalogSpecialists__wrapper">
+      <div className="container catalog-specialists__wrapper">
         <ProfileBreadcrumbs
           links={[
             { name: "Главная", link: "/auth" },
             { name: "Свободные разработчики", link: "/" }
           ]}
         />
-        <div className="catalogSpecialists__head">
+        <div className="catalog-specialists__head">
           <h2>Каталог специалистов</h2>
-          <div className="catalogSpecialists__count countInfo">
-            <div className="countInfo__imgWrapper">
+          <div className="catalog-specialists__count count-info">
+            <div className="count-info__imgWrapper">
               <img src={mockWorker} alt="worker" />
             </div>
             <p>🖐 50+ специалистов доступны</p>
           </div>
         </div>
-        <div className="catalogSpecialists__items">
+        <div className="catalog-specialists__items">
           {personalInfoItems.map((item, index) => {
             return (
               <CategoriesItem
@@ -177,14 +177,14 @@ const CatalogSpecialists = () => {
             );
           })}
         </div>
-        <h3 className="catalogSpecialists__searchTitle">
+        <h3 className="catalog-specialists__search-title">
           Найти специалиста по навыкам
         </h3>
-        <div className="catalogSpecialists__searchBlock">
+        <div className="catalog-specialists__search-block">
           <input type="text" />
           <button>Поиск</button>
         </div>
-        <div className="catalogSpecialists__employees">
+        <div className="catalog-specialists__employees">
           {mockPersons.map((person, index) => {
             return (
               <CatalogPersonCard

src/pages/CatalogSpecialists/catalogSpecialists.scss

@@ -1,12 +1,12 @@
-.catalogSpecialists {
+.catalog-specialists {
   background: #f1f1f1;
   height: 100%;
   min-height: 100vh;
   font-family: "LabGrotesque", sans-serif;
 
-   &__wrapper {
-     padding-top: 24px;
-   }
+  &__wrapper {
+    padding-top: 24px;
+  }
 
   &__head {
     display: flex;
@@ -24,7 +24,7 @@
 
   &__count {
     border-radius: 38px;
-    border: 1px solid #E3E3E9;
+    border: 1px solid #e3e3e9;
     padding: 6px 32px 6px 6px;
     width: 100%;
     max-width: 450px;
@@ -40,7 +40,7 @@
     }
   }
 
-  .countInfo {
+  .count-info {
     &__imgWrapper {
       width: 46px;
       height: 46px;
@@ -64,22 +64,22 @@
     margin-bottom: 45px;
   }
 
-  &__searchTitle {
+  &__search-title {
     font-size: 25px;
     line-height: 32px;
     color: #000000;
     margin-bottom: 25px;
   }
 
-  &__searchBlock {
+  &__search-block {
     display: flex;
     justify-content: space-between;
     margin-bottom: 39px;
 
     input {
       border-radius: 5px;
-      border: 0.5px solid #B0BABF;
-      background: #F4F4F4;
+      border: 0.5px solid #b0babf;
+      background: #f4f4f4;
       outline: none;
       height: 50px;
       padding: 0 10px;
@@ -91,7 +91,7 @@
       padding: 9px 36px;
       border-radius: 44px;
       border: none;
-      background-color: #52B709;
+      background-color: #52b709;
       color: white;
       font-size: 16px;
       margin-left: 20px;