From 5625062135442488e2e3c096a3d5cf185dca6f11 Mon Sep 17 00:00:00 2001
From: "alexandria.gomez" <alexandria.gomez@WATSONVILLE>
Date: Mon, 14 Aug 2023 11:00:18 -0400
Subject: [PATCH] update repo browser styling

---
 .../GetDocumentDataDialog.tsx                 |   2 +-
 .../SaveToLaserficheDialog.tsx                |   2 +-
 .../SendToLaserFiche.module.scss              |   8 +-
 .../LaserficheAdminConfiguration.module.scss  |  95 +++++++++++++++
 .../ProfileConfigurationComponents.tsx        | 109 ++++++++----------
 5 files changed, 146 insertions(+), 70 deletions(-)

diff --git a/src/extensions/savetoLaserfiche/GetDocumentDataDialog.tsx b/src/extensions/savetoLaserfiche/GetDocumentDataDialog.tsx
index d3578d6..070ff2f 100644
--- a/src/extensions/savetoLaserfiche/GetDocumentDataDialog.tsx
+++ b/src/extensions/savetoLaserfiche/GetDocumentDataDialog.tsx
@@ -455,7 +455,7 @@ function GetDocumentDialogData(props: {
             width='30'
             height='30'
           />
-          <p className={styles.dialogTitle}>Laserfiche</p>
+          <span>Laserfiche</span>
         </div>
 
         <button
diff --git a/src/extensions/savetoLaserfiche/SaveToLaserficheDialog.tsx b/src/extensions/savetoLaserfiche/SaveToLaserficheDialog.tsx
index 598a126..ae9631e 100644
--- a/src/extensions/savetoLaserfiche/SaveToLaserficheDialog.tsx
+++ b/src/extensions/savetoLaserfiche/SaveToLaserficheDialog.tsx
@@ -132,7 +132,7 @@ function SaveToLaserficheDialog(props: {
             width='30'
             height='30'
           />
-          <p className={styles.dialogTitle}>Laserfiche</p>
+          <span>Laserfiche</span>
         </div>
 
         <button
diff --git a/src/extensions/savetoLaserfiche/SendToLaserFiche.module.scss b/src/extensions/savetoLaserfiche/SendToLaserFiche.module.scss
index 1f331c6..cd225c5 100644
--- a/src/extensions/savetoLaserfiche/SendToLaserFiche.module.scss
+++ b/src/extensions/savetoLaserfiche/SendToLaserFiche.module.scss
@@ -27,7 +27,7 @@
 
   /* automatically accommodates for padding */
   box-sizing: border-box;
-  height: 55px;
+  height: 60px;
   /* 50px - padding */
   line-height: 24px;
   align-items: center;
@@ -71,7 +71,7 @@
 
   /* automatically accommodates for padding */
   box-sizing: border-box;
-  height: 55px;
+  height: 60px;
   /* 50px - padding */
   line-height: 30px;
 }
@@ -94,7 +94,3 @@
   align-items: center;
   justify-content: center;
 }
-
-.dialogTitle {
-  padding-left: 10px;
-}
diff --git a/src/webparts/laserficheAdminConfiguration/components/LaserficheAdminConfiguration.module.scss b/src/webparts/laserficheAdminConfiguration/components/LaserficheAdminConfiguration.module.scss
index 91458d0..3c481f7 100644
--- a/src/webparts/laserficheAdminConfiguration/components/LaserficheAdminConfiguration.module.scss
+++ b/src/webparts/laserficheAdminConfiguration/components/LaserficheAdminConfiguration.module.scss
@@ -45,3 +45,98 @@ table td {
     vertical-align: middle;
   }
 }
+
+lf-repository-browser {
+  height: 500px;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 50px);
+  min-width: 500px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #e0e0e0;
+  min-height: var(--header-min-height, 50px);
+  color: #606060;
+  background-color: #fafafa;
+  /* default is the standard padding, but expose variables
+       in case contents have additional padding */
+  padding-top: var(--header-padding-top, 13px);
+  padding-bottom: var(--header-padding-bottom, 13px);
+  padding-left: var(--header-padding-left, 20px);
+  padding-right: var(--header-padding-right, 20px);
+
+  /* automatically accommodates for padding */
+  box-sizing: border-box;
+  height: 60px;
+  /* 50px - padding */
+  line-height: 24px;
+  align-items: center;
+}
+
+.contentBox {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-weight: 400;
+  box-sizing: border-box;
+  overflow: auto;
+  background-color: #fafafa;
+  min-height: 80px;
+  /* default is the standard padding, but expose variables
+       in case contents have additional padding */
+  padding-top: var(--content-padding-top, 20px);
+  padding-bottom: var(--content-padding-bottom, 10px);
+  padding-left: var(--content-padding-left, 20px);
+  padding-right: var(--content-padding-right, 20px);
+  max-height: calc(100vh - var(--header-min-height) - var(--footer-min-height));
+}
+
+.footer {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  min-height: var(--footer-min-height, 50px);
+  border-top: 1px solid #e0e0e0;
+  background-color: #fafafa;
+  /* default is the standard padding, but expose variables
+       in case contents have additional padding */
+  padding-top: var(--footer-padding-top, 10px);
+  padding-bottom: var(--footer-padding-bottom, 10px);
+  padding-left: var(--footer-padding-left, 20px);
+  padding-right: var(--footer-padding-right, 20px);
+
+  /* automatically accommodates for padding */
+  box-sizing: border-box;
+  height: 60px;
+  /* 50px - padding */
+  line-height: 30px;
+}
+
+.lfCloseButton {
+  cursor: pointer;
+  display: flex;
+  height: 24px;
+  width: 24px;
+  align-items: center;
+  border: none;
+  background: inherit;
+  justify-content: center;
+  color: #646464;
+}
+
+.logoHeader {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/webparts/laserficheAdminConfiguration/components/ProfileConfigurationComponents.tsx b/src/webparts/laserficheAdminConfiguration/components/ProfileConfigurationComponents.tsx
index e406f02..fb524ef 100644
--- a/src/webparts/laserficheAdminConfiguration/components/ProfileConfigurationComponents.tsx
+++ b/src/webparts/laserficheAdminConfiguration/components/ProfileConfigurationComponents.tsx
@@ -145,10 +145,7 @@ export function ConfigurationBody(props: {
           />
         </div>
         <div className='col-sm-2' id='folderModal' style={{ marginTop: '2px' }}>
-          <button
-            className='lf-button sec-button'
-            onClick={openFolderModal}
-          >
+          <button className='lf-button sec-button' onClick={openFolderModal}>
             Browse
           </button>
         </div>
@@ -313,64 +310,51 @@ export function RepositoryBrowserModal(props: {
 
   return (
     <>
-      <div className='modal-dialog modal-dialog-centered'>
-        <div className='modal-content'>
-          <div className='modal-header'>
-            <h5 className='modal-title' id='ModalLabel'>
-              Select folder for saving to Laserfiche
-            </h5>
-            <button
-              type='button'
-              className='close'
-              data-dismiss='modal'
-              aria-label='Close'
-              onClick={props.CloseFolderBrowserUp}
-            >
-              <span aria-hidden='true'>&times;</span>
-            </button>
-          </div>
-          <div className='modal-body'>
-            <div
-              className='lf-folder-browser-sample-container'
-              style={{ height: '400px' }}
-            >
-              <div className='repository-browser'>
-                <lf-repository-browser
-                  ref={repositoryBrowser}
-                  ok_button_text='Okay'
-                  cancel_button_text='Cancel'
-                  multiple='false'
-                  style={{ height: '420px' }}
-                  isSelectable={isNodeSelectable}
-                />
-                <div className='repository-browser-button-containers'>
-                  <span>
-                    <button
-                      className='lf-button primary-button'
-                      onClick={onOpenNode}
-                      hidden={!shouldShowOpen}
-                    >
-                      OPEN
-                    </button>
-                    <button
-                      className='lf-button primary-button'
-                      onClick={onSelectFolder}
-                      hidden={!shouldShowSelect}
-                      disabled={shouldDisableSelect}
-                    >
-                      Select
-                    </button>
-                    <button
-                      className='sec-button lf-button margin-left-button'
-                      onClick={props.CloseFolderBrowserUp}
-                    >
-                      CANCEL
-                    </button>
-                  </span>
-                </div>
-              </div>
-            </div>
+      <div className={styles.wrapper}>
+        <div className={styles.header}>
+          <div className={styles.logoHeader}>
+            <div>Select folder</div>
           </div>
+
+          <button
+            className={styles.lfCloseButton}
+            title='close'
+            onClick={props.CloseFolderBrowserUp}
+          >
+            <span className='material-icons-outlined'> close </span>
+          </button>
+        </div>
+
+        <div className={styles.contentBox}>
+          <lf-repository-browser
+            ref={repositoryBrowser}
+            multiple='false'
+            isSelectable={isNodeSelectable}
+          />
+        </div>
+
+        <div className={styles.footer}>
+          <button
+            className={`lf-button primary-button`}
+            onClick={onOpenNode}
+            hidden={!shouldShowOpen}
+          >
+            Open
+          </button>
+          <button
+            className='lf-button primary-button'
+            onClick={onSelectFolder}
+            hidden={!shouldShowSelect}
+            disabled={shouldDisableSelect}
+          >
+            Select
+          </button>
+          <button
+            className={`sec-button lf-button ${styles.marginLeftButton}`}
+            onClick={props.CloseFolderBrowserUp}
+          >
+            Cancel
+          </button>
         </div>
       </div>
     </>
@@ -710,7 +694,8 @@ function getMappingErrorMessage(
         >
           SharePoint field type of {spFieldtype} cannot be mapped with
           Laserfiche field type of {lfFieldtype}
-          <span className='material-icons-outlined'>warning</span>Data types mismatch
+          <span className='material-icons-outlined'>warning</span>Data types
+          mismatch
         </div>
       );
     } else {