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 ================ */