Updated with feature style

samples/react-onedrive-finder/README.md

@@ -43,7 +43,7 @@ react-onedrive-finder | [André Lage](http://aaclage.blogspot.com) ([@aaclage](h
 
 Version|Date|Comments
 -------|----|--------
-1.1|April 24, 2021|Fixes, code optimization and extension filter included
+1.1|April 24, 2021|Fixes, optimization, Styling and extension filter included
 1.0|April 16, 2021|Initial release
 
 ## Disclaimer

samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/IOneDriveFinderState.ts

@@ -9,4 +9,5 @@ export interface IOneDriveFinderState {
     itemID:string;
     siteItems: IDropdownOption[];
     fileExtensions: string[];
+    customStyle: string;
 }

samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.module.scss

@@ -15,3 +15,22 @@
   flex-basis: 100%;
   flex: 1;
 }
+
+.mgtfilelist {
+  --file-list-background-color: #eff6fc;
+  --file-item-background-color--hover: #deecf9;
+  --file-item-background-color--active: #c7e0f4;
+  --file-list-border: 0px solid #white;
+  --file-list-box-shadow: none;
+  --file-list-padding: 0px;
+  --file-list-margin: 0;
+  --file-item-border-radius: 0px;
+  --file-item-margin: 0px 0px;
+  --file-item-border-bottom: 1px solid #dddddd;
+  --show-more-button-background-color: #fef8dd;
+  --show-more-button-background-color--hover: #ffe7c7;
+  --show-more-button-font-size: 14px;
+  --show-more-button-padding: 16px;
+  --show-more-button-border-bottom-right-radius: 12px;
+  --show-more-button-border-bottom-left-radius: 12px;
+}

samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.tsx

@@ -93,6 +93,7 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
   public _siteID: string;
   public _pageSize: number;
   public _breadcrumbItem: IBreadcrumbItem[] = [];
+  public _customStyle: string;
 
   public _fileExtensions: string[] = null;
   constructor(props: IOneDriveFinderProps, state: IOneDriveFinderState) {
@@ -105,7 +106,8 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
       siteID: "",
       siteItems: [],
       itemID: "",
-      fileExtensions: []
+      fileExtensions: [],
+      customStyle:""
     };
     this.getDomainData();
   }
@@ -150,12 +152,25 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
         fileExtensions: [...fileExtensions]
       });
     };
+
+    const CheckStyles = (event: React.FormEvent<HTMLDivElement>, selectedOption: IDropdownOption) => {
+      if (selectedOption.key == 2) {
+        this.setState({
+          customStyle: styles.mgtfilelist
+        });
+      } else {
+        this.setState({
+          customStyle: selectedOption.text
+        });
+      }
+    };
     
-    const { siteID, itemID, pageSize, breadcrumbItem, siteItems, fileExtensions } = this.state;
+    const { siteID, itemID, pageSize, breadcrumbItem, siteItems, fileExtensions, customStyle } = this.state;
     this._itemID = itemID;
     this._siteID = siteID;
     this._breadcrumbItem = breadcrumbItem;
     this._pageSize = pageSize;
+    this._customStyle = customStyle;
     if(fileExtensions.length != 0)
     {
       this._fileExtensions = fileExtensions;
@@ -168,6 +183,17 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
         <div className={styles['some-page-wrapper']}>
           <div className={styles.row}>
             <div className={styles.column}>
+              <Dropdown
+                placeholder="default"
+                label="Styles"
+                options={[
+                  { key: 0, text: 'default' },
+                  { key: 1, text: 'mgt-dark' },
+                  { key: 2, text: 'Custom-mgt-file-list' },
+                ]}
+                styles={{ dropdown: { width: 300 } }}
+                onChange={CheckStyles}
+              />
               <Dropdown
                 placeholder="Select an Site"
                 label="List of Drives"
@@ -196,8 +222,6 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
                 onChange={CheckPageSize}
                 styles={dropdownFilterStyles}
               />
-            </div>
-            <div className={styles.column}>
               <Dropdown
                 placeholder="Select"
                 label="Select file extensions"
@@ -229,6 +253,7 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
           />
           {(this.state.itemID != "") &&
             <FileList
+              className={this._customStyle}
               fileExtensions={this._fileExtensions}
               pageSize={this._pageSize}
               siteId={this._siteID}