update comparisons page

pairent_frontend_react/src/components/BlockApartment/index.jsx

@@ -26,24 +26,23 @@ const ApartmentAddress = styled.p`
 const TransportSection = styled.div`
     display: flex;
     margin-top: 9px;
+    & p {
+        font-weight: 500;
+        font-size: 15px;
+        color: #A9A9A9;
+    }
 `
 
 const TransportIcon = styled.div`
     display: flex;
     justify-content: space-around;
     align-items: center;
-    width: 96px;
+    width: fit-content;
-    height: 32px;
+    height: 38px;
-    border: 2px solid #A9A9A9;
+    border: 1px solid #A9A9A9;
-    border-radius: 20px;
+    border-radius: 16px;
-
+    margin-right: 8px;
-    margin-left: 9px;
+    padding-right: 8px;
-`
-
-const TransportTime = styled.p`
-    font-weight: 500;
-    font-size: 15px;
-    color: #A9A9A9;
 `
 
 const ButtonContact = styled.button`
@@ -66,11 +65,11 @@ const BlockApartment = function (props) {
             <TransportSection>
                 <TransportIcon>
                     <SVGIcon src='/images/icons/bus.svg' width={20} height={21} />
-                    <TransportTime>{props.results.timeToBus} мин</TransportTime>                      
+                    <p>{props.results.timeToBus} мин</p>                      
                 </TransportIcon>
                 <TransportIcon>
                     <SVGIcon src='/images/icons/train.svg' width={18} height={20} />                 
-                    <TransportTime>{props.results.timeToTrain} мин</TransportTime> 
+                    <p>{props.results.timeToTrain} мин</p> 
                 </TransportIcon>
             </TransportSection>
             <ButtonContact>Показать контакты</ButtonContact>

pairent_frontend_react/src/components/ComparisonsApartamentsList/index.jsx

@@ -64,6 +64,11 @@ const Indicator = styled.p`
     font-size: 16px;
 `
 
+const ColumnAbout = styled.div`
+    width: 20%;
+    text-align: center;
+`
+
 const ComparisonsApartmentsList = () => {
     const [apartmentsComparisons, setApartmentsComparisons] = useState([])
     const [totalPages, setTotalPages] = useState(0);
@@ -115,12 +120,12 @@ const ComparisonsApartmentsList = () => {
                     <AboutTitle>Санузел</AboutTitle>
                 </div>
                 {apartmentsComparisons.map((apartament, index) => 
-                    <div>
+                    <ColumnAbout>
-                        <AboutTitle>{apartament.rooms}</AboutTitle>
+                        <AboutTitle>{apartament.rooms === 0 ? "Гостинка" : (apartament.rooms)}</AboutTitle>
                         <AboutTitle>{apartament.floor} из {apartament.floorHouse}</AboutTitle>
                         <AboutTitle>{apartament.perimetrs} м²</AboutTitle>
                         <Indicator>{apartament.isBathroom ? '✓' : '—'}</Indicator>
-                    </div>
+                    </ColumnAbout>
                 )}
             </AboutSection>
 
@@ -142,7 +147,7 @@ const ComparisonsApartmentsList = () => {
                     <AboutTitle>Свежий ремонт</AboutTitle>
                 </div>
                 {apartmentsComparisons.map((apartament, index) => 
-                    <div>
+                    <ColumnAbout>
                         <Indicator>{apartament.isFurniture ? '✓' : '—'}</Indicator>
                         <Indicator>{apartament.isInternet ? '✓' : '—'}</Indicator>
                         <Indicator>{apartament.isTelevision ? '✓' : '—'}</Indicator>
@@ -152,7 +157,7 @@ const ComparisonsApartmentsList = () => {
                         <Indicator>{apartament.isChild ? '✓' : '—'}</Indicator>
                         <Indicator>{apartament.isAnimal ? '✓' : '—'}</Indicator>
                         <Indicator>{apartament.isFreshRepair ? '✓' : '—'}</Indicator>
-                    </div>
+                    </ColumnAbout>
                 )}
             </AboutSection>
 
@@ -171,14 +176,14 @@ const ComparisonsApartmentsList = () => {
                     <AboutTitle>Охрана или консьерж</AboutTitle>
                 </div>
                 {apartmentsComparisons.map((apartament, index) => 
-                    <div>
+                    <ColumnAbout>
                         <AboutTitle>{apartament.ceilingHeight} м</AboutTitle>
                         <AboutTitle>{apartament.floorHouse}</AboutTitle>
                         <Indicator>{apartament.isElevator ? '✓' : '—'}</Indicator>
                         <Indicator>{apartament.isGarbageChute ? '✓' : '—'}</Indicator>
                         <Indicator>{apartament.isParking ? '✓' : '—'}</Indicator>
                         <Indicator>{apartament.isConcierge ? '✓' : '—'}</Indicator>
-                    </div>
+                    </ColumnAbout>
                 )}
             </AboutSection>
         </>

pairent_frontend_react/src/components/UI/PaginatedTitle/index.jsx

@@ -14,6 +14,13 @@ const TitleSection = styled.section`
 const TitleSectionLeftAndRight = styled.div`
     display: flex;
     align-items: center;
+    & h2 {
+        margin: 0px;
+        padding: 0px;
+        margin-left: 31px;
+        font-size: 24px;
+        color: #222;
+    }
 `;
 
 const ButtonBack = styled.button`
@@ -29,12 +36,6 @@ const ButtonBack = styled.button`
     font-size: 15px;
 `;
 
-const Title = styled.h2`
-    margin-left: 31px;
-    font-size: 24px;
-    color: #222;
-`;
-
 const ButtonPreviousAndNext = styled.button`
     display: flex;
     align-items: center;
@@ -59,7 +60,7 @@ const PaginatedTitle = function ({title, totalPages, page, changePage}) {
                         Вернуться назад
                     </ButtonBack>
                 </Link>
-                <Title>{title}</Title>
+                <h2>{title}</h2>
             </TitleSectionLeftAndRight>
             
             <TitleSectionLeftAndRight>