fix: replace strict classNames with themeable className. (#101)

Co-authored-by: SaadYousaf <saadyousaf@A006-00314.local>

src/pages-and-resources/pages/PageCard.jsx

@@ -28,7 +28,7 @@ function PageCard({ intl, page }) {
   const pageStatusMsgId = page.isEnabled ? 'pageStatus.enabled' : 'pageStatus.disabled';
   const componentClasses = classNames(
     'd-flex flex-column align-content-stretch',
-    'bg-white p-3 border shadow',
+    'bg-light-100 p-3 border shadow',
     { 'border-gray-500': page.isEnabled, 'border-gray-100': !page.isEnabled },
   );
 

src/pages-and-resources/resources/ResourcesList.jsx

@@ -9,7 +9,7 @@ function ResourceList({ intl, resources }) {
   return (
     <div>
       <h3 className="text-info-500">{intl.formatMessage(messages['resources.subheading'])}</h3>
-      <div className="row bg-white text-info-500 border shadow justify-content-center align-items-center my-3 mx-1">
+      <div className="row bg-light-100 text-info-500 border shadow justify-content-center align-items-center my-3 mx-1">
         <div className="col-1 font-weight-bold">{intl.formatMessage(messages['resources.custom.title'])}</div>
         <div className="col-8 my-3">
           {intl.formatMessage(messages['resources.custom.description'])}