From 9ced352b1684618aba603b236dc6f1b22e002894 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= Date: Mon, 21 Feb 2022 09:30:39 +0100 Subject: [PATCH] feat(dashboard-v2): introduce a page layout (#1737) --- packages/dashboard-v2/gatsby-config.js | 11 +--- packages/dashboard-v2/package.json | 1 + .../DropdownMenu/DropdownMenuLink.js | 1 - .../src/components/Footer/Footer.js | 8 +++ .../src/components/Footer/index.js | 1 + .../dashboard-v2/src/components/Tabs/Tab.js | 2 +- .../src/layouts/DashboardLayout.js | 57 +++++++++++++++++++ packages/dashboard-v2/src/pages/files.js | 5 +- packages/dashboard-v2/src/pages/index.js | 5 +- packages/dashboard-v2/src/pages/payments.js | 11 ++++ packages/dashboard-v2/src/styles/global.css | 31 +++++++++- .../static/images/dashboard-bg.svg | 11 ++++ packages/dashboard-v2/yarn.lock | 15 +++-- 13 files changed, 138 insertions(+), 21 deletions(-) create mode 100644 packages/dashboard-v2/src/components/Footer/Footer.js create mode 100644 packages/dashboard-v2/src/components/Footer/index.js create mode 100644 packages/dashboard-v2/src/layouts/DashboardLayout.js create mode 100644 packages/dashboard-v2/src/pages/payments.js create mode 100644 packages/dashboard-v2/static/images/dashboard-bg.svg diff --git a/packages/dashboard-v2/gatsby-config.js b/packages/dashboard-v2/gatsby-config.js index f0937128..b82a34b1 100644 --- a/packages/dashboard-v2/gatsby-config.js +++ b/packages/dashboard-v2/gatsby-config.js @@ -5,6 +5,7 @@ module.exports = { }, plugins: [ "gatsby-plugin-image", + "gatsby-plugin-provide-react", "gatsby-plugin-react-helmet", "gatsby-plugin-sharp", "gatsby-transformer-sharp", @@ -17,15 +18,5 @@ module.exports = { }, __key: "images", }, - { - resolve: `gatsby-plugin-alias-imports`, - options: { - alias: { - // Allows npm link-ing skynet-storybook during development. - "styled-components": "./node_modules/styled-components", - }, - extensions: ["js"], - }, - }, ], }; diff --git a/packages/dashboard-v2/package.json b/packages/dashboard-v2/package.json index edcc5a68..c5bb6214 100644 --- a/packages/dashboard-v2/package.json +++ b/packages/dashboard-v2/package.json @@ -50,6 +50,7 @@ "eslint-plugin-storybook": "^0.5.6", "gatsby-plugin-alias-imports": "^1.0.5", "gatsby-plugin-image": "^2.6.0", + "gatsby-plugin-provide-react": "^1.0.2", "gatsby-plugin-react-helmet": "^5.6.0", "gatsby-plugin-sharp": "^4.6.0", "gatsby-plugin-styled-components": "^5.7.0", diff --git a/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenuLink.js b/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenuLink.js index 98b5aff5..45a86483 100644 --- a/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenuLink.js +++ b/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenuLink.js @@ -21,5 +21,4 @@ DropdownMenuLink.propTypes = { label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired, active: PropTypes.bool, icon: PropTypes.func, - children: PropTypes.node.isRequired, }; diff --git a/packages/dashboard-v2/src/components/Footer/Footer.js b/packages/dashboard-v2/src/components/Footer/Footer.js new file mode 100644 index 00000000..501d502d --- /dev/null +++ b/packages/dashboard-v2/src/components/Footer/Footer.js @@ -0,0 +1,8 @@ +import * as React from "react"; +import { PageContainer } from "../PageContainer"; + +export const Footer = () => ( + +

© Skynet Labs Inc. All rights reserved.

+ +); diff --git a/packages/dashboard-v2/src/components/Footer/index.js b/packages/dashboard-v2/src/components/Footer/index.js new file mode 100644 index 00000000..5fca53f7 --- /dev/null +++ b/packages/dashboard-v2/src/components/Footer/index.js @@ -0,0 +1 @@ +export * from "./Footer"; diff --git a/packages/dashboard-v2/src/components/Tabs/Tab.js b/packages/dashboard-v2/src/components/Tabs/Tab.js index 467c08d8..1e7bd074 100644 --- a/packages/dashboard-v2/src/components/Tabs/Tab.js +++ b/packages/dashboard-v2/src/components/Tabs/Tab.js @@ -3,7 +3,7 @@ import PropTypes from "prop-types"; import styled from "styled-components"; export const StyledTab = styled.button.attrs(({ active, variant }) => ({ - className: `m-0 px-2 pb-2 + className: `m-0 pr-2 pb-2 text-tab text-left font-sans transition-colors hover:text-palette-500 ${active ? "font-semibold text-palette-600" : "font-light text-palette-300"} diff --git a/packages/dashboard-v2/src/layouts/DashboardLayout.js b/packages/dashboard-v2/src/layouts/DashboardLayout.js new file mode 100644 index 00000000..61d57870 --- /dev/null +++ b/packages/dashboard-v2/src/layouts/DashboardLayout.js @@ -0,0 +1,57 @@ +import * as React from "react"; +import { Link } from "gatsby"; + +import styled from "styled-components"; +import { DropdownMenu, DropdownMenuLink } from "../components/DropdownMenu"; +import { PageContainer } from "../components/PageContainer"; +import { CogIcon, SkynetLogoIcon, LockClosedIcon } from "../components/Icons"; +import { NavBar, NavBarLink, NavBarSection } from "../components/Navbar"; +import { Footer } from "../components/Footer"; + +const Layout = styled.div.attrs({ + className: "h-screen overflow-hidden", +})` + background-image: url(/images/dashboard-bg.svg); + background-position: -300px -280px; + + .navbar { + grid-template-columns: auto max-content 1fr; + } +`; + +const DashboardLayout = ({ children }) => { + return ( + <> + + + + + + + + Dashboard + + + Files + + + Payments + + + + + + + + + + +
{children}
+ +