add icon search

src/variables/body/search.tsx

@@ -32,13 +32,16 @@ const SearchComponent = ({ model }: any) => {
   const [state, setState] = useState('');
   model.filter = state;
   return (
-    <input
-      placeholder="Search..."
-      value={state}
-      onChange={e => {
-        setState(e.target.value);
-      }}
-    />
+    <div>
+      <span className="fa fa-search"></span>
+      <input
+        placeholder="Search..."
+        value={state}
+        onChange={e => {
+          setState(e.target.value);
+        }}
+      />
+    </div>
   );
 };
 
@@ -62,7 +65,7 @@ class ScopeSearch extends ReactWidget {
   constructor() {
     super();
     this.node.style.overflow = 'visible';
-    this.node.style.width = '100px';
+    this.node.style.width = '85px';
     this.addClass('jp-DebuggerVariables-scope');
   }
 

src/variables/body/table.tsx

@@ -68,6 +68,7 @@ const TableComponent = ({ model }: { model: Variables.IModel }) => {
   });
 
   model.current = variable;
+
   return (
     <div>
       <table>
@@ -83,7 +84,7 @@ const TableComponent = ({ model }: { model: Variables.IModel }) => {
   );
 };
 
-const useTbody = (items: Array<any>, defaultState: any, id: string = '') => {
+const useTbody = (items: Array<any>, defaultState: any) => {
   const [state, setState] = useState(defaultState);
 
   const setClassIcon = (typeOf: string) => {
@@ -98,7 +99,7 @@ const useTbody = (items: Array<any>, defaultState: any, id: string = '') => {
             <tr
               key={item.name}
               onClick={e => setState(item)}
-              className={id + (state === item ? ' selected' : '')}
+              className={state === item ? ' selected' : ''}
             >
               <td style={{ paddingLeft: `${12}px`, width: `${25}%` }}>
                 <span

style/index.css

@@ -15,22 +15,6 @@
   bottom: 0;
 }
 
-.jp-MenuComponent {
-  position: absolute;
-  list-style: none;
-  left: 0;
-  right: 0;
-  margin: 0;
-  top: 25px;
-  z-index: 10000;
-  padding: 10px 10px;
-  background: var(--jp-layout-color1);
-  color: var(--jp-ui-font-color1);
-  border: var(--jp-border-width) solid var(--jp-border-color1);
-  font-size: var(--jp-ui-font-size1);
-  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
-}
-
 /* font awsome */
 
 .fa {

style/variables.css

@@ -79,12 +79,14 @@
   align-items: center;
 }
 
-.jp-DebuggerVariables-search > div {
+.jp-DebuggerVariables-search .jp-DebuggerVariables-input > div {
+  display: flex;
   padding-left: 8px;
   padding-right: 8px;
   vertical-align: middle;
   font-size: 14px;
   line-height: 23px;
+  align-items: baseline;
 }
 
 .jp-DebuggerVariables-search > .jp-DebuggerVariables-input {
@@ -101,6 +103,7 @@
   width: 100%;
   height: 100%;
   border: none;
+  padding-left: 10px;
 }
 
 .jp-DebuggerVariables-search .jp-DebuggerVariables-scope span.label {
@@ -114,7 +117,7 @@
   left: 0;
   right: 0;
   margin: 0;
-  top: 25px;
+  top: 20px;
   z-index: 10000;
   padding: 10px 10px;
   background: var(--jp-layout-color1);