import * as React from "react";
import * as System from "~/components/system";
import * as Styles from "~/common/styles";
import * as SVG from "~/common/svg";
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
import { css } from "@emotion/react";
import { isUsingMac } from "~/common/utilities";
const STYLES_SAVING_SHORTCUT_ICON = (theme) => css`
padding: 8px;
min-width: 32px;
line-height: 16px;
text-align: center;
background-color: ${theme.semantic.bgGrayLight};
border-radius: 8px;
color: ${theme.semantic.textBlack};
`;
function JumperKeyboardShortcut(props) {
return (
{isUsingMac() ? "⌘" : "Ctrl"}
{isUsingMac() ? "J" : "."}
);
}
const STYLES_SLATE_LOGO_WRAPPER = (theme) => css`
width: 28px;
height: 28px;
padding: 8px;
border-radius: 50%;
background-color: ${theme.semantic.bgGrayLight};
`;
function Logo() {
return (
);
}
const STYLES_WRAPPER = (theme) => css`
position: relative;
background-color: ${theme.semantic.bgLight};
width: 100%;
height: 100vh;
`;
const STYLES_JUMPER_CONTAINER = (theme) => css`
width: 700px;
height: 432px;
position: fixed;
z-index: 2147483600;
top: 50%;
left: 50%;
margin-left: calc(-348px);
margin-top: calc(-274px);
border: 1px dashed ${theme.semantic.borderGray};
border-radius: 16px;
`;
const STYLES_JUMPER_TOP_BAR = (theme) => css`
position: absolute;
width: 100%;
height: 48px;
left: 0%;
top: -13px;
transform: translateY(-100%);
border: 1px dashed ${theme.semantic.borderGray};
border-radius: 16px;
`;
const STYLES_ARROW_UP_RIGHT = css`
padding-left: 4px;
vertical-align: middle;
position: relative;
top: -2px;
`;
export default function ExtensionOnboarding() {
return (
Press keyboard shortcut
Click on extension icon on the top right
);
}