#158 Add SecondNavbar css module

mitaai · Apr 7, 2021 · e188321 · e188321
1 parent e815705
commit e188321
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 42 deletions.
diff --git a/src/components/SecondNavbar/SecondNavbar.js b/src/components/SecondNavbar/SecondNavbar.js
@@ -6,6 +6,7 @@ import { InfoSquare } from 'react-bootstrap-icons';
 import FilterPopover from '../FilterPopover';
 import { publicationFieldName } from '../../utils/metadataUtil';
 import DocumentZoomSlider from '../DocumentZoomSlider/DocumentZoomSlider';
+import styles from './SecondNavbar.module.scss';
 
 const SecondNavbar = ({
   session,
@@ -55,12 +56,12 @@ const SecondNavbar = ({
 
   return (
     <>
-      <Navbar bg="light" variant="light" className="second-navbar px-0" data-testid="second-navbar">
+      <Navbar bg="light" variant="light" className={`px-0 ${styles.secondnav}`} data-testid="second-navbar">
         <Container fluid className="px-5">
-          <Row style={{ width: '100%' }}>
+          <Row className={styles.row}>
             <Col md={type === 'document' ? documentColumnSize : 12}>
               <Nav>
-                <Breadcrumb>
+                <Breadcrumb className={styles.breadcontainer}>
                   <Breadcrumb.Item active={type === 'dashboard'} href="/">Dashboard</Breadcrumb.Item>
                   {type === 'document' && (
                   <Breadcrumb.Item href="/documents" active={!document}>
@@ -96,7 +97,7 @@ const SecondNavbar = ({
                   <Breadcrumb.Item active>{document.title}</Breadcrumb.Item>
                   )}
                   {type === 'document' && document && docView && (
-                  <span id="btn-document-more-info">
+                  <span className={styles.infobutton}>
                     <InfoSquare size="1.4em" onClick={() => { setShowMoreDocumentInfo(true); }} />
                   </span>
                   )}
@@ -108,14 +109,11 @@ const SecondNavbar = ({
               md={mobileView ? 12 : 5}
               style={{ paddingLeft: (mobileView ? 15 : 0), paddingRight: 0 }}
             >
-              <div style={{
-                display: 'flex', flexDirection: 'row', float: mobileView ? 'left' : 'right', top: 4, position: 'relative',
-              }}
-              >
-                <div style={{ marginTop: 6, marginRight: 6 }}>
+              <div className={styles.rightpanel} style={{ float: mobileView ? 'left' : 'right' }}>
+                <div className={styles['zoom-slider-container']}>
                   <DocumentZoomSlider />
                 </div>
-                <div style={{ display: 'flex', flexWrap: 'nowrap' }}>
+                <div className={styles['filter-container']}>
                   <FilterPopover session={session} />
                 </div>
               </div>
@@ -133,7 +131,7 @@ const SecondNavbar = ({
           aria-labelledby="document-metadata-modal"
         >
           <Modal.Header closeButton>
-            <Modal.Title id="document-metadata-modal">
+            <Modal.Title id="document-metadata-modal" className={styles['modal-title']}>
               Metadata
             </Modal.Title>
           </Modal.Header>
@@ -156,7 +154,7 @@ const SecondNavbar = ({
                     }
                     return (
                       <tr key={key}>
-                        <td className="table-meta-data-name">
+                        <td className={styles['meta-field-name']}>
                           <strong>{metadataFields[key]}</strong>
                         </td>
                         <td>{str}</td>
@@ -169,28 +167,6 @@ const SecondNavbar = ({
           </Modal.Body>
         </Modal>
       )}
-      <style jsx global>
-        {`
-        .second-navbar .breadcrumb {
-          margin-bottom: 0px;
-        }
-
-        .table-meta-data-name {
-          width: 150px;
-        }
-    
-        .second-navbar #btn-document-more-info {
-            float: right;
-            margin-left: 5px;
-            cursor: pointer;
-        }
-
-        .modal-title.h4 {
-          height: auto !important;
-        }
-
-      `}
-      </style>
     </>
   );
 };

diff --git a/src/components/SecondNavbar/SecondNavbar.module.scss b/src/components/SecondNavbar/SecondNavbar.module.scss
@@ -0,0 +1,42 @@
+@use "../../style/theme";
+
+.breadcontainer ol {
+  padding-left: 0px !important;
+  margin-bottom: 0px;
+}
+
+.row {
+  width: 100%;
+}
+
+.infobutton {
+  float: right;
+  margin-left: 5px;
+  cursor: pointer;
+  color: theme.$primary;
+}
+
+.meta-field-name {
+  width: 150px;
+}
+
+.modal-title {
+  height: auto !important;
+}
+
+.filter-container {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.zoom-slider-container {
+  margin-top: 6px;
+  margin-right: 6px;
+}
+
+.rightpanel {
+  position: relative;
+  top: 4px;
+  display: flex;
+  flex-direction: row; 
+}
diff --git a/src/style/custom.scss b/src/style/custom.scss
@@ -9,10 +9,6 @@ $theme-colors: (
   "info": theme.$info,
 );
 
-ol.breadcrumb {
-  padding-left: 0px !important;
-}
-
 .header-logo-svg {
   width: 26px;
   height: 26px;
@@ -332,10 +328,6 @@ $breadcrumb-bg: transparent;
 /* import bootstrap */
 @import "~bootstrap/scss/bootstrap";
 
-.second-navbar #btn-document-more-info {
-  color: theme-color("primary");
-}
-
 #scroll-to-annotation-text {
   cursor: pointer;
   color: theme-color("primary");