update publc drive component

Author: DenisaCG

src/plugins/drivelistmanager.tsx

@@ -9,7 +9,12 @@ import {
 } from '@jupyter/react-components';
 import { useState } from 'react';
 import { IDriveInfo } from '../token';
-import { getDrivesList, getExcludedDrives, includeDrive } from '../requests';
+import {
+  addPublicDrive,
+  getDrivesList,
+  getExcludedDrives,
+  includeDrive
+} from '../requests';
 import { ISignal, Signal } from '@lumino/signaling';
 import { driveBrowserIcon } from '../icons';
 
@@ -22,12 +27,20 @@ export interface IDriveInputProps {
   value: string;
   getValue: (event: any) => void;
 }
+
 export function DriveInputComponent(props: IDriveInputProps) {
   return (
     <div>
       <div className="add-public-drive-section">
-        <Search className="drive-search-input" onInput={props.getValue} />
-        <Button className="input-add-drive-button" onClick={() => {}}>
+        <Search
+          className="drive-search-input"
+          onInput={props.getValue}
+          placeholder="Enter drive name"
+        />
+        <Button
+          className="input-add-drive-button"
+          onClick={() => addPublicDrive(props.value)}
+        >
           add
         </Button>
       </div>
@@ -168,7 +181,7 @@ export function DriveListManagerComponent({ model }: IProps) {
         </div>
 
         <div className="drives-manager-section">
-          <div> Enter public drive name</div>
+          <div className="drives-section-title"> Add public drive</div>
           <DriveInputComponent
             isName={false}
             value={driveUrl}
@@ -177,7 +190,7 @@ export function DriveListManagerComponent({ model }: IProps) {
         </div>
 
         <div className="drives-manager-section">
-          <div> Available drives </div>
+          <div className="drives-section-title"> Browser available drives </div>
           <DriveSearchListComponent
             isName={true}
             value={searchDrive}

style/base.css

@@ -19,6 +19,7 @@ li {
 } */
 
 /* Clear floats after the columns */
+
 /* .row::after {
   content: '';
   display: table;
@@ -39,8 +40,8 @@ li {
 .search-add-drive-button {
   background-color: var(--md-blue-700);
   color: white;
-
   width: 8px;
+
   /* height: 1em; */
   border-radius: 4px;
 }
@@ -73,6 +74,7 @@ li {
   min-width: 200px;
   border-right: 5px;
   border-left: 2px;
+
   /* background-color: var(--jp-layout-color2); */
 }
 
@@ -82,6 +84,7 @@ li {
   min-width: 100px;
   border-right: 2px;
   border-left: 2px;
+
   /* background-color: var(--jp-layout-color2); */
 }
 
@@ -91,6 +94,7 @@ li {
   width: 50px;
   border-right: 2px;
   border-left: 2px;
+
   /* background-color: var(--jp-layout-color2); */
 }
 
@@ -136,3 +140,7 @@ li {
   align-items: center;
   gap: 0.2rem;
 }
+
+.drives-section-title {
+  font-weight: 500;
+}