updated icons, tweaked spacing

packages/documentsearch/src/searchoverlay.tsx

@@ -184,11 +184,7 @@ function UpDownButtons(props: IUpDownProps) {
         />
       </button>
       <button
-<<<<<<< HEAD
         className={BUTTON_WRAPPER_CLASS}
-=======
-        className={DOWN_BUTTON_CLASS}
->>>>>>> remove highlight button on focus
         onClick={() => props.onHightlightNext()}
         tabIndex={5}
       >

packages/documentsearch/style/index.css

@@ -120,17 +120,21 @@
   padding-left: 10px;
   padding-right: 10px;
   user-select: none;
-  min-width: 50px;
+  min-width: 43px;
   display: inline-block;
 }
 
 .jp-DocumentSearch-up-down-wrapper {
   display: inline-block;
+  padding-right: 2px;
 }
 
 .jp-DocumentSearch-up-down-wrapper button {
-  background-color: var(--jp-layout-color0);
-  vertical-align: middle;
+  outline: 0;
+  border: none;
+  width: 20px;
+  height: 20px;
+  background-repeat: no-repeat;
   background-position: center;
 }
 

packages/theme-dark-extension/style/icons/jupyter/search_arrow_down.svg

@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 20" style="enable-background:new 0 0 22 20;" xml:space="preserve">
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:none;}
-	.st1{fill:#A5A5A5;}
+	.st1{fill:#E0E0E0;}
 </style>
-<rect class="st0" width="22" height="20"/>
-<polygon class="st1" points="11,13.7 4.6,7.4 5.4,6.6 11,12.3 16.6,6.6 17.4,7.4 "/>
+<rect class="st0" width="20" height="20"/>
+<polygon class="st1" points="10,13.7 3.6,7.4 4.4,6.6 10,12.3 15.6,6.6 16.4,7.4 "/>
 </svg>

packages/theme-dark-extension/style/icons/jupyter/search_arrow_up.svg

@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Up" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 20" style="enable-background:new 0 0 22 20;" xml:space="preserve">
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:none;}
-	.st1{fill:#A5A5A5;}
+	.st1{fill:#E0E0E0;}
 </style>
-<rect class="st0" width="22" height="20"/>
-<polygon class="st1" points="16.6,13.4 11,7.7 5.4,13.4 4.6,12.6 11,6.3 17.4,12.6 "/>
+<rect class="st0" width="20" height="20"/>
+<polygon class="st1" points="15.6,13.4 10,7.7 4.4,13.4 3.6,12.6 10,6.3 16.4,12.6 "/>
 </svg>

packages/theme-dark-extension/style/icons/jupyter/search_case_sensitive.svg

@@ -4,16 +4,16 @@
 	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:none;}
-	.st1{fill:#A5A5A5;}
+	.st1{fill:#D7D7D7;}
 </style>
 <rect class="st0" width="20" height="20"/>
 <rect x="2" y="2" class="st1" width="16" height="16"/>
 <path d="M7.6,8h0.9l3.5,8h-1.1L10,14H6l-0.9,2H4L7.6,8z M8,9.1L6.4,13h3.2L8,9.1z"/>
 <path d="M16.6,9.8c-0.2,0.1-0.4,0.1-0.7,0.1c-0.2,0-0.4-0.1-0.6-0.2c-0.1-0.1-0.2-0.4-0.2-0.7c-0.3,0.3-0.6,0.5-0.9,0.7
 	c-0.3,0.1-0.7,0.2-1.1,0.2c-0.3,0-0.5,0-0.7-0.1c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.4-0.1-0.7
-	c0-0.3,0.1-0.6,0.2-0.8c0.1-0.2,0.3-0.4,0.4-0.5C12,7,12.2,6.9,12.4,6.8s0.5-0.1,0.7-0.2c0.3-0.1,0.5-0.1,0.7-0.1
-	c0.2,0,0.4-0.1,0.6-0.1c0.2,0,0.3-0.1,0.4-0.2C15,6.1,15.1,6,15.1,5.8c0-1-1.1-1-1.3-1c-0.4,0-1.4,0-1.4,1.2h-0.9
-	c0-0.4,0.1-0.7,0.2-1c0.1-0.2,0.3-0.4,0.5-0.6c0.2-0.2,0.5-0.3,0.8-0.3C13.2,4,13.5,4,13.8,4c0.3,0,0.5,0,0.8,0.1
-	c0.3,0,0.5,0.1,0.7,0.2c0.2,0.1,0.4,0.3,0.5,0.5C15.9,5,16,5.2,16,5.6v2.9c0,0.2,0,0.4,0,0.5c0,0.1,0.1,0.2,0.3,0.2
-	c0.1,0,0.2,0,0.3,0V9.8z M15.1,6.9C13.9,7.5,12,7.1,12,8.3c0,1.4,3.1,1,3.1-0.5V6.9z"/>
+	c0-0.3,0.1-0.6,0.2-0.8c0.1-0.2,0.3-0.4,0.4-0.5C12,7,12.2,6.9,12.5,6.8s0.5-0.1,0.7-0.2c0.3-0.1,0.5-0.1,0.7-0.1
+	c0.2,0,0.4-0.1,0.6-0.1c0.2,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4c0-1-1.1-1-1.3-1c-0.4,0-1.4,0-1.4,1.2h-0.9
+	c0-0.4,0.1-0.7,0.2-1c0.1-0.2,0.3-0.4,0.5-0.6c0.2-0.2,0.5-0.3,0.8-0.3C13.3,4,13.6,4,13.9,4c0.3,0,0.5,0,0.8,0.1
+	c0.3,0,0.5,0.1,0.7,0.2c0.2,0.1,0.4,0.3,0.5,0.5C16,5,16,5.2,16,5.6v2.9c0,0.2,0,0.4,0,0.5c0,0.1,0.1,0.2,0.3,0.2c0.1,0,0.2,0,0.3,0
+	V9.8z M15.2,6.9C13.9,7.5,12,7.1,12,8.3c0,1.4,3.1,1,3.1-0.5V6.9z"/>
 </svg>

packages/theme-dark-extension/style/icons/jupyter/search_regex.svg

@@ -4,7 +4,7 @@
 	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:none;}
-	.st1{fill:#A5A5A5;}
+	.st1{fill:#D7D7D7;}
 </style>
 <g id="Regex_Icon">
 	<rect class="st0" width="20" height="20"/>
@@ -12,8 +12,8 @@
 	<circle cx="5.5" cy="14.5" r="1.5"/>
 	<g>
 		<rect x="12" y="4" width="1" height="8"/>
-		<rect x="12" y="4" transform="matrix(-0.5 -0.866 0.866 -0.5 11.8218 22.8253)" width="1" height="8"/>
-		<rect x="12" y="4" transform="matrix(-0.5 0.866 -0.866 -0.5 25.6782 1.1747)" width="1" height="8"/>
+		<rect x="8.5" y="7.5" transform="matrix(0.866 -0.5 0.5 0.866 -2.3255 7.3219)" width="8" height="1"/>
+		<rect x="12" y="4" transform="matrix(0.5 -0.866 0.866 0.5 -0.6779 14.8252)" width="1" height="8"/>
 	</g>
 </g>
 </svg>

packages/theme-dark-extension/style/variables.css

@@ -372,8 +372,8 @@ all of MD as it is not optimized for dense, information rich UIs.
 
   /* Search-related styles */
 
-  --jp-search-toggle-off-opacity: 0.5;
-  --jp-search-toggle-hover-opacity: 0.75;
+  --jp-search-toggle-off-opacity: 0.6;
+  --jp-search-toggle-hover-opacity: 0.8;
   --jp-search-toggle-on-opacity: 1;
   --jp-search-selected-match-background-color: rgb(255, 225, 0);
   --jp-search-selected-match-color: black;

packages/theme-light-extension/style/icons/jupyter/search_arrow_down.svg

@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 20" style="enable-background:new 0 0 22 20;" xml:space="preserve">
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:none;}
-	.st1{fill:#A5A5A5;}
+	.st1{fill:#646464;}
 </style>
-<rect class="st0" width="22" height="20"/>
-<polygon class="st1" points="11,13.7 4.6,7.4 5.4,6.6 11,12.3 16.6,6.6 17.4,7.4 "/>
+<rect class="st0" width="20" height="20"/>
+<polygon class="st1" points="9.9,13.6 3.6,7.4 4.4,6.6 9.9,12.2 15.4,6.7 16.1,7.4 "/>
 </svg>

packages/theme-light-extension/style/icons/jupyter/search_arrow_up.svg

@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Up" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 20" style="enable-background:new 0 0 22 20;" xml:space="preserve">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:none;}
-	.st1{fill:#A5A5A5;}
+	.st1{fill:#646464;}
 </style>
-<rect class="st0" width="22" height="20"/>
-<polygon class="st1" points="16.6,13.4 11,7.7 5.4,13.4 4.6,12.6 11,6.3 17.4,12.6 "/>
+<rect class="st0" width="20" height="20"/>
+<polygon class="st1" points="15.4,13.3 9.9,7.7 4.4,13.2 3.6,12.5 9.9,6.3 16.1,12.6 "/>
 </svg>

packages/theme-light-extension/style/icons/jupyter/search_case_sensitive.svg

@@ -4,16 +4,19 @@
 	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:none;}
-	.st1{fill:#A5A5A5;}
+	.st1{fill:#414141;}
+	.st2{fill:#FFFFFF;}
 </style>
-<rect class="st0" width="20" height="20"/>
-<rect x="2" y="2" class="st1" width="16" height="16"/>
-<path d="M7.6,8h0.9l3.5,8h-1.1L10,14H6l-0.9,2H4L7.6,8z M8,9.1L6.4,13h3.2L8,9.1z"/>
-<path d="M16.6,9.8c-0.2,0.1-0.4,0.1-0.7,0.1c-0.2,0-0.4-0.1-0.6-0.2c-0.1-0.1-0.2-0.4-0.2-0.7c-0.3,0.3-0.6,0.5-0.9,0.7
-	c-0.3,0.1-0.7,0.2-1.1,0.2c-0.3,0-0.5,0-0.7-0.1c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.4-0.1-0.7
-	c0-0.3,0.1-0.6,0.2-0.8c0.1-0.2,0.3-0.4,0.4-0.5C12,7,12.2,6.9,12.4,6.8s0.5-0.1,0.7-0.2c0.3-0.1,0.5-0.1,0.7-0.1
-	c0.2,0,0.4-0.1,0.6-0.1c0.2,0,0.3-0.1,0.4-0.2C15,6.1,15.1,6,15.1,5.8c0-1-1.1-1-1.3-1c-0.4,0-1.4,0-1.4,1.2h-0.9
-	c0-0.4,0.1-0.7,0.2-1c0.1-0.2,0.3-0.4,0.5-0.6c0.2-0.2,0.5-0.3,0.8-0.3C13.2,4,13.5,4,13.8,4c0.3,0,0.5,0,0.8,0.1
-	c0.3,0,0.5,0.1,0.7,0.2c0.2,0.1,0.4,0.3,0.5,0.5C15.9,5,16,5.2,16,5.6v2.9c0,0.2,0,0.4,0,0.5c0,0.1,0.1,0.2,0.3,0.2
-	c0.1,0,0.2,0,0.3,0V9.8z M15.1,6.9C13.9,7.5,12,7.1,12,8.3c0,1.4,3.1,1,3.1-0.5V6.9z"/>
+<g>
+	<rect class="st0" width="20" height="20"/>
+	<rect x="2" y="2" class="st1" width="16" height="16"/>
+	<path class="st2" d="M7.6,8h0.9l3.5,8h-1.1L10,14H6l-0.9,2H4L7.6,8z M8,9.1L6.4,13h3.2L8,9.1z"/>
+	<path class="st2" d="M16.6,9.8c-0.2,0.1-0.4,0.1-0.7,0.1c-0.2,0-0.4-0.1-0.6-0.2c-0.1-0.1-0.2-0.4-0.2-0.7
+		c-0.3,0.3-0.6,0.5-0.9,0.7c-0.3,0.1-0.7,0.2-1.1,0.2c-0.3,0-0.5,0-0.7-0.1c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.3-0.3-0.4-0.5
+		c-0.1-0.2-0.1-0.4-0.1-0.7c0-0.3,0.1-0.6,0.2-0.8c0.1-0.2,0.3-0.4,0.4-0.5C12,7,12.2,6.9,12.5,6.8c0.2-0.1,0.5-0.1,0.7-0.2
+		c0.3-0.1,0.5-0.1,0.7-0.1c0.2,0,0.4-0.1,0.6-0.1c0.2,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4c0-1-1.1-1-1.3-1
+		c-0.4,0-1.4,0-1.4,1.2h-0.9c0-0.4,0.1-0.7,0.2-1c0.1-0.2,0.3-0.4,0.5-0.6c0.2-0.2,0.5-0.3,0.8-0.3C13.3,4,13.6,4,13.9,4
+		c0.3,0,0.5,0,0.8,0.1c0.3,0,0.5,0.1,0.7,0.2c0.2,0.1,0.4,0.3,0.5,0.5C16,5,16,5.2,16,5.6v2.9c0,0.2,0,0.4,0,0.5
+		c0,0.1,0.1,0.2,0.3,0.2c0.1,0,0.2,0,0.3,0V9.8z M15.2,6.9c-1.2,0.6-3.1,0.2-3.1,1.4c0,1.4,3.1,1,3.1-0.5V6.9z"/>
+</g>
 </svg>

packages/theme-light-extension/style/icons/jupyter/search_regex.svg

@@ -4,16 +4,17 @@
 	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:none;}
-	.st1{fill:#A5A5A5;}
+	.st1{fill:#414141;}
+	.st2{fill:#FFFFFF;}
 </style>
-<g id="Regex_Icon">
+<g id="Regex_Icon_2_">
 	<rect class="st0" width="20" height="20"/>
 	<rect x="2" y="2" class="st1" width="16" height="16"/>
-	<circle cx="5.5" cy="14.5" r="1.5"/>
+	<circle class="st2" cx="5.5" cy="14.5" r="1.5"/>
 	<g>
-		<rect x="12" y="4" width="1" height="8"/>
-		<rect x="12" y="4" transform="matrix(-0.5 -0.866 0.866 -0.5 11.8218 22.8253)" width="1" height="8"/>
-		<rect x="12" y="4" transform="matrix(-0.5 0.866 -0.866 -0.5 25.6782 1.1747)" width="1" height="8"/>
+		<rect x="12" y="4" class="st2" width="1" height="8"/>
+		<rect x="8.5" y="7.5" transform="matrix(0.866 -0.5 0.5 0.866 -2.3255 7.3219)" class="st2" width="8" height="1"/>
+		<rect x="12" y="4" transform="matrix(0.5 -0.866 0.866 0.5 -0.6779 14.8252)" class="st2" width="1" height="8"/>
 	</g>
 </g>
 </svg>

packages/theme-light-extension/style/variables.css

@@ -369,8 +369,8 @@ all of MD as it is not optimized for dense, information rich UIs.
 
   /* Search-related styles */
 
-  --jp-search-toggle-off-opacity: 0.4;
-  --jp-search-toggle-hover-opacity: 0.65;
+  --jp-search-toggle-off-opacity: 0.5;
+  --jp-search-toggle-hover-opacity: 0.8;
   --jp-search-toggle-on-opacity: 1;
   --jp-search-selected-match-background-color: rgb(245, 200, 0);
   --jp-search-selected-match-color: black;