Update index.css

packages/ui-components/style/index.css

@@ -49,34 +49,35 @@ strong {
   color: unset !important;
 }
 
-.jp-InputGroup {
-  border-radius: 0;
-}
+/* .jp-InputGroup {
+
+} */
 
 .jp-InputGroup input {
   box-sizing: border-box;
+  border-radius: 0;
+  background-color: transparent;
+  color: var(--jp-ui-font-color0);
+  box-shadow: inset 0 0 0 var(--jp-border-width) var(--jp-input-border-color);
 }
 
 .jp-InputGroup input:focus {
-  box-shadow: inset 0 0 0 1px rgba(19, 124, 189, 0.3),
+  /* box-shadow: inset 0 0 0 var(--jp-border-width) var(--jp-input-active-border-color),
+    inset 0 0 0 3px rgba(19, 124, 189, 0.3); */
+  box-shadow: inset 0 0 0 var(--jp-border-width) rgba(19, 124, 189, 0.3),
     inset 0 0 0 3px rgba(19, 124, 189, 0.3);
 }
 
+.jp-InputGroup input::placeholder {
+  color: var(--jp-ui-font-color3);
+}
+
 .jp-Icon {
   color: var(--jp-layout-color4);
 }
 
 .jp-InputGroupAction {
-  line-height: 24px;
-  font-size: 20px;
-}
-
-.jp-InputGroupAction.left {
-  padding-left: 8px;
-}
-
-.jp-InputGroupAction.right {
-  padding-right: 8px;
+  padding: 5px;
 }
 
 .jp-HTMLSelect select {
@@ -85,6 +86,11 @@ strong {
   line-height: 14px;
   border-radius: 0;
   display: block;
+  color: var(--jp-ui-font-color0);
+}
+
+.jp-HTMLSelect select:hover {
+  color: var(--jp-ui-font-color0);
 }
 
 /* .jp-Select {