Migrate pulse from grid-styled (#20213)

frontend/src/metabase/pulse/components/PulseEdit.jsx

 /* eslint-disable react/prop-types */
 import React, { Component } from "react";
-import { Box, Flex } from "grid-styled";
 import PropTypes from "prop-types";
 import { t, jt, ngettext, msgid } from "ttag";
 
@@ -29,6 +28,7 @@ import * as Urls from "metabase/lib/urls";
 import Collections from "metabase/entities/collections";
 
 import cx from "classnames";
+import { PulseHeader, PulseHeaderContent } from "./PulseEdit.styled";
 
 @Collections.load({
   id: (state, { pulse, initialCollectionId }) =>
@@ -174,20 +174,13 @@ export default class PulseEdit extends Component {
           </ModalWithTrigger>
         </div>
         <div className="PulseEdit-content pt2 pb4">
-          <Flex
-            bg={color("bg-medium")}
-            p={2}
-            my={3}
-            align="top"
-            style={{ borderRadius: 8 }}
-            className="hover-parent hover--visibility"
-          >
+          <PulseHeader className="hover-parent hover--visibility">
             <Icon name="warning" color={color("warning")} size={24} mr={1} />
-            <Box ml={1}>
+            <PulseHeaderContent>
               <Subhead>{t`Pulses are being phased out`}</Subhead>
               <Text>{jt`You can now set up ${link} instead. We'll remove Pulses in a future release, and help you migrate any that you still have.`}</Text>
-            </Box>
-          </Flex>
+            </PulseHeaderContent>
+          </PulseHeader>
 
           <PulseEditName {...this.props} setPulse={this.setPulse} />
           <PulseEditCollection {...this.props} setPulse={this.setPulse} />

frontend/src/metabase/pulse/components/PulseEdit.styled.tsx

+import styled from "styled-components";
+import { color } from "metabase/lib/colors";
+
+export const PulseHeader = styled.div`
+  display: flex;
+  margin: 2rem 0;
+  padding: 1rem;
+  align-items: start;
+  border-radius: 0.5rem;
+  background-color: ${color("bg-medium")};
+`;
+
+export const PulseHeaderContent = styled.div`
+  margin-left: 0.5rem;
+`;

frontend/src/metabase/pulse/components/PulseEditCollection.jsx

 /* eslint-disable react/prop-types */
 import React from "react";
-import { Box } from "grid-styled";
 import { t } from "ttag";
 
 import CollectionSelect from "metabase/containers/CollectionSelect";
+import { CollectionSelectContainer } from "./PulseEditCollection.styled";
 
 export default class PulseEditCollection extends React.Component {
   render() {
     const { pulse, setPulse } = this.props;
     return (
-      <Box>
+      <div>
         <h2>{t`Which collection should this pulse live in?`}</h2>
 
-        <Box my={2} width={400}>
+        <CollectionSelectContainer>
           <CollectionSelect
             value={pulse.collection_id}
             onChange={collection_id =>
@@ -22,8 +22,8 @@ export default class PulseEditCollection extends React.Component {
               })
             }
           />
-        </Box>
-      </Box>
+        </CollectionSelectContainer>
+      </div>
     );
   }
 }

frontend/src/metabase/pulse/components/PulseEditCollection.styled.tsx

+import styled from "styled-components";
+
+export const CollectionSelectContainer = styled.div`
+  margin: 1rem 0;
+  width: 400px;
+`;