extract inline css to module

DataBiosphere · Sep 19, 2023 · 6b3c9a5 · 6b3c9a5
1 parent dc5de61
commit 6b3c9a5
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 22 deletions.
diff --git a/src/pages/researcher_console/DatasetSubmissions.jsx b/src/pages/researcher_console/DatasetSubmissions.jsx
@@ -8,6 +8,7 @@ import SearchBar from '../../components/SearchBar';
 import {DataSet} from '../../libs/ajax';
 import DatasetSubmissionsTable from './DatasetSubmissionsTable';
 import {Storage} from '../../libs/storage';
+import styles from './DatasetTerms.module.css';
 
 export default function DatasetSubmissions() {
 
@@ -111,14 +112,7 @@ export default function DatasetSubmissions() {
 
   return (
     <div style={Styles.PAGE}>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          width: '112%',
-          marginLeft: '-6%',
-          padding: '0 2.5%'
-        }}>
+      <div className={styles['submitted-datasets-header']}>
         <div className={'left-header-section'} style={Styles.LEFT_HEADER_SECTION}>
           <div
             style={Styles.ICON_CONTAINER}>
@@ -141,17 +135,13 @@ export default function DatasetSubmissions() {
             <div>{addDatasetButton}</div>
           </div>
         </div>
-        <div className={'right-header-section'} style={{width: '50%', display: 'flex', justifyContent: 'flex-end'}}>
+        <div className={`right-header-section ${styles['search-box-container']}`}>
           <SearchBar
             handleSearchChange={handleSearchChange}
             searchRef={searchRef}/>
         </div>
       </div>
-      <div style={{
-        width: '100%',
-        marginTop: 10,
-        marginLeft: 25
-      }}>
+      <div className={styles['term-table-container']}>
         <DatasetSubmissionsTable terms={filteredTerms} isLoading={isLoading}/>
       </div>
     </div>

diff --git a/src/pages/researcher_console/DatasetSubmissionsTable.jsx b/src/pages/researcher_console/DatasetSubmissionsTable.jsx
@@ -5,6 +5,7 @@ import loadingIndicator from '../../images/loading-indicator.svg';
 import SortableTable from '../../components/sortable_table/SortableTable';
 import {concat, isNil, join} from 'lodash/fp';
 import Button from '@mui/material/Button';
+import styles from './DatasetTerms.module.css';
 
 
 export default function DatasetSubmissionsTable(props) {
@@ -80,14 +81,7 @@ export default function DatasetSubmissionsTable(props) {
         <div>
           <Button
             href={editLink}
-            sx={{
-              fontSize: 14,
-              border: '1px solid #0948B7',
-              borderRadius: '4px',
-              height: 25,
-              cursor: 'pointer',
-              color: '#0948B7',
-            }}>
+            className={styles['action-button']}>
             Edit
           </Button>
         </div>;

diff --git a/src/pages/researcher_console/DatasetTerms.module.css b/src/pages/researcher_console/DatasetTerms.module.css
@@ -0,0 +1,28 @@
+.submitted-datasets-header {
+    display: flex;
+    justify-content: space-between;
+    width: 112%;
+    margin-left: -6%;
+    padding: 0 2.5%;
+}
+
+.term-table-container {
+    width: 100%;
+    margin-top: 10px;
+    margin-left: 22px;
+}
+
+.search-box-container {
+    width: 50%;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.action-button {
+    font-size: 14px;
+    border: 1px solid #0948B7;
+    border-radius: 4px;
+    height: 25px;
+    cursor: pointer;
+    color: #0948B7;
+}