diff --git a/website/layout/DocsLayout.js b/website/layout/DocsLayout.js index 165c48005..86e97cfb4 100644 --- a/website/layout/DocsLayout.js +++ b/website/layout/DocsLayout.js @@ -48,6 +48,15 @@ var DocsLayout = React.createClass({ {metadata.previous && ← Prev} {metadata.next && Next →} +
+
+

+ We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you! +

+
+ Take Survey +
+
diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css index fded82557..b657d2ab8 100644 --- a/website/src/react-native/css/react-native.css +++ b/website/src/react-native/css/react-native.css @@ -1256,12 +1256,48 @@ div[data-twttr-id] iframe { background-color: hsl(198, 100%, 94%); } +.survey { + padding: 10px; + padding-top: 0; + background-color: rgba(5, 165, 209, 0.05); + border: 2px solid #05A5D1; + position: relative; +} + +.survey-image { + position: absolute; + top: 10px; + height: 83px; + width: 120px; + background-image: url('../img/survey.png'); + background-size: 272px 198px; + background-position: -8px -8px; +} + +.survey p { + margin-left: 130px; +} + +.survey .button { + font-size: 24px; + background: #05A5D1; + color: #fafafa; +} + @media only screen and (max-device-width: 1024px) { #content { display: inline; } + .survey-image { + position: static; + margin: 10px auto; + } + .survey p { + margin-left: 0px; + } + .container { min-width: 0; overflow: auto; diff --git a/website/src/react-native/img/survey.png b/website/src/react-native/img/survey.png new file mode 100644 index 000000000..8baf2fa31 Binary files /dev/null and b/website/src/react-native/img/survey.png differ