Update Find styling to new design (#401)

* Update Find styling

* Update placeholder text

client/styles/abstracts/_variables.scss

@@ -44,6 +44,7 @@ $themes: (
     input-text-color: #333,
     input-border-color: #b5b5b5,
     about-list-text-color: #4a4a4a,
+    search-background-color: #ebebeb
   ),
   dark: (
     logo-color: $p5js-pink,
@@ -79,6 +80,7 @@ $themes: (
     input-text-color: #333,
     input-border-color: #b5b5b5,
     about-list-text-color: #f4f4f4,
+    search-background-color: #ebebeb
   ),
   contrast: (
     logo-color: $yellow,
@@ -113,6 +115,7 @@ $themes: (
     input-text-color: #333,
     input-border-color: #b5b5b5,
     about-list-text-color: #f4f4f4,
+    search-background-color: $white
   )
 );
 

client/styles/components/_editor.scss

@@ -85,13 +85,15 @@
 */
 
 .CodeMirror-dialog {
-  position: absolute;
+  position: fixed;
   top: 0;
-  right: 0;
+  left: 50%;
+  margin-left: - #{365/2/$base-font-size}rem;
 
   z-index: 10;
 
-  min-width: 365px;
+  width: 100%;
+  max-width: #{365 / $base-font-size}rem;
 
   font-family: Montserrat, sans-serif;
 
@@ -118,6 +120,13 @@
   display: block;
   width: 100%;
   margin-bottom: #{12 / $base-font-size}rem;
+  @include themify() {
+    background-color: getThemifyVariable('search-background-color');
+    border: solid 0.5px getThemifyVariable('button-border-color');
+  }
+  &:focus {
+    background-color: $white;
+  }
 }
 
 .CodeMirror-search-count {

client/utils/codemirror-search.js

@@ -223,7 +223,7 @@ export default function(CodeMirror) {
 
   var queryDialog = `
     <h3 class="CodeMirror-search-title">Find</h3>
-    <input type="text" class="search-input CodeMirror-search-field" placeholder="Search for" />
+    <input type="text" class="search-input CodeMirror-search-field" placeholder="Find in files" />
     <div class="CodeMirror-search-actions">
       <div class="CodeMirror-search-modifiers button-wrap">
         <button