website: small updates (search & update/fixups in docs)

Author: MoOx

website/docs/example.md

@@ -33,6 +33,10 @@ export { app as default } from "./src/App.bs.js";
 
 ## `./src/App.re`
 
+👀 In place of the rudimentary example below, you can directly grab the
+[App.re](https://raw.githubusercontent.com/reasonml-community/reason-react-native/master/reason-react-native-template/template/src/App.re)
+of our template, which will match React Native default _Hello World_!
+
 ```reason
 open ReactNative;
 

website/docs/usage.md

@@ -66,10 +66,10 @@ have to do anything. The plugin will detect `bs-platform` & will handle the
 compilation/watching process for you.
 
 In case you are facing something weird, you can always trigger a cleanup by
-doing `Cmd + Shift + P` and look for `Restart Reason Language Server`.
+doing `Cmd/Ctrl + Shift + P` and look for `Restart Reason Language Server`.
 
 ⛑ _Even if you decide to use Vscode or a smiliar IDE to ease your day to day
-development workflow, you should have a look to CLI workflow so you how it
+development workflow, you should have a look to CLI workflow so you know how it
 works._
 
 ### Compile ReasonML files via CLI

website/src/Consts.re

@@ -89,6 +89,7 @@ let sections = [
       ("Introduction", "docs/"),
       ("Installation", "docs/install/"),
       ("Usage", "docs/usage/"),
+      // ("Style", api ++ "docs/style/"),
       ("Example", "docs/example/"),
       ("Cheatsheet", "docs/cheatsheet/"),
       ("Migration from bs-react-native", "docs/migration/jsx3/"),

website/src/SVGs/Search.svg

@@ -45,7 +45,15 @@ let styles =
           ~color=Consts.Colors.light,
           (),
         ),
-      "search": viewStyle(),
+      "search": viewStyle(~justifyContent=`center, ()),
+      "searchInputWrapper":
+        viewStyle(
+          ~flexDirection=`row,
+          ~backgroundColor="#fff",
+          ~borderRadius=6.,
+          ~alignItems=`center,
+          (),
+        ),
       "links":
         viewStyle(
           ~flexGrow=1.,
@@ -140,19 +148,22 @@ let make = (~currentLocation) => {
            })
          ->React.array}
       </SpacedView>
-      <SpacedView style=styles##search vertical=XS horizontal=XS>
-        <input
-          id="SearchInput"
-          placeholder="Search"
-          style={ReactDOMRe.Style.make(
-            ~fontSize="15px",
-            ~width="120px",
-            ~borderRadius="20px",
-            ~border="0",
-            ~padding="10px 20px",
-            (),
-          )}
-        />
+      <SpacedView vertical=XS horizontal=XS style=styles##search>
+        <SpacedView
+          vertical=XXS horizontal=XS style=styles##searchInputWrapper>
+          <input
+            id="SearchInput"
+            placeholder="Search..."
+            style={ReactDOMRe.Style.make(
+              ~fontSize="16px",
+              ~width="120px",
+              ~border="0",
+              (),
+            )}
+          />
+          <Spacer size=XS />
+          <SVGSearch fill=Predefined.Colors.dark width="18" height="18" />
+        </SpacedView>
       </SpacedView>
       <SpacedView style=styles##icons vertical=XS horizontal=XS>
         {Consts.socialLinks