[NRRPLT-8175] CSS import experiment buttons

package-lock.json

@@ -3792,6 +3792,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -10115,6 +10120,11 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -12,8 +12,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "4.6.0",
     "jszip": "3.2.0",
+    "jquery": "3.6.0",
     "react": "^17.0.1",
+    "react-bootstrap": "1.5.2",
     "react-dom": "^17.0.1",
     "react-icons": "4.1.0",
     "react-router-dom": "5.2.0",

src/components/experiment-list/import-experiment-buttons.css

@@ -12,7 +12,7 @@
     z-index: 10001;
   }
   
-  #import-buttons {
-    vertical-align: middle;
-    margin: auto 0;
+  .import-button {
+    cursor: pointer;
+    height: 50%;
   }
\ No newline at end of file

src/components/experiment-list/import-experiment-buttons.js

@@ -155,14 +155,16 @@ export default class ImportExperimentButtons extends React.Component {
             multiple accept='.zip'
             onChange={(event) => this.importZippedExperimentChange(event)}/>
           {!this.state.isImporting
-            ? <div role="group">
-              <button variant="outline-dark">
-                <label htmlFor="folder"><FaFolder/> Import folder</label>
+            ? <div className="btn-group" role="group">
+              <button type="button" className="btn btn-outline-dark">
+                <label htmlFor="folder" className="import-button">
+                  <FaFolder/> Import folder
+                </label>
               </button>
-              <button variant="outline-dark">
-                <label htmlFor="zip"><FaFileArchive/> Import zip</label>
+              <button type="button" className="btn btn-outline-dark">
+                <label htmlFor="zip" className="import-button"><FaFileArchive/> Import zip</label>
               </button >
-              <button variant="outline-dark" onClick={() => this.scanStorageClick()}>
+              <button type="button" className="btn btn-outline-dark" onClick={() => this.scanStorageClick()}>
                 <FaAudible/> Scan Storage
               </button>
             </div>

src/components/user-menu/user-menu.js

@@ -38,22 +38,16 @@ export default class UserMenu extends React.Component {
     return (
       <div className='user-menu-wrapper'>
         <div className='dropdown'>
-          <div
-            className='dropdown-toggle'
-            variant='success'
-            id='dropdown-basic'
-          >
+          <button className='dropdown-toggle' id='dropdownMenuButton'
+            data-toggle="dropdown" aria-haspopup='true' aria-expanded='false'>
             <FaUserCircle className='user-icon'/>
             <div className='user-name'>
               {this.state.user ? this.state.user.displayName : 'pending ...'}
             </div>
-          </div>
+          </button>
 
-          <div className='dropdown-menu'>
-            <div
-              className='dropdown-item'
-              onClick={this.onClickLogout}
-            >
+          <div className='dropdown-menu' aria-labelledby='dropdownMenuButton'>
+            <div className='dropdown-item' href='#' onClick={this.onClickLogout}>
               <FaSignOutAlt className='user-icon' />
               Logout
             </div>