update available drives component

Author: DenisaCG

src/plugins/drivelistmanager.tsx

@@ -57,43 +57,44 @@ interface ISearchListProps {
 
 export function DriveSearchListComponent(props: ISearchListProps) {
   return (
-    <div className="drive-search-list">
-      <div className="row">
-        <div className="column">
-          <Search
-            className="drive-search-input"
-            onInput={(event: any) => props.setValue(event.target.value)}
-          />
-        </div>
-        <div className="column"></div>
+    <>
+      <Search
+        className="drive-search-input"
+        onInput={(event: any) => props.setValue(event.target.value)}
+        placeholder="Search drive name"
+      />
+      <div className="drive-search-list">
+        {props.availableDrives.length === 0 ? (
+          <div className="drives-manager-header-info">
+            {'No available drives.'}
+          </div>
+        ) : (
+          props.availableDrives
+            .filter(item => {
+              return (
+                item.name!.toLowerCase().indexOf(props.value.toLowerCase()) !==
+                -1
+              );
+            })
+            .map((drive, index) => (
+              <li key={index}>
+                <div className="available-drives-section">
+                  <div>{drive.name} </div>
+                  <Button
+                    className="search-add-drive-button"
+                    onClick={async () => {
+                      await includeDrive(drive.name!);
+                      await props.model.refresh();
+                    }}
+                  >
+                    add
+                  </Button>
+                </div>
+              </li>
+            ))
+        )}
       </div>
-      {props.availableDrives
-        .filter(item => {
-          return (
-            item.name!.toLowerCase().indexOf(props.value.toLowerCase()) !== -1
-          );
-        })
-        .map((drive, index) => (
-          <li key={index}>
-            <div className="row">
-              <div className="column">
-                <div>{drive.name} </div>
-              </div>
-              <div className="column">
-                <Button
-                  className="input-add-drive-button"
-                  onClick={async () => {
-                    await includeDrive(drive.name!);
-                    await props.model.refresh();
-                  }}
-                >
-                  add
-                </Button>
-              </div>
-            </div>
-          </li>
-        ))}
-    </div>
+    </>
   );
 }
 interface IDriveDataGridProps {

style/base.css

@@ -11,23 +11,12 @@ li {
   list-style-type: none;
 }
 
-/* .two-column-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.6rem;
-  margin-top: 10px;
-} */
-
-/* Clear floats after the columns */
-
-/* .row::after {
-  content: '';
-  display: table;
-  clear: both;
-} */
-
 .drive-search-list {
-  width: auto;
+  display: flex;
+  width: 380px;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.2rem;
 }
 
 .drive-list-manager {
@@ -144,3 +133,12 @@ li {
 .drives-section-title {
   font-weight: 500;
 }
+
+.available-drives-section {
+  display: flex;
+  width: 370px;
+  height: 24px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}