From 0ec9b396aa46b40af19e1c42f67a9cef68fea31c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Mon, 14 Mar 2022 16:58:45 +0100
Subject: [PATCH 01/16] fix(dashboard-v2): styling fixes for active link in
 navbar dropdown

---
 .../src/components/DropdownMenu/DropdownMenuLink.js  | 12 +++++-------
 .../dashboard-v2/src/components/NavBar/NavBar.js     | 10 ++++++++--
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenuLink.js b/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenuLink.js
index 45a86483..426501c4 100644
--- a/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenuLink.js
+++ b/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenuLink.js
@@ -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 = {
diff --git a/packages/dashboard-v2/src/components/NavBar/NavBar.js b/packages/dashboard-v2/src/components/NavBar/NavBar.js
index 2b53f2be..7fa52109 100644
--- a/packages/dashboard-v2/src/components/NavBar/NavBar.js
+++ b/packages/dashboard-v2/src/components/NavBar/NavBar.js
@@ -68,8 +68,14 @@ 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" />
+            <DropdownMenuLink
+              to="/logout"
+              as={Link}
+              activeClassName="text-primary"
+              icon={LockClosedIcon}
+              label="Log out"
+            />
           </DropdownMenu>
         </NavBarSection>
       </NavBarBody>

From 60b6fd2a48502782f424474a3fdf9274c54b34d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Tue, 15 Mar 2022 15:53:02 +0100
Subject: [PATCH 02/16] fix(dashboard-v2): fix navbar dropdown hiding behind
 positioned content

---
 .../src/components/DropdownMenu/DropdownMenu.js       |  2 +-
 packages/dashboard-v2/src/components/NavBar/NavBar.js | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenu.js b/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenu.js
index 461a9b7e..86cbad5f 100644
--- a/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenu.js
+++ b/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenu.js
@@ -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"}`,
diff --git a/packages/dashboard-v2/src/components/NavBar/NavBar.js b/packages/dashboard-v2/src/components/NavBar/NavBar.js
index 7fa52109..6cef6df5 100644
--- a/packages/dashboard-v2/src/components/NavBar/NavBar.js
+++ b/packages/dashboard-v2/src/components/NavBar/NavBar.js
@@ -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`,
 })``;
 
 const NavBarBody = styled.nav.attrs({
@@ -68,7 +68,14 @@ export const NavBar = () => (
         </NavBarSection>
         <NavBarSection className="dropdown-area justify-end">
           <DropdownMenu title="My account">
-            <DropdownMenuLink to="/settings" as={Link} activeClassName="text-primary" icon={CogIcon} label="Settings" />
+            <DropdownMenuLink
+              to="/settings"
+              as={Link}
+              activeClassName="text-primary"
+              icon={CogIcon}
+              label="Settings"
+              partiallyActive
+            />
             <DropdownMenuLink
               to="/logout"
               as={Link}

From 387e08f69b9b8fc5eca244bb074fb566c907771f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Tue, 15 Mar 2022 15:54:10 +0100
Subject: [PATCH 03/16] feat(dashboard-v2): add global typography styles

---
 packages/dashboard-v2/src/styles/global.css | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/dashboard-v2/src/styles/global.css b/packages/dashboard-v2/src/styles/global.css
index ae86596a..e0238aad 100644
--- a/packages/dashboard-v2/src/styles/global.css
+++ b/packages/dashboard-v2/src/styles/global.css
@@ -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;
   }
 }

From 4a5be18dae646acbc387b57ab207eb9ef12109b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Tue, 15 Mar 2022 15:54:34 +0100
Subject: [PATCH 04/16] fix(dashboard-v2): fix Switch toggle shrinking in
 narrow spaces

---
 packages/dashboard-v2/src/components/Switch/Switch.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/dashboard-v2/src/components/Switch/Switch.js b/packages/dashboard-v2/src/components/Switch/Switch.js
index ed24bc92..02b361c0 100644
--- a/packages/dashboard-v2/src/components/Switch/Switch.js
+++ b/packages/dashboard-v2/src/components/Switch/Switch.js
@@ -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,7 +56,7 @@ 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>
@@ -75,6 +75,10 @@ Switch.propTypes = {
    * Element to be rendered as the switch label
    */
   children: PropTypes.element,
+  /**
+   * 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: "",
 };

From e175984125a85e9af85b7decf94c52210c0882f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Tue, 15 Mar 2022 15:56:09 +0100
Subject: [PATCH 05/16] feat(dashboard-v2): add new layout for account settings
 pages

---
 .../src/layouts/UserSettingsLayout.js         | 87 +++++++++++++++++++
 packages/dashboard-v2/tailwind.config.js      |  6 ++
 2 files changed, 93 insertions(+)
 create mode 100644 packages/dashboard-v2/src/layouts/UserSettingsLayout.js

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 (
+    <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-16 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;
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",

From 86a7f0358b5c82dca4c2cb53d42d079caffa7022 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Tue, 15 Mar 2022 15:58:02 +0100
Subject: [PATCH 06/16] feat(dashboard-v2): add Settings/Notifications page

---
 .../src/pages/settings/api-keys.js            | 15 ++++++
 .../dashboard-v2/src/pages/settings/export.js | 15 ++++++
 .../dashboard-v2/src/pages/settings/index.js  | 15 ++++++
 .../src/pages/settings/notifications.js       | 53 +++++++++++++++++++
 packages/dashboard-v2/static/images/inbox.svg |  1 +
 5 files changed, 99 insertions(+)
 create mode 100644 packages/dashboard-v2/src/pages/settings/api-keys.js
 create mode 100644 packages/dashboard-v2/src/pages/settings/export.js
 create mode 100644 packages/dashboard-v2/src/pages/settings/index.js
 create mode 100644 packages/dashboard-v2/src/pages/settings/notifications.js
 create mode 100644 packages/dashboard-v2/static/images/inbox.svg

diff --git a/packages/dashboard-v2/src/pages/settings/api-keys.js b/packages/dashboard-v2/src/pages/settings/api-keys.js
new file mode 100644
index 00000000..56d6977e
--- /dev/null
+++ b/packages/dashboard-v2/src/pages/settings/api-keys.js
@@ -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;
diff --git a/packages/dashboard-v2/src/pages/settings/export.js b/packages/dashboard-v2/src/pages/settings/export.js
new file mode 100644
index 00000000..feac6719
--- /dev/null
+++ b/packages/dashboard-v2/src/pages/settings/export.js
@@ -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;
diff --git a/packages/dashboard-v2/src/pages/settings/index.js b/packages/dashboard-v2/src/pages/settings/index.js
new file mode 100644
index 00000000..500c62a8
--- /dev/null
+++ b/packages/dashboard-v2/src/pages/settings/index.js
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import UserSettingsLayout from "../../layouts/UserSettingsLayout";
+
+const SettingsPage = () => {
+  return (
+    <>
+      <h4>Account</h4>
+    </>
+  );
+};
+
+SettingsPage.Layout = UserSettingsLayout;
+
+export default SettingsPage;
diff --git a/packages/dashboard-v2/src/pages/settings/notifications.js b/packages/dashboard-v2/src/pages/settings/notifications.js
new file mode 100644
index 00000000..c4efeb35
--- /dev/null
+++ b/packages/dashboard-v2/src/pages/settings/notifications.js
@@ -0,0 +1,53 @@
+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">
+              <span className="ml-2">
+                I agreee to get the latest news, updates and special offers delivered to my email inbox.
+              </span>
+            </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="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;
diff --git a/packages/dashboard-v2/static/images/inbox.svg b/packages/dashboard-v2/static/images/inbox.svg
new file mode 100644
index 00000000..389be116
--- /dev/null
+++ b/packages/dashboard-v2/static/images/inbox.svg
@@ -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>
\ No newline at end of file

From 7014e983a59357f752f9c45d225d8a01494dcb70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Tue, 15 Mar 2022 18:59:09 +0100
Subject: [PATCH 07/16] fix(dashboard-v2): fix Button sizing

---
 packages/dashboard-v2/src/components/Button/Button.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard-v2/src/components/Button/Button.js b/packages/dashboard-v2/src/components/Button/Button.js
index 95ecbede..40ec1ad9 100644
--- a/packages/dashboard-v2/src/components/Button/Button.js
+++ b/packages/dashboard-v2/src/components/Button/Button.js
@@ -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 = {

From 132ee4f88f35a85117b31c25beb20e89e37f801f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Tue, 15 Mar 2022 18:59:45 +0100
Subject: [PATCH 08/16] refactor(dashboard-v2): reimplement TextInputBasic
 component

---
 .../TextInputBasic/TextInputBasic.js          | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/dashboard-v2/src/components/TextInputBasic/TextInputBasic.js b/packages/dashboard-v2/src/components/TextInputBasic/TextInputBasic.js
index 9fa7f670..6b9531b4 100644
--- a/packages/dashboard-v2/src/components/TextInputBasic/TextInputBasic.js
+++ b/packages/dashboard-v2/src/components/TextInputBasic/TextInputBasic.js
@@ -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>
   );

From 2e871f47127aae652a346ebdb423f1d10c3db41d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Tue, 15 Mar 2022 19:00:02 +0100
Subject: [PATCH 09/16] feat(dashboard-v2): add SimpleUploadIcon component

---
 .../src/components/Icons/icons/SimpleUploadIcon.js     | 10 ++++++++++
 packages/dashboard-v2/src/components/Icons/index.js    |  1 +
 2 files changed, 11 insertions(+)
 create mode 100644 packages/dashboard-v2/src/components/Icons/icons/SimpleUploadIcon.js

diff --git a/packages/dashboard-v2/src/components/Icons/icons/SimpleUploadIcon.js b/packages/dashboard-v2/src/components/Icons/icons/SimpleUploadIcon.js
new file mode 100644
index 00000000..0406f012
--- /dev/null
+++ b/packages/dashboard-v2/src/components/Icons/icons/SimpleUploadIcon.js
@@ -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>
+));
diff --git a/packages/dashboard-v2/src/components/Icons/index.js b/packages/dashboard-v2/src/components/Icons/index.js
index 05d9b832..611acef4 100644
--- a/packages/dashboard-v2/src/components/Icons/index.js
+++ b/packages/dashboard-v2/src/components/Icons/index.js
@@ -12,3 +12,4 @@ export * from "./icons/PlusIcon";
 export * from "./icons/SearchIcon";
 export * from "./icons/CopyIcon";
 export * from "./icons/ShareIcon";
+export * from "./icons/SimpleUploadIcon";

From 539fc32fb99b99d7486af93628c4c13e122283e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 16 Mar 2022 09:04:15 +0100
Subject: [PATCH 10/16] fix(dashboard-v2): fix CopyButton's timeout

---
 packages/dashboard-v2/src/components/CopyButton.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/dashboard-v2/src/components/CopyButton.js b/packages/dashboard-v2/src/components/CopyButton.js
index db5e9c21..479352d2 100644
--- a/packages/dashboard-v2/src/components/CopyButton.js
+++ b/packages/dashboard-v2/src/components/CopyButton.js
@@ -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>

From 6be5e457035b4afed2752c411d5db17f5f260408 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 16 Mar 2022 09:04:29 +0100
Subject: [PATCH 11/16] fix(dashboard-v2): add missing shadow for NavBar

---
 packages/dashboard-v2/src/components/NavBar/NavBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard-v2/src/components/NavBar/NavBar.js b/packages/dashboard-v2/src/components/NavBar/NavBar.js
index 6cef6df5..1db72dda 100644
--- a/packages/dashboard-v2/src/components/NavBar/NavBar.js
+++ b/packages/dashboard-v2/src/components/NavBar/NavBar.js
@@ -9,7 +9,7 @@ import { PageContainer } from "../PageContainer";
 import { NavBarLink, NavBarSection } from ".";
 
 const NavBarContainer = styled.div.attrs({
-  className: `grid sticky top-0 bg-white z-10`,
+  className: `grid sticky top-0 bg-white z-10 shadow-sm`,
 })``;
 
 const NavBarBody = styled.nav.attrs({

From 99d8204118467b46db4db3a9e96cea64df4afe36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 16 Mar 2022 09:04:45 +0100
Subject: [PATCH 12/16] fix(dashboard-v2): fix propTypes for Switch

---
 packages/dashboard-v2/src/components/Switch/Switch.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard-v2/src/components/Switch/Switch.js b/packages/dashboard-v2/src/components/Switch/Switch.js
index 02b361c0..9bf1920c 100644
--- a/packages/dashboard-v2/src/components/Switch/Switch.js
+++ b/packages/dashboard-v2/src/components/Switch/Switch.js
@@ -74,7 +74,7 @@ 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.
    */

From 8d27ac7a1b0db8bdde45c5620bd8cdb2db5a1689 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 16 Mar 2022 09:05:25 +0100
Subject: [PATCH 13/16] fix(dashboard-v2): fix paddings for content in
 UserSettingsLayout

---
 packages/dashboard-v2/src/layouts/UserSettingsLayout.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard-v2/src/layouts/UserSettingsLayout.js b/packages/dashboard-v2/src/layouts/UserSettingsLayout.js
index a6205fcc..9fda613d 100644
--- a/packages/dashboard-v2/src/layouts/UserSettingsLayout.js
+++ b/packages/dashboard-v2/src/layouts/UserSettingsLayout.js
@@ -61,7 +61,7 @@ const SidebarLink = styled(Link).attrs({
 })``;
 
 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",
+  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;
 `;

From 638825d8dbc8974ea675ee1774b6ffe7f69d132d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 16 Mar 2022 09:06:00 +0100
Subject: [PATCH 14/16] fix(dashboard-v2): notifications page - hide inbox icon
 on smaller screens

---
 packages/dashboard-v2/src/pages/settings/notifications.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard-v2/src/pages/settings/notifications.js b/packages/dashboard-v2/src/pages/settings/notifications.js
index c4efeb35..7fe9a83e 100644
--- a/packages/dashboard-v2/src/pages/settings/notifications.js
+++ b/packages/dashboard-v2/src/pages/settings/notifications.js
@@ -40,7 +40,7 @@ const NotificationsPage = () => {
             </ul>
           </section>
         </div>
-        <div className="text-right w-full pr-14 pt-20">
+        <div className="hidden xl:block text-right w-full pr-14 pt-20">
           <StaticImage src="../../../static/images/inbox.svg" alt="" placeholder="none" />
         </div>
       </div>

From 8422a6770c91b3f38c5d97679d8617f12e4baa98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 16 Mar 2022 12:03:01 +0100
Subject: [PATCH 15/16] feat(dashboard-v2): add Settings/Account page

---
 .../AvatarUploader/AvatarUploader.js          | 35 +++++++++
 .../src/components/AvatarUploader/index.js    |  1 +
 .../dashboard-v2/src/pages/settings/index.js  | 74 ++++++++++++++++++-
 .../dashboard-v2/static/images/avatar-bg.svg  |  1 +
 .../static/images/avatar-placeholder.svg      |  1 +
 5 files changed, 108 insertions(+), 4 deletions(-)
 create mode 100644 packages/dashboard-v2/src/components/AvatarUploader/AvatarUploader.js
 create mode 100644 packages/dashboard-v2/src/components/AvatarUploader/index.js
 create mode 100644 packages/dashboard-v2/static/images/avatar-bg.svg
 create mode 100644 packages/dashboard-v2/static/images/avatar-placeholder.svg

diff --git a/packages/dashboard-v2/src/components/AvatarUploader/AvatarUploader.js b/packages/dashboard-v2/src/components/AvatarUploader/AvatarUploader.js
new file mode 100644
index 00000000..9f5bbc82
--- /dev/null
+++ b/packages/dashboard-v2/src/components/AvatarUploader/AvatarUploader.js
@@ -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>
+  );
+};
diff --git a/packages/dashboard-v2/src/components/AvatarUploader/index.js b/packages/dashboard-v2/src/components/AvatarUploader/index.js
new file mode 100644
index 00000000..74358cdc
--- /dev/null
+++ b/packages/dashboard-v2/src/components/AvatarUploader/index.js
@@ -0,0 +1 @@
+export * from "./AvatarUploader";
diff --git a/packages/dashboard-v2/src/pages/settings/index.js b/packages/dashboard-v2/src/pages/settings/index.js
index 500c62a8..459cf8c0 100644
--- a/packages/dashboard-v2/src/pages/settings/index.js
+++ b/packages/dashboard-v2/src/pages/settings/index.js
@@ -1,15 +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 SettingsPage = () => {
+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 (
     <>
-      <h4>Account</h4>
+      <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>
     </>
   );
 };
 
-SettingsPage.Layout = UserSettingsLayout;
+AccountPage.Layout = UserSettingsLayout;
 
-export default SettingsPage;
+export default AccountPage;
diff --git a/packages/dashboard-v2/static/images/avatar-bg.svg b/packages/dashboard-v2/static/images/avatar-bg.svg
new file mode 100644
index 00000000..4095e0a0
--- /dev/null
+++ b/packages/dashboard-v2/static/images/avatar-bg.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 734.24 734.24"><defs><style>.cls-1{fill:#0d0d0d;isolation:isolate;opacity:0.1;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M367.12,0C567.85,0,731,161.05,734.19,361l0,6.07h-2c0-201.6-163.47-365-365.12-365S2,165.43,2,367A363.35,363.35,0,0,0,83.62,597.09l1.6,1.95-1.55,1.28A365.44,365.44,0,0,1,0,367C0,164.32,164.36,0,367.12,0ZM134.84,649a363.81,363.81,0,0,0,229.7,83.28h2.58v2A365.81,365.81,0,0,1,135.53,652.1l-2-1.61ZM566.29,615.1l1.26,1.56a320.36,320.36,0,0,1-364.7,25.08l-1.49-.89,1-1.71a318.38,318.38,0,0,0,362.21-22.69Z"/><path class="cls-1" d="M367.12,47.16a318.31,318.31,0,0,1,199.81,70.13l1.7,1.37-1.26,1.56a316.25,316.25,0,0,0-198-71h-2.22ZM489.79,608.54q-2.57,1.31-5.14,2.55l.87,1.8c1.73-.84,3.46-1.7,5.17-2.57Zm-10.34,5c-1.74.8-3.48,1.57-5.24,2.33l.79,1.84q2.65-1.16,5.29-2.35Zm-10.54,4.55q-2.66,1.08-5.34,2.1l.72,1.87q2.7-1,5.37-2.12Zm-10.72,4.09c-1.8.65-3.61,1.27-5.43,1.88l.64,1.9q2.75-.91,5.46-1.89Zm-10.9,3.64c-1.82.57-3.66,1.11-5.5,1.64l.55,1.92c1.86-.53,3.7-1.08,5.55-1.65Zm-11,3.17c-1.85.49-3.7.95-5.56,1.4l.46,2c1.88-.45,3.75-.93,5.61-1.42Zm-11.14,2.68q-2.81.62-5.62,1.17l.39,2c1.89-.37,3.77-.76,5.66-1.17Zm-11.27,2.22q-2.82.5-5.66.92l.3,2q2.86-.43,5.71-.93Zm-11.36,1.73q-2.84.38-5.69.69l.21,2q2.88-.31,5.74-.69Zm-11.41,1.25c-1.91.17-3.81.32-5.72.45l.13,2q2.89-.19,5.76-.45Zm-11.47.77c-1.91.09-3.82.16-5.74.2l.05,2c1.93,0,3.85-.11,5.78-.2Zm-11.49.29H367c-1.53,0-3.06,0-4.58,0l0,2c1.53,0,3.07,0,4.61,0h1.15Zm-11.46-.19c-1.91-.07-3.82-.17-5.72-.28l-.12,2q2.88.16,5.77.28Zm-11.46-.67q-2.87-.24-5.71-.52l-.2,2c1.91.19,3.83.37,5.75.52Zm-11.44-1.16q-2.85-.35-5.68-.75l-.28,2q2.85.4,5.72.76Zm-11.34-1.63c-1.89-.31-3.78-.65-5.66-1l-.36,2c1.89.35,3.79.69,5.69,1Zm-11.29-2.12q-2.82-.58-5.61-1.24l-.45,2c1.88.44,3.76.85,5.65,1.25ZM300,629.56c-1.86-.47-3.7-1-5.54-1.47l-.54,1.92c1.86.52,3.72,1,5.58,1.49Zm-11.07-3.07q-2.75-.82-5.47-1.71l-.62,1.9c1.83.59,3.67,1.17,5.52,1.72Zm-10.94-3.55q-2.71-.95-5.4-2l-.7,1.88q2.71,1,5.44,2Zm-10.76-4c-1.77-.71-3.55-1.44-5.31-2.18l-.78,1.84c1.78.75,3.56,1.48,5.36,2.19Zm-10.58-4.47q-2.63-1.17-5.22-2.4l-.85,1.81c1.74.83,3.49,1.63,5.26,2.42Zm-10.39-4.91q-2.57-1.29-5.1-2.62l-.93,1.77q2.55,1.35,5.14,2.64Zm-10.12-5.33c-1.68-.93-3.34-1.87-5-2.83l-1,1.73q2.49,1.46,5,2.85Zm-9.93-5.77q-2.46-1.5-4.87-3l-1.07,1.68q2.43,1.56,4.89,3.06Zm-9.66-6.18q-2.38-1.6-4.74-3.25l-1.14,1.64q2.35,1.67,4.77,3.27Zm-9.42-6.6q-2.31-1.7-4.59-3.45l-1.21,1.59q2.29,1.75,4.62,3.47Zm-9.11-7q-2.24-1.79-4.44-3.63l-1.28,1.54q2.22,1.85,4.47,3.65Zm-8.82-7.37c-1.45-1.26-2.87-2.53-4.29-3.82L183.51,569q2.15,1.95,4.32,3.85Zm-8.5-7.73q-2.09-2-4.12-4L175.12,561q2.06,2,4.15,4Zm-8.17-8.09c-1.33-1.37-2.64-2.76-3.95-4.17l-1.46,1.37q2,2.12,4,4.19Zm-7.81-8.42q-1.9-2.15-3.77-4.33l-1.52,1.3q1.88,2.21,3.79,4.36Zm-7.46-8.75c-1.21-1.48-2.4-3-3.58-4.48l-1.58,1.23q1.78,2.28,3.61,4.51Zm-7.07-9.05q-1.72-2.29-3.39-4.63l-1.63,1.17c1.12,1.56,2.26,3.12,3.42,4.66Zm-6.66-9.3c-1.08-1.58-2.15-3.17-3.19-4.77l-1.68,1.1q1.59,2.41,3.22,4.8Zm-6.25-9.55c-1-1.62-2-3.25-3-4.89l-1.72,1c1,1.66,2,3.3,3,4.93Zm-5.87-9.86q-1.41-2.51-2.78-5l-1.76.95q1.38,2.53,2.8,5.06Zm-5.46-10.13c-.87-1.7-1.73-3.41-2.56-5.14l-1.8.88c.84,1.73,1.7,3.46,2.58,5.17Zm-5-10.31q-1.2-2.61-2.34-5.24l-1.83.79c.77,1.77,1.55,3.53,2.36,5.28Zm-4.57-10.55c-.73-1.77-1.43-3.55-2.12-5.34l-1.86.72q1,2.7,2.13,5.37Zm-4.11-10.71q-1-2.7-1.89-5.42l-1.89.63q.91,2.75,1.9,5.47ZM108.55,448q-.85-2.75-1.65-5.5L105,443q.81,2.77,1.66,5.54Zm-3.18-11c-.49-1.85-1-3.71-1.42-5.57l-1.94.48c.45,1.87.93,3.74,1.42,5.6Zm-2.71-11.16c-.41-1.86-.81-3.74-1.18-5.61l-2,.38c.38,1.9.77,3.78,1.18,5.66Zm-2.24-11.27c-.33-1.89-.64-3.77-.93-5.66l-2,.3q.45,2.87.94,5.7Zm-1.75-11.36q-.37-2.85-.69-5.7l-2,.22q.33,2.88.7,5.74Zm-1.26-11.41q-.25-2.85-.45-5.72l-2,.14c.13,1.92.29,3.84.46,5.76Zm-.78-11.46q-.13-2.86-.21-5.73l-2,.05c0,1.93.12,3.85.21,5.78Zm-.31-11.5v-1.49c0-1.42,0-2.83,0-4.25l-2,0c0,1.43,0,2.85,0,4.28v1.5Zm.18-11.47q.1-2.88.27-5.74l-2-.11q-.17,2.88-.27,5.77Zm.66-11.47q.23-2.86.51-5.71l-2-.2c-.19,1.92-.37,3.83-.52,5.76Zm1.14-11.41q.35-2.85.75-5.69l-2-.28q-.42,2.85-.76,5.73Zm1.62-11.38q.47-2.83,1-5.65l-2-.37q-.52,2.85-1,5.7Zm2.1-11.29c.39-1.87.81-3.74,1.24-5.6l-2-.45c-.44,1.87-.85,3.76-1.24,5.64Zm2.58-11.17q.7-2.79,1.47-5.55l-1.92-.53q-.78,2.79-1.48,5.59Zm3.06-11.07q.82-2.75,1.71-5.48l-1.9-.62q-.9,2.76-1.72,5.53Zm3.53-10.92c.63-1.81,1.27-3.61,1.94-5.4l-1.88-.7q-1,2.72-2,5.44Zm4-10.78q1.05-2.67,2.16-5.31l-1.84-.78c-.75,1.78-1.47,3.56-2.18,5.35Zm4.45-10.59q1.17-2.63,2.39-5.22l-1.81-.85q-1.23,2.61-2.41,5.25Zm4.9-10.4c.85-1.71,1.72-3.42,2.61-5.11l-1.77-.93c-.89,1.71-1.77,3.42-2.63,5.15Zm5.31-10.12,1.48-2.66-1.74-1c-.5.89-1,1.78-1.49,2.67ZM242.4,182q2.37-1.6,4.79-3.15a1,1,0,0,0-1.08-1.69q-2.43,1.56-4.83,3.18A1,1,0,1,0,242.4,182Zm9.66-6.18q2.46-1.47,4.95-2.9a1,1,0,1,0-1-1.73q-2.52,1.42-5,2.92a1,1,0,0,0-.34,1.37A1,1,0,0,0,252.06,175.82Zm10-5.67c1.68-.9,3.38-1.78,5.08-2.64a1,1,0,1,0-.9-1.79c-1.72.87-3.43,1.75-5.13,2.66a1,1,0,0,0-.41,1.36A1,1,0,0,0,262,170.15ZM272.29,165q2.59-1.23,5.22-2.38a1,1,0,0,0-.81-1.83c-1.77.77-3.52,1.57-5.27,2.4a1,1,0,0,0-.48,1.33A1,1,0,0,0,272.29,165Zm10.5-4.62q2.65-1.09,5.34-2.11a1,1,0,0,0-.71-1.87c-1.81.69-3.6,1.4-5.39,2.13a1,1,0,0,0,.76,1.85Zm10.74-4.08q2.72-.95,5.44-1.82a1,1,0,1,0-.61-1.9q-2.76.88-5.49,1.84a1,1,0,1,0,.66,1.88Zm10.9-3.49q2.74-.81,5.52-1.54a1,1,0,0,0,.71-1.23,1,1,0,0,0-1.22-.71c-1.87.5-3.72,1-5.57,1.56a1,1,0,1,0,.56,1.92Zm11.09-2.94c1.86-.44,3.72-.86,5.6-1.25a1,1,0,1,0-.42-2c-1.88.4-3.77.82-5.64,1.26a1,1,0,0,0,.46,2Zm11.24-2.36q2.82-.52,5.65-1a1,1,0,1,0-.31-2c-1.9.3-3.81.62-5.7,1a1,1,0,0,0,.36,2Zm11.34-1.78q2.83-.37,5.69-.67a1,1,0,0,0,.89-1.1,1,1,0,0,0-1.09-.89c-1.92.2-3.84.43-5.75.67a1,1,0,0,0,.26,2Zm11.43-1.2q2.85-.22,5.72-.37a1,1,0,1,0-.1-2q-2.89.15-5.78.38a1,1,0,1,0,.16,2Zm11.4-.6c1.91-.06,3.82-.08,5.74-.09a1,1,0,0,0,0-2c-1.93,0-3.86,0-5.78.09a1,1,0,0,0-1,1A1,1,0,0,0,360.93,143.93Zm11.48,0c1.91,0,3.82.11,5.72.2a1,1,0,1,0,.1-2c-1.92-.09-3.85-.16-5.78-.2a1,1,0,1,0,0,2Zm11.45.55c1.9.14,3.81.3,5.71.49a1,1,0,0,0,.2-2q-2.88-.28-5.77-.5a1,1,0,0,0-.14,2Zm11.43,1.13q2.85.36,5.68.79a1,1,0,0,0,.3-2q-2.86-.44-5.73-.79a1,1,0,1,0-.25,2Zm11.33,1.72q2.82.49,5.62,1.08a1,1,0,1,0,.4-2c-1.88-.39-3.78-.75-5.67-1.09a1,1,0,0,0-.35,2Zm11.25,2.3c1.86.44,3.72.89,5.57,1.37a1,1,0,0,0,1.22-.72,1,1,0,0,0-.72-1.21c-1.86-.49-3.74-.95-5.62-1.38a1,1,0,1,0-.45,1.94ZM429,152.48q2.76.79,5.49,1.65a1,1,0,0,0,1.25-.65,1,1,0,0,0-.65-1.26c-1.84-.57-3.69-1.13-5.54-1.66a1,1,0,0,0-1.24.68A1,1,0,0,0,429,152.48Zm10.93,3.45q2.72.93,5.4,1.93A1,1,0,0,0,446,156c-1.8-.68-3.62-1.33-5.44-2a1,1,0,0,0-.65,1.9Zm10.76,4q2.66,1.06,5.28,2.21a1,1,0,1,0,.8-1.83q-2.66-1.15-5.34-2.23a1,1,0,1,0-.74,1.85Zm10.54,4.57c1.73.81,3.45,1.63,5.17,2.48a1,1,0,0,0,1.34-.45,1,1,0,0,0-.45-1.34q-2.6-1.29-5.22-2.5a1,1,0,1,0-.84,1.81Zm10.28,5.1q2.53,1.35,5,2.75a1,1,0,1,0,1-1.74c-1.69-1-3.38-1.87-5.09-2.77a1,1,0,0,0-1.35.41A1,1,0,0,0,471.47,169.61Zm10,5.61q2.46,1.47,4.89,3a1,1,0,0,0,1.38-.31,1,1,0,0,0-.31-1.38c-1.63-1-3.28-2-4.93-3a1,1,0,1,0-1,1.71Zm9.69,6.13q2.39,1.59,4.73,3.24A1,1,0,0,0,497,183q-2.36-1.67-4.77-3.28a1,1,0,0,0-1.11,1.67ZM500.5,188c1.53,1.14,3.05,2.31,4.55,3.49a1,1,0,0,0,1.24-1.58q-2.28-1.78-4.59-3.51a1,1,0,1,0-1.2,1.6Zm9,7.1q2.21,1.83,4.37,3.71a1,1,0,0,0,1.32-1.5q-2.19-1.91-4.41-3.75a1,1,0,0,0-1.28,1.54Zm8.65,7.54c1.41,1.29,2.8,2.61,4.18,3.93a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41c-1.39-1.34-2.8-2.67-4.22-4a1,1,0,0,0-1.35,1.47Zm8.26,8q2,2.05,4,4.14a1,1,0,0,0,1.46-1.36q-2-2.12-4-4.18a1,1,0,0,0-1.42,0A1,1,0,0,0,526.44,210.58Zm7.83,8.39c1.27,1.43,2.52,2.87,3.76,4.34a1,1,0,1,0,1.52-1.29q-1.86-2.22-3.78-4.38a1,1,0,0,0-1.5,1.33Zm7.4,8.78c1.2,1.49,2.37,3,3.53,4.52a1,1,0,0,0,1.59-1.21c-1.17-1.54-2.35-3.06-3.56-4.56a1,1,0,0,0-1.4-.16A1,1,0,0,0,541.67,227.75Zm7,9.15c1.12,1.55,2.21,3.12,3.29,4.7a1,1,0,1,0,1.65-1.13q-1.62-2.39-3.32-4.74a1,1,0,0,0-1.39-.23A1,1,0,0,0,548.62,236.9Zm6.47,9.5q1.56,2.41,3,4.86a1,1,0,0,0,1.38.34,1,1,0,0,0,.33-1.38q-1.5-2.47-3.07-4.9a1,1,0,1,0-1.68,1.08Zm5.94,9.76q1.43,2.49,2.79,5a1,1,0,1,0,1.76-.95q-1.38-2.55-2.82-5.05a1,1,0,0,0-1.73,1Zm5.43,10c.86,1.71,1.7,3.42,2.53,5.15a1,1,0,0,0,1.8-.86q-1.24-2.61-2.55-5.19a1,1,0,1,0-1.78.9Zm4.92,10.36c.25.55.5,1.11.74,1.67a1,1,0,0,0,1.84-.79l-.75-1.7a1,1,0,0,0-1.83.82ZM189.93,227.9l1.58,1.24a223.77,223.77,0,0,0-36.68,207.33l.41,1.25-1.89.64A225.76,225.76,0,0,1,189,229.09ZM575,449.19l1.86.74A225.58,225.58,0,0,1,369.92,592.38l-2.8,0v-2A223.56,223.56,0,0,0,574,451.72Zm-35.33-47c-.38,1.87-.79,3.74-1.22,5.59a1,1,0,1,0,1.94.46q.68-2.82,1.24-5.65a1,1,0,1,0-2-.4ZM537,413.31q-.75,2.76-1.59,5.51a1,1,0,1,0,1.91.58c.57-1.84,1.1-3.7,1.61-5.57a1,1,0,0,0-1.93-.52Zm-3.36,11q-.93,2.7-1.95,5.39a1,1,0,0,0,.58,1.29,1,1,0,0,0,1.29-.58c.69-1.81,1.34-3.63,2-5.46a1,1,0,1,0-1.89-.64ZM529.6,435q-1.11,2.64-2.29,5.25a1,1,0,0,0,.49,1.32,1,1,0,0,0,1.33-.49q1.2-2.64,2.32-5.31a1,1,0,1,0-1.85-.77Zm-4.77,10.44c-.85,1.71-1.72,3.4-2.63,5.08a1,1,0,0,0,.41,1.36,1,1,0,0,0,1.35-.41q1.38-2.55,2.66-5.14a1,1,0,0,0-1.79-.89Zm-5.42,10.07q-1.44,2.47-2.95,4.9a1,1,0,1,0,1.69,1.06c1-1.64,2-3.29,3-5a1,1,0,0,0-.36-1.36A1,1,0,0,0,519.41,455.49Zm-6.07,9.71q-1.61,2.39-3.27,4.71a1,1,0,0,0,.22,1.39,1,1,0,0,0,1.4-.22q1.7-2.35,3.31-4.76a1,1,0,1,0-1.66-1.12Zm-6.7,9.31c-1.17,1.52-2.36,3-3.57,4.49a1,1,0,0,0,.13,1.4,1,1,0,0,0,1.41-.13c1.23-1.49,2.43-3,3.61-4.54a1,1,0,0,0-1.58-1.22Zm-7.29,8.86c-1.26,1.43-2.55,2.85-3.86,4.24A1,1,0,0,0,497,489c1.33-1.41,2.62-2.84,3.9-4.29a1,1,0,0,0-.09-1.41A1,1,0,0,0,499.35,483.37Zm-7.85,8.36q-2,2-4.12,4a1,1,0,0,0,1.37,1.45c1.41-1.31,2.8-2.66,4.16-4a1,1,0,0,0,0-1.42A1,1,0,0,0,491.5,491.73Zm-8.32,7.8c-1.44,1.26-2.89,2.49-4.37,3.71a1,1,0,1,0,1.27,1.54c1.49-1.22,3-2.47,4.42-3.75a1,1,0,0,0,.09-1.41A1,1,0,0,0,483.18,499.53Zm-8.86,7.28c-1.51,1.16-3.05,2.3-4.6,3.42a1,1,0,0,0,1.17,1.62c1.57-1.12,3.12-2.28,4.65-3.45a1,1,0,0,0-1.22-1.59Zm-9.31,6.7q-2.38,1.59-4.81,3.11a1,1,0,0,0,1.06,1.7c1.63-1,3.26-2.08,4.86-3.15a1,1,0,0,0,.27-1.39A1,1,0,0,0,465,513.51Zm-9.73,6.07q-2.47,1.44-5,2.79a1,1,0,0,0-.41,1.36,1,1,0,0,0,1.35.41q2.55-1.38,5.06-2.83a1,1,0,0,0-1-1.73ZM445.18,525q-2.56,1.28-5.18,2.46a1,1,0,0,0,.83,1.82q2.64-1.2,5.24-2.49a1,1,0,0,0,.45-1.34A1,1,0,0,0,445.18,525Zm-10.44,4.75c-1.76.74-3.54,1.44-5.32,2.12a1,1,0,1,0,.71,1.87c1.8-.68,3.6-1.4,5.38-2.14a1,1,0,0,0-.77-1.85ZM424,533.83c-1.81.62-3.63,1.2-5.45,1.76a1,1,0,0,0-.67,1.25,1,1,0,0,0,1.25.66q2.78-.84,5.51-1.78a1,1,0,1,0-.64-1.89Zm-11,3.35q-2.76.75-5.55,1.4a1,1,0,1,0,.46,1.95q2.82-.66,5.61-1.42a1,1,0,1,0-.52-1.93Zm-11.14,2.62c-1.87.37-3.74.72-5.63,1a1,1,0,0,0,.33,2c1.91-.32,3.8-.67,5.7-1a1,1,0,1,0-.4-2Zm-11.2,1.87c-1.89.25-3.79.48-5.69.67a1,1,0,0,0,.2,2c1.93-.2,3.84-.42,5.75-.68a1,1,0,1,0-.26-2Zm-11.4,1.15q-2.85.2-5.72.3a1,1,0,1,0,.07,2q2.89-.11,5.78-.3a1,1,0,0,0-.13-2Zm-11.45.42h-.75c-1.67,0-3.33,0-5-.07a1,1,0,0,0,0,2c1.12,0,2.23.05,3.35.06h2.45a1,1,0,0,0,0-2Zm-11.46-.32q-2.87-.17-5.71-.44a1,1,0,0,0-.19,2q2.88.25,5.78.44a1,1,0,0,0,.12-2ZM345,541.86q-2.85-.35-5.67-.8a1,1,0,1,0-.31,2q2.85.47,5.73.82a1,1,0,1,0,.25-2Zm-11.3-1.79c-1.88-.36-3.74-.75-5.6-1.17a1,1,0,1,0-.44,2c1.88.43,3.76.82,5.66,1.18a1,1,0,0,0,.38-2Zm-11.2-2.53q-2.76-.74-5.51-1.54a1,1,0,0,0-1.24.67,1,1,0,0,0,.67,1.25q2.78.81,5.58,1.55a1,1,0,0,0,1.22-.71A1,1,0,0,0,322.45,537.54Zm-11-3.26q-2.72-.9-5.4-1.89a1,1,0,0,0-1.29.59,1,1,0,0,0,.59,1.29c1.81.66,3.64,1.3,5.47,1.91a1,1,0,0,0,1.26-.63A1,1,0,0,0,311.49,534.28Zm-10.75-4c-1.76-.72-3.52-1.47-5.26-2.25a1,1,0,0,0-.82,1.83c1.77.78,3.54,1.54,5.33,2.27a1,1,0,0,0,1.3-.55A1,1,0,0,0,300.74,530.32Zm-10.47-4.68q-2.58-1.25-5.12-2.58a1,1,0,1,0-.93,1.77q2.56,1.35,5.17,2.61a1,1,0,0,0,1.34-.46A1,1,0,0,0,290.27,525.64Zm-10.15-5.34q-2.49-1.42-4.94-2.92a1,1,0,0,0-1.37.33,1,1,0,0,0,.33,1.38q2.48,1.51,5,2.95a1,1,0,0,0,1.36-.38A1,1,0,0,0,280.12,520.3Zm-9.77-6c-1.6-1-3.17-2.13-4.73-3.23a1,1,0,0,0-1.4.24,1,1,0,0,0,.24,1.39c1.58,1.12,3.17,2.2,4.79,3.27a1,1,0,0,0,1.1-1.67ZM261,507.72c-1.52-1.15-3-2.33-4.51-3.52a1,1,0,0,0-1.41.14,1,1,0,0,0,.15,1.41q2.25,1.81,4.56,3.57a1,1,0,0,0,1.4-.2A1,1,0,0,0,261,507.72Zm-8.92-7.21c-1.44-1.24-2.87-2.51-4.27-3.81a1,1,0,0,0-1.35,1.48c1.42,1.3,2.86,2.59,4.32,3.85a1,1,0,1,0,1.3-1.52Zm-8.43-7.77q-2.05-2-4-4.08A1,1,0,0,0,238.2,490c1.33,1.4,2.69,2.77,4.06,4.13a1,1,0,0,0,1.41-1.43Zm-7.91-8.29q-1.9-2.13-3.74-4.33a1,1,0,0,0-1.54,1.29q1.86,2.22,3.79,4.38a1,1,0,1,0,1.49-1.34Zm-7.36-8.8q-1.77-2.25-3.46-4.56a1,1,0,1,0-1.61,1.18q1.71,2.34,3.49,4.62a1,1,0,0,0,1.58-1.24Zm-6.79-9.26c-1.07-1.58-2.13-3.17-3.15-4.78a1,1,0,1,0-1.69,1.07q1.56,2.44,3.19,4.84a1,1,0,0,0,1.39.26A1,1,0,0,0,221.61,466.39Zm-6.16-9.68q-1.45-2.46-2.83-5a1,1,0,0,0-1.76,1q1.39,2.54,2.87,5a1,1,0,0,0,1.72-1Zm-5.52-10.06c-.86-1.7-1.7-3.42-2.5-5.15a1,1,0,0,0-1.82.85c.82,1.75,1.67,3.48,2.54,5.21a1,1,0,1,0,1.78-.91Zm-4.83-10.37c-.75-1.75-1.48-3.52-2.17-5.3a1,1,0,1,0-1.86.73c.7,1.8,1.43,3.58,2.19,5.36a1,1,0,0,0,1.31.52A1,1,0,0,0,205.1,436.28ZM201,425.69q-.94-2.7-1.82-5.44a1,1,0,1,0-1.9.61q.87,2.76,1.83,5.49a1,1,0,0,0,1.89-.66Zm-3.45-10.92c-.51-1.84-1-3.68-1.46-5.54a1,1,0,0,0-1.94.48q.69,2.81,1.47,5.6a1,1,0,0,0,1.24.69A1,1,0,0,0,197.52,414.77Zm-2.73-11.14q-.6-2.81-1.09-5.62a1,1,0,0,0-2,.34c.34,1.91.7,3.8,1.1,5.69a1,1,0,0,0,2-.41Zm-2-11.29c-.27-1.88-.51-3.78-.72-5.68a1,1,0,0,0-2,.22q.33,2.88.73,5.75a1,1,0,0,0,1.13.84A1,1,0,0,0,192.79,392.34Zm-1.26-11.4q-.21-2.85-.35-5.71a1,1,0,1,0-2,.09c.08,1.93.2,3.85.35,5.78a1,1,0,1,0,2-.16ZM191,369.49c0-.79,0-1.58,0-2.37a1,1,0,0,0-2,0c0,.8,0,1.6,0,2.4a1,1,0,1,0,2,0Zm260.22-159.4a178.43,178.43,0,0,1,90,119.64l.33,1.55-2,.4a176.48,176.48,0,0,0-88-119.09l-1.37-.74ZM253.51,323.6l1.86.72a119.4,119.4,0,1,0,231,44.59l0-2h2a121.42,121.42,0,1,1-235.21-42.4ZM544.6,343.44A12.52,12.52,0,1,0,557.12,356,12.53,12.53,0,0,0,544.6,343.44Zm0,2A10.52,10.52,0,1,1,534.08,356,10.52,10.52,0,0,1,544.6,345.44ZM213,188.82a12.52,12.52,0,1,0,12.52,12.52A12.53,12.53,0,0,0,213,188.82Zm0,2a10.52,10.52,0,1,1-10.52,10.52A10.52,10.52,0,0,1,213,190.82Z"/></g></g></svg>
\ No newline at end of file
diff --git a/packages/dashboard-v2/static/images/avatar-placeholder.svg b/packages/dashboard-v2/static/images/avatar-placeholder.svg
new file mode 100644
index 00000000..8fae86b7
--- /dev/null
+++ b/packages/dashboard-v2/static/images/avatar-placeholder.svg
@@ -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>
\ No newline at end of file

From 4fa8dac4b488443a54b71c62023657ba747c5bff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 16 Mar 2022 14:07:56 +0100
Subject: [PATCH 16/16] fix(dashboard-v2): properly align switch toggle & label

---
 packages/dashboard-v2/src/components/Switch/Switch.js     | 2 +-
 packages/dashboard-v2/src/pages/settings/notifications.js | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/dashboard-v2/src/components/Switch/Switch.js b/packages/dashboard-v2/src/components/Switch/Switch.js
index 9bf1920c..892692be 100644
--- a/packages/dashboard-v2/src/components/Switch/Switch.js
+++ b/packages/dashboard-v2/src/components/Switch/Switch.js
@@ -60,7 +60,7 @@ export const Switch = ({ children, defaultChecked, labelClassName, onChange, ...
         <Toggle>
           <TogglePin $checked={checked} />
         </Toggle>
-        {children}
+        <div className="-mt-0.5">{children}</div>
       </Label>
     </Container>
   );
diff --git a/packages/dashboard-v2/src/pages/settings/notifications.js b/packages/dashboard-v2/src/pages/settings/notifications.js
index 7fe9a83e..b46a1da4 100644
--- a/packages/dashboard-v2/src/pages/settings/notifications.js
+++ b/packages/dashboard-v2/src/pages/settings/notifications.js
@@ -14,9 +14,7 @@ const NotificationsPage = () => {
           <section>
             {/* TODO: saves on change */}
             <Switch onChange={console.info.bind(console)} labelClassName="!items-start flex-col md:flex-row">
-              <span className="ml-2">
-                I agreee to get the latest news, updates and special offers delivered to my email inbox.
-              </span>
+              I agreee to get the latest news, updates and special offers delivered to my email inbox.
             </Switch>
           </section>
           <hr />