Migrate "home" from grid-styled (#20209)

frontend/src/metabase/home/containers/ActivityApp.jsx

@@ -13,8 +13,13 @@ import NextStep from "../components/NextStep";
 
 import * as activityActions from "../actions";
 import { getActivity, getRecentViews, getUser } from "../selectors";
-
-import { Box, Flex } from "grid-styled";
+import {
+  ActivityBody,
+  ActivityHeader,
+  ActivityMain,
+  ActivityRoot,
+  ActivitySidebar,
+} from "./ActivityApp.styled";
 
 const mapStateToProps = (state, props) => ({
   activity: getActivity(state),
@@ -46,22 +51,22 @@ export default class ActivityApp extends Component {
 
   render() {
     return (
-      <Box mx={4}>
-        <Box py={3}>
+      <ActivityRoot>
+        <ActivityHeader>
           <Subhead>{t`Activity`}</Subhead>
-        </Box>
-        <Flex>
-          <Box width={2 / 3}>
+        </ActivityHeader>
+        <ActivityBody>
+          <ActivityMain>
             <Card px={1}>
               <Activity {...this.props} />
             </Card>
-          </Box>
-          <Box width={1 / 3}>
+          </ActivityMain>
+          <ActivitySidebar>
             <NextStep />
             <RecentViews {...this.props} />
-          </Box>
-        </Flex>
-      </Box>
+          </ActivitySidebar>
+        </ActivityBody>
+      </ActivityRoot>
     );
   }
 }

frontend/src/metabase/home/containers/ActivityApp.styled.tsx

+import styled from "styled-components";
+
+export const ActivityRoot = styled.div`
+  margin: 0 4rem;
+`;
+
+export const ActivityHeader = styled.div`
+  padding: 2rem 0;
+`;
+
+export const ActivityBody = styled.div`
+  display: flex;
+`;
+
+export const ActivityMain = styled.div`
+  width: 66.66%;
+`;
+
+export const ActivitySidebar = styled.div`
+  width: 33.33%;
+`;

frontend/src/metabase/home/containers/ArchiveApp.jsx

@@ -3,8 +3,6 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 import { t } from "ttag";
 
-import { Box, Flex } from "grid-styled";
-
 import ArchivedItem from "../../components/ArchivedItem";
 import Button from "metabase/core/components/Button";
 import BulkActionBar from "metabase/components/BulkActionBar";
@@ -17,6 +15,14 @@ import Search from "metabase/entities/search";
 import listSelect from "metabase/hoc/ListSelect";
 
 import { getUserIsAdmin } from "metabase/selectors/user";
+import {
+  ArchiveBarContent,
+  ArchiveBarText,
+  ArchiveBody,
+  ArchiveEmptyState,
+  ArchiveHeader,
+  ArchiveRoot,
+} from "./ArchiveApp.styled";
 
 const mapStateToProps = (state, props) => ({
   isAdmin: getUserIsAdmin(state, props),
@@ -43,11 +49,11 @@ export default class ArchiveApp extends Component {
       onToggleSelected,
     } = this.props;
     return (
-      <Box mx={4}>
-        <Box mt={2} py={2}>
+      <ArchiveRoot>
+        <ArchiveHeader>
           <PageHeading>{t`Archive`}</PageHeading>
-        </Box>
-        <Box width={2 / 3} pb={4}>
+        </ArchiveHeader>
+        <ArchiveBody>
           <Card
             style={{
               height: list.length > 0 ? ROW_HEIGHT * list.length : "auto",
@@ -57,7 +63,7 @@ export default class ArchiveApp extends Component {
               <VirtualizedList
                 items={list}
                 rowHeight={ROW_HEIGHT}
-                renderItem={({ item, index }) => (
+                renderItem={({ item }) => (
                   <ArchivedItem
                     type={item.type}
                     name={item.getName()}
@@ -87,20 +93,20 @@ export default class ArchiveApp extends Component {
                 )}
               />
             ) : (
-              <Flex p={5} align="center" justify="center">
+              <ArchiveEmptyState>
                 <h2>{t`Items you archive will appear here.`}</h2>
-              </Flex>
+              </ArchiveEmptyState>
             )}
           </Card>
-        </Box>
+        </ArchiveBody>
         <BulkActionBar showing={selected.length > 0}>
-          <Flex align="center" py={2} px={4}>
+          <ArchiveBarContent>
             <SelectionControls {...this.props} />
             <BulkActionControls {...this.props} />
-            <Box ml="auto">{t`${selected.length} items selected`}</Box>
-          </Flex>
+            <ArchiveBarText>{t`${selected.length} items selected`}</ArchiveBarText>
+          </ArchiveBarContent>
         </BulkActionBar>
-      </Box>
+      </ArchiveRoot>
     );
   }
 }
@@ -134,12 +140,7 @@ const BulkActionControls = ({ selected, reload }) => (
   </span>
 );
 
-const SelectionControls = ({
-  selected,
-  deselected,
-  onSelectAll,
-  onSelectNone,
-}) =>
+const SelectionControls = ({ deselected, onSelectAll, onSelectNone }) =>
   deselected.length === 0 ? (
     <StackedCheckBox checked={true} onChange={onSelectNone} />
   ) : (

frontend/src/metabase/home/containers/ArchiveApp.styled.tsx

+import styled from "styled-components";
+
+export const ArchiveRoot = styled.div`
+  margin: 0 4rem;
+`;
+
+export const ArchiveHeader = styled.div`
+  margin-top: 1rem;
+  padding: 1rem 0;
+`;
+
+export const ArchiveBody = styled.div`
+  width: 66.66%;
+  padding-bottom: 4rem;
+`;
+
+export const ArchiveBarContent = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 1rem 4rem;
+`;
+
+export const ArchiveBarText = styled.div`
+  margin-left: auto;
+`;
+
+export const ArchiveEmptyState = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8rem;
+`;

frontend/src/metabase/home/containers/SearchApp.jsx

@@ -4,8 +4,6 @@ import PropTypes from "prop-types";
 import { jt, t } from "ttag";
 import Link from "metabase/core/components/Link";
 
-import { Box, Flex } from "grid-styled";
-
 import Search from "metabase/entities/search";
 
 import Card from "metabase/components/Card";
@@ -18,8 +16,15 @@ import Icon from "metabase/components/Icon";
 import NoResults from "assets/img/no_results.svg";
 import PaginationControls from "metabase/components/PaginationControls";
 import { usePagination } from "metabase/hooks/use-pagination";
+import {
+  SearchBody,
+  SearchControls,
+  SearchEmptyState,
+  SearchHeader,
+  SearchMain,
+  SearchRoot,
+} from "./SearchApp.styled";
 
-const PAGE_PADDING = [1, 2, 4];
 const PAGE_SIZE = 50;
 
 const SEARCH_FILTERS = [
@@ -90,18 +95,18 @@ export default function SearchApp({ location }) {
   }
 
   return (
-    <Box mx={PAGE_PADDING}>
+    <SearchRoot>
       {location.query.q && (
-        <Flex align="center" py={[2, 3]}>
+        <SearchHeader>
           <Subhead>{jt`Results for "${location.query.q}"`}</Subhead>
-        </Flex>
+        </SearchHeader>
       )}
-      <Box>
+      <div>
         <Search.ListLoader query={query} wrapped>
           {({ list, metadata }) => {
             if (list.length === 0) {
               return (
-                <Box width={2 / 3}>
+                <SearchEmptyState>
                   <Card>
                     <EmptyState
                       title={t`Didn't find anything`}
@@ -109,7 +114,7 @@ export default function SearchApp({ location }) {
                       illustrationElement={<img src={NoResults} />}
                     />
                   </Card>
-                </Box>
+                </SearchEmptyState>
               );
             }
 
@@ -120,8 +125,8 @@ export default function SearchApp({ location }) {
             );
 
             return (
-              <Flex align="top">
-                <Box width={2 / 3}>
+              <SearchBody>
+                <SearchMain>
                   <React.Fragment>
                     <SearchResultSection items={list} />
                     <div className="flex justify-end my2">
@@ -136,8 +141,8 @@ export default function SearchApp({ location }) {
                       />
                     </div>
                   </React.Fragment>
-                </Box>
-                <Box ml={[1, 2]} pt={2} px={2}>
+                </SearchMain>
+                <SearchControls>
                   {filters.length > 0 ? (
                     <Link
                       className="flex align-center"
@@ -173,13 +178,13 @@ export default function SearchApp({ location }) {
                       </Link>
                     );
                   })}
-                </Box>
-              </Flex>
+                </SearchControls>
+              </SearchBody>
             );
           }}
         </Search.ListLoader>
-      </Box>
-    </Box>
+      </div>
+    </SearchRoot>
   );
 }
 

frontend/src/metabase/home/containers/SearchApp.styled.tsx

+import styled from "styled-components";
+import {
+  breakpointMinMedium,
+  breakpointMinSmall,
+} from "metabase/styled-components/theme";
+
+export const SearchRoot = styled.div`
+  margin: 0 0.5rem;
+
+  ${breakpointMinSmall} {
+    margin: 0 1rem;
+  }
+
+  ${breakpointMinMedium} {
+    margin: 0 4rem;
+  }
+`;
+
+export const SearchHeader = styled.div`
+  display: flex;
+  padding: 1rem 0;
+
+  ${breakpointMinSmall} {
+    padding: 2rem 0;
+  }
+`;
+
+export const SearchEmptyState = styled.div`
+  width: 66.66%;
+`;
+
+export const SearchBody = styled.div`
+  display: flex;
+  align-items: start;
+`;
+
+export const SearchMain = styled.div`
+  width: 66.66%;
+`;
+
+export const SearchControls = styled.div`
+  padding: 1rem 1rem 0 1rem;
+  margin-left: 0.5rem;
+
+  ${breakpointMinSmall} {
+    margin-left: 1rem;
+  }
+`;