From fa98306b9a036a187a8aee711643df1cb63cd04e Mon Sep 17 00:00:00 2001
From: Katyayani Singh <katyayani15046@iiitd.ac.in>
Date: Fri, 28 Jul 2017 21:08:47 +0530
Subject: [PATCH] Update Find styling to new design (#401)

* Update Find styling

* Update placeholder text
---
 client/styles/abstracts/_variables.scss |  3 +++
 client/styles/components/_editor.scss   | 15 ++++++++++++---
 client/utils/codemirror-search.js       |  2 +-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 6fc8c9cf..122c9df8 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/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
   )
 );
 
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index 75647316..194264d0 100644
--- a/client/styles/components/_editor.scss
+++ b/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 {
diff --git a/client/utils/codemirror-search.js b/client/utils/codemirror-search.js
index 340bb74a..32c52a63 100644
--- a/client/utils/codemirror-search.js
+++ b/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