From d768df040b9ce916b9d29655f67b21553676b113 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Tue, 28 Apr 2020 17:31:27 -0400
Subject: [PATCH] Adjust styling of find setting switches, update button
 styling for new file and new folder form

---
 client/images/down-arrow.svg                  |  4 +--
 client/images/up-arrow.svg                    |  4 +--
 client/modules/IDE/components/NewFileForm.jsx |  7 ++++-
 .../modules/IDE/components/NewFolderForm.jsx  |  7 ++++-
 client/styles/abstracts/_variables.scss       | 15 ++++++-----
 client/styles/components/_editor.scss         | 26 +++++++++++++------
 client/styles/components/_modal.scss          |  7 +++++
 7 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/client/images/down-arrow.svg b/client/images/down-arrow.svg
index f6eb1e87..a1dc41d5 100644
--- a/client/images/down-arrow.svg
+++ b/client/images/down-arrow.svg
@@ -3,8 +3,8 @@
     <!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
     <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
-    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
-        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-425.000000, -1168.000000)" fill="#333333">
+    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1.0">
+        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-425.000000, -1168.000000)" fill="#AAA">
             <g id="Icons" transform="translate(16.000000, 1063.000000)">
                 <polygon id="arrow-shape-copy-2" transform="translate(416.000000, 109.198314) rotate(-180.000000) translate(-416.000000, -109.198314) " points="417.4 106.396628 423 111.996628 421.6 113.396628 416 107.796628 410.4 113.396628 409 111.996628 414.6 106.396628 415.996628 105"></polygon>
             </g>
diff --git a/client/images/up-arrow.svg b/client/images/up-arrow.svg
index a5a3fb18..c4a90f1d 100644
--- a/client/images/up-arrow.svg
+++ b/client/images/up-arrow.svg
@@ -3,8 +3,8 @@
     <!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
     <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
-    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
-        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-394.000000, -1168.000000)" fill="#333333">
+    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1">
+        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-394.000000, -1168.000000)" fill="#AAA">
             <g id="Icons" transform="translate(16.000000, 1063.000000)">
                 <polygon id="arrow-shape-copy" points="386.4 106.396628 392 111.996628 390.6 113.396628 385 107.796628 379.4 113.396628 378 111.996628 383.6 106.396628 384.996628 105"></polygon>
             </g>
diff --git a/client/modules/IDE/components/NewFileForm.jsx b/client/modules/IDE/components/NewFileForm.jsx
index 1ff8bff4..aa173a50 100644
--- a/client/modules/IDE/components/NewFileForm.jsx
+++ b/client/modules/IDE/components/NewFileForm.jsx
@@ -33,7 +33,12 @@ class NewFileForm extends React.Component {
             {...domOnlyProps(name)}
             ref={(element) => { this.fileName = element; }}
           />
-          <input type="submit" value="Add File" aria-label="add file" />
+          <input
+            type="submit"
+            value="Add File"
+            aria-label="add file"
+            className="new-file-form__submit"
+          />
         </div>
         {name.touched && name.error && <span className="form-error">{name.error}</span>}
       </form>
diff --git a/client/modules/IDE/components/NewFolderForm.jsx b/client/modules/IDE/components/NewFolderForm.jsx
index 70750394..765ebd06 100644
--- a/client/modules/IDE/components/NewFolderForm.jsx
+++ b/client/modules/IDE/components/NewFolderForm.jsx
@@ -34,7 +34,12 @@ class NewFolderForm extends React.Component {
             ref={(element) => { this.fileName = element; }}
             {...domOnlyProps(name)}
           />
-          <input type="submit" value="Add Folder" aria-label="add folder" />
+          <input
+            type="submit"
+            value="Add Folder"
+            aria-label="add folder"
+            className="new-folder-form__submit"
+          />
         </div>
         {name.touched && name.error && <span className="form-error">{name.error}</span>}
       </form>
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index da4e8f18..3cc94503 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -46,6 +46,7 @@ $themes: (
     modal-button-color: $dark,
     background-color: $lighter,
     button-background-color: $light,
+    button-secondary-background-color: $medium-light,
     button-color: $black,
     button-border-color: $middle-light,
     toolbar-button-color: $p5js-pink,
@@ -119,9 +120,10 @@ $themes: (
     secondary-text-color: $medium-light,
     inactive-text-color: $middle-light,
     background-color: $darker,
-    button-background-color: $lightest,
-    button-color: $darkest,
-    button-border-color: $middle-gray,
+    button-background-color: $dark,
+    button-secondary-background-color: $medium-dark,
+    button-color: $light,
+    button-border-color: $middle-dark,
     toolbar-button-color: $p5js-pink,
     toolbar-button-background-color: $medium-dark,
     button-background-hover-color: $p5js-pink,
@@ -191,9 +193,10 @@ $themes: (
     secondary-text-color: $lighter,
     inactive-text-color: $light,
     background-color: $darker,
-    button-background-color: $white,
-    button-color: $black,
-    button-border-color: $middle-gray,
+    button-background-color: $dark,
+    button-secondary-background-color: $medium-dark,
+    button-color: $light,
+    button-border-color: $middle-dark,
     toolbar-button-color: $dark,
     toolbar-button-background-color: $medium-light,
     button-background-hover-color: $yellow,
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index b9ec8bee..8042f929 100644
--- a/client/styles/components/_editor.scss
+++ b/client/styles/components/_editor.scss
@@ -143,22 +143,30 @@ pre.CodeMirror-line {
 .CodeMirror-search-modifiers {
   display: flex;
   justify-content: flex-end;
+  align-items: center;
 }
 
 .CodeMirror-regexp-button,
 .CodeMirror-case-button,
 .CodeMirror-word-button {
-  width: 20px;
-  height: 20px;
+  @include themify() {
+    // @extend %button;
+    padding: #{2 / $base-font-size}rem #{7 / $base-font-size}rem;
+    border: 2px solid transparent;
+    &:hover {
+      border-color: getThemifyVariable("button-border-color");
+    }
 
-  margin-left: #{10 / $base-font-size}rem;
+  }
+  width: #{35 / $base-font-size}rem;
+  height: #{35 / $base-font-size}rem;
+
+  & + & {
+    margin-left: #{10 / $base-font-size}rem;
+  }
 
   word-break: keep-all;
   white-space: nowrap;
-
-  @include themify() {
-    color: getThemifyVariable('inactive-text-color');
-  }
 }
 
 .CodeMirror-regexp-button .label,
@@ -169,7 +177,9 @@ pre.CodeMirror-line {
 
 [aria-checked="true"] {
   @include themify() {
-    color: getThemifyVariable('primary-text-color');
+    color: getThemifyVariable("heavy-text-color");
+    background-color: getThemifyVariable("button-secondary-background-color");
+    border-color: getThemifyVariable("button-border-color");
   }
 }
 
diff --git a/client/styles/components/_modal.scss b/client/styles/components/_modal.scss
index 752b4434..e59ef299 100644
--- a/client/styles/components/_modal.scss
+++ b/client/styles/components/_modal.scss
@@ -45,6 +45,13 @@
   flex: 1;
 }
 
+input.new-file-form__submit,
+input.new-folder-form__submit {
+  @include themify() {
+    background-color: getThemifyVariable("button-secondary-background-color");
+  }
+}
+
 .modal__divider {
   text-align: center;
   margin: #{20 / $base-font-size}rem 0;