Fixed color and alignment in data table (#103)

* Fixed color and alignment in the data table

* fix: fixed column width

src/index.scss

@@ -7,3 +7,4 @@
 @import "~@edx/frontend-component-footer/dist/footer";
 
 @import "proctored-exam-settings/proctoredExamSettings";
+@import "pages-and-resources/discussions/app-list/AppList";

src/pages-and-resources/discussions/app-list/AppList.jsx

@@ -77,10 +77,13 @@ function AppList({ intl }) {
         {intl.formatMessage(messages.supportedFeatures)}
       </h3>
 
-      <FeaturesTable
+      <div className="app-list-data-table">
-        apps={apps}
+        <FeaturesTable
-        features={features}
+          apps={apps}
-      />
+          features={features}
+        />
+      </div>
+
     </div>
   );
 }

src/pages-and-resources/discussions/app-list/AppList.scss

@@ -0,0 +1,27 @@
+.app-list-data-table {
+  table {
+    table-layout: fixed;
+  }
+
+  .pgn__data-table-container {
+    tr {
+      th {
+        background-color: $white;
+        text-align: center;
+
+        .d-flex, span {
+          display: block !important;
+        }
+      }
+
+      td {
+        background-color: $white;
+
+        .pgn__data-table-cell-wrap {
+          max-width: unset;
+        }
+
+      }
+    }
+  }
+}

src/pages-and-resources/discussions/app-list/FeaturesTable.jsx

@@ -19,11 +19,11 @@ function FeaturesTable({ apps, features, intl }) {
           // If our app's set of feature Ids includes this feature, return a checkmark.
           // i.e, if this app has the current feature, check it!
           appCheckmarkCells[app.id] = app.featureIds.includes(feature.id) ? (
-            <div key={`${app.id}&${feature.id}`}>
+            <div className="text-center" key={`${app.id}&${feature.id}`}>
               <FontAwesomeIcon icon={faCheck} color="green" />
             </div>
           ) : (
-            <div key={`${app.id}&${feature.id}`}><Remove /></div>
+            <div className="text-center" key={`${app.id}&${feature.id}`}><Remove /></div>
           );
         });