✨ Feature/gh158 styling template

web/config/tailwind.config.js

@@ -2,7 +2,21 @@
 module.exports = {
   content: ['src/**/*.{js,jsx,ts,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: '#BC611E',
+        rustyOrange: '#BC611E',
+        blackBean: '#371108',
+        beige: '#FCF5F0',
+        seaFoam: '#009788',
+        grey: '#2E3747',
+      },
+      fontFamily: {
+        sans: ['Jost', 'sans-serif'],
+        int: ['Inter', 'sans-serif'],
+        mono: ['Roboto Mono', 'monospace'],
+      },
+    },
   },
   plugins: [],
 }

web/src/Routes.tsx

@@ -7,30 +7,27 @@ import { RolesLayout } from './layouts/Admin/RolesLayout'
 import { TeamsLayout } from './layouts/Admin/TeamsLayout'
 import { UsersLayout } from './layouts/Admin/UsersLayout'
 import { MainLayout } from './layouts/MainLayout/MainLayout'
-import { ProfileLayout } from './layouts/ProfileLayout'
 
 const Routes = () => {
   return (
     <Router useAuth={useAuth}>
-      <Route path="/login" page={LoginPage} name="login" />
-      <Route path="/signup" page={SignupPage} name="signup" />
-      <Route path="/forgot-password" page={ForgotPasswordPage} name="forgotPassword" />
-      <Route path="/reset-password" page={ResetPasswordPage} name="resetPassword" />
-      <Route path="/create-password" page={CreatePasswordPage} name="createPassword" />
-      <Route path="/verification" page={VerificationPage} name="verification" />
-      <Route path="/verification-reset" page={VerificationResetPage} name="verificationReset" />
       <Set wrap={MainLayout}>
+        <Route path="/login" page={LoginPage} name="login" />
+        <Route path="/signup" page={SignupPage} name="signup" />
+        <Route path="/forgot-password" page={ForgotPasswordPage} name="forgotPassword" />
+        <Route path="/reset-password" page={ResetPasswordPage} name="resetPassword" />
+        <Route path="/create-password" page={CreatePasswordPage} name="createPassword" />
+        <Route path="/verification" page={VerificationPage} name="verification" />
+        <Route path="/verification-reset" page={VerificationResetPage} name="verificationReset" />
         <Route path="/" page={HomePage} name="home" />
         <Route notfound page={NotFoundPage} />
         <Route path="/forbidden" page={ForbiddenPage} name="forbidden" />
       </Set>
       <Set wrap={MainLayout}>
         <Private unauthenticated="forbidden">
-          <Set wrap={ProfileLayout}>
-            <Route path="/profile" page={ProfileEditProfilePage} name="profile" />
-            <Route path="/profile/edit_password" page={ProfileEditPasswordPage} name="editPassword" />
-            <Route path="/profile/edit_email" page={ProfileEditEmailPage} name="editEmail" />
-          </Set>
+          <Route path="/profile" page={ProfileEditProfilePage} name="profile" />
+          <Route path="/profile/edit_password" page={ProfileEditPasswordPage} name="editPassword" />
+          <Route path="/profile/edit_email" page={ProfileEditEmailPage} name="editEmail" />
         </Private>
         <Private roles="super admin" unauthenticated="forbidden">
           <Set wrap={AdminLayout}>

web/src/components/Admin/Role/EditRoleCell/EditRoleCell.tsx

@@ -48,13 +48,11 @@ export const Success = ({ role }: CellSuccessProps<EditRoleById>) => {
   return (
     <>
       <MetaTags title={`${role.name} | Edit Role`} />
-      <div className="rw-segment">
-        <header className="rw-segment-header">
-          <h2 className="rw-heading rw-heading-secondary">
-            Edit Role {role.id}
-          </h2>
-        </header>
-        <div className="rw-segment-main">
+      <div className="flex max-w-[500px] flex-col text-blackBean">
+        <h2 className="my-5 font-sans text-2xl font-bold">
+          Edit Role {role.id}
+        </h2>
+        <div>
           <RoleForm
             role={role}
             onSave={onSave}

web/src/components/Admin/Role/NewRole/NewRole.test.tsx

@@ -9,12 +9,6 @@ describe('NewRole', () => {
     }).not.toThrow()
   })
 
-  it('renders a header', () => {
-    render(<NewRole />)
-
-    expect(screen.getByText('New Role')).toBeInTheDocument()
-  })
-
   it('renders RoleForm successfully', () => {
     render(<NewRole />)
     const element = screen.getByText('Name')

web/src/components/Admin/Role/NewRole/NewRole.tsx

@@ -28,13 +28,9 @@ const NewRole = () => {
   }
 
   return (
-    <div className="rw-segment">
-      <header className="rw-segment-header">
-        <h2 className="rw-heading rw-heading-secondary">New Role</h2>
-      </header>
-      <div className="rw-segment-main">
-        <RoleForm onSave={onSave} loading={loading} error={error} />
-      </div>
+    <div className="flex max-w-[500px] flex-col text-blackBean">
+      <h2 className="my-5 font-sans text-2xl font-bold">Add Role</h2>
+      <RoleForm onSave={onSave} loading={loading} error={error} />
     </div>
   )
 }

web/src/components/Admin/Role/Role/Role.tsx

@@ -31,9 +31,9 @@ const Role = ({ role }) => {
 
   return (
     <>
-      <div className="rw-segment">
+      <div className="rw-segment text-blackBean">
         <header className="rw-segment-header">
-          <h2 className="rw-heading rw-heading-secondary">
+          <h2 className="rw-heading rw-heading-secondary text-blackBean">
             Role {role.id} Detail
           </h2>
         </header>
@@ -50,17 +50,14 @@ const Role = ({ role }) => {
           </tbody>
         </table>
       </div>
-      <nav className="rw-button-group">
-        <Link
-          to={routes.adminEditRole({ id: role.id })}
-          className="rw-button rw-button-blue"
-        >
-          Edit
-        </Link>
+      <nav className="my-4 flex flex-row items-center">
+        <div className="flex h-12 items-center justify-center rounded-lg border-2 border-seaFoam bg-seaFoam px-8 font-sans text-lg font-bold text-white">
+          <Link to={routes.adminEditRole({ id: role.id })}>Edit</Link>
+        </div>
         {membershipRoleCount === 0 && (
           <button
             type="button"
-            className="rw-button rw-button-red"
+            className="mx-5 text-red-500 underline"
             onClick={() => onDeleteClick(role.id)}
           >
             Delete

web/src/components/Admin/Role/RoleForm/RoleForm.tsx

@@ -13,7 +13,7 @@ const RoleForm = (props) => {
   }
 
   return (
-    <div className="rw-form-wrapper">
+    <div>
       <Form onSubmit={onSubmit} error={props.error}>
         <FormError
           error={props.error}
@@ -24,14 +24,15 @@ const RoleForm = (props) => {
 
         <Label
           name="name"
-          className="rw-label"
+          className="rw-label font-int text-blackBean"
           errorClassName="rw-label rw-label-error"
         >
           Name
         </Label>
 
         <TextField
           name="name"
+          placeholder="Enter role name"
           defaultValue={props.role?.name}
           className="rw-input"
           errorClassName="rw-input rw-input-error"
@@ -40,9 +41,12 @@ const RoleForm = (props) => {
 
         <FieldError name="name" className="rw-field-error" />
 
-        <div className="rw-button-group">
-          <Submit disabled={props.loading} className="rw-button rw-button-blue">
-            Save
+        <div className="my-4 flex">
+          <Submit
+            disabled={props.loading}
+            className="flex h-12 items-center justify-center rounded-lg border-2 border-rustyOrange bg-rustyOrange px-10 font-sans text-lg font-bold text-white"
+          >
+            Add Role
           </Submit>
         </div>
       </Form>

web/src/components/Admin/Role/Roles/Roles.test.tsx

@@ -20,34 +20,37 @@ describe('RolesList', () => {
     expect(element).toBeVisible()
   })
 
-  it('renders role id successfully', () => {
+  it('renders name successfully', () => {
     render(<RolesList roles={standard().roles} />)
     const [firstTeam, secondTeam] = standard().roles
-    const [firstElement] = screen.getAllByText(firstTeam.id)
-    const [secondElement] = screen.getAllByText(secondTeam.id)
+    const [firstElement] = screen.getAllByText(firstTeam.name)
+    const [secondElement] = screen.getAllByText(secondTeam.name)
 
     expect(firstElement).toBeInTheDocument()
     expect(firstElement).toBeVisible()
     expect(secondElement).toBeInTheDocument()
     expect(secondElement).toBeVisible()
   })
 
-  it('renders name successfully', () => {
+  it('Has link to show', () => {
     render(<RolesList roles={standard().roles} />)
     const [firstTeam, secondTeam] = standard().roles
-    const [firstElement] = screen.getAllByText(firstTeam.name)
-    const [secondElement] = screen.getAllByText(secondTeam.name)
+    const [firstElement, secondElement] = screen.getAllByTestId('showRole')
 
-    expect(firstElement).toBeInTheDocument()
-    expect(firstElement).toBeVisible()
-    expect(secondElement).toBeInTheDocument()
-    expect(secondElement).toBeVisible()
+    expect(firstElement).toHaveAttribute(
+      'href',
+      routes.adminRole({ id: firstTeam.id })
+    )
+    expect(secondElement).toHaveAttribute(
+      'href',
+      routes.adminRole({ id: secondTeam.id })
+    )
   })
 
   it('Has link to edit', () => {
     render(<RolesList roles={standard().roles} />)
     const [firstTeam, secondTeam] = standard().roles
-    const [firstElement, secondElement] = screen.getAllByText('Edit')
+    const [firstElement, secondElement] = screen.getAllByTestId('editRole')
 
     expect(firstElement).toHaveAttribute(
       'href',
@@ -61,7 +64,7 @@ describe('RolesList', () => {
 
   it('renders delete button', () => {
     render(<RolesList roles={standard().roles} />)
-    const [firstElement, secondElement] = screen.getAllByText('Delete')
+    const [firstElement, secondElement] = screen.getAllByTestId('archiveIcon')
 
     expect(firstElement).toBeInTheDocument()
     expect(secondElement).toBeInTheDocument()

web/src/components/Admin/Role/Roles/Roles.tsx

@@ -3,6 +3,9 @@ import { useMutation } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'
 
 import { QUERY } from 'src/components/Admin/Role/RolesCell'
+import { Archive } from 'src/components/Icon/Archive'
+import { Eye } from 'src/components/Icon/Eye'
+import { Pen } from 'src/components/Icon/Pen'
 
 const DELETE_ROLE_MUTATION = gql`
   mutation DeleteRoleMutation($id: String!) {
@@ -41,49 +44,47 @@ const RolesList = ({ roles }) => {
   }
 
   return (
-    <div className="rw-segment rw-table-wrapper-responsive">
+    <div className="rw-segment rw-table-wrapper-responsive font-int text-grey">
       <table className="rw-table">
         <thead>
           <tr>
-            <th scope="col">Id</th>
             <th scope="col">Name</th>
-            <th scope="col">Actions</th>
           </tr>
         </thead>
         <tbody>
           {roles.map((role) => {
             const membershipRoleCount = role.membershipRoles.length
-
             return (
               <tr key={role.id}>
-                <td>{truncate(role.id)}</td>
                 <td>{truncate(role.name)}</td>
                 <td>
-                  <nav className="rw-table-actions">
+                  <nav className="rw-table-actions opacity-50">
                     <Link
+                      data-testid="showRole"
                       to={routes.adminRole({ id: role.id })}
                       title={'Show role ' + role.id + ' detail'}
                       className="rw-button rw-button-small"
                     >
-                      Show
+                      <Eye />
                     </Link>
                     <Link
+                      data-testid="editRole"
                       to={routes.adminEditRole({ id: role.id })}
                       title={'Edit role ' + role.id}
                       className="rw-button rw-button-small rw-button-blue"
                     >
-                      Edit
+                      <Pen />
                     </Link>
                     <button
                       type="button"
                       title={'Delete role ' + role.id}
-                      className={`rw-button rw-button-small ${
-                        membershipRoleCount === 0 && 'rw-button-red'
+                      className={`rw-button rw-button-small opacity-20 ${
+                        membershipRoleCount === 0 && 'rw-button-red opacity-100'
                       }`}
                       onClick={() => onDeleteClick(role.id)}
                       disabled={membershipRoleCount > 0}
                     >
-                      Delete
+                      <Archive />
                     </button>
                   </nav>
                 </td>

web/src/components/Admin/Team/EditTeamCell/EditTeamCell.tsx

@@ -50,20 +50,11 @@ export const Success = ({ team }: CellSuccessProps<EditTeamById>) => {
   return (
     <>
       <MetaTags title={`${team.name} | Edit Team`} />
-      <div className="rw-segment">
-        <header className="rw-segment-header">
-          <h2 className="rw-heading rw-heading-secondary">
-            Edit Team {team.id}
-          </h2>
-        </header>
-        <div className="rw-segment-main">
-          <TeamForm
-            team={team}
-            onSave={onSave}
-            error={error}
-            loading={loading}
-          />
-        </div>
+      <div className="flex max-w-[500px] flex-col text-blackBean">
+        <h2 className="my-5 font-sans text-2xl font-bold">
+          Edit Team {team.id}
+        </h2>
+        <TeamForm team={team} onSave={onSave} error={error} loading={loading} />
       </div>
     </>
   )