diff --git a/pairent_frontend_react/public/images/icons/chat-bubble.svg b/pairent_frontend_react/public/images/icons/chat-bubble.svg
new file mode 100644
index 0000000..89a2bd1
--- /dev/null
+++ b/pairent_frontend_react/public/images/icons/chat-bubble.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/pairent_frontend_react/public/images/icons/pin.svg b/pairent_frontend_react/public/images/icons/pin.svg
new file mode 100644
index 0000000..590e098
--- /dev/null
+++ b/pairent_frontend_react/public/images/icons/pin.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/pairent_frontend_react/public/images/icons/stats.svg b/pairent_frontend_react/public/images/icons/stats.svg
new file mode 100644
index 0000000..efeaaf7
--- /dev/null
+++ b/pairent_frontend_react/public/images/icons/stats.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/pairent_frontend_react/public/images/icons/user.svg b/pairent_frontend_react/public/images/icons/user.svg
new file mode 100644
index 0000000..7cb0319
--- /dev/null
+++ b/pairent_frontend_react/public/images/icons/user.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/pairent_frontend_react/src/components/CardApartament/CardApartament.jsx b/pairent_frontend_react/src/components/CardApartament/CardApartament.jsx
index fcf714a..f6296f3 100644
--- a/pairent_frontend_react/src/components/CardApartament/CardApartament.jsx
+++ b/pairent_frontend_react/src/components/CardApartament/CardApartament.jsx
@@ -1,5 +1,6 @@
import React from 'react';
import styled from 'styled-components';
+import SVGIcon from '../UI/Icon/SVGIcon';
const ApartmentSection = styled.section`
display: flex;
@@ -55,22 +56,12 @@ const TransportSection = styled.div`
}
`;
-const SVGIcon = styled.div`
- width: ${props => props.width ? props.width : 24}px;
- height: ${props => props.height ? props.height : 24}px;
- background: url(${props => props.src});
- background-repeat: no-repeat;
- background-position: center;
- background-size: contain;
- margin: 0 8px
-`;
-
const AmenitiesIcons = styled.td`
width: fit-content;
padding: 0 5px;
border-right: 1px solid #e1e3e1;
& ${SVGIcon} {
- display:inline-block
+ display:inline-block;
}
`;
diff --git a/pairent_frontend_react/src/components/Header/Header.jsx b/pairent_frontend_react/src/components/Header/Header.jsx
index dff9592..8fadde6 100644
--- a/pairent_frontend_react/src/components/Header/Header.jsx
+++ b/pairent_frontend_react/src/components/Header/Header.jsx
@@ -1,60 +1,87 @@
import React from 'react';
import {Link} from "react-router-dom";
+import styled from 'styled-components';
+import SVGIcon from '../UI/Icon/SVGIcon';
import './styles/Header.css';
+const HeaderElement = styled.header`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 18px 8%;
+`;
+
+const LogoSection = styled.section`
+ display: flex;
+ align-items: center;
+`;
+
+const VerticalLine = styled.div`
+ width: 1px;
+ height: 37px;
+ margin: 0px 17px;
+ background-color: #a9a9a9;
+`;
+
+const LocationButton = styled.button`
+ width: 150px;
+ height: 28px;
+ margin-left: 20px;
+ border-radius: 40px;
+ background-color: #CCC;
+ font-size: 15px;
+ & ${SVGIcon} {
+ margin-left: 0;
+ }
+`;
+
+const PairentLogo = styled.h1`
+ user-select: none;
+`
+
const Header = function () {
return (
-
-
+
+
- 
-
-
- Pairent
-
-
+
+
+
+
+ Pairent
-
+
+
+
+ Владивосток
+
+
+
-
+
);
}
diff --git a/pairent_frontend_react/src/components/Header/styles/Header.css b/pairent_frontend_react/src/components/Header/styles/Header.css
deleted file mode 100644
index 9808f1a..0000000
--- a/pairent_frontend_react/src/components/Header/styles/Header.css
+++ /dev/null
@@ -1,77 +0,0 @@
-header{
- display: flex;
- justify-content: space-around;
- align-items: center;
- margin: 18px 0px 11px 0px;
-}
-
-.logoSection{
- display: flex;
- align-items: center;
-}
-
-/*Логотип*/
-.logoSection img{
- width: 100px;
- height: 32px;
-}
-
-.verticalLine{
- width: 3px;
- height: 37px;
- margin: 0px 17px 0px 17px;
- background-color: #A9A9A9;
-}
-
-/*Название сервиса*/
-.logoSection h1{
- font-weight: 700;
- font-size: 32px;
- color: #222;
-}
-
-/*Кнопка локации*/
-.btnLocation{
- width: 150px;
- height: 28px;
- margin-left: 37px;
- border-radius: 40px;
- background-color: #CCC;
- font-size: 15px;
-}
-
-/*Навигация*/
-nav {
- display: flex;
- align-items: center;
-}
-
-nav div{
- margin-right: 55px;
-}
-
-nav a, svg{
- transition: 0.3s;
- fill: #222;
-}
-
-nav svg:hover{
- fill: #0050A1;
-}
-
-nav a:hover{
- color: #0050A1;
-}
-
-/*Горизонтальная линия под шапкой*/
-.horizontalLine{
- width: 100%;
- height: 1px;
- background-color: #CCC;
-}
-
-/*Личный кабинет*/
-.userIcon{
- border-radius: 20px;
- background-color: #fff;
-}
diff --git a/pairent_frontend_react/src/components/UI/Icon/SVGIcon.jsx b/pairent_frontend_react/src/components/UI/Icon/SVGIcon.jsx
new file mode 100644
index 0000000..9f25629
--- /dev/null
+++ b/pairent_frontend_react/src/components/UI/Icon/SVGIcon.jsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export default styled.div`
+ width: ${props => props.width ? props.width : 24}px;
+ height: ${props => props.height ? props.height : 24}px;
+ background: url(${props => props.src});
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ margin: 0 8px;
+ display: inline-block;
+`;
\ No newline at end of file
diff --git a/pairent_frontend_react/src/components/UI/Icon/index.jsx b/pairent_frontend_react/src/components/UI/Icon/index.jsx
new file mode 100644
index 0000000..112abe6
--- /dev/null
+++ b/pairent_frontend_react/src/components/UI/Icon/index.jsx
@@ -0,0 +1,5 @@
+import SVGIcon from "./SVGIcon";
+
+export default Object.freeze({
+ SVGIcon
+})
\ No newline at end of file