From d76bfe7dca00f4b9fe375564339efb081d4d77d3 Mon Sep 17 00:00:00 2001 From: b1ek Date: Mon, 8 May 2023 14:14:02 +1000 Subject: [PATCH] refactor styles & icons in Header.jsx --- .../public/images/icons/chat-bubble.svg | 1 + .../public/images/icons/pin.svg | 1 + .../public/images/icons/stats.svg | 1 + .../public/images/icons/user.svg | 1 + .../CardApartament/CardApartament.jsx | 13 +-- .../src/components/Header/Header.jsx | 87 ++++++++++++------- .../src/components/Header/styles/Header.css | 77 ---------------- .../src/components/UI/Icon/SVGIcon.jsx | 12 +++ .../src/components/UI/Icon/index.jsx | 5 ++ 9 files changed, 80 insertions(+), 118 deletions(-) create mode 100644 pairent_frontend_react/public/images/icons/chat-bubble.svg create mode 100644 pairent_frontend_react/public/images/icons/pin.svg create mode 100644 pairent_frontend_react/public/images/icons/stats.svg create mode 100644 pairent_frontend_react/public/images/icons/user.svg delete mode 100644 pairent_frontend_react/src/components/Header/styles/Header.css create mode 100644 pairent_frontend_react/src/components/UI/Icon/SVGIcon.jsx create mode 100644 pairent_frontend_react/src/components/UI/Icon/index.jsx 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