feat(dashboard-v2): introduce a page layout (#1737)

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"],
-      },
-    },
   ],
 };

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",

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,
 };

packages/dashboard-v2/src/components/Footer/Footer.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { PageContainer } from "../PageContainer";
+
+export const Footer = () => (
+  <PageContainer className="font-content text-palette-300 py-4">
+    <p>© Skynet Labs Inc. All rights reserved.</p>
+  </PageContainer>
+);

packages/dashboard-v2/src/components/Footer/index.js

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

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"}

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 (
+    <>
+      <Layout>
+        <NavBar className="navbar">
+          <NavBarSection className="w-[110px] justify-start">
+            <SkynetLogoIcon size={48} />
+          </NavBarSection>
+          <NavBarSection>
+            <NavBarLink to="/" as={Link} activeClassName="!border-b-primary">
+              Dashboard
+            </NavBarLink>
+            <NavBarLink to="/files" as={Link} activeClassName="!border-b-primary">
+              Files
+            </NavBarLink>
+            <NavBarLink to="/payments" as={Link} activeClassName="!border-b-primary">
+              Payments
+            </NavBarLink>
+          </NavBarSection>
+          <NavBarSection className="justify-end">
+            <DropdownMenu title="My account">
+              <DropdownMenuLink href="/settings" icon={CogIcon} label="Settings" />
+              <DropdownMenuLink href="/logout" icon={LockClosedIcon} label="Log out" />
+            </DropdownMenu>
+          </NavBarSection>
+        </NavBar>
+        <PageContainer>
+          <main className="mt-14">{children}</main>
+        </PageContainer>
+        <Footer />
+      </Layout>
+    </>
+  );
+};
+
+export default DashboardLayout;

packages/dashboard-v2/src/pages/files.js

@@ -1,8 +1,11 @@
 import * as React from "react";
 
-// markup
+import DashboardLayout from "../layouts/DashboardLayout";
+
 const FilesPage = () => {
   return <>FILES</>;
 };
 
+FilesPage.Layout = DashboardLayout;
+
 export default FilesPage;

packages/dashboard-v2/src/pages/index.js

@@ -1,8 +1,11 @@
 import * as React from "react";
 
-// markup
+import DashboardLayout from "../layouts/DashboardLayout";
+
 const IndexPage = () => {
   return <>Dashboard</>;
 };
 
+IndexPage.Layout = DashboardLayout;
+
 export default IndexPage;

packages/dashboard-v2/src/pages/payments.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+import DashboardLayout from "../layouts/DashboardLayout";
+
+const PaymentsPage = () => {
+  return <>PAYMENTS HISTORY</>;
+};
+
+PaymentsPage.Layout = DashboardLayout;
+
+export default PaymentsPage;

packages/dashboard-v2/src/styles/global.css

@@ -4,7 +4,14 @@
 
 @layer base {
   html {
-    @apply font-content bg-palette-200 bg-opacity-20;
+    @apply font-content bg-palette-200 bg-opacity-[.30] h-screen tracking-wide;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    @apply font-semibold;
   }
 
   h1,
@@ -13,6 +20,26 @@
   h4,
   h5,
   h6 {
-    @apply font-sans;
+    @apply font-sans tracking-normal;
+  }
+
+  h1 {
+    font-size: 3.75rem;
+  }
+  h2 {
+    font-size: 2.5rem;
+  }
+  h3 {
+    font-size: 1.875rem;
+  }
+  h4 {
+    font-size: 1.125rem;
+  }
+  h5 {
+    font-size: 1rem;
+  }
+  h6 {
+    @apply uppercase;
+    font-size: 0.875rem;
   }
 }

packages/dashboard-v2/yarn.lock

@@ -6753,7 +6753,7 @@ enhanced-resolve@^4.5.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-enhanced-resolve@^5.9.0:
+enhanced-resolve@^5.8.3:
   version "5.9.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.0.tgz#49ac24953ac8452ed8fed2ef1340fc8e043667ee"
   integrity sha512-weDYmzbBygL7HzGGS26M3hGQx68vehdEg6VUmqSOaFzXExFqlnKuSvsEJCVGQHScS8CQMbrAqftT+AzzHNt/YA==
@@ -8159,6 +8159,11 @@ gatsby-plugin-postcss@^5.7.0:
     "@babel/runtime" "^7.15.4"
     postcss-loader "^4.3.0"
 
+gatsby-plugin-provide-react@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-provide-react/-/gatsby-plugin-provide-react-1.0.2.tgz#e50bb311cd8ef5855c6d94f708266ab117c77a15"
+  integrity sha512-Zkbs0uiniXDvtGT86+bTCdj0cuT9REpGJxJTIKLQJW3AvmAdh/MAMwWzMdyMrX1cwjqDPZBFC7bw7A49iP/fyw==
+
 gatsby-plugin-react-helmet@^5.6.0:
   version "5.7.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-5.7.0.tgz#4d038c8350796fbe1815e2cb238c0e97cb940b87"
@@ -15517,9 +15522,9 @@ webpack@4:
     webpack-sources "^1.4.1"
 
 webpack@^5.61.0, webpack@^5.9.0:
-  version "5.69.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.69.0.tgz#c9eb607d4f6c49f1e5755492323a7b055c3450e3"
-  integrity sha512-E5Fqu89Gu8fR6vejRqu26h8ld/k6/dCVbeGUcuZjc+goQHDfCPU9rER71JmdtBYGmci7Ec2aFEATQ2IVXKy2wg==
+  version "5.69.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.69.1.tgz#8cfd92c192c6a52c99ab00529b5a0d33aa848dc5"
+  integrity sha512-+VyvOSJXZMT2V5vLzOnDuMz5GxEqLk7hKWQ56YxPW/PQRUuKimPqmEIJOx8jHYeyo65pKbapbW464mvsKbaj4A==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^0.0.51"
@@ -15530,7 +15535,7 @@ webpack@^5.61.0, webpack@^5.9.0:
     acorn-import-assertions "^1.7.6"
     browserslist "^4.14.5"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.9.0"
+    enhanced-resolve "^5.8.3"
     es-module-lexer "^0.9.0"
     eslint-scope "5.1.1"
     events "^3.2.0"