Merge branch 'master' into update-skynet-js-to-latest-tag

This commit is contained in:
Karol Wypchło 2022-03-17 17:59:06 +01:00 committed by GitHub
commit f26220652c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 362 additions and 32 deletions

View File

@ -0,0 +1,35 @@
import { useEffect, useState } from "react";
import { useUser } from "../../contexts/user";
import { SimpleUploadIcon } from "../Icons";
const AVATAR_PLACEHOLDER = "/images/avatar-placeholder.svg";
export const AvatarUploader = (props) => {
const { user } = useUser();
const [imageUrl, setImageUrl] = useState(AVATAR_PLACEHOLDER);
useEffect(() => {
setImageUrl(user.avatarUrl ?? AVATAR_PLACEHOLDER);
}, [user]);
return (
<div {...props}>
<div
className={`flex justify-center items-center xl:w-[245px] xl:h-[245px] bg-contain bg-none xl:bg-[url(/images/avatar-bg.svg)]`}
>
<img src={imageUrl} className="w-[160px]" alt="" />
</div>
<div className="flex justify-center">
<button
className="flex items-center gap-4 hover:underline decoration-1 decoration-dashed underline-offset-2 decoration-gray-400"
type="button"
onClick={console.info.bind(console)}
>
<SimpleUploadIcon size={20} className="shrink-0" /> Upload profile picture
</button>
{/* TODO: actual uploading */}
</div>
</div>
);
};

View File

@ -0,0 +1 @@
export * from "./AvatarUploader";

View File

@ -6,7 +6,7 @@ import styled from "styled-components";
*/
export const Button = styled.button.attrs(({ $primary }) => ({
type: "button",
className: `px-6 py-3 rounded-full font-sans uppercase text-xs tracking-wide text-palette-600 transition-[filter] hover:brightness-90
className: `px-6 py-2.5 rounded-full font-sans uppercase text-xs tracking-wide text-palette-600 transition-[filter] hover:brightness-90
${$primary ? "bg-primary" : "bg-white border-2 border-black"}`,
}))``;
Button.propTypes = {

View File

@ -22,7 +22,7 @@ const TooltipContent = styled.div.attrs({
className: "bg-primary-light/10 text-palette-600 py-2 px-4 ",
})``;
export const CopyButton = ({ value }) => {
export const CopyButton = ({ value, className }) => {
const containerRef = useRef();
const [copied, setCopied] = useState(false);
const [timer, setTimer] = useState(null);
@ -32,13 +32,13 @@ export const CopyButton = ({ value }) => {
copy(value);
setCopied(true);
setTimer(setTimeout(() => setCopied(false), 150000));
setTimer(setTimeout(() => setCopied(false), 1500));
}, [value, timer]);
useClickAway(containerRef, () => setCopied(false));
return (
<div ref={containerRef} className="inline-flex relative overflow-visible pr-2">
<div ref={containerRef} className={`inline-flex relative overflow-visible pr-2 ${className ?? ""}`}>
<Button onClick={handleCopy} className={copied ? "text-primary" : ""}>
<CopyIcon size={16} />
</Button>

View File

@ -30,7 +30,7 @@ const TriggerIcon = styled(ChevronDownIcon).attrs({
`;
const Flyout = styled.div.attrs(({ open }) => ({
className: `absolute top-full right-0 p-0
className: `absolute top-full right-0 p-0 z-10
border rounded border-palette-100
bg-white shadow-md shadow-palette-200/50
${open ? "visible" : "invisible"}`,

View File

@ -3,18 +3,16 @@ import PropTypes from "prop-types";
const DropdownLink = styled.a.attrs({
className: `m-0 border-t border-palette-200/50 h-[60px]
whitespace-nowrap transition-colors text-current
whitespace-nowrap transition-colors
hover:bg-palette-100/50 flex items-center
pr-8 pl-6 py-4 gap-4 first:border-0`,
})``;
export const DropdownMenuLink = ({ active, icon: Icon, label, ...props }) => (
<>
<DropdownLink {...props}>
{Icon ? <Icon className={active ? "text-primary" : "text-current"} /> : null}
{label}
</DropdownLink>
</>
<DropdownLink {...props}>
{Icon ? <Icon /> : null}
<span className="text-palette-500">{label}</span>
</DropdownLink>
);
DropdownMenuLink.propTypes = {

View File

@ -0,0 +1,10 @@
import { withIconProps } from "../withIconProps";
export const SimpleUploadIcon = withIconProps(({ size, ...props }) => (
<svg width={size} height={size} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" {...props}>
<path
fill="currentColor"
d="M19,12a1,1,0,0,1,1,.88V17a3,3,0,0,1-2.82,3H3a3,3,0,0,1-3-2.82V13a1,1,0,0,1,2-.12V17a1,1,0,0,0,.88,1H17a1,1,0,0,0,1-.88V13A1,1,0,0,1,19,12ZM10,0h0a1,1,0,0,1,.62.22l.09.07,5,5a1,1,0,0,1-1.32,1.5l-.1-.08L11,3.41V13a1,1,0,0,1-2,.12V3.41L5.71,6.71a1,1,0,0,1-1.32.08l-.1-.08a1,1,0,0,1-.08-1.32l.08-.1,5-5L9.38.22h0L9.29.29A1.05,1.05,0,0,1,10,0Z"
/>
</svg>
));

View File

@ -12,3 +12,4 @@ export * from "./icons/PlusIcon";
export * from "./icons/SearchIcon";
export * from "./icons/CopyIcon";
export * from "./icons/ShareIcon";
export * from "./icons/SimpleUploadIcon";

View File

@ -9,7 +9,7 @@ import { PageContainer } from "../PageContainer";
import { NavBarLink, NavBarSection } from ".";
const NavBarContainer = styled.div.attrs({
className: `grid sticky top-0 bg-white`,
className: `grid sticky top-0 bg-white z-10 shadow-sm`,
})``;
const NavBarBody = styled.nav.attrs({
@ -68,8 +68,21 @@ export const NavBar = () => (
</NavBarSection>
<NavBarSection className="dropdown-area justify-end">
<DropdownMenu title="My account">
<DropdownMenuLink href="/settings" icon={CogIcon} label="Settings" />
<DropdownMenuLink href="/logout" icon={LockClosedIcon} label="Log out" />
<DropdownMenuLink
to="/settings"
as={Link}
activeClassName="text-primary"
icon={CogIcon}
label="Settings"
partiallyActive
/>
<DropdownMenuLink
to="/logout"
as={Link}
activeClassName="text-primary"
icon={LockClosedIcon}
label="Log out"
/>
</DropdownMenu>
</NavBarSection>
</NavBarBody>

View File

@ -21,7 +21,7 @@ const Label = styled.label.attrs({
`;
const Toggle = styled.span.attrs({
className: `flex flex-row items-center justify-between
className: `flex flex-row items-center justify-between shrink-0
w-[44px] h-[22px] bg-white rounded-full
border border-palette-200 relative cursor-pointer`,
})`
@ -45,7 +45,7 @@ const TogglePin = styled.span.attrs(({ $checked }) => ({
}
`;
export const Switch = ({ children, defaultChecked, onChange, ...props }) => {
export const Switch = ({ children, defaultChecked, labelClassName, onChange, ...props }) => {
const id = useMemo(nanoid, [onChange]);
const [checked, setChecked] = useState(defaultChecked);
@ -56,11 +56,11 @@ export const Switch = ({ children, defaultChecked, onChange, ...props }) => {
return (
<Container {...props}>
<Checkbox checked={checked} onChange={(ev) => setChecked(ev.target.checked)} id={id} />
<Label htmlFor={id}>
<Label htmlFor={id} className={labelClassName}>
<Toggle>
<TogglePin $checked={checked} />
</Toggle>
{children}
<div className="-mt-0.5">{children}</div>
</Label>
</Container>
);
@ -74,7 +74,11 @@ Switch.propTypes = {
/**
* Element to be rendered as the switch label
*/
children: PropTypes.element,
children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
/**
* Pass additional CSS classes to the `label` element.
*/
labelClassName: PropTypes.string,
/**
* Function to execute on change
*/
@ -83,4 +87,5 @@ Switch.propTypes = {
Switch.defaultProps = {
defaultChecked: false,
labelClassName: "",
};

View File

@ -1,18 +1,20 @@
import { nanoid } from "nanoid";
import PropTypes from "prop-types";
import { useMemo } from "react";
export const TextInputBasic = ({ label, placeholder, ...props }) => {
const id = useMemo(() => `input-${nanoid()}`, []);
/**
* Primary UI component for user interaction
*/
export const TextInputBasic = ({ label, placeholder }) => {
return (
<div className={""}>
<p className={"font-sans uppercase text-palette-300 text-inputLabel mb-textInputLabelBottom"}>{label}</p>
<div className="flex flex-col w-full gap-1">
<label className="font-sans uppercase text-palette-300 text-xs" htmlFor={id}>
{label}
</label>
<input
id={id}
placeholder={placeholder}
className={
"w-full bg-palette-100 h-textInput px-textInputBasicX focus:outline-none bg-transparent " +
"placeholder-palette-400 text-content tracking-inputPlaceholder text-textInput"
}
className="w-full py-2 px-4 bg-palette-100 rounded-sm placeholder:text-palette-200 focus:outline outline-1 outline-palette-200"
{...props}
/>
</div>
);

View File

@ -0,0 +1,87 @@
import * as React from "react";
import { Link } from "gatsby";
import styled from "styled-components";
import { SWRConfig } from "swr";
import { authenticatedOnly } from "../lib/swrConfig";
import { PageContainer } from "../components/PageContainer";
import { NavBar } from "../components/Navbar";
import { Footer } from "../components/Footer";
import { UserProvider, useUser } from "../contexts/user";
import { ContainerLoadingIndicator } from "../components/LoadingIndicator";
const Wrapper = styled.div.attrs({
className: "min-h-screen overflow-hidden",
})`
background-image: url(/images/dashboard-bg.svg);
background-position: center -280px;
background-repeat: no-repeat;
`;
const Layout = ({ children }) => {
const { user } = useUser();
// Prevent from flashing the dashboard screen to unauthenticated users.
return (
<Wrapper>
{!user && (
<div className="fixed inset-0 flex justify-center items-center bg-palette-100/50">
<ContainerLoadingIndicator className="!text-palette-200/50" />
</div>
)}
{user && <>{children}</>}
</Wrapper>
);
};
const Sidebar = () => (
<aside className="w-full lg:w-48 bg-white text-sm font-sans font-light text-palette-600 shrink-0">
<nav>
<SidebarLink activeClassName="!border-l-primary" to="/settings">
Account
</SidebarLink>
<SidebarLink activeClassName="!border-l-primary" to="/settings/notifications">
Notifications
</SidebarLink>
<SidebarLink activeClassName="!border-l-primary" to="/settings/export">
Import / Export
</SidebarLink>
<SidebarLink activeClassName="!border-l-primary" to="/settings/api-keys">
API Keys
</SidebarLink>
</nav>
</aside>
);
const SidebarLink = styled(Link).attrs({
className: `h-12 py-3 px-6 h-full w-full flex
border-l-2 border-l-palette-200
border-b border-b-palette-100 last:border-b-transparent`,
})``;
const Content = styled.main.attrs({
className: "relative bg-white rounded px-6 py-6 sm:px-16 sm:py-14 mt-6 lg:mt-0 bg-none xl:bg-corner-circle",
})`
background-repeat: no-repeat;
`;
const UserSettingsLayout = ({ children }) => (
<SWRConfig value={authenticatedOnly}>
<UserProvider>
<Layout>
<NavBar />
<PageContainer className="mt-2 md:mt-14">
<h6 className="hidden md:block mb-2 text-palette-400">Settings</h6>
<div className="flex flex-col lg:flex-row">
<Sidebar />
<Content className="lg:w-settings-lg xl:w-settings-xl">{children}</Content>
</div>
</PageContainer>
<Footer />
</Layout>
</UserProvider>
</SWRConfig>
);
export default UserSettingsLayout;

View File

@ -0,0 +1,15 @@
import * as React from "react";
import UserSettingsLayout from "../../layouts/UserSettingsLayout";
const APIKeysPage = () => {
return (
<>
<h4>API Keys</h4>
</>
);
};
APIKeysPage.Layout = UserSettingsLayout;
export default APIKeysPage;

View File

@ -0,0 +1,15 @@
import * as React from "react";
import UserSettingsLayout from "../../layouts/UserSettingsLayout";
const ExportPage = () => {
return (
<>
<h4>Import / export</h4>
</>
);
};
ExportPage.Layout = UserSettingsLayout;
export default ExportPage;

View File

@ -0,0 +1,81 @@
import * as React from "react";
import { useMedia } from "react-use";
import styled from "styled-components";
import theme from "../../lib/theme";
import UserSettingsLayout from "../../layouts/UserSettingsLayout";
import { TextInputBasic } from "../../components/TextInputBasic/TextInputBasic";
import { Button } from "../../components/Button";
import { AvatarUploader } from "../../components/AvatarUploader";
const FormGroup = styled.div.attrs({
className: "grid sm:grid-cols-[1fr_min-content] w-full gap-y-2 gap-x-4 items-end",
})``;
const AccountPage = () => {
const isLargeScreen = useMedia(`(min-width: ${theme.screens.xl})`);
return (
<>
<div className="flex flex-col xl:flex-row">
<div className="flex flex-col gap-10 lg:shrink-0 lg:max-w-[576px] xl:max-w-[524px]">
<section>
<h4>Account</h4>
<p>
Tum dicere exorsus est laborum et quasi involuta aperiri, altera prompta et expedita. Primum igitur,
inquit, modo ista sis aequitate.
</p>
</section>
<hr />
{!isLargeScreen && (
<section>
<AvatarUploader className="flex flex-col sm:flex-row gap-8 items-center" />
</section>
)}
<section className="flex flex-col gap-8">
<FormGroup>
<TextInputBasic label="Display name" placeholder="John Doe" />
<div className="flex mt-2 sm:mt-0 justify-center">
<Button>Update</Button>
</div>
</FormGroup>
<FormGroup>
<TextInputBasic label="Email" placeholder="john.doe@example.com" />
<div className="flex mt-2 sm:mt-0 justify-center">
<Button>Update</Button>
</div>
</FormGroup>
<FormGroup>
<TextInputBasic type="password" label="Password" placeholder="dbf3htf*efh4pcy@PXB" />
<div className="flex mt-2 sm:mt-0 justify-center order-last sm:order-none">
<Button>Update</Button>
</div>
<small className="text-palette-400">
The password must be at least 6 characters long. Significantly different from the email and old
password.
</small>
</FormGroup>
</section>
<hr />
<section>
<h6 className="text-palette-400">Delete account</h6>
<p>This will completely delete your account. This process can't be undone.</p>
<button
type="button"
onClick={() => window.confirm("TODO: confirmation modal")}
className="text-error underline decoration-1 hover:decoration-dashed"
>
Delete account
</button>
</section>
</div>
<div className="flex w-full justify-start xl:justify-end">
{isLargeScreen && <AvatarUploader className="flex flex-col gap-4" />}
</div>
</div>
</>
);
};
AccountPage.Layout = UserSettingsLayout;
export default AccountPage;

View File

@ -0,0 +1,51 @@
import * as React from "react";
import UserSettingsLayout from "../../layouts/UserSettingsLayout";
import { Switch } from "../../components/Switch";
import { StaticImage } from "gatsby-plugin-image";
const NotificationsPage = () => {
return (
<>
<div className="flex">
<div className="flex flex-col gap-10 lg:shrink-0 lg:max-w-[576px] xl:max-w-[524px]">
<h4>Notifications</h4>
<section>
{/* TODO: saves on change */}
<Switch onChange={console.info.bind(console)} labelClassName="!items-start flex-col md:flex-row">
I agreee to get the latest news, updates and special offers delivered to my email inbox.
</Switch>
</section>
<hr />
<section>
<h6 className="text-palette-300">Statistics</h6>
{/* TODO: proper content :) */}
<p>
Si sine causa, nollem me tamen laudandis maioribus meis corrupisti nec in malis. Si sine causa, mox
videro.
</p>
<ul className="mt-7 flex flex-col gap-2">
<li>
{/* TODO: saves on change */}
<Switch onChange={console.info.bind(console)}>Storage limit</Switch>
</li>
<li>
{/* TODO: saves on change */}
<Switch onChange={console.info.bind(console)}>File limit</Switch>
</li>
</ul>
</section>
</div>
<div className="hidden xl:block text-right w-full pr-14 pt-20">
<StaticImage src="../../../static/images/inbox.svg" alt="" placeholder="none" />
</div>
</div>
</>
);
};
NotificationsPage.Layout = UserSettingsLayout;
export default NotificationsPage;

View File

@ -39,7 +39,14 @@
font-size: 1rem;
}
h6 {
@apply uppercase;
font-size: 0.875rem;
@apply uppercase text-xs;
}
p {
@apply mt-2;
}
hr {
@apply border-t-palette-200;
}
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 160 160"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#f4f6f7;}.cls-3{fill:#231f20;}.cls-4{mask:url(#mask);}.cls-5,.cls-7{fill:none;stroke-width:2px;}.cls-5{stroke:#0f0f0f;stroke-linejoin:round;}.cls-6,.cls-8{fill:#40b75e;}.cls-6{fill-rule:evenodd;}.cls-7{stroke:#231f20;stroke-miterlimit:10;}</style><mask id="mask" x="15.52" y="37.16" width="128" height="146" maskUnits="userSpaceOnUse"><g id="gf1qkqaq7b"><circle id="asdc4b43va" class="cls-1" cx="79.52" cy="101.16" r="64"/></g></mask></defs><g id="Layer_2" data-name="Layer 2"><circle class="cls-2" cx="80" cy="80" r="79"/><path class="cls-3" d="M80,2A78,78,0,1,1,2,80,78.09,78.09,0,0,1,80,2m0-2a80,80,0,1,0,80,80A80,80,0,0,0,80,0Z"/></g><g id="Layer_1" data-name="Layer 1"><g class="cls-4"><path class="cls-5" d="M103.52,129.16l6,2c12,4,22,9.85,22,22v30m-40-70v10m-36,6-6,2c-12,4-22,9.85-22,22v30m40-70v10m-10-40,6-4h14l6-6,12,6,6,4v8l-2,2c0,10-6,24-20,24s-20-14-20-24l-2-2Z"/><path class="cls-5" d="M57.52,83.16l-2-2v-14l6-10,4,4,8-4,8,4h12a10,10,0,0,1,10,10v10l-2,2"/><path class="cls-6" d="M69.52,128.16l10,14,10-14h8l8,4-20,20h-12l-20-20,8-4Z"/><path class="cls-5" d="M69.52,123.16l10,14,10-14h8l8,4-20,20h-12l-20-20,8-4Z"/></g></g><g id="Layer_3" data-name="Layer 3"><circle class="cls-7" cx="95.3" cy="33.27" r="4.55"/><circle class="cls-8" cx="20.61" cy="86.7" r="2.29"/><circle class="cls-8" cx="128.65" cy="60.06" r="5.08"/></g></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 171 126"><defs><style>.cls-1{fill:#40b75e;fill-rule:evenodd;}.cls-2,.cls-3{fill:none;stroke:#0f0f0f;stroke-width:2px;}.cls-2{stroke-linejoin:round;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M107.89,26.18a23.09,23.09,0,0,1,9.26,1.94l-9.26,21.06,22,6.63a23,23,0,1,1-22-29.63Z"/><path class="cls-2" d="M115.89,45.18l-10,10-6-6"/><path class="cls-2" d="M123.89,49.18a16,16,0,1,1-16-16A16,16,0,0,1,123.89,49.18Z"/><path class="cls-3" d="M156,45h14v80H46V45H60"/><path class="cls-3" d="M150,65V17L134,1H66V65"/><path class="cls-2" d="M72,9h56M72,17h56M108,77,46,125H170ZM46,45,86,85m84-40L130,85"/><path class="cls-3" d="M150,17H134V1M106,117h4m4,0h4m-20,0h4"/><path class="cls-3" d="M29,45H0m34,9H15M44,34H25"/></g></g></svg>

After

Width:  |  Height:  |  Size: 843 B

View File

@ -39,6 +39,10 @@ module.exports = {
tab: ["18px", "28px"],
},
backgroundColor: ["disabled"],
backgroundImage: {
"corner-circle":
"radial-gradient(circle at calc(100% - 60px) -50px, #F5F5F7 0%, #f5f5f7 250px,rgba(0,0,0,0) 250px)",
},
textColor: ["disabled"],
keyframes: {
wiggle: {
@ -54,6 +58,8 @@ module.exports = {
"page-md": "640px",
"page-lg": "896px",
"page-xl": "1312px",
"settings-lg": "704px",
"settings-xl": "928px",
},
minWidth: {
button: "112px",