diff --git a/frontend/src/metabase/models/components/ModelDetailPage/ModelActionDetails/ModelActionListItem.styled.tsx b/frontend/src/metabase/models/components/ModelDetailPage/ModelActionDetails/ModelActionListItem.styled.tsx index d5d9cf46bbc23a84362c9401e25c820b60908102..8f19baf8e7bcb693a2677d170981e090c57a41c0 100644 --- a/frontend/src/metabase/models/components/ModelDetailPage/ModelActionDetails/ModelActionListItem.styled.tsx +++ b/frontend/src/metabase/models/components/ModelDetailPage/ModelActionDetails/ModelActionListItem.styled.tsx @@ -1,4 +1,5 @@ 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; `; diff --git a/frontend/src/metabase/models/components/ModelDetailPage/ModelActionDetails/ModelActionListItem.tsx b/frontend/src/metabase/models/components/ModelDetailPage/ModelActionDetails/ModelActionListItem.tsx index afea0c559dedb59c80cbcb9d5afae609847ef9a0..1876ffa82d2b7b3a63e10f9642c9c201a7e8d365 100644 --- a/frontend/src/metabase/models/components/ModelDetailPage/ModelActionDetails/ModelActionListItem.tsx +++ b/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} </> );