refactor: move inline styling class-based styles

Author: Muhammad Faraz Maqsood

src/CourseTeamManagement/CoursesTable.jsx

@@ -266,14 +266,6 @@ export default function CoursesTable({
           data-testid={`role-dropdown-${courseId}`}
           variant="outline-primary"
           disabled={isDisabled}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            padding: '2px 8px',
-            width: '95px',
-            borderRadius: '6px',
-          }}
         >
           <span>{title}</span>
           <ArrowDropDown className="ml-2" />
@@ -326,7 +318,7 @@ export default function CoursesTable({
       checked={allChecked}
       onChange={handleHeaderCheckboxChange}
       aria-label="Select all rows"
-      style={{ marginLeft: 8 }}
+      className="ml-2"
     />
   );
   // eslint-disable-next-line react/no-unstable-nested-components
@@ -336,7 +328,7 @@ export default function CoursesTable({
       checked={!!checkedRows[row.original.course_id]}
       onChange={() => handleCheckboxChange(row.original.course_id)}
       aria-label={`Select row for ${row.original.course_name}`}
-      style={{ marginLeft: 8 }}
+      className="ml-2"
     />
   );
   const sortableHeader = (id, label) => (
@@ -426,7 +418,7 @@ export default function CoursesTable({
         getRowId={(row) => row.course_id}
       >
         <DataTable.TableControlBar />
-        <div style={{ height: 450, overflow: 'auto' }}>
+        <div className="course-team-table-content-size">
           {sortedAndFilteredData.length > 0 && <DataTable.Table />}
           {sortedAndFilteredData.length === 0 && (
             <div className="pgn__data-table-empty">{intl.formatMessage(messages.noResultsFoundForTable)}</div>
@@ -439,7 +431,7 @@ export default function CoursesTable({
           onClick={() => setShowModal(true)}
           disabled={!isSaveBtnEnabled}
           variant="danger"
-          style={{ width: '8%' }}
+          className="save-changes-btn"
           data-testid="save-course-changes"
         >
           {intl.formatMessage(messages.saveButtonLabel)}

src/CourseTeamManagement/OrgDropdownWithSearch.jsx

@@ -26,21 +26,14 @@ const OrgDropdownWithSearch = ({ org, setOrg, orgFilterChoices }) => {
   }, []);
 
   return (
-    <div ref={dropdownRef} style={{ position: 'relative' }} className="ml-2">
+    <div ref={dropdownRef} className="course-team-table-org-filter ml-2">
       <Button
         variant="outline-primary"
         className="w-100 text-start d-flex justify-content-between align-items-center"
         onClick={() => setIsOpen((prev) => !prev)}
         data-testid="org-dropdown-toggle"
       >
-        <span
-          style={{
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            marginRight: 8,
-          }}
-        >
+        <span className="course-team-table-org-filter-btn">
           {org
             ? orgFilterChoices.find((c) => c.value === org)?.name
             : intl.formatMessage(messages.allOrgsFilterLabel)}
@@ -49,17 +42,7 @@ const OrgDropdownWithSearch = ({ org, setOrg, orgFilterChoices }) => {
       </Button>
 
       {isOpen && (
-        <div
-          className="border rounded-sm bg-white"
-          style={{
-            position: 'absolute',
-            top: '50px',
-            zIndex: 1000,
-            width: '250%',
-            maxHeight: 250,
-            overflowY: 'auto',
-          }}
-        >
+        <div className="border rounded-sm bg-white course-team-table-org-filter-menu-container">
           <Form.Control
             type="text"
             placeholder={intl.formatMessage(messages.searchPlaceholder)}

src/CourseTeamManagement/SortableHeader.jsx

@@ -1,4 +1,4 @@
-import { ArrowDropDown, ArrowDropUpDown } from '@openedx/paragon/icons';
+import { ArrowDropDown, ArrowDropUpDown, ArrowDropUp } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 
@@ -10,7 +10,7 @@ const SortableHeader = ({
 }) => {
   const intl = useIntl();
   const isSorted = sortBy[0]?.id === id;
-  const isDesc = sortBy[0]?.desc;
+  const isAscending = sortBy[0]?.desc;
 
   const handleClick = () => {
     setSortBy((prev) => {
@@ -26,22 +26,15 @@ const SortableHeader = ({
 
   let SortIcon = <ArrowDropUpDown data-testid={`sort-icon-${id}`} onClick={handleClick} />;
   if (isSorted) {
-    if (isDesc) {
-      SortIcon = <ArrowDropDown onClick={handleClick} style={{ transform: 'rotate(180deg)' }} />;
+    if (isAscending) {
+      SortIcon = <ArrowDropUp onClick={handleClick} />;
     } else {
       SortIcon = <ArrowDropDown data-testid={`ascending-sort-icon-${id}`} onClick={handleClick} />;
     }
   }
 
   return (
-    <div
-      style={{
-        cursor: 'pointer',
-        display: 'flex',
-        alignItems: 'center',
-        gap: 4,
-      }}
-    >
+    <div className="sorted-header">
       {intl.formatMessage(label)}
       {SortIcon}
     </div>

src/CourseTeamManagement/TableActions.jsx

@@ -50,7 +50,7 @@ const TableActions = ({
             (
               <span className="d-flex align-items-center">
                 {intl.formatMessage(statusLabelMessage)}
-                <Icon style={{ marginLeft: 8 }} src={ArrowDropDown} />
+                <Icon className="ml-2" src={ArrowDropDown} />
               </span>
             )
           }
@@ -87,7 +87,7 @@ const TableActions = ({
             (
               <span className="d-flex align-items-center">
                 {intl.formatMessage(messages.statusActionsFilterLabel)}
-                <Icon style={{ marginLeft: 8 }} src={ArrowDropDown} />
+                <Icon className="ml-2" src={ArrowDropDown} />
               </span>
             )
           }

src/CourseTeamManagement/index.scss

@@ -31,6 +31,17 @@
     justify-content: center;
     height: 50vh;
     color: '#003057';
+
+    h3 {
+        font-weight: 600;
+        margin-bottom: 8px
+    }
+
+    p {
+        color: #495057;
+        font-size: 18px;
+        text-align: center;
+    }
 }
 
 .course-team-management-courses-table {
@@ -117,6 +128,42 @@
     .pgn__data-table-empty {
         margin-left: 8px;
     }
+
+    .save-changes-btn {
+        width: 96px;
+    }
+
+    .course-team-table-org-filter {
+        position: relative;
+
+        .course-team-table-org-filter-btn {
+            white-space: nowrap;
+            overflow: 'hidden';
+            text-overflow: 'ellipsis';
+            margin-right: 8px;
+        }
+
+        .course-team-table-org-filter-menu-container {
+            position: absolute;
+            top: 50px;
+            z-index: 1000;
+            width: 320px;
+            max-height: 250px;
+            overflow-y: auto;
+        }
+    }
+}
+
+.sorted-header {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 4px,
+}
+
+.course-team-table-content-size {
+    overflow: auto;
+    height: 450px;
 }
 
 .custom-table-actions-container {
@@ -145,6 +192,12 @@
     height: 32px;
     border: 1px solid var(--Light-200, #F3F1ED);
     border-color: var(--Light-200, #F3F1ED);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2px 8px;
+    width: 95px;
+    border-radius: 6px;
 }
 
 .course-team-management-role-col-dropdown::after {

src/users/UserPage.jsx

@@ -202,10 +202,8 @@ export default function UserPage({
       {loading && <PageLoading srMessage="Loading" />}
       {showNoUserSelectedDescription && (
         <div className="course-team-management-no-user-selected">
-          <h3 style={{ fontWeight: 600, marginBottom: 8 }}>{intl.formatMessage(messages.noUserSelected)}</h3>
-          <p style={{ color: '#495057', fontSize: 18, textAlign: 'center' }}>
-            {intl.formatMessage(messages.noUserSelectedDescription)}
-          </p>
+          <h3>{intl.formatMessage(messages.noUserSelected)}</h3>
+          <p>{intl.formatMessage(messages.noUserSelectedDescription)}</p>
         </div>
       )}
       {isOnCourseTeamPage && !loading && data?.user && userCourses.length > 0