fix: course team UI bugs (#592)

src/course-team/CourseTeam.jsx

@@ -62,7 +62,7 @@ const CourseTeam = ({ courseId }) => {
 
   return (
     <>
-      <Container size="xl" className="m-4">
+      <Container size="xl" className="px-4">
         <section className="course-team-container mb-4">
           <Layout
             lg={[{ span: 9 }, { span: 3 }]}
@@ -79,7 +79,7 @@ const CourseTeam = ({ courseId }) => {
                     subtitle={intl.formatMessage(messages.headingSubtitle)}
                     headerActions={isAllowActions && (
                       <Button
-                        variant="outline-success"
+                        variant="primary"
                         iconBefore={IconAdd}
                         size="sm"
                         onClick={openForm}

src/course-team/add-team-member/AddTeamMember.jsx

@@ -16,7 +16,7 @@ const AddTeamMember = ({ onFormOpen, isButtonDisable }) => {
         <span className="text-gray-500 small">{intl.formatMessage(messages.description)}</span>
       </div>
       <Button
-        variant="outline-success"
+        variant="primary"
         iconBefore={IconAdd}
         onClick={onFormOpen}
         disabled={isButtonDisable}

src/course-team/constants.js

@@ -4,4 +4,14 @@ export const MODAL_TYPES = {
   warning: 'warning',
 };
 
+export const BADGE_STATES = {
+  admin: 'primary-700',
+  staff: 'gray-500',
+};
+
+export const USER_ROLES = {
+  admin: 'instructor',
+  staff: 'staff',
+};
+
 export const EXAMPLE_USER_EMAIL = 'username@domain.com';

src/course-team/course-team-member/CourseTeamMember.jsx

@@ -1,11 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Badge, Button, MailtoLink } from '@edx/paragon';
-import { DeleteOutline as DeleteOutlineIcon } from '@edx/paragon/icons';
+import {
+  Badge,
+  Button,
+  Icon,
+  IconButtonWithTooltip,
+  MailtoLink,
+} from '@edx/paragon';
+import { DeleteOutline } from '@edx/paragon/icons';
 
 import messages from './messages';
-import { USER_ROLES, BADGE_STATES } from '../../constants';
+import { USER_ROLES, BADGE_STATES } from '../constants';
 
 const CourseTeamMember = ({
   userName,
@@ -19,16 +25,17 @@ const CourseTeamMember = ({
 }) => {
   const intl = useIntl();
   const isAdminRole = role === USER_ROLES.admin;
+  const badgeColor = isAdminRole ? BADGE_STATES.admin : BADGE_STATES.staff;
 
   return (
     <div className="course-team-member" data-testid="course-team-member">
       <div className="member-info">
-        <Badge variant={isAdminRole ? BADGE_STATES.danger : BADGE_STATES.secondary} className="badge-current-user">
+        <Badge className={`badge-current-user bg-${badgeColor} text-light-100`}>
           {isAdminRole
             ? intl.formatMessage(messages.roleAdmin)
             : intl.formatMessage(messages.roleStaff)}
           {currentUserEmail === email && (
-            <span className="badge-current-user">{intl.formatMessage(messages.roleYou)}</span>
+            <span className="badge-current-user x-small text-light-500">{intl.formatMessage(messages.roleYou)}</span>
           )}
         </Badge>
         <span className="member-info-name font-weight-bold">{userName}</span>
@@ -45,13 +52,13 @@ const CourseTeamMember = ({
             >
               {isAdminRole ? intl.formatMessage(messages.removeButton) : intl.formatMessage(messages.addButton)}
             </Button>
-            <Button
-              className="delete-button"
-              variant="tertiary"
-              size="sm"
-              data-testid="delete-button"
-              iconBefore={DeleteOutlineIcon}
+            <IconButtonWithTooltip
+              src={DeleteOutline}
+              tooltipContent={intl.formatMessage(messages.deleteUserButton)}
               onClick={() => onDelete(email)}
+              iconAs={Icon}
+              alt={intl.formatMessage(messages.deleteUserButton)}
+              data-testid="delete-button"
             />
           </div>
         ) : (

src/course-team/course-team-member/CourseTeamMember.scss

@@ -29,7 +29,6 @@
     }
 
     .badge-current-user {
-      color: $gray-100;
       margin-left: .25rem;
     }
 
@@ -49,15 +48,5 @@
   .member-actions {
     display: flex;
     gap: $spacer;
-
-    .delete-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      & > span {
-        margin: 0;
-      }
-    }
   }
 }

src/course-team/course-team-member/messages.js

@@ -25,6 +25,10 @@ const messages = defineMessages({
     id: 'course-authoring.course-team.member.button.remove',
     defaultMessage: 'Remove admin access',
   },
+  deleteUserButton: {
+    id: 'course-authoring.course-team.member.button.delete',
+    defaultMessage: 'Delete user',
+  },
 });
 
 export default messages;

src/course-team/info-modal/InfoModal.jsx

@@ -45,7 +45,6 @@ const InfoModal = ({
           </Button>
           {modalType === MODAL_TYPES.delete && (
             <Button
-              variant="danger"
               onClick={(e) => {
                 e.preventDefault();
                 onDeleteSubmit();

src/course-team/info-modal/messages.js

@@ -3,7 +3,7 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 const messages = defineMessages({
   deleteModalTitle: {
     id: 'course-authoring.course-team.member.button.remove',
-    defaultMessage: 'Are you sure?',
+    defaultMessage: 'Delete course team member',
   },
   deleteModalMessage: {
     id: 'course-authoring.course-team.delete-modal.message',

src/course-team/utils.js

@@ -23,7 +23,7 @@ const getInfoModalSettings = (modalType, currentEmail, errorMessage, courseName,
     return {
       title: intl.formatMessage(messages.deleteModalTitle),
       message: intl.formatMessage(messages.deleteModalMessage, { email: currentEmail, courseName }),
-      variant: 'danger',
+      variant: '',
       closeButtonText: intl.formatMessage(messages.deleteModalCancelButton),
       submitButtonText: intl.formatMessage(messages.deleteModalDeleteButton),
       closeButtonVariant: 'tertiary',
@@ -34,7 +34,7 @@ const getInfoModalSettings = (modalType, currentEmail, errorMessage, courseName,
       message: errorMessage,
       variant: 'danger',
       closeButtonText: intl.formatMessage(messages.errorModalOkButton),
-      closeButtonVariant: 'danger',
+      closeButtonVariant: 'primary',
     };
   case MODAL_TYPES.warning:
     return {