FilePicker - some lost styles

Author: AJIXuMuK

src/controls/filePicker/FilePicker.module.scss

@@ -28,13 +28,6 @@
   margin: 0;
 }
 
-.filePicker
-  :global(.ms-Panel-main)
-  :global(.ms-Panel-contentInner)
-  :global(.ms-Panel-content) {
-  height: 100%;
-}
-
 .filePicker :global(.ms-Nav-link) {
   position: relative;
   -webkit-font-smoothing: antialiased;
@@ -59,7 +52,6 @@
   outline: transparent;
   border-width: initial;
   border-style: none;
-  border-color: initial;
   border-image: initial;
   text-decoration: none;
   border-radius: 0px;
@@ -124,6 +116,7 @@
 }
 
 .nav {
+  position: absolute;
   height: 100%;
   color: $ms-color-neutralLighter;
 }
@@ -153,12 +146,17 @@
 
 .breadcrumbNav {
   margin-top: 0px;
+  padding: 22px 32px;
 }
 .breadcrumbNavItem {
   color: $ms-color-neutralPrimary;
-  font-size: 28px;
-  font-weight: 100;
-  padding: 22px 10px 20px 32px;
+  font-size: 24px;
+  font-weight: 600;
+  padding: 22px 8px 20px 0;
+}
+
+.breadcrumbNav :global(.ms-Breadcrumb-listItem:last-child .ms-Breadcrumb-itemLink) {
+  font-weight: 600;
 }
 
 .tab {
@@ -243,14 +241,10 @@
 
 .tabContainer {
   height: 100%;
-  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
   flex-direction: column;
 }
 
@@ -292,6 +286,10 @@
   background-color: red;
 }
 
+.itemPickerTopBar :global(.ms-CommandBarItem-link) {
+  border-color: transparent;
+}
+
 .commandBarNoChevron :global(.ms-CommandBarItem-chevronDown) {
   display: none;
 }

src/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.tsx

@@ -65,7 +65,7 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
     return (
       <div className={styles.tabContainer}>
         <div className={styles.tabHeaderContainer}>
-          <Breadcrumb items={this.state.breadcrumbItems} onRenderItem={this.renderBreadcrumbItem} className={styles.breadcrumbNav}/>
+          <Breadcrumb items={this.state.breadcrumbItems} /*onRenderItem={this.renderBreadcrumbItem}*/ className={styles.breadcrumbNav}/>
         </div>
         <div className={styles.tabFiles}>
           {this.state.libraryAbsolutePath !== undefined &&

src/controls/filePicker/RecentFilesTab/RecentFilesTab.tsx

@@ -26,7 +26,7 @@ const ROWS_PER_PAGE = 3;
 /**
  * Maximum row height
  */
-const MAX_ROW_HEIGHT = 250;
+const MAX_ROW_HEIGHT = 175;
 
 export default class RecentFilesTab extends React.Component<IRecentFilesTabProps, IRecentFilesTabState> {
   private _columnCount: number;

src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx

@@ -37,7 +37,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
     return (
       <div className={styles.tabContainer}>
         <div className={styles.tabHeaderContainer}>
-          <Breadcrumb items={this.state.breadcrumbItems} onRenderItem={this.renderBreadcrumbItem} className={styles.breadcrumbNav}/>
+          <Breadcrumb items={this.state.breadcrumbItems} /*onRenderItem={this.renderBreadcrumbItem}*/ className={styles.breadcrumbNav}/>
         </div>
         <div className={styles.tabFiles}>
           {this.state.libraryAbsolutePath === undefined &&

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -1274,7 +1274,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             onSave={this._onFilePickerSave}
             onChanged={(filePickerResult: IFilePickerResult) => { this.setState({ filePickerResult }); }}
             context={this.props.context}
-            hideRecentTab={true}
+            hideRecentTab={false}
           />
           {
             this.state.filePickerResult &&