implement section & apply to all pages

bandprotocol · Aug 16, 2020 · d02ae98 · d02ae98
1 parent d9fe638
commit d02ae98
Show file tree

Hide file tree

Showing 20 changed files with 2,217 additions and 2,144 deletions.
diff --git a/scan/src/App.re b/scan/src/App.re
@@ -18,18 +18,6 @@ module Styles = {
       paddingBottom(`px(20)),
       Media.mobile([paddingBottom(`zero)]),
     ]);
-
-  let bgSearch = isHomePage =>
-    style([
-      Media.mobile([
-        backgroundColor(isHomePage ? Colors.highlightBg : Colors.bg),
-        margin2(~v=`zero, ~h=`px(-15)),
-        position(`relative),
-        zIndex(2),
-        paddingTop(`px(16)),
-        paddingBottom(`px(24)),
-      ]),
-    ]);
 };
 
 [@react.component]
@@ -45,34 +33,32 @@ let make = () => {
 
   <div className=Styles.container>
     <Header />
-    <div className="container">
-      {Media.isMobile()
-         ? <div className={Styles.bgSearch(currentRoute == HomePage)}>
-             <SearchBar />
-           </div>
-         : React.null}
-      <div className=Styles.routeContainer>
-        {switch (currentRoute) {
-         | HomePage => <HomePage />
-         | DataSourceHomePage => <DataSourceHomePage />
-         | DataSourceIndexPage(dataSourceID, hashtag) =>
-           <DataSourceIndexPage dataSourceID={ID.DataSource.ID(dataSourceID)} hashtag />
-         | OracleScriptHomePage => <OracleScriptHomePage />
-         | OracleScriptIndexPage(oracleScriptID, hashtag) =>
-           <OracleScriptIndexPage oracleScriptID={ID.OracleScript.ID(oracleScriptID)} hashtag />
-         | TxHomePage => <TxHomePage />
-         | TxIndexPage(txHash) => <TxIndexPage txHash />
-         | BlockHomePage => <BlockHomePage />
-         | BlockIndexPage(height) => <BlockIndexPage height={ID.Block.ID(height)} />
-         | ValidatorHomePage => <ValidatorHomePage />
-         | ValidatorIndexPage(address, hashtag) => <ValidatorIndexPage address hashtag />
-         | RequestHomePage => <RequestHomePage />
-         | RequestIndexPage(reqID) => <RequestIndexPage reqID={ID.Request.ID(reqID)} />
-         | AccountIndexPage(address, hashtag) => <AccountIndexPage address hashtag />
-         | IBCHomePage => <IBCHomePage />
-         | NotFound => <NotFound />
-         }}
-      </div>
+    {Media.isMobile()
+       ? <Section pt=16 pb=16 bg={currentRoute == HomePage ? Colors.highlightBg : Colors.bg}>
+           <div className=CssHelper.container> <SearchBar /> </div>
+         </Section>
+       : React.null}
+    <div className=Styles.routeContainer>
+      {switch (currentRoute) {
+       | HomePage => <HomePage />
+       | DataSourceHomePage => <DataSourceHomePage />
+       | DataSourceIndexPage(dataSourceID, hashtag) =>
+         <DataSourceIndexPage dataSourceID={ID.DataSource.ID(dataSourceID)} hashtag />
+       | OracleScriptHomePage => <OracleScriptHomePage />
+       | OracleScriptIndexPage(oracleScriptID, hashtag) =>
+         <OracleScriptIndexPage oracleScriptID={ID.OracleScript.ID(oracleScriptID)} hashtag />
+       | TxHomePage => <TxHomePage />
+       | TxIndexPage(txHash) => <TxIndexPage txHash />
+       | BlockHomePage => <BlockHomePage />
+       | BlockIndexPage(height) => <BlockIndexPage height={ID.Block.ID(height)} />
+       | ValidatorHomePage => <ValidatorHomePage />
+       | ValidatorIndexPage(address, hashtag) => <ValidatorIndexPage address hashtag />
+       | RequestHomePage => <RequestHomePage />
+       | RequestIndexPage(reqID) => <RequestIndexPage reqID={ID.Request.ID(reqID)} />
+       | AccountIndexPage(address, hashtag) => <AccountIndexPage address hashtag />
+       | IBCHomePage => <IBCHomePage />
+       | NotFound => <NotFound />
+       }}
     </div>
     <Modal />
   </div>;

diff --git a/scan/src/components/SearchBar.re b/scan/src/components/SearchBar.re
@@ -8,12 +8,7 @@ module Styles = {
       height(`percent(100.)),
       position(`relative),
       marginTop(Spacing.xs),
-      Media.mobile([
-        margin(`zero),
-        display(`flex),
-        padding2(~v=`zero, ~h=`px(10)),
-        maxWidth(`percent(100.)),
-      ]),
+      Media.mobile([margin(`zero), display(`flex), maxWidth(`percent(100.))]),
     ]);
   let searchIcon =
     style([
@@ -53,7 +48,6 @@ module Styles = {
       color(rgba(51, 51, 51, 0.54)),
       cursor(`pointer),
       border(`zero, `solid, white),
-      Media.mobile([right(`px(10))]),
     ]);
 };