diff --git a/src/components/contact/contactForm.intl.json b/src/components/contact/contactForm.intl.json
index 3705e6e..42f9a5f 100644
--- a/src/components/contact/contactForm.intl.json
+++ b/src/components/contact/contactForm.intl.json
@@ -1,7 +1,10 @@
{
- "title": "Contact Us",
+ "title": "Feedback form",
"subject": "Subject",
"email": "E-mail",
"message": "Message",
- "send": "Send"
+ "send": "Send",
+ "philosophicalThought": "Properly formulated question - half of the answer",
+ "disclaimer": "Please formulate your feedback providing as much useful information, as possible to help us understand your problem and solve it",
+ "whichQuestion" : "What are you interested in?"
}
diff --git a/src/components/contact/contactForm.scss b/src/components/contact/contactForm.scss
index 713d93f..adfc8cf 100644
--- a/src/components/contact/contactForm.scss
+++ b/src/components/contact/contactForm.scss
@@ -1,31 +1,52 @@
+@import '~components/ui/colors.scss';
+@import '~components/ui/fonts.scss';
+@import '~components/ui/popup/popup.scss';
+
.contactForm {
}
-.header {
- position: relative;
- margin: -30px;
- margin-bottom: 0;
-
- padding: 10px 10px 0;
- border-bottom: 1px solid #D6D6D6;
- background: #F5F5F5;
-}
-
-.title {
- color: #444;
- font-size: 30px;
- line-height: 68px;
- text-align: center;
-}
-
.close {
+ display: none;
+
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
+.philosophicalThought {
+ font-family: $font-family-title;
+ font-size: 19px;
+ color: $green;
+ text-align: center;
+ margin-bottom: 5px;
+}
+
+.formDisclaimer {
+ font-size: 12px;
+ line-height: 14px;
+ text-align: center;
+ max-width: 400px;
+ margin: 0 auto 10px;
+}
+
+.pairInputRow {
+ display: flex;
+ margin-bottom: 10px;
+}
+
+.pairInput {
+ width: 50%;
+
+ &:first-of-type {
+ margin-right: $popupPadding;
+ }
+}
+
+.formMargin {
+ margin-bottom: 20px;
+}
+
.footer {
- margin: -30px;
margin-top: 0;
}
diff --git a/src/components/ui/dropdown.scss b/src/components/ui/dropdown.scss
new file mode 100644
index 0000000..27ab2cd
--- /dev/null
+++ b/src/components/ui/dropdown.scss
@@ -0,0 +1,67 @@
+@import '~components/ui/colors.scss';
+@import '~components/ui/fonts.scss';
+
+$dropdownPadding: 15px;
+
+@mixin dropdown-theme($themeName, $backgroundColor) {
+ .#{$themeName} {
+ composes: dropdown;
+
+ background-color: $backgroundColor;
+
+ &:hover {
+ background-color: lighter($backgroundColor);
+ }
+
+ &:active { // TODO: +.open, чтобы он был ужатый в раскрытом состоянии
+ background-color: darker($backgroundColor);
+ }
+ }
+}
+
+.dropdown {
+ display: inline-block;
+ box-sizing: border-box;
+ height: 50px;
+ // 28px - ширина иконки при заданном размере шрифта
+ padding: 0 ($dropdownPadding * 2 + 28px) 0 $dropdownPadding;
+ position: relative;
+
+ font-family: $font-family-title;
+ color: $defaultButtonTextColor;
+ font-size: 18px;
+ line-height: 50px;
+ text-decoration: none;
+ cursor: pointer;
+
+ transition: background-color 0.25s;
+
+ &:focus {
+ outline: none;
+ }
+}
+
+.toggleIcon {
+ composes: selecter from './icons.scss';
+
+ position: absolute;
+ right: $dropdownPadding;
+ top: 16px;
+ font-size: 17px;
+ transition: right .3s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint
+
+ .dropdown:hover & {
+ right: $dropdownPadding - 5px;
+ }
+
+ .dropdown:active & { // TODO: + .open, смотри коммент выше
+ right: $dropdownPadding + 5px;
+ }
+}
+
+.block {
+ display: block;
+ width: 100%;
+}
+
+@include dropdown-theme('green', $green);
diff --git a/src/components/ui/form/Dropdown.jsx b/src/components/ui/form/Dropdown.jsx
new file mode 100644
index 0000000..035d7ef
--- /dev/null
+++ b/src/components/ui/form/Dropdown.jsx
@@ -0,0 +1,41 @@
+import React, { PropTypes } from 'react';
+
+import classNames from 'classnames';
+
+import styles from 'components/ui/dropdown.scss';
+
+import FormComponent from './FormComponent';
+
+export default class Dropdown extends FormComponent {
+ static displayName = 'Dropdown';
+
+ static propTypes = {
+ label: PropTypes.oneOfType([
+ PropTypes.shape({
+ id: PropTypes.string
+ }),
+ PropTypes.string
+ ]).isRequired,
+ block: PropTypes.bool,
+ color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet'])
+ };
+
+ render() {
+ const { color = 'green', block } = this.props;
+
+ const props = {
+ ...this.props
+ };
+
+ props.label = this.formatMessage(props.label);
+
+ return (
+
+ {props.label}
+
+
+ );
+ }
+}
diff --git a/src/components/ui/form/index.js b/src/components/ui/form/index.js
index 512d66f..c6e6150 100644
--- a/src/components/ui/form/index.js
+++ b/src/components/ui/form/index.js
@@ -4,6 +4,7 @@ import Checkbox from './Checkbox';
import Button from './Button';
import Form from './Form';
import FormModel from './FormModel';
+import Dropdown from './Dropdown';
export {
Input,
@@ -11,5 +12,6 @@ export {
Button,
Checkbox,
Form,
- FormModel
+ FormModel,
+ Dropdown
};
diff --git a/src/components/ui/popup/PopupStack.jsx b/src/components/ui/popup/PopupStack.jsx
index 1d72239..db31943 100644
--- a/src/components/ui/popup/PopupStack.jsx
+++ b/src/components/ui/popup/PopupStack.jsx
@@ -30,8 +30,10 @@ export class PopupStack extends Component {
return (
-
);
diff --git a/src/components/ui/popup/popup.scss b/src/components/ui/popup/popup.scss
index 45f3138..efc37e7 100644
--- a/src/components/ui/popup/popup.scss
+++ b/src/components/ui/popup/popup.scss
@@ -1,3 +1,8 @@
+@import '~components/ui/colors.scss';
+@import '~components/ui/fonts.scss';
+
+$popupPadding: 20px;
+
.overlay {
position: fixed;
top: 0;
@@ -7,7 +12,7 @@
z-index: 200;
- background: rgba(255, 255, 255, 0.8);
+ background: rgba(#fff, 0.8);
text-align: center;
white-space: nowrap;
@@ -24,18 +29,27 @@
}
}
-.popup {
+.popupWrapper {
+ $padding: 20px;
+ $maxPopupWidth: 500px;
+
display: inline-block;
+ width: 100%;
+ max-width: $maxPopupWidth + $padding * 2;
+ box-sizing: border-box;
+ margin: $padding auto;
+ padding: 0 $padding;
+ vertical-align: middle;
+}
+
+.popup {
white-space: normal;
text-align: left;
- vertical-align: middle;
-
- width: 400px;
- max-width: 90%;
background: #fff;
- padding: 30px;
- box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 0 10px rgba(#000, 0.2);
+
+ color: #666;
:invalid {
button {
@@ -44,3 +58,19 @@
}
}
}
+
+.header {
+ background: $light;
+ padding: 15px $popupPadding;
+ border-bottom: 1px solid #dedede;
+}
+
+.headerTitle {
+ font-size: 20px;
+ font-family: $font-family-title;
+ text-align: center;
+}
+
+.body {
+ padding: $popupPadding;
+}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index e2994ce..006c918 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -63,11 +63,14 @@
"components.auth.resendActivation.sendNewEmail": "Send new E-mail",
"components.auth.resendActivation.specifyYourEmail": "Please, enter an E-mail you've registered with and we will send you new activation code.",
"components.auth.resendActivation.title": "Did not received an E-mail",
+ "components.contact.disclaimer": "Please formulate your feedback providing as much useful information, as possible to help us understand your problem and solve it",
"components.contact.email": "E-mail",
"components.contact.message": "Message",
+ "components.contact.philosophicalThought": "Properly formulated question - half of the answer",
"components.contact.send": "Send",
"components.contact.subject": "Subject",
- "components.contact.title": "Contact Us",
+ "components.contact.title": "Feedback form",
+ "components.contact.whichQuestion": "What are you interested in?",
"components.footerMenu.contactUs": "Contact Us",
"components.footerMenu.rules": "Rules",
"components.langMenu.siteLanguage": "Site language",
diff --git a/src/i18n/ru.json b/src/i18n/ru.json
index 410f978..7a219e4 100644
--- a/src/i18n/ru.json
+++ b/src/i18n/ru.json
@@ -63,11 +63,14 @@
"components.auth.resendActivation.sendNewEmail": "Отправить новое письмо",
"components.auth.resendActivation.specifyYourEmail": "Укажите здесь ваш регистрационный E-mail адрес и мы вышлем на него новое письмо с кодом активации аккаунта",
"components.auth.resendActivation.title": "Не получил письмо",
+ "components.contact.disclaimer": "Пожалуйста, формируйте свои обращения, предоставляя максимум полезной информации, чтобы мы могли как можно быстрее понять вашу проблему и решить её",
"components.contact.email": "E-mail",
"components.contact.message": "Сообщение",
+ "components.contact.philosophicalThought": "Правильно сформулированный вопрос - половина ответа",
"components.contact.send": "Отправить",
"components.contact.subject": "Тема",
- "components.contact.title": "Обратная связь",
+ "components.contact.title": "Форма обратной связи",
+ "components.contact.whichQuestion": "По каком вопросу?",
"components.footerMenu.contactUs": "Обратная связь",
"components.footerMenu.rules": "Правила сайта",
"components.langMenu.siteLanguage": "Язык сайта",
diff --git a/src/icons/webfont/selecter.svg b/src/icons/webfont/selecter.svg
new file mode 100644
index 0000000..504f9d0
--- /dev/null
+++ b/src/icons/webfont/selecter.svg
@@ -0,0 +1,16 @@
+
+