filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-09-17 17:27:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(pages/extension-onboarding): update jumper shortcut and add page title

Browse Source
This commit is contained in:
Aminejv 2022-09-22 16:52:42 +01:00
parent 567e4b87fa
commit edb793b6ae
1 changed files with 26 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
pages/extension-onboarding.js
View File

@ -3,6 +3,8 @@ 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";
const STYLES_SAVING_SHORTCUT_ICON = (theme) => css`
@ -26,7 +28,7 @@ function JumperKeyboardShortcut(props) {
css={STYLES_SAVING_SHORTCUT_ICON}
style={{ marginLeft: 4 }}
>
.
J
</System.H4>
</div>
);
@ -94,29 +96,31 @@ const STYLES_ARROW_UP_RIGHT = css`
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 }} />
<WebsitePrototypeWrapper title="Extension Onboarding - Slate">
<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.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 />
<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>
</div>
</section>
</div>
</section>
</div>
</WebsitePrototypeWrapper>
);
}