[#1519] Minor styling changes

Author: catarak

client/styles/components/_editor.scss

@@ -110,40 +110,47 @@ pre.CodeMirror-line {
   flex-wrap: wrap;
   justify-content: space-between;
 }
+
 .Toggle-replace-btn-div {
   height: 40px;
   padding: 0;
 }
+
 .Toggle-replace-btn-div > button {
   width: 100%;
   height: 100%;
 }
+
 .CodeMirror-find-div {
   padding: 0px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: nowrap;
 }
+
 .CodeMirror-search-modifiers {
   margin-left: 10px;
 }
+
 .CodeMirror-search-results {
   margin: 0px 20px;
   width: 75px;
+  font-size: #{12/$base-font-size}rem;
 }
+
 .CodeMirror-find-controls {
   display: flex;
 }
 
 .CodeMirror-replace-div {
   display: flex;
-  width: 293px;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
 }
 .CodeMirror-replace-controls {
   display: flex;
+  margin-left: #{10 / $base-font-size}rem;
 }
 
 .CodeMirror-replace-options {
@@ -168,6 +175,7 @@ pre.CodeMirror-line {
 .CodeMirror-search-field {
   display: block;
   width: 100%;
+  max-width: #{166/$base-font-size}rem;
   margin-bottom: #{4 / $base-font-size}rem;
   @include themify() {
     color: getThemifyVariable('input-text-color');
@@ -176,6 +184,11 @@ pre.CodeMirror-line {
   }
 }
 
+.CodeMirror-search-nav {
+  display: flex;
+  align-items: center;
+}
+
 .CodeMirror-search-count {
   display: block;
   height: #{20 / $base-font-size}rem;
@@ -187,9 +200,6 @@ pre.CodeMirror-line {
   justify-content: space-between;
 }
 
-/*
-  
-*/
 .CodeMirror-search-modifiers {
   display: flex;
   justify-content: flex-end;
@@ -269,32 +279,12 @@ pre.CodeMirror-line {
   background-image: url(../images/down-arrow.svg?byUrl)
 }
 
-// Replace button
-.CodeMirror-replace-button::after {
-  display: block;
-  content: ' ';
-
-  width: 20px;
-  height: 20px;
-
-  @include icon();
-
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.CodeMirror-replace-button.replace::after {
-  background-image: url(../images/replace.svg?byUrl);
-}
-.CodeMirror-replace-button.replace-all::after {
-  background-image: url(../images/replace-all.svg?byUrl);
-}
-
 /*
   Close button
 */
-.CodeMirror-close-button {
+  .CodeMirror-close-button-container {
   display: flex;
-  flex-direction: row;
+  align-items: center;
 }
 
 // Visually hide button text

client/utils/codemirror-search.js

@@ -534,7 +534,7 @@ export default function(CodeMirror) {
               </button>
             </div>
             <div class="CodeMirror-search-nav">
-              <button class="CodeMirror-search-results">No results</button>
+              <p class="CodeMirror-search-results">No results</p>
               <button
                 title="Previous"
                 aria-label="Previous"
@@ -548,7 +548,7 @@ export default function(CodeMirror) {
               >
               </button>
             </div>
-            <div>
+            <div class="CodeMirror-close-button-container">
               <button
                 title="Close"
                 aria-label="Close"
@@ -558,23 +558,25 @@ export default function(CodeMirror) {
           </div>
         </div>
         <div style="height: 0px; overflow: hidden;" class="CodeMirror-replace-div">
-          <input id="Replace-input-field" type="text" placeholder="Text to replace" class="search-input CodeMirror-search-field"/><div class="close icon"></div>
+          <input id="Replace-input-field" type="text" placeholder="Text to replace" class="search-input CodeMirror-search-field"/>
           <div class="CodeMirror-replace-controls">
             <button
               title="Replace"
               aria-label="Replace"
               role="button"
               id="Btn-replace"
-              class="CodeMirror-search-modifier-button CodeMirror-replace-button icon replace"
+              class="CodeMirror-search-modifier-button CodeMirror-replace-button"
             >
+              Replace
             </button>
             <button
               title="Replace All"
               aria-label="Replace All"
               role="button"
               id="Btn-replace-all"
-              class="CodeMirror-search-modifier-button CodeMirror-replace-button icon replace-all"
+              class="CodeMirror-search-modifier-button CodeMirror-replace-button"
             >
+              Replace All
             </button>
           </div>
         </div>