diff --git a/package-lock.json b/package-lock.json index 6cfca7d..086b270 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12044,6 +12044,11 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", "dev": true }, + "typeface-pt-sans": { + "version": "0.0.54", + "resolved": "https://registry.npmjs.org/typeface-pt-sans/-/typeface-pt-sans-0.0.54.tgz", + "integrity": "sha512-uvf3OIiTRXBly8iXD09iNZcLndJ89iGCyzWh4YzxdL+OMXPZxROupW8OR4JYo1RRfhzCdvebE6W/KrKDnAbdmw==" + }, "ua-parser-js": { "version": "0.7.18", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz", diff --git a/package.json b/package.json index 21e8b89..5f1590e 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,7 @@ "scrypt": "^6.0.3", "styled-components": "^3.2.6", "styled-theming": "^2.2.0", + "typeface-pt-sans": "0.0.54", "webpack-git-hash": "^1.0.2" }, "flow-coverage-report": { diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index e55c7d9..a3f4621 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/src/components/panels/EditorPanel.jsx @@ -73,7 +73,7 @@ class Component extends React.PureComponent {
{ this.panel = el; }}> -
+
-
- - +
+ + + +
@@ -127,7 +133,7 @@ class Component extends React.PureComponent { className="highlighted cancel" onClick={this.props.stopEditing} > - ОТМЕНА +
diff --git a/src/components/router/RouterDialog.jsx b/src/components/router/RouterDialog.jsx index 8c9ac8d..96986c1 100644 --- a/src/components/router/RouterDialog.jsx +++ b/src/components/router/RouterDialog.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Icon } from '$components/panels/Icon'; type Props = { routerCancel: Function, @@ -9,8 +10,10 @@ type Props = { const noPoints = ({ routerCancel }: Props) => (
-
Укажите на карте первую точку маршрута
-
Путь прокладывается по улицам, тротуарам и тропинкам
+ +
+ Укажите первую точку на карте +
@@ -23,8 +26,8 @@ const noPoints = ({ routerCancel }: Props) => ( const firstPoint = ({ routerCancel }: Props) => (
-
Укажите на карте конечную точку маршрута
-
Вы сможете добавить уточняющие точки
+ +
Теперь - следующую
@@ -36,9 +39,9 @@ const firstPoint = ({ routerCancel }: Props) => ( const draggablePoints = ({ routerCancel, routerSubmit }: Props) => (
-
-
Продолжите маршрут, щелкая по карте
-
Потяните линию, чтобы указать промежуточные точки
+
+ +
Продолжайте маршрут
diff --git a/src/components/trash/TrashDialog.jsx b/src/components/trash/TrashDialog.jsx index 6360c5b..a5ef2fa 100644 --- a/src/components/trash/TrashDialog.jsx +++ b/src/components/trash/TrashDialog.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Icon } from '$components/panels/Icon'; type Props = { clearPoly: Function, @@ -12,18 +13,19 @@ export const TrashDialog = ({ }: Props) => (
-
Уверены?
-
Мы все удалим
+
Уверены?
-
-
- Стикеры -
-
- Маршрут -
-
- Очистить +
+
+
+ Маршрут +
+
+ Стикеры +
+
+ Удалить все +
Отмена diff --git a/src/components/user/GuestButton.jsx b/src/components/user/GuestButton.jsx index 51cfd96..123c67c 100644 --- a/src/components/user/GuestButton.jsx +++ b/src/components/user/GuestButton.jsx @@ -1,16 +1,18 @@ // @flow import React from 'react'; +import { Icon } from '$components/panels/Icon'; type Props = { onClick: Function, } export const GuestButton = ({ onClick }: Props) => ( -
+
diff --git a/src/index.html b/src/index.html index 33c5525..cf48544 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - + @ORCHID diff --git a/src/index.js b/src/index.js index 3017bf0..f46e540 100644 --- a/src/index.js +++ b/src/index.js @@ -4,7 +4,8 @@ import ReactDOM from 'react-dom'; import { App } from '$containers/App'; import '$styles/main.less'; -import 'raleway-cyrillic/raleway.css'; +// import 'raleway-cyrillic/raleway.css'; +// import 'typeface-pt-sans'; import { Provider } from 'react-redux'; // import { ConnectedRouter } from 'react-router-redux'; diff --git a/src/sprites/icon.svg b/src/sprites/icon.svg index 7dfdb90..1c79765 100644 --- a/src/sprites/icon.svg +++ b/src/sprites/icon.svg @@ -1,4 +1,4 @@ - + @@ -139,7 +139,7 @@ - + @@ -198,13 +198,103 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sprites/icons.svg b/src/sprites/icons.svg index 70e3da0..c3246c2 100644 --- a/src/sprites/icons.svg +++ b/src/sprites/icons.svg @@ -1,70 +1,80 @@ - - - - - - - - - - - - - - - - - + + + + + + + + + - - - - - - - - - - - - - - - - - + + + + + + + + + - - - - - + + + + + - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - diff --git a/src/styles/button.less b/src/styles/button.less index e1e2c14..cdbc38b 100644 --- a/src/styles/button.less +++ b/src/styles/button.less @@ -4,29 +4,35 @@ height: 18px; line-height: 1em; border-radius: 2px; - font-family: sans-serif; - font-size: 14px; + font-family: inherit; + font-size: 1em; display: inline-flex; align-items: center; cursor: pointer; user-select: none; box-shadow: inset rgba(100,100,100, 0.3) 1px 0, inset rgba(0,0,0, 0.1) -1px 0; color: white; + font-weight: 200; &.primary { background: #3c78db; + color: white; } &.danger { background: #ed2f3b; + color: white; } &.success { background: #17bf6d; + color: white; } } .button-group { + display: flex; + .button { border-radius: 0; margin: 0; diff --git a/src/styles/colors.less b/src/styles/colors.less index 0759894..3a3a813 100644 --- a/src/styles/colors.less +++ b/src/styles/colors.less @@ -14,3 +14,8 @@ @red_primary: #ff7034; @red_secondary: #ff3344; + +@panel_radius: 0; + +@color_primary: #4597d0; +@color_success: #7cd766; diff --git a/src/styles/main.less b/src/styles/main.less index 2725518..70fbcd9 100644 --- a/src/styles/main.less +++ b/src/styles/main.less @@ -10,23 +10,36 @@ @import 'save.less'; body { - font-family: 'Raleway', sans-serif; - font-size: 14px; + font-family: 'Rubik', sans-serif; + font-size: 15px; + // letter-spacing: 0.4px; padding: 0; } .gray { - opacity: 0.75; + opacity: 0.5; } .big { - font-size: 14px; + font-size: 1em; +} + +.upper { + text-transform: uppercase; } .small { - font-size: 12px; + font-size: 0.9em; } .white { color: white; } + +.success { + color: @color_success; +} + +.primary { + color: @color_primary; +} diff --git a/src/styles/map.less b/src/styles/map.less index d6b1848..2d0122b 100644 --- a/src/styles/map.less +++ b/src/styles/map.less @@ -85,18 +85,18 @@ margin-top: -2px; outline: none; z-index: 10001; - background: @blue_secondary; + background: @red_secondary; &:after { content: ' '; - box-shadow: 0 0 0 3px @blue_secondary; - background: @blue_primary; + box-shadow: 0 0 0 3px @red_secondary; + background: white; border-radius: 8px; width: 8px; height: 8px; position: absolute; left: 6px; - top: -2px; + top: -3px; } &:before { @@ -104,9 +104,9 @@ display: block; width: 3px; height: 20px; - background: @blue_secondary; - left: 9px; - top: -8px; + background: @red_secondary; + left: 8.5px; + top: -9px; position: absolute; } } diff --git a/src/styles/panel.less b/src/styles/panel.less index 810880d..6b7753b 100644 --- a/src/styles/panel.less +++ b/src/styles/panel.less @@ -1,10 +1,14 @@ .control-bar { background: @bar_background; - border-radius: 4px; + border-radius: @panel_radius; display: flex; box-shadow: @bar_shadow; } +.control-bar-padded { + padding: 0 5px; +} + .control-dist { background: #222222; padding: 0 10px; @@ -78,11 +82,11 @@ } &:first-child { - border-radius: 4px 0 0 4px; + border-radius: @panel_radius 0 0 @panel_radius; } &:last-child { - border-radius: 0 4px 4px 0; + border-radius: 0 @panel_radius @panel_radius 0; } &.active { @@ -92,6 +96,12 @@ } } + &.disabled { + svg { + fill: #999999; + } + } + &.highlighted { background: #555555; } @@ -151,13 +161,29 @@ // width: 500px; padding: 12px; font-weight: 200; - font-size: 14px; + font-size: 1em; display: flex; } .helper__text { width: 100%; + display: flex; + align-items: center; + + svg { + fill: white; + width: 24px; + margin-right: 6px; + } + + &.success { + color: @color_success; + + svg { + fill: @color_success; + } + } } .helper__buttons { diff --git a/src/styles/user-button.less b/src/styles/user-button.less index ca74703..3e61d2d 100644 --- a/src/styles/user-button.less +++ b/src/styles/user-button.less @@ -6,7 +6,7 @@ } } .user-bar-guest { - width: 168px; + // width: 168px; } .user-button {