feat(user): replace edit icon button with tab (#273)

* feat(user): replace edit icon button with tab

* fix(pages/user): remove `formWidth` page styling

Author: nicholaschiang

components/user/display.tsx

@@ -1,17 +1,13 @@
 import { Fragment, useMemo } from 'react';
-import { IconButton } from '@rmwc/icon-button';
 import Image from 'next/image';
-import Link from 'next/link';
 import cn from 'classnames';
 import useTranslation from 'next-translate/useTranslation';
 
 import Avatar from 'components/avatar';
-import EditIcon from 'components/icons/edit';
 import RequestForm from 'components/user/request-form';
 
 import { getEmailLink, getPhoneLink, join } from 'lib/utils';
 import { User } from 'lib/model/user';
-import { useOrg } from 'lib/context/org';
 import { useUser } from 'lib/context/user';
 
 import styles from './display.module.scss';
@@ -27,7 +23,6 @@ export default function UserDisplay({
   langs,
   subjects,
 }: UserDisplayProps): JSX.Element {
-  const { org } = useOrg();
   const { orgs } = useUser();
   const { t, lang: locale } = useTranslation();
 
@@ -102,13 +97,6 @@ export default function UserDisplay({
             src={user?.photo}
             priority
           />
-          {user && admin && (
-            <div className={styles.actions}>
-              <Link href={`/${org?.id || ''}/users/${user?.id || ''}/edit`}>
-                <IconButton icon={<EditIcon />} label='Edit user' />
-              </Link>
-            </div>
-          )}
         </a>
         <a
           rel='noopener noreferrer'

components/user/edit.module.scss

@@ -10,7 +10,7 @@
 }
 
 .wrapper {
-  @include common.wrapper(sizes.$form-width-with-margin);
+  @include common.wrapper();
   padding: 48px 24px;
 
   .display {

pages/[org]/users/[id]/edit.tsx

@@ -4,8 +4,8 @@ import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
 import { useRouter } from 'next/router';
 import useSWR from 'swr';
 
-import { EmptyHeader } from 'components/navigation';
 import Page from 'components/page';
+import { TabHeader } from 'components/navigation';
 import UserEdit from 'components/user/edit';
 
 import { Org, OrgJSON } from 'lib/model/org';
@@ -40,12 +40,24 @@ function UserEditPage({
 
   return (
     <OrgContext.Provider value={{ org: org ? Org.fromJSON(org) : undefined }}>
-      <Page
-        title={`${data?.name || 'Loading'} - Edit - Tutorbook`}
-        formWidth
-        {...props}
-      >
-        <EmptyHeader formWidth />
+      <Page title={`${data?.name || 'Loading'} - Edit - Tutorbook`} {...props}>
+        <TabHeader
+          tabs={[
+            {
+              label: 'About',
+              href: `/${query.org as string}/users/${query.id as string}`,
+            },
+            {
+              active: true,
+              label: 'Edit',
+              href: `/${query.org as string}/users/${query.id as string}/edit`,
+            },
+            {
+              label: 'Hours',
+              href: `/${query.org as string}/users/${query.id as string}/hours`,
+            },
+          ]}
+        />
         <UserEdit user={data ? User.fromJSON(data) : undefined} />
       </Page>
     </OrgContext.Provider>

pages/[org]/users/[id]/hours.tsx

@@ -40,17 +40,17 @@ function UserHoursPage({
 
   return (
     <OrgContext.Provider value={{ org: org ? Org.fromJSON(org) : undefined }}>
-      <Page
-        title={`${data?.name || 'Loading'} - Hours - Tutorbook`}
-        formWidth
-        {...props}
-      >
+      <Page title={`${data?.name || 'Loading'} - Hours - Tutorbook`} {...props}>
         <TabHeader
           tabs={[
             {
               label: 'About',
               href: `/${query.org as string}/users/${query.id as string}`,
             },
+            {
+              label: 'Edit',
+              href: `/${query.org as string}/users/${query.id as string}/edit`,
+            },
             {
               active: true,
               label: 'Hours',

pages/[org]/users/[id]/index.tsx

@@ -98,6 +98,10 @@ function UserDisplayPage({
                 label: 'About',
                 href: `/${query.org as string}/users/${query.id as string}`,
               },
+              {
+                label: 'Edit',
+                href: `/${query.org as string}/users/${query.id as string}/edit`,
+              },
               {
                 label: 'Hours',
                 href: `/${query.org as string}/users/${