Visually differentiate basic and custom actions (#28544)

frontend/src/metabase/models/components/ModelDetailPage/ModelActionDetails/ModelActionListItem.styled.tsx

 import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 import Button from "metabase/core/components/Button";
 import Link from "metabase/core/components/Link";
 import Icon from "metabase/components/Icon";
@@ -47,23 +48,26 @@ export const MenuIcon = styled(Icon)`
   }
 `;
 
-export const ActionCard = styled.div`
-  display: block;
+export const ActionCardContainer = styled.div`
   position: relative;
+  margin-top: 0.75rem;
+`;
 
+const baseActionCardStyles = css`
   padding: 1rem;
-  margin-top: 0.75rem;
   border-radius: 6px;
-
-  color: ${color("text-white")};
-  background-color: ${color("text-dark")};
 `;
 
 export const CodeBlock = styled.pre`
+  ${baseActionCardStyles}
+
   font-family: Monaco, monospace;
   font-size: 0.7rem;
   white-space: pre-wrap;
   margin: 0;
+
+  color: ${color("text-white")};
+  background-color: ${color("text-dark")};
 `;
 
 export const ActionRunButtonContainer = styled.div`
@@ -78,13 +82,13 @@ export const ActionRunButton = styled(Button)`
 `;
 
 export const ImplicitActionCardContentRoot = styled.div`
+  ${baseActionCardStyles};
+
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-`;
 
-export const ImplicitActionMessage = styled.span`
-  display: block;
-  margin-top: 0.5rem;
+  color: ${color("text-medium")};
+  background-color: ${color("bg-medium")};
+
+  font-weight: 400;
 `;

frontend/src/metabase/models/components/ModelDetailPage/ModelActionDetails/ModelActionListItem.tsx

@@ -4,11 +4,10 @@ import Link from "metabase/core/components/Link";
 import EntityMenu from "metabase/components/EntityMenu";
 import ModalWithTrigger from "metabase/components/ModalWithTrigger";
 import { useConfirmation } from "metabase/hooks/use-confirmation";
-import ImplicitActionIcon from "metabase/actions/components/ImplicitActionIcon";
 import ActionExecuteModal from "metabase/actions/containers/ActionExecuteModal";
 import { WritebackAction, WritebackQueryAction } from "metabase-types/api";
 import {
-  ActionCard,
+  ActionCardContainer,
   ActionHeader,
   ActionRunButtonContainer,
   ActionRunButton,
@@ -17,7 +16,6 @@ import {
   ActionTitle,
   CodeBlock,
   ImplicitActionCardContentRoot,
-  ImplicitActionMessage,
   MenuIcon,
 } from "./ModelActionListItem.styled";
 
@@ -40,8 +38,7 @@ function QueryActionCardContent({ action }: { action: WritebackQueryAction }) {
 function ImplicitActionCardContent() {
   return (
     <ImplicitActionCardContentRoot>
-      <ImplicitActionIcon size={32} />
-      <ImplicitActionMessage>{t`Auto tracking schema`}</ImplicitActionMessage>
+      <div>{t`Auto tracking schema`}</div>
     </ImplicitActionCardContentRoot>
   );
 }
@@ -102,7 +99,7 @@ function ModelActionListItem({
           trigger={<MenuIcon name="ellipsis" size={14} />}
         />
       </ActionHeader>
-      <ActionCard>
+      <ActionCardContainer>
         {action.type === "query" ? (
           <QueryActionCardContent action={action} />
         ) : action.type === "implicit" ? (
@@ -127,7 +124,7 @@ function ModelActionListItem({
             )}
           </ModalWithTrigger>
         )}
-      </ActionCard>
+      </ActionCardContainer>
       {confirmationModal}
     </>
   );