42debc6d11
## Description Rename `design-system` package to `@appsmith/ads` ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10319507327> > Commit: 65d9664dd75b750496458a6e1652e0da858e1fc6 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10319507327&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Fri, 09 Aug 2024 13:47:50 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No
72 lines
1.4 KiB
TypeScript
72 lines
1.4 KiB
TypeScript
import { Colors } from "constants/Colors";
|
|
|
|
import { Button } from "@appsmith/ads";
|
|
import React from "react";
|
|
import styled from "styled-components";
|
|
|
|
const Wrapper = styled.div`
|
|
position: absolute;
|
|
z-index: 9;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: #ffffff61;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
pointer-events: all !important;
|
|
`;
|
|
|
|
const Container = styled.div`
|
|
text-align: center;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 10px;
|
|
height: 100%;
|
|
justify-content: center;
|
|
backdrop-filter: blur(1px);
|
|
`;
|
|
|
|
const Header = styled.div`
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
color: ${Colors.GREY_900};
|
|
margin-bottom: 12px;
|
|
`;
|
|
|
|
const ConnecData = styled(Button)`
|
|
margin-bottom: 16px;
|
|
`;
|
|
|
|
export function ConnectDataOverlay(props: {
|
|
onConnectData: () => void;
|
|
message: string;
|
|
btnText: string;
|
|
}) {
|
|
const onClick = () => {
|
|
props.onConnectData();
|
|
};
|
|
|
|
return (
|
|
<Wrapper>
|
|
<Container>
|
|
<Header className="t--cypress-table-overlay-header">
|
|
{props.message}
|
|
</Header>
|
|
<ConnecData
|
|
className="t--cypress-table-overlay-connectdata"
|
|
id={"table-overlay-connectdata"}
|
|
onClick={onClick}
|
|
size="md"
|
|
>
|
|
{props.btnText}
|
|
</ConnecData>
|
|
</Container>
|
|
</Wrapper>
|
|
);
|
|
}
|