filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-28 23:12:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(extension-onboarding): add extension onboarding page

Browse Source
This commit is contained in:
Aminejv 2022-09-19 17:25:58 +01:00
parent 688bcd5273
commit a6b628a920
1 changed files with 122 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
pages/extension-onboarding.js Normal file
View File

@ -0,0 +1,122 @@
import * as React from "react";
import * as System from "~/components/system";
import * as Styles from "~/common/styles";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
const STYLES_SAVING_SHORTCUT_ICON = (theme) => css`
padding: 8px;
width: 32px;
line-height: 16px;
text-align: center;
background-color: ${theme.semantic.bgGrayLight};
border-radius: 8px;
color: ${theme.semantic.textBlack};
`;
function JumperKeyboardShortcut(props) {
return (
<div css={Styles.HORIZONTAL_CONTAINER_CENTERED} {...props}>
<System.H4 as="p" color="textBlack" css={STYLES_SAVING_SHORTCUT_ICON}>
⌘
</System.H4>
<System.H4
as="p"
color="textBlack"
css={STYLES_SAVING_SHORTCUT_ICON}
style={{ marginLeft: 4 }}
>
.
</System.H4>
</div>
);
}
const STYLES_SLATE_LOGO_WRAPPER = (theme) => css`
width: 28px;
height: 28px;
padding: 8px;
border-radius: 50%;
background-color: ${theme.semantic.bgGrayLight};
`;
function Logo() {
return (
<img
src={"/static/logo.png"}
alt="Slate logo"
height={12}
width={12}
style={{ display: "block" }}
/>
);
}
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 (
<div css={STYLES_WRAPPER}>
<section css={STYLES_JUMPER_CONTAINER}>
<div
css={Styles.VERTICAL_CONTAINER_CENTERED}
style={{ position: "relative", height: "100%", width: "100%" }}
>
<div css={STYLES_JUMPER_TOP_BAR} />
<System.H4 color="textBlack" style={{ marginTop: 130 }}>
Press keyboard shortcut
</System.H4>
<JumperKeyboardShortcut style={{ marginTop: 10 }} />
<System.Divider width="80px" height="1px" style={{ marginTop: 24, marginBottom: 24 }} />
<System.H4 color="textBlack">
Click on extension icon on the top right
<SVG.ArrowUpRight height={16} width={16} css={STYLES_ARROW_UP_RIGHT} />
</System.H4>
<div css={STYLES_SLATE_LOGO_WRAPPER} style={{ marginTop: 8 }}>
<Logo />
</div>
</div>
</section>
</div>
);
}