Improve css and remove unused search components (#181)

.changeset/tasty-items-build.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-search": minor
+---
+
+Remove unused preview features and make CSS better

apps/search/src/components/ConfigurationView.tsx

@@ -17,8 +17,7 @@ const useStyles = makeStyles((theme) => ({
     marginTop: 10,
   },
   wrapper: {
-    border: `1px solid ${theme.palette.grey.A100}`,
-    minHeight: "calc(100vh - 100px)",
+    minHeight: "100vh",
     paddingBottom: 50,
   },
   tabs: { marginLeft: 32, marginBottom: 32 },

apps/search/src/pages/search/index.tsx

@@ -1,12 +1,6 @@
 import algoliasearch from "algoliasearch";
-import {
-  InstantSearch,
-  Pagination,
-  Breadcrumb,
-  HierarchicalMenu,
-} from "react-instantsearch-hooks-web";
-import { Card, CardContent, CardHeader, Typography } from "@material-ui/core";
-import { RangeInput } from "react-instantsearch-hooks-web";
+import { InstantSearch, Pagination } from "react-instantsearch-hooks-web";
+import { Card, CardContent, CardHeader, MenuItem, Select } from "@material-ui/core";
 import "instantsearch.css/themes/reset.css";
 import "instantsearch.css/themes/satellite.css";
 import styles from "../../styles/search.module.css";
@@ -18,17 +12,17 @@ import { useRouter } from "next/router";
 import { useAppBridge } from "@saleor/app-sdk/app-bridge";
 import { useConfiguration } from "../../lib/configuration";
 import { useMemo, useState } from "react";
-import { Select, MenuItem } from "@material-ui/core";
 import { useQuery } from "react-query";
 import { SearchAppMainBar } from "../../components/SearchAppMainBar";
 import { AppColumnsLayout } from "../../components/AppColumnsLayout";
 
 const useStyles = makeStyles((theme) => ({
   wrapper: {
-    border: `1px solid ${theme.palette.grey.A100}`,
-    minHeight: "calc(100vh - 100px)",
     paddingBottom: 50,
   },
+  content: {
+    padding: "0 50px",
+  },
 }));
 
 function Search() {
@@ -74,6 +68,7 @@ function Search() {
         <PageTab label={"Preview"} value="search" />
       </PageTabs>
 
+      <div className={classes.content}>
         {displayInterface ? (
           <InstantSearch searchClient={searchClient} indexName={indexName}>
             <AppColumnsLayout variant="1:2">
@@ -95,25 +90,8 @@ function Search() {
                     </Select>
                   </CardContent>
                 </Card>
-
-              <Card>
-                <CardHeader title={"Categories"} />
-                <CardContent>
-                  <HierarchicalMenu
-                    attributes={["categories.lvl0", "categories.lvl1", "categories.lvl1"]}
-                  />
-                </CardContent>
-              </Card>
-
-              <Card>
-                <CardHeader title={"Filters"} />
-                <CardContent>
-                  <RangeInput attribute="grossPrice" />
-                </CardContent>
-              </Card>
               </div>
               <div className={styles.contentWrapper}>
-              <Breadcrumb attributes={["categories.lvl0", "categories.lvl1", "categories.lvl2"]} />
                 <SearchBox />
                 <Hits />
                 <Pagination />
@@ -122,10 +100,11 @@ function Search() {
           </InstantSearch>
         ) : (
           <Card>
-          <CardHeader title="To preview indexes, ensure app is configured" />
+            <CardHeader title="To preview indexes, ensure the App is configured" />
           </Card>
         )}
       </div>
+    </div>
   );
 }
 

apps/search/src/styles/globals.css

@@ -2,7 +2,6 @@ body {
   font-family: Inter, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
     "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   color: #111;
-  padding: 1rem 2rem;
 }
 
 code {