diff --git a/src/containers/SendMessageForm/SendMessageForm.css b/src/containers/SendMessageForm/SendMessageForm.css
index 20e0cc27..e9062c41 100644
--- a/src/containers/SendMessageForm/SendMessageForm.css
+++ b/src/containers/SendMessageForm/SendMessageForm.css
@@ -1,11 +1,82 @@
@import '../../marketplace.css';
.root {
+ position: relative;
+ box-shadow: var(--boxShadowBottomForm);
+
+ @media (--viewportLarge) {
+ box-shadow: none;
+
+ /* Clearfix */
+ width: 100%;
+ overflow: hidden;
+ }
}
.textarea {
- border-bottom-color: var(--attentionColor);
+ @apply --marketplaceH4FontStyles;
+ border-bottom-width: 0;
+
+ /* Avoid text going behind the submit button */
+ padding: 22px 76px 25px 24px;
+
+ margin: 0;
+ max-height: 183px;
+
+ background-color: var(--matterColorLight);
+
+ @media (--viewportMedium) {
+ margin: 0;
+ }
+ @media (--viewportLarge) {
+ padding: 0 0 5px 0;
+ margin: 0;
+ max-height: initial;
+ border-bottom-width: 2px;
+ border-bottom-color: var(--attentionColor);
+ background-color: transparent;
+ }
}
-.submitButton {
+.submitButtonMobile {
+ position: absolute;
+ top: -28px;
+ right: 20px;
+ width: 56px;
+ height: 56px;
+ border: none;
+ padding: 0;
+
+ @media (--viewportLarge) {
+ display: none;
+ }
+}
+
+.fillSuccess {
+ fill: var(--successColor);
+}
+
+.strokeMatter {
+ stroke: var(--matterColor);
+}
+
+.submitButtonDesktop {
+ @apply --marketplaceH5FontStyles;
+ font-weight: var(--fontWeightMedium);
+ display: none;
+
+ float: right;
+ padding: 0 16px;
+ min-height: auto;
+ height: 41px;
+
+ @media (--viewportLarge) {
+ display: inline-block;
+ margin: 17px 0 0 0;
+ width: auto;
+ }
+}
+
+.sendIconDesktop {
+ margin: -3px 5px 0 0;
}
diff --git a/src/containers/SendMessageForm/SendMessageForm.js b/src/containers/SendMessageForm/SendMessageForm.js
index cf40f5d0..3da792eb 100644
--- a/src/containers/SendMessageForm/SendMessageForm.js
+++ b/src/containers/SendMessageForm/SendMessageForm.js
@@ -10,6 +10,59 @@ import css from './SendMessageForm.css';
const BLUR_TIMEOUT_MS = 100;
+const IconSendMessageMobile = () => {
+ return (
+
+ );
+};
+
+const IconSendMessageDesktop = () => {
+ return (
+
+ );
+};
+
class SendMessageFormComponent extends Component {
constructor(props) {
super(props);
@@ -57,13 +110,17 @@ class SendMessageFormComponent extends Component {
onFocus={this.handleFocus}
onBlur={this.handleBlur}
/>
+
+
diff --git a/src/marketplace.css b/src/marketplace.css
index 37204eb3..1bac4dfe 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -63,6 +63,7 @@
--boxShadowListingCard: 0 0 50px 0 rgba(0, 0, 0, 0.1);
--boxShadowNotFoundPageSearch: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
--boxShadowSectionLocationHover: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
+ --boxShadowBottomForm: 0 -2px 4px 0 rgba(0, 0, 0, 0.05);
/* ================ Z-index base levels ================ */