added contacts section

src/components/ContactsSection/ContactsSection-styled.jsx

@@ -58,15 +58,17 @@ export const Address = styled.address`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
+  align-items: right;
   gap: 5px;
 
   font-style: inherit;
+
 `;
 
 export const Text = styled.p`
   font-size: 17px;
   font-weight: 200;
+  text-align: right;
 `;
 
 export const Link = styled.a`
@@ -76,8 +78,9 @@ export const Link = styled.a`
   border: none;
 
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: right;
+
   gap: 10px;
 
   font-size: 17px;

src/components/ContactsSection/ContactsSection.jsx

@@ -31,7 +31,7 @@ export const ContactsSection = () => {
             <CourtIconSvg>
               <use href={sprite + "#icon-court"}></use>
             </CourtIconSvg>
-            <Address>
+            <Address style={{alignItems: "center"}}>
               <Text>Адреса нашого домашнього корту:</Text>
 
               <Link

src/components/Counter/CounterSection-styled.jsx

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+export const Section = styled.section`
+  background-color: var(--primary-black-color);
+  color: var(--primary-white-color);
+`;
+
+export const Text = styled.p`
+  max-width: 1200px;
+  padding: 24px;
+  margin-left: auto;
+  margin-right: auto;
+
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  gap: 10px;
+`;
+
+export const IconWrap = styled.span`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+`;
+
+export const IconSvg = styled.svg`
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+`;

src/components/Counter/CounterSection.jsx

@@ -0,0 +1,20 @@
+import { IconSvg, IconWrap, Section, Text } from "./CounterSection-styled";
+
+import sprite from "../../sprite.svg";
+
+export const CounterSection = ({ visibleUsers }) => {
+  return (
+    <>
+      <Section>
+        <Text>
+          <IconWrap>
+            <IconSvg>
+              <use href={sprite + "#icon-users"}></use>
+            </IconSvg>
+          </IconWrap>
+          Кількість учасників: {visibleUsers}
+        </Text>
+      </Section>
+    </>
+  );
+};

src/components/Filters/FilterByName.jsx

@@ -16,12 +16,12 @@ export const FilterByName = ({ inputValue, setInputsValue }) => {
   return (
     <Group>
       <Label isFilterFocused={isFilterFocused}>
+        Знайти учасника за іменем
         <IconWrap>
           <IconSvg>
             <use href={sprite + "#icon-search"}></use>
           </IconSvg>
         </IconWrap>
-        Знайти учасника за іменем
       </Label>
 
       <Input

src/components/Filters/FilterSelect.jsx

@@ -1,6 +1,8 @@
 import Select from "react-select";
 import { useState } from "react";
-import { Group, Label } from "./Filters-styled";
+import { Group, IconSvg, IconWrap, Label } from "./Filters-styled";
+
+import sprite from "../../sprite.svg";
 
 export const FilterSelect = ({
   inputValue,
@@ -136,7 +138,14 @@ export const FilterSelect = ({
 
   return (
     <Group>
-      <Label isFilterFocused={isFilterFocused}>{label}</Label>
+      <Label isFilterFocused={isFilterFocused}>
+        {label}
+        <IconWrap>
+          <IconSvg>
+            <use href={sprite + "#icon-list"}></use>
+          </IconSvg>
+        </IconWrap>
+      </Label>
       <Select
         placeholder={placeholder}
         noOptionsMessage={() => "Немає збігів"}

src/components/MembersList/MembersList-styled.jsx

@@ -25,7 +25,7 @@ export const MembersItemLi = styled.li`
 
   &:hover {
     cursor: pointer;
-    background-color: var(--primary-black-color);
+    background-color: var(--primary-grey-color);
     color: var(--primary-white-color);
   }
 `;

src/pages/MembersPage/MembersPage.jsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { MembersList } from "../../components/MembersList/MembersList";
 import { membersApi } from "../../Api/ApiRequest";
 import { MembersFilterBar } from "../../components/Filters/MembersFilterBar";
+import { CounterSection } from "../../components/Counter/CounterSection";
 
 const MembersPage = () => {
   const [membersArray, setMembersArray] = useState([]);
@@ -22,6 +23,7 @@ const MembersPage = () => {
         membersArray={membersArray}
         setVisibleMembersArray={setVisibleMembersArray}
       />
+      <CounterSection visibleUsers={visibleMembersArray.length} />
       <MembersList visibleMembersArray={visibleMembersArray} />
     </>
   );