[#1519] Updating icons for search with theming

Author: catarak

client/styles/abstracts/_placeholders.scss

@@ -173,9 +173,15 @@
 		text-decoration: none;
 		color: getThemifyVariable('inactive-text-color');
 		cursor: pointer;
+		& g, & path {
+			fill: getThemifyVariable('inactive-text-color');
+		}
 		&:hover {
 			text-decoration: none;
 			color: getThemifyVariable('heavy-text-color');
+			& g, & path {
+				fill: getThemifyVariable('heavy-text-color');
+			}
 		}
 	}
 }

client/styles/components/_editor.scss

@@ -181,6 +181,9 @@ pre.CodeMirror-line {
     color: getThemifyVariable('input-text-color');
     background-color: getThemifyVariable('input-secondary-background-color');
     border: solid 0.5px getThemifyVariable('button-border-color');
+    &::placeholder {
+      color: getThemifyVariable('inactive-text-color');
+    }
   }
 }
 
@@ -256,29 +259,6 @@ pre.CodeMirror-line {
   margin-right: #{10 / $base-font-size}rem;
 }
 
-.CodeMirror-search-button::after {
-  display: block;
-  content: ' ';
-
-  width: 14px;
-  height: 14px;
-
-  @include icon();
-
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-// Previous button
-.CodeMirror-search-button.prev::after {
-  background-image: url(../images/up-arrow.svg?byUrl)
-}
-
-// Next button
-.CodeMirror-search-button.next::after {
-  background-image: url(../images/down-arrow.svg?byUrl)
-}
-
 .CodeMirror-search-match {
   background: gold;
   border-top: 1px solid orange;
@@ -295,25 +275,6 @@ pre.CodeMirror-line {
   align-items: center;
 }
 
-// Visually hide button text
-.CodeMirror-close-button .label {
-  @extend %hidden-element;
-}
-
-.CodeMirror-close-button:after {
-  display: block;
-  content: ' ';
-
-  width: 16px;
-  height: 16px;
-
-  margin-left: #{8 / $base-font-size}rem;
-
-  @include icon();
-
-  background: transparent url(../images/exit.svg?byUrl) no-repeat;
-}
-
 // foldgutter
 .CodeMirror-foldmarker {
   text-shadow: -1px 0 #ed225d, 0 1px #ed225d, 1px 0 #ed225d, 0 -1px #ed225d;

client/utils/codemirror-search.js

@@ -11,6 +11,11 @@
 // Ctrl-G.
 import i18n from '../i18n';
 import CodeMirror from 'codemirror';
+import triangleArrowRight from '../images/triangle-arrow-right.svg?byContent';
+import triangleArrowDown from '../images/triangle-arrow-down.svg?byContent';
+import downArrow from '../images/down-arrow.svg?byContent';
+import upArrow from '../images/up-arrow.svg?byContent';
+import exitIcon from '../images/exit.svg?byContent';
 
 function searchOverlay(query, caseInsensitive) {
   if (typeof query == 'string') query = new RegExp(query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'), caseInsensitive ? 'gi' : 'g');
@@ -156,12 +161,12 @@ function persistentDialog(cm, text, deflt, onEnter, replaceOpened, onKeyDown) {
         replaceDiv.style.height = replaceDivHeightOpened;
         toggleReplaceBtnDiv.style.height = toggleButtonHeightOpened;
         showReplaceButton.style.height = toggleButtonHeightOpened;
-        showReplaceButton.innerHTML = "▼";
+        showReplaceButton.innerHTML = triangleArrowDown;
       } else {
         replaceDiv.style.height = replaceDivHeightClosed;
         toggleReplaceBtnDiv.style.height = toggleButtonHeightClosed;
         showReplaceButton.style.height = toggleButtonHeightClosed;
-        showReplaceButton.innerHTML = "►";
+        showReplaceButton.innerHTML = triangleArrowRight;
       }
     }
 
@@ -493,7 +498,9 @@ var getQueryDialog = function() {
           role="button"
           class="CodeMirror-search-modifier-button CodeMirror-replace-toggle-button"
         >
-          <span aria-hidden="true" class="button">▶</span>
+          <span aria-hidden="true" class="button">
+            ${triangleArrowRight}
+          </span>
         </button>
       </div>
       <div class="CodeMirror-find-input-fields">
@@ -535,19 +542,29 @@ var getQueryDialog = function() {
                 aria-label="${i18n.t('CodemirrorFindAndReplace.Previous')}"
                 class="CodeMirror-search-button icon up-arrow prev"
               >
+                <span aria-hidden="true">
+                  ${upArrow}
+                </span>
               </button>
               <button
                 title="${i18n.t('CodemirrorFindAndReplace.Next')}"
                 aria-label="${i18n.t('CodemirrorFindAndReplace.Next')}"
                 class="CodeMirror-search-button icon down-arrow next"
               >
+                <span aria-hidden="true">
+                  ${downArrow}
+                </span>
               </button>
             </div>
             <div class="CodeMirror-close-button-container">
               <button
                 title="${i18n.t('CodemirrorFindAndReplace.Close')}"
                 aria-label="${i18n.t('CodemirrorFindAndReplace.Close')}"
-                class="CodeMirror-close-button close icon">
+                class="CodeMirror-close-button close icon"
+              >
+                <span aria-hidden="true">
+                  ${exitIcon}
+                </span>
               </button>
             </div>
           </div>

package-lock.json

@@ -196,6 +196,7 @@
     "prop-types": "^15.6.2",
     "q": "^1.4.1",
     "query-string": "^6.13.2",
+    "raw-loader": "^4.0.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^5.1.3",

package.json

@@ -96,6 +96,10 @@ module.exports = {
       {
         test: /\.svg$/,
         oneOf: [
+          {
+            resourceQuery: /byContent/,
+            use: 'raw-loader'
+          },
           {
             resourceQuery: /byUrl/,
             use: 'file-loader'

webpack/config.dev.js

@@ -102,6 +102,10 @@ module.exports = [{
       {
         test: /\.svg$/,
         oneOf: [
+          {
+            resourceQuery: /byContent/,
+            use: 'raw-loader'
+          },
           {
             resourceQuery: /byUrl/,
             use: 'file-loader'