mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-11 22:07:08 +03:00
chore(pages/guide): fix couple of nits
This commit is contained in:
parent
bc667a3566
commit
8404e8d9de
@ -84,9 +84,9 @@ const WebsiteHeader = (props) => {
|
||||
<img css={STYLES_IMG} src={slate} alt="Slate volumetric logo" />
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="../_/auth">
|
||||
<a css={STYLES_BUTTON_PRIMARY_SMALL}>Get started</a>
|
||||
</Link>
|
||||
<a href="/_/data" css={STYLES_BUTTON_PRIMARY_SMALL}>
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -5,6 +5,7 @@ import * as SVG from "~/common/svg";
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsiteHeader from "~/components/core/WebsiteHeader";
|
||||
import WebsiteFooter from "~/components/core/WebsiteFooter";
|
||||
import Link from "next/link";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { useGuideKeyCommands } from "./guide/guide";
|
||||
@ -36,8 +37,13 @@ const STYLES_CONTAINER = css`
|
||||
|
||||
const STYLES_IMG = css`
|
||||
width: 88%;
|
||||
height: auto;
|
||||
margin-bottom: 8px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes hero-fade-in {
|
||||
0% {
|
||||
opacity: 0%;
|
||||
@ -182,8 +188,9 @@ export default function InstallPage() {
|
||||
const url = "https://slate.host/get-slate";
|
||||
const image =
|
||||
"https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4";
|
||||
const next = "/_/auth";
|
||||
const next = "/_/data";
|
||||
const prev = "../guide/new-tab";
|
||||
|
||||
useGuideKeyCommands(next, prev);
|
||||
|
||||
return (
|
||||
@ -191,18 +198,31 @@ export default function InstallPage() {
|
||||
<div css={STYLES_ROOT}>
|
||||
<WebsiteHeader />
|
||||
<div css={STYLES_CONTAINER}>
|
||||
<img css={STYLES_IMG} src="../public/static/slate-jumper.png" />
|
||||
<div css={STYLES_HEADING}>
|
||||
<div style={{ width: "100%" }}>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
src="../public/static/slate-jumper.png"
|
||||
alt="extension jumper"
|
||||
width="616"
|
||||
height="278"
|
||||
/>
|
||||
</div>
|
||||
<h1 css={STYLES_HEADING}>
|
||||
Get started — <br />
|
||||
it’s free.
|
||||
</div>
|
||||
<div css={STYLES_BODY}>
|
||||
</h1>
|
||||
<p css={STYLES_BODY}>
|
||||
Slate is currently free to use, we’ll add premium features later on for you to use.
|
||||
</div>
|
||||
<a css={STYLES_PRIMARY_BUTTON} href="/_/auth">
|
||||
</p>
|
||||
<a href="/_/data" css={STYLES_PRIMARY_BUTTON}>
|
||||
Get started <SVG.RightArrow height={20} width={20} style={{ marginLeft: 8 }} />
|
||||
</a>
|
||||
<a css={STYLES_SECONDARY_BUTTON} href="../get-started">
|
||||
<a
|
||||
css={STYLES_SECONDARY_BUTTON}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href={Constants.extensionLink.chrome}
|
||||
>
|
||||
Get Slate from Chrome store
|
||||
</a>
|
||||
</div>
|
||||
|
@ -4,7 +4,7 @@ import * as SVG from "~/common/svg";
|
||||
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsiteHeader from "~/components/core/WebsiteHeader";
|
||||
import { useRouter } from 'next/router'
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
@ -104,8 +104,6 @@ const STYLES_JUMPER = css`
|
||||
}
|
||||
animation: jumper-fade-in 200ms ease-in-out;
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: none;
|
||||
}
|
||||
@ -142,6 +140,11 @@ const STYLES_BUTTON = css`
|
||||
background-color: ${Constants.semantic.textGray};
|
||||
color: ${Constants.semantic.textWhite};
|
||||
}
|
||||
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
`;
|
||||
|
||||
const STYLES_IMGGUIDE = css`
|
||||
@ -241,7 +244,6 @@ export default function Guide({
|
||||
mobileguide,
|
||||
prev,
|
||||
next,
|
||||
...props
|
||||
}) {
|
||||
useGuideKeyCommands(next, prev);
|
||||
return (
|
||||
@ -249,11 +251,28 @@ export default function Guide({
|
||||
<div css={STYLES_ROOT}>
|
||||
<WebsiteHeader />
|
||||
<div css={STYLES_CONTAINER}>
|
||||
<div css={STYLES_HEADING}>{heading}</div>
|
||||
<div css={STYLES_BODY}>{body}</div>
|
||||
<h1 css={STYLES_HEADING}>{heading}</h1>
|
||||
<p css={STYLES_BODY}>{body}</p>
|
||||
{jumper && <div css={STYLES_JUMPER}>{jumper}</div>}
|
||||
{imageguide && <img css={STYLES_IMGGUIDE} src={imageguide} />}
|
||||
{mobileguide && <img css={STYLES_MOBILEGUIDE} src={mobileguide} />}
|
||||
{imageguide && (
|
||||
<img
|
||||
css={STYLES_IMGGUIDE}
|
||||
src={imageguide}
|
||||
width="343"
|
||||
height="158"
|
||||
alt="extension jumper"
|
||||
/>
|
||||
)}
|
||||
|
||||
{mobileguide && (
|
||||
<img
|
||||
css={STYLES_MOBILEGUIDE}
|
||||
src={mobileguide}
|
||||
width="343"
|
||||
height="241"
|
||||
alt="extension jumper"
|
||||
/>
|
||||
)}
|
||||
<div css={STYLES_FLEX}>
|
||||
<Link href={prev}>
|
||||
<a css={STYLES_BUTTON} style={{ marginRight: `16px` }}>
|
||||
|
@ -1,12 +1,9 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as JumperPrototype from "~/components/landing/jumperPrototype";
|
||||
|
||||
import Guide from "~/pages/guide/guide.js";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const VIEWS_ACTIONS = [{ label: "Current Window" }, { label: "All Open" }, { label: "Recent" }];
|
||||
|
||||
const CUSTOM_VIEWS_ACTIONS = [
|
||||
|
@ -5,6 +5,7 @@ import * as SVG from "~/common/svg";
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsiteHeader from "~/components/core/WebsiteHeader";
|
||||
import WebsiteFooter from "~/components/core/WebsiteFooter";
|
||||
import Link from "next/link";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { useGuideKeyCommands } from "./guide/guide";
|
||||
@ -36,6 +37,7 @@ const STYLES_CONTAINER = css`
|
||||
|
||||
const STYLES_IMG = css`
|
||||
width: 92%;
|
||||
height: auto;
|
||||
margin-bottom: 24px;
|
||||
|
||||
@keyframes hero-fade-in {
|
||||
@ -209,6 +211,7 @@ export default function IndexPage() {
|
||||
const image =
|
||||
"https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4";
|
||||
const next = "../guide/browser-control";
|
||||
|
||||
useGuideKeyCommands(next);
|
||||
|
||||
return (
|
||||
@ -216,19 +219,29 @@ export default function IndexPage() {
|
||||
<div css={STYLES_ROOT}>
|
||||
<WebsiteHeader />
|
||||
<div css={STYLES_CONTAINER}>
|
||||
<img css={STYLES_IMG} src="../public/static/browser-tabs.png" />
|
||||
<div css={STYLES_HEADING}>
|
||||
<div style={{ width: "100%" }}>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
width="644"
|
||||
height="290.72"
|
||||
src="../public/static/browser-tabs.png"
|
||||
alt="a list of windows"
|
||||
/>
|
||||
</div>
|
||||
<h1 css={STYLES_HEADING}>
|
||||
Save, organize, <br />
|
||||
search
|
||||
<span css={STYLES_CURSOR_BLINK} />
|
||||
</div>
|
||||
<div css={STYLES_BODY}>
|
||||
</h1>
|
||||
<p css={STYLES_BODY}>
|
||||
Slate is a personal storage space that helps you keep track and come back to things you
|
||||
care about on the web.
|
||||
</div>
|
||||
<a css={STYLES_BUTTON} href={next}>
|
||||
Get started <SVG.RightArrow height={20} width={20} style={{ marginLeft: 8 }} />
|
||||
</a>
|
||||
</p>
|
||||
<Link href={next}>
|
||||
<a css={STYLES_BUTTON}>
|
||||
Get started <SVG.RightArrow height={20} width={20} style={{ marginLeft: 8 }} />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<WebsiteFooter />
|
||||
|
Loading…
Reference in New Issue
Block a user