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] 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