update available drives listed component

Author: DenisaCG

src/icons.ts

@@ -1,7 +1,13 @@
 import { LabIcon } from '@jupyterlab/ui-components';
 import driveBrowserSvg from '../style/driveIconFileBrowser.svg';
+import addIconSvg from '../style/addIcon.svg';
 
 export const driveBrowserIcon = new LabIcon({
   name: 'jupyter-drives:drive-browser',
   svgstr: driveBrowserSvg
 });
+
+export const addIcon = new LabIcon({
+  name: 'jupyter-drives:add-drive',
+  svgstr: addIconSvg
+});

src/plugins/drivelistmanager.tsx

@@ -16,7 +16,7 @@ import {
   includeDrive
 } from '../requests';
 import { ISignal, Signal } from '@lumino/signaling';
-import { driveBrowserIcon } from '../icons';
+import { driveBrowserIcon, addIcon } from '../icons';
 
 interface IProps {
   model: DriveListModel;
@@ -87,7 +87,11 @@ export function DriveSearchListComponent(props: ISearchListProps) {
                       await props.model.refresh();
                     }}
                   >
-                    add
+                    <addIcon.react
+                      tag="span"
+                      className="available-drives-icon"
+                      height="18px"
+                    />
                   </Button>
                 </div>
               </li>

style/addIcon.svg

@@ -27,18 +27,18 @@ li {
 }
 
 .search-add-drive-button {
-  background-color: var(--md-blue-700);
-  color: white;
-  width: 8px;
-
-  /* height: 1em; */
+  background-color: var(--jp-inverse-layout-color1);
+  width: 50px;
+  height: 20px;
   border-radius: 4px;
+  margin-right: 0;
 }
 
 .input-add-drive-button {
   width: 50px;
   height: 24px !important;
-  background-color: var(--jp-brand-color1);
+  background-color: var(--jp-inverse-layout-color1);
+  color: white !important;
   text-align: center;
   color: white;
   border-radius: 4px;
@@ -136,9 +136,24 @@ li {
 
 .available-drives-section {
   display: flex;
-  width: 370px;
+  width: 375px;
   height: 24px;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+  border-radius: 4px;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.available-drives-section:hover {
+  background-color: var(--md-blue-grey-100);
+}
+
+.available-drives-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  fill: var(--jp-ui-inverse-font-color0) !important;
+  color: var(--jp-ui-inverse-font-color0) !important;
 }