From f19ddc19947e7261a490fbb924c0752f80a49c7c Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Mon, 4 Aug 2025 12:20:26 -0700
Subject: [PATCH] Add boilerplate user account view

---
 .../layout/Canvas/views/AccountCanvas.jsx     | 75 ++++++++++++++-----
 1 file changed, 57 insertions(+), 18 deletions(-)

diff --git a/client/src/components/layout/Canvas/views/AccountCanvas.jsx b/client/src/components/layout/Canvas/views/AccountCanvas.jsx
index 211606f..57643df 100644
--- a/client/src/components/layout/Canvas/views/AccountCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/AccountCanvas.jsx
@@ -1,24 +1,63 @@
-import { Box, Text } from '@chakra-ui/react';
+import { Box, Flex, Field, Input, Stack, Switch, Text, Heading } from "@chakra-ui/react"
 
-export default function AccountCanvas() {
+export default function AccountCanvas()  {
   return (
-    <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+    <Flex 
+      height="100vh"
+      direction="column"
+      align="start"
+      justify="start"
+      // hieght="100vh"
+      bg="gray.50"
+      pt={6}
+      pl={6}
+    >
+      <Heading as="h1" mb={2}>Account</Heading>
+
       <Box 
-        bg="bg" 
-        shadow="md" 
+        border="1px solid"
+        borderColor="gray.300"
         borderRadius="md"
-        p={8}
-        width="600px"
-        height="100px"
-        textAlign="center"
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
+        padding={4}
+        bg="white"
+        boxShadow="md"
+        width="100%"
+        maxW="sm"
       >
-        <Text fontsize="2xl" fontWeight="bold" color="gray.700">
-            Account Canvas coming soon!
-        </Text>
+        {/* <Text fontSize="xl" fontWeight="bold" mb={6}>
+          Account
+        </Text> */}
+
+        <Stack gap="6" maxW="sm" css={{ "--field-label-width": "96px" }}>
+          <Field.Root orientation="horizontal">
+            <Field.Label>User Name</Field.Label>
+            <Input placeholder="David Johnston" flex="1" />
+          </Field.Root>
+
+          <Field.Root orientation="horizontal">
+            <Field.Label> First Name</Field.Label>
+            <Input placeholder="David" flex="1" />
+          </Field.Root>
+
+          <Field.Root orientation="horizontal">
+            <Field.Label>Last Name</Field.Label>
+            <Input placeholder="Johnston" flex="1" />
+          </Field.Root>
+
+          <Field.Root orientation="horizontal">
+            <Field.Label>Email</Field.Label>
+            <Input placeholder="djohntson@usgs.gov" flex="1" />
+          </Field.Root>
+
+          {/* <Field.Root orientation="horizontal">
+            <Field.Label>Hide email</Field.Label>
+            <Switch.Root>
+              <Switch.HiddenInput />
+              <Switch.Control />
+            </Switch.Root>
+          </Field.Root> */}
+        </Stack>
       </Box>
-    </Box>
-  );
-}
\ No newline at end of file
+    </Flex>
+  )
+}