diff --git a/frontend/src/metabase/public/components/widgets/SharingPane.styled.tsx b/frontend/src/metabase/public/components/widgets/SharingPane.styled.tsx
index dc75360fa07e1e46b8f4a2fe33123601108ecdbb..6831136bef48e28d4a06cfd806015709fb396ec0 100644
--- a/frontend/src/metabase/public/components/widgets/SharingPane.styled.tsx
+++ b/frontend/src/metabase/public/components/widgets/SharingPane.styled.tsx
@@ -27,11 +27,11 @@ export const PublicLinkHeader = styled(OptionHeader)`
`;
export const PublicEmbedHeader = styled(OptionHeader)`
- color: ${color("summarize")};
+ color: ${color("brand")};
`;
export const EmbedWidgetHeader = styled(OptionHeader)`
- color: ${color("filter")};
+ color: ${color("brand")};
`;
interface DescriptionProps {
diff --git a/frontend/src/metabase/public/components/widgets/SharingPane.tsx b/frontend/src/metabase/public/components/widgets/SharingPane.tsx
index 0d1f9f30e9716070518f47b302fa721e3569c7a9..f479eefa6bc8105d7167392d3f1c20de3da61122 100644
--- a/frontend/src/metabase/public/components/widgets/SharingPane.tsx
+++ b/frontend/src/metabase/public/components/widgets/SharingPane.tsx
@@ -1,6 +1,7 @@
import React, { ReactNode, useState } from "react";
import { t, jt } from "ttag";
import cx from "classnames";
+import Button from "metabase/core/components/Button";
import Icon from "metabase/components/Icon";
import Toggle from "metabase/core/components/Toggle";
import CopyWidget from "metabase/components/CopyWidget";
@@ -66,7 +67,7 @@ export default function SharingPane({
return (
<div className="pt2 ml-auto mr-auto" style={{ maxWidth: 600 }}>
{isAdmin && isPublicSharingEnabled && (
- <div className="pb2 mb4 border-bottom flex align-center">
+ <div className="px4 py3 mb4 bordered rounded flex align-center">
<Header>{t`Enable sharing`}</Header>
<div className="ml-auto">
{resource.public_uuid ? (
@@ -102,7 +103,7 @@ export default function SharingPane({
)}
<SharingOption
- className={cx({
+ className={cx("border-bottom", {
disabled: !resource.public_uuid,
})}
illustration={
@@ -137,7 +138,7 @@ export default function SharingPane({
</SharingOption>
<SharingOption
- className={cx({
+ className={cx("border-bottom", {
disabled: !resource.public_uuid,
})}
illustration={
@@ -163,11 +164,12 @@ export default function SharingPane({
}
}}
>
- <EmbedWidgetHeader>{t`Embed this ${resourceType} in an application`}</EmbedWidgetHeader>
- <Description>{t`By integrating with your application server code, you can provide a secure stats ${resourceType} limited to a specific user, customer, organization, etc.`}</Description>
+ <EmbedWidgetHeader>{t`Embed in your application`}</EmbedWidgetHeader>
+ <Description>{t`Add this ${resourceType} to your application server code. You’ll be able to preview the way it looks and behaves before making it securely visible for your users.`}</Description>
{embeddingHelperText && (
<Description enableMouseEvents>{embeddingHelperText}</Description>
)}
+ <Button primary>{t`Set up`}</Button>
</SharingOption>
</div>
);
@@ -187,7 +189,10 @@ function SharingOption({
children,
}: SharingOptionProps) {
return (
- <div className={cx("mb4 flex align-start", className)} onClick={onClick}>
+ <div
+ className={cx("pt1 pb4 mb3 flex align-start", className)}
+ onClick={onClick}
+ >
{illustration}
<div className="ml2">{children}</div>
</div>
diff --git a/frontend/test/metabase/scenarios/embedding/embedding-dashboard.cy.spec.js b/frontend/test/metabase/scenarios/embedding/embedding-dashboard.cy.spec.js
index cd3e872a0185cb629f8000fd5cfc70c0443230a1..1b7762947bff4f61ef72e5310f410a6f94c63087 100644
--- a/frontend/test/metabase/scenarios/embedding/embedding-dashboard.cy.spec.js
+++ b/frontend/test/metabase/scenarios/embedding/embedding-dashboard.cy.spec.js
@@ -48,7 +48,7 @@ describe("scenarios > embedding > dashboard parameters", () => {
});
cy.icon("share").click();
- cy.findByText("Embed this dashboard in an application").click();
+ cy.findByText("Embed in your application").click();
cy.findByRole("heading", { name: "Parameters" })
.parent()
@@ -134,7 +134,7 @@ describe("scenarios > embedding > dashboard parameters", () => {
});
cy.icon("share").click();
- cy.findByText("Embed this dashboard in an application").click();
+ cy.findByText("Embed in your application").click();
cy.findByText("Locked").click();
popover().contains("Disabled").click();
diff --git a/frontend/test/metabase/scenarios/embedding/embedding-native.cy.spec.js b/frontend/test/metabase/scenarios/embedding/embedding-native.cy.spec.js
index 251c187a41da158715163b983daeb4e786e69518..3374ec46619e96a2e7d8248b56dc23e754a9e371 100644
--- a/frontend/test/metabase/scenarios/embedding/embedding-native.cy.spec.js
+++ b/frontend/test/metabase/scenarios/embedding/embedding-native.cy.spec.js
@@ -250,7 +250,7 @@ function enableSharing() {
cy.intercept("GET", "/api/session/properties").as("sessionProperties");
cy.icon("share").click();
- cy.findByText("Embed this question in an application").click();
+ cy.findByText("Embed in your application").click();
cy.wait("@sessionProperties");
}
diff --git a/frontend/test/metabase/scenarios/embedding/embedding-questions.cy.spec.js b/frontend/test/metabase/scenarios/embedding/embedding-questions.cy.spec.js
index 217ce62060492f50c5a6278c25e9e40069776777..1d415cd99bf43928f20ef115e9586327e0bd2ab9 100644
--- a/frontend/test/metabase/scenarios/embedding/embedding-questions.cy.spec.js
+++ b/frontend/test/metabase/scenarios/embedding/embedding-questions.cy.spec.js
@@ -42,7 +42,7 @@ describe("scenarios > embedding > questions ", () => {
});
cy.icon("share").click();
- cy.findByText("Embed this question in an application").click();
+ cy.findByText("Embed in your application").click();
visitIframe();
@@ -78,7 +78,7 @@ describe("scenarios > embedding > questions ", () => {
});
cy.icon("share").click();
- cy.findByText("Embed this question in an application").click();
+ cy.findByText("Embed in your application").click();
visitIframe();
@@ -114,7 +114,7 @@ describe("scenarios > embedding > questions ", () => {
});
cy.icon("share").click();
- cy.findByText("Embed this question in an application").click();
+ cy.findByText("Embed in your application").click();
visitIframe();
@@ -144,7 +144,7 @@ describe("scenarios > embedding > questions ", () => {
});
cy.icon("share").click();
- cy.findByText("Embed this question in an application").click();
+ cy.findByText("Embed in your application").click();
visitIframe();
@@ -174,7 +174,7 @@ describe("scenarios > embedding > questions ", () => {
visitQuestion(CARD_ID);
cy.icon("share").click();
- cy.findByText("Embed this question in an application").click();
+ cy.findByText("Embed in your application").click();
visitIframe();
diff --git a/frontend/test/metabase/scenarios/embedding/embedding-snippets.cy.spec.js b/frontend/test/metabase/scenarios/embedding/embedding-snippets.cy.spec.js
index 99c2f8fca30f88604eaa4b1f9cbb66cac8d78579..4507d70eeedc22bf6e5a9e87392daea3bf6ba757 100644
--- a/frontend/test/metabase/scenarios/embedding/embedding-snippets.cy.spec.js
+++ b/frontend/test/metabase/scenarios/embedding/embedding-snippets.cy.spec.js
@@ -17,7 +17,7 @@ describe("scenarios > embedding > code snippets", () => {
it("dashboard should have the correct embed snippet", () => {
visitDashboard(1);
cy.icon("share").click();
- cy.contains("Embed this dashboard in an application").click();
+ cy.contains("Embed in your application").click();
cy.contains("Code").click();
cy.findByText("To embed this dashboard in your application:");
@@ -68,7 +68,7 @@ describe("scenarios > embedding > code snippets", () => {
it("question should have the correct embed snippet", () => {
visitQuestion(1);
cy.icon("share").click();
- cy.contains("Embed this question in an application").click();
+ cy.contains("Embed in your application").click();
cy.contains("Code").click();
cy.findByText("To embed this question in your application:");
diff --git a/frontend/test/metabase/scenarios/embedding/reproductions/15860-locked-filters-same-source-table.cy.spec.js b/frontend/test/metabase/scenarios/embedding/reproductions/15860-locked-filters-same-source-table.cy.spec.js
index 30977949132478f77456d4ec6b8ded163e82227a..f3f9b040cf8c1d12095f6bdb9c02f94e21ae5397 100644
--- a/frontend/test/metabase/scenarios/embedding/reproductions/15860-locked-filters-same-source-table.cy.spec.js
+++ b/frontend/test/metabase/scenarios/embedding/reproductions/15860-locked-filters-same-source-table.cy.spec.js
@@ -141,7 +141,7 @@ describe.skip("issue 15860", () => {
it("should work for locked linked filters connected to different cards with the same source table (metabase#15860)", () => {
cy.icon("share").click();
- cy.findByText("Embed this dashboard in an application").click();
+ cy.findByText("Embed in your application").click();
setDefaultValueForLockedFilter("Q1 ID", 1);
setDefaultValueForLockedFilter("Q2 ID", 3);
diff --git a/frontend/test/metabase/scenarios/embedding/reproductions/20438-dashboard-filter-single-value.cy.spec.js b/frontend/test/metabase/scenarios/embedding/reproductions/20438-dashboard-filter-single-value.cy.spec.js
index 64bf8a082886de43f4c39b2b3616a7da36de4ad3..19848c4d03299e44ac073037fe8146697448fffc 100644
--- a/frontend/test/metabase/scenarios/embedding/reproductions/20438-dashboard-filter-single-value.cy.spec.js
+++ b/frontend/test/metabase/scenarios/embedding/reproductions/20438-dashboard-filter-single-value.cy.spec.js
@@ -81,7 +81,7 @@ describe("issue 20438", () => {
it("dashboard filter connected to the field filter should work with a single value in embedded dashboards (metabase#20438)", () => {
cy.icon("share").click();
- cy.findByText("Embed this dashboard in an application").click();
+ cy.findByText("Embed in your application").click();
visitIframe();
diff --git a/frontend/test/metabase/scenarios/embedding/reproductions/20634-locked-parameters-in-embedded-question.cy.spec.js b/frontend/test/metabase/scenarios/embedding/reproductions/20634-locked-parameters-in-embedded-question.cy.spec.js
index e297fcdb1cf9a1a31d0c71b8a381e3b09950773c..bb946cec875bb76d91d011430def86c5d1199624 100644
--- a/frontend/test/metabase/scenarios/embedding/reproductions/20634-locked-parameters-in-embedded-question.cy.spec.js
+++ b/frontend/test/metabase/scenarios/embedding/reproductions/20634-locked-parameters-in-embedded-question.cy.spec.js
@@ -27,7 +27,7 @@ describe("locked parameters in embedded question (metabase#20634)", () => {
it("should let the user lock parameters to specific values", () => {
cy.icon("share").click();
- cy.findByText("Embed this question in an application").click();
+ cy.findByText("Embed in your application").click();
cy.get(".Modal--full").within(() => {
// select the dropdown next to the Text parameter so that we can set the value to "Locked"