feat: add user profile

src/auth/views/Login.tsx

@@ -45,7 +45,7 @@ export function Login() {
         color="primary"
         size="large"
         variant="contained"
-        sx={{ mt: 2, textTransform: "none", mb: 1 }}
+        sx={{ mt: 2, mb: 1 }}
         disabled={loading}
         loading={loading}
         onClick={() => {

src/auth/views/MagicLink.tsx

@@ -66,7 +66,7 @@ export function MagicLink() {
         color="primary"
         size="large"
         variant="contained"
-        sx={{ mt: 2, textTransform: "none", mb: 1 }}
+        sx={{ mt: 2, mb: 1 }}
         disabled={loading}
         loading={loading}
         onClick={() => {

src/components/AppBar/LandingPageAppBar.tsx

@@ -97,7 +97,6 @@ function AuthedButton(props: { isAuthenticated?: boolean }) {
     <Button
       variant="outlined"
       size="large"
-      sx={{ textTransform: "none" }}
       href={!props.isAuthenticated ? "/auth/link" : undefined}
       onClick={props.isAuthenticated ? () => signOut() : undefined}
     >

src/components/Drawer/MiniSideBar.tsx

@@ -3,13 +3,14 @@ import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
 import CssBaseline from "@mui/material/CssBaseline";
 import Divider from "@mui/material/Divider";
-import { Button, Drawer, Typography } from "@mui/material";
+import { Button, Drawer, Typography, SvgIcon } from "@mui/material";
 import { PropsWithChildren } from "react";
 import CampaignOutlinedIcon from "@mui/icons-material/CampaignOutlined";
 import AccountBalanceOutlinedIcon from "@mui/icons-material/AccountBalanceOutlined";
 import AccountBoxOutlinedIcon from "@mui/icons-material/AccountBoxOutlined";
 import HeadsetMicOutlinedIcon from "@mui/icons-material/HeadsetMicOutlined";
 import InsertPhotoOutlinedIcon from "@mui/icons-material/InsertPhotoOutlined";
+import LightbulbOutlinedIcon from "@mui/icons-material/LightbulbOutlined";
 
 type RouteOption = {
   label: string;
@@ -24,18 +25,45 @@ export default function MiniSideBar({ children }: PropsWithChildren) {
     {
       label: "Campaigns",
       href: "/user/main/campaign",
-      icon: <CampaignOutlinedIcon fontSize="large" />,
+      icon: (
+        <CampaignOutlinedIcon
+          fontSize="large"
+          sx={{ color: "rgba(161, 171, 186, 1)" }}
+        />
+      ),
+    },
+    // Possible future enhancements, not visible to user but help keep spacing
+    {
+      label: "Creatives",
+      href: "/user/main/creatives",
+      icon: (
+        <LightbulbOutlinedIcon
+          fontSize="large"
+          sx={{ color: "rgba(161, 171, 186, 1)" }}
+        />
+      ),
+      disabled: true,
     },
     {
       label: "Assets",
       href: "/user/main/assets",
-      icon: <InsertPhotoOutlinedIcon fontSize="large" />,
+      icon: (
+        <InsertPhotoOutlinedIcon
+          fontSize="large"
+          sx={{ color: "rgba(161, 171, 186, 1)" }}
+        />
+      ),
       disabled: true,
     },
     {
       label: "Audiences",
       href: "/user/main/audiences",
-      icon: <CampaignOutlinedIcon fontSize="large" />,
+      icon: (
+        <CampaignOutlinedIcon
+          fontSize="large"
+          sx={{ color: "rgba(161, 171, 186, 1)" }}
+        />
+      ),
       disabled: true,
     },
   ];
@@ -44,17 +72,32 @@ export default function MiniSideBar({ children }: PropsWithChildren) {
     {
       label: "Account",
       href: "/user/main/settings",
-      icon: <AccountBalanceOutlinedIcon fontSize="large" />,
+      icon: (
+        <AccountBalanceOutlinedIcon
+          fontSize="large"
+          sx={{ color: "rgba(161, 171, 186, 1)" }}
+        />
+      ),
     },
     {
       label: "Profile",
       href: "/user/main/profile",
-      icon: <AccountBoxOutlinedIcon fontSize="large" />,
+      icon: (
+        <AccountBoxOutlinedIcon
+          fontSize="large"
+          sx={{ color: "rgba(161, 171, 186, 1)" }}
+        />
+      ),
     },
     {
       label: "Support",
       href: "mailto:selfserve@brave.com",
-      icon: <HeadsetMicOutlinedIcon fontSize="large" />,
+      icon: (
+        <HeadsetMicOutlinedIcon
+          fontSize="large"
+          sx={{ color: "rgba(161, 171, 186, 1)" }}
+        />
+      ),
     },
   ];
 
@@ -101,7 +144,6 @@ const ItemBox = (props: RouteOption) => {
       href={props.href}
       disabled={props.disabled}
       sx={{
-        textTransform: "none",
         padding: "15px 6px 15px 6px",
         borderRadius: "0px",
         gap: "8px",
@@ -114,7 +156,7 @@ const ItemBox = (props: RouteOption) => {
         alignItems="center"
       >
         {props.icon}
-        <Typography>{props.label}</Typography>
+        <Typography color="rgba(63, 72, 85, 1)">{props.label}</Typography>
       </Box>
     </Box>
   );

src/components/Navigation/DraftMenu.tsx

@@ -2,7 +2,14 @@ import * as React from "react";
 import { useContext, useState } from "react";
 
 import { useHistory } from "react-router-dom";
-import { Badge, IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
+import {
+  Badge,
+  Button,
+  IconButton,
+  Menu,
+  MenuItem,
+  Tooltip,
+} from "@mui/material";
 import DraftsIcon from "@mui/icons-material/Drafts";
 import { DraftContext } from "state/context";
 
@@ -18,15 +25,16 @@ export function DraftMenu() {
 
   return (
     <>
-      <Tooltip title="Local Campaign Drafts">
-        <span>
-          <IconButton disabled={drafts.length === 0} onClick={handleClick}>
-            <Badge color="primary" badgeContent={drafts.length}>
-              <DraftsIcon fontSize="medium" />
-            </Badge>
-          </IconButton>
-        </span>
-      </Tooltip>
+      <Button
+        disabled={drafts.length === 0}
+        onClick={handleClick}
+        sx={{ pr: 3 }}
+        endIcon={
+          <Badge color="primary" badgeContent={drafts.length} sx={{ ml: 1 }} />
+        }
+      >
+        Campaign Drafts
+      </Button>
       <Menu open={open} anchorEl={anchorEl} onClose={() => setAnchorEl(null)}>
         <MenuItem
           disabled

src/components/Navigation/Navbar.tsx

@@ -58,12 +58,7 @@ export function Navbar() {
             New Campaign
           </Button>
         )}
-        <Button
-          variant="outlined"
-          size="medium"
-          sx={{ textTransform: "none" }}
-          onClick={() => signOut()}
-        >
+        <Button variant="outlined" size="medium" onClick={() => signOut()}>
           Sign out
         </Button>
       </Toolbar>

src/components/Steps/ActionButtons.tsx

@@ -12,18 +12,14 @@ export function ActionButtons() {
 
   return (
     <Stack mt={3} spacing={2} mr={1}>
-      <Button
-        size="small"
-        sx={{ textTransform: "none" }}
-        onClick={() => history.push("/user/main")}
-      >
+      <Button size="small" onClick={() => history.push("/user/main")}>
         Return to dashboard
       </Button>
       {values.draftId !== undefined && (
         <Button
           size="small"
           color="error"
-          sx={{ textTransform: "none", mr: 1 }}
+          sx={{ mr: 1 }}
           onClick={() => {
             localStorage.removeItem(values.draftId!);
             setDrafts();

src/theme.tsx

@@ -33,6 +33,7 @@ export const theme = createTheme({
       styleOverrides: {
         root: {
           borderRadius: "1000px",
+          textTransform: "none",
         },
       },
     },
@@ -44,5 +45,12 @@ export const theme = createTheme({
         },
       },
     },
+    MuiContainer: {
+      styleOverrides: {
+        root: {
+          marginLeft: 0,
+        },
+      },
+    },
   },
 });

src/user/hooks/useGenerateApiKey.tsx

@@ -0,0 +1,45 @@
+import { buildAdServerV2Endpoint } from "util/environment";
+import { useCallback, useState } from "react";
+
+export function useGenerateApiKey() {
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState<string>();
+  const [error, setError] = useState<string>();
+
+  const generate = useCallback((advertiserId: string) => {
+    setLoading(true);
+    createKey(advertiserId)
+      .then((res) => {
+        setData(res);
+      })
+      .catch((error) => {
+        setError(error.message);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, []);
+
+  return { generate, data, loading, error };
+}
+
+async function createKey(advertiserId: string): Promise<string> {
+  const res = await fetch(buildAdServerV2Endpoint("/auth/api-key"), {
+    method: "POST",
+    mode: "cors",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+    body: JSON.stringify({
+      advertiserId,
+    }),
+  });
+
+  if (res.status !== 200) {
+    throw new Error("cannot create key");
+  }
+
+  const { apiKey } = await res.json();
+  return apiKey;
+}

src/user/settings/NewKeyPairModal.tsx

@@ -9,7 +9,7 @@ import {
 } from "@mui/material";
 import { useUpdateAdvertiserMutation } from "graphql/advertiser.generated";
 import * as tweetnacl from "tweetnacl";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { IAdvertiser } from "auth/context/auth.interface";
 import { CardContainer } from "components/Card/CardContainer";
 
@@ -34,7 +34,8 @@ interface Props {
 
 export function NewKeyPairModal({ advertiser }: Props) {
   const [saving, setSaving] = useState(false);
-  const [publicKey, setPublicKey] = useState(advertiser.publicKey);
+  const publicKey = useRef<string | null>();
+  publicKey.current = advertiser.publicKey;
   const [newPublicKey, setNewPublicKey] = useState("");
   const [newPrivateKey, setNewPrivateKey] = useState("");
   const [privateKey, setPrivateKey] = useState("");
@@ -46,11 +47,11 @@ export function NewKeyPairModal({ advertiser }: Props) {
     variables: {
       updateAdvertiserInput: {
         id: advertiser.id,
-        publicKey: publicKey,
+        publicKey: publicKey.current,
       },
     },
     onCompleted() {
-      setPublicKey(newPublicKey);
+      publicKey.current = newPublicKey;
       setPrivateKey("");
       setNewPrivateKey("");
       closeNewKeypairModal();
@@ -105,11 +106,11 @@ export function NewKeyPairModal({ advertiser }: Props) {
           used to decrypt and view conversion data.
         </Typography>
 
-        {publicKey !== "" && (
+        {publicKey.current !== "" && (
           <Box marginTop={1}>
             <Typography>Your organization's public key:</Typography>
             <Box component="pre" marginY={0}>
-              {publicKey}
+              {publicKey.current}
             </Box>
           </Box>
         )}