diff --git a/packages/dashboard-v2/src/layouts/UserSettingsLayout.js b/packages/dashboard-v2/src/layouts/UserSettingsLayout.js
new file mode 100644
index 00000000..a6205fcc
--- /dev/null
+++ b/packages/dashboard-v2/src/layouts/UserSettingsLayout.js
@@ -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 (
+
+ {!user && (
+
+
+
+ )}
+ {user && <>{children}>}
+
+ );
+};
+
+const Sidebar = () => (
+
+);
+
+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-16 py-14 mt-6 lg:mt-0 bg-none xl:bg-corner-circle",
+})`
+ background-repeat: no-repeat;
+`;
+
+const UserSettingsLayout = ({ children }) => (
+
+
+
+
+
+ Settings
+
+
+ {children}
+
+
+
+
+
+
+);
+
+export default UserSettingsLayout;
diff --git a/packages/dashboard-v2/tailwind.config.js b/packages/dashboard-v2/tailwind.config.js
index 6f4242d9..076d6912 100644
--- a/packages/dashboard-v2/tailwind.config.js
+++ b/packages/dashboard-v2/tailwind.config.js
@@ -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",